/* ══════════════════════════════════════════
   LP Hot Tubs (B - Redesign) — Wellness Shop
   Brand skin: DM Sans + brand blue (#0170B9)
   Remapped from Ty's mockup (cyan/yellow/Playfair/Montserrat)
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   BRAND TOKENS
   ══════════════════════════════════════════ */
:root {
  --brand:     #0170B9;   /* brand blue — primary/accent (was cyan #00B1CD) */
  --brand-d:   #015a94;   /* brand blue dark hover (was cyan-d #0099b0) */
  --brand-xl:  #e8f3fa;   /* brand tint (was cyan-xl #e6f8fb) */
  --cyan:      #0170B9;   /* alias — value remapped to brand blue */
  --cyan-d:    #015a94;   /* alias — value remapped to brand-d */
  --cyan-xl:   #e8f3fa;   /* alias — value remapped to brand tint */
  --teal:      #000000;
  --teal-d:    #0d0d0d;
  --yellow:    #0170B9;   /* CTA color — kept var name, value remapped to brand blue */
  --yellow-d:  #015a94;   /* CTA hover — remapped to brand-d */
  --black:     #000000;
  --near-blk:  #0d0d0d;
  --grey-7:    #97999B;
  --grey-2:    #D0D0CE;
  --white:     #ffffff;
  --off-white: #F5F5F5;
  --lt-teal:   #F5F5F5;   /* light section bg — remapped to client light grey */
  --border:    #E5E5E5;
  --text:      #3A3A3A;
  --text-mid:  #4B4F58;
  --text-lt:   #6c6c6c;
  --brand-lite:#3a9fe0;   /* lighter brand blue for small text on dark backgrounds (contrast) */
  --green:     #27ae60;
  --red:       #c0392b;
}

/* ══════════════════════════════════════════
   BASE
   ══════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans', sans-serif; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
.wrap { max-width:1200px; margin:0 auto; padding:0 44px; }

/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */
.eyebrow { display:block; font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--brand); margin-bottom:14px; }
.eyebrow-wh { color:rgba(255,255,255,.9); }
.eyebrow-yl { color:var(--brand); }

/* ══════════════════════════════════════════
   BUTTONS — rounded pill, never boxy
   ══════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'DM Sans', sans-serif; font-size:13px; font-weight:700; letter-spacing:.5px; padding:16px 32px; cursor:pointer; border:none; border-radius:50px; transition:all .22s ease; white-space:nowrap; line-height:1; text-decoration:none; }
.btn-yl { background:var(--yellow); color:var(--white); box-shadow:0 4px 18px rgba(1,112,185,.45); }
.btn-yl:hover { background:var(--yellow-d); box-shadow:0 6px 24px rgba(1,112,185,.5); transform:translateY(-1px); }
.btn-cy { background:var(--brand); color:var(--white); box-shadow:0 4px 16px rgba(1,112,185,.35); }
.btn-cy:hover { background:var(--brand-d); box-shadow:0 6px 22px rgba(1,112,185,.45); transform:translateY(-1px); }
.btn-tl { background:var(--black); color:var(--white); }
.btn-tl:hover { background:#222; transform:translateY(-1px); }
/* RES-R2: outline secondary (matches LP-A mobile bar) — clearer primary/secondary hierarchy */
.btn-out-bk { background:transparent; border:2px solid var(--black); color:var(--black); }
.btn-out-bk:hover { background:var(--black); color:var(--white); }
.btn-bk { background:var(--black); color:var(--white); }
.btn-bk:hover { background:#222; transform:translateY(-1px); }
.btn-ow { background:transparent; border:2px solid rgba(255,255,255,.8); color:var(--white); }
.btn-ow:hover { background:var(--white); color:var(--black); }
.btn-oc { background:transparent; border:2px solid var(--brand); color:var(--brand); }
.btn-oc:hover { background:var(--brand); color:var(--white); }
.btn-ot { background:transparent; border:2px solid var(--black); color:var(--black); }
.btn-ot:hover { background:var(--black); color:var(--white); }
.btn-lg { padding:18px 40px; font-size:14px; }
.btn-sm { padding:12px 24px; font-size:12px; }

/* ══════════════════════════════════════════
   NAV
   ══════════════════════════════════════════ */
/* Nav ported from /lp/hot-tubs (LP-HotTubs-A) — clean white, always visible */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:#fff;
  border-bottom:1px solid var(--border); height:72px; padding:0 44px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 1px 20px rgba(0,0,0,.06);
}
/* Offset fixed nav below the WP admin bar when logged in */
body.admin-bar nav { top: 32px; }
@media screen and (max-width: 782px){ body.admin-bar nav { top: 46px; } }
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:34px; width:auto; filter:brightness(0); }
.nav-right { display:flex; align-items:center; gap:28px; }
.nav-phone { font-size:14px; font-weight:700; color:var(--text); line-height:1; }
.nav-phone small { display:block; font-size:9px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:var(--text-lt); margin-bottom:2px; }
/* Nav CTA responsive label: full text on desktop, short text on narrow nav */
.nav-cta-short { display:none; }
/* CTA itself is styled by the global .btn .btn-yl pill */

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hero { position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; background:var(--teal-d); margin-top:72px; }
.hero-bg { position:absolute; inset:0; background-image:url('https://www.wellnessshop.ca/wp-content/uploads/lp-optimized/hero-bright-1600.webp'); background-size:cover; background-position:center 40%; background-color:#000000; }
/* nOKG1f: hero overlay lightened ~30% so the background photo reads clearly,
   keeping a left/bottom-anchored gradient for headline legibility */
.hero-bg::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(0,40,70,.55) 0%, rgba(0,34,58,.36) 45%, rgba(1,112,185,.05) 100%); }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.08) 100%); }
.hero-inner { position:relative; z-index:2; width:100%; display:grid; grid-template-columns:1fr 460px; gap:56px; align-items:stretch; max-width:1200px; margin:0 auto; padding:72px 44px 72px; }
.hero-copy { display:flex; flex-direction:column; padding-bottom:8px; max-width:100%; min-width:0; overflow-wrap:break-word; }
.hero-inner > #book { align-self:start; }
.hero-right { display:flex; flex-direction:column; min-width:0; }
.hero-trust { margin-top:auto; padding-top:24px; border-top:1px solid rgba(255,255,255,.15); }
.hero-badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.badge-yl { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1.5px solid var(--brand); color:var(--brand); font-size:11px; font-weight:700; padding:6px 14px; border-radius:50px; letter-spacing:.5px; }
.badge-gl { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); color:var(--white); font-size:12px; font-weight:700; padding:8px 16px; border-radius:50px; }
.hero-flag { display:inline-flex; align-items:center; gap:8px; background:rgba(1,112,185,.15); border:1px solid rgba(1,112,185,.35); padding:7px 14px; border-radius:50px; margin-bottom:22px; }
.hero-flag-dot { width:7px; height:7px; background:var(--brand); border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px rgba(1,112,185,.2); }
.hero-flag-text { font-size:11px; font-weight:600; color:rgba(255,255,255,.9); }
.hero h1 { font-family:'DM Sans', sans-serif; font-size:clamp(26px,3vw,38px); font-weight:700; color:var(--white); line-height:1.12; letter-spacing:-.01em; margin-bottom:10px; text-shadow:0 2px 20px rgba(0,0,0,.5); max-width:20ch; }
@media(min-width:1101px){ .hero h1 { max-width:24ch; } }
.hero h1 .h1-sub { color:var(--brand); display:block; font-size:.8em; margin-top:6px; }
.hero-proof-inline { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.hpi-stars { color:#f4b400; font-size:14px; letter-spacing:1px; }
.hpi-text { font-size:13px; color:rgba(255,255,255,.75); font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.hpi-text strong { color:#fff; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; max-width:520px; margin-bottom:16px; font-family:'DM Sans', sans-serif; font-size:12px; font-weight:700; letter-spacing:.6px; line-height:1.5; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.he-dot { width:9px; height:9px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 4px rgba(61,220,132,.25); flex-shrink:0; }
.hero-sub { font-size:16px; color:rgba(255,255,255,.85); line-height:1.7; margin-bottom:10px; max-width:500px; font-weight:400; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.hero-biweekly { font-size:15px; color:var(--brand); font-weight:700; margin-bottom:30px; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats { display:flex; flex-wrap:nowrap; gap:0; }
.hs { flex:1 1 0; min-width:0; padding:0 14px; border-right:1px solid rgba(255,255,255,.15); }
.hs:first-child { padding-left:0; }
.hs:last-child { border-right:none; padding-right:0; }
.hs-num { font-family:'DM Sans', sans-serif; font-size:20px; font-weight:700; color:#fff; line-height:1; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.hs-label { font-size:9px; font-weight:500; color:rgba(255,255,255,.7); letter-spacing:.5px; text-transform:uppercase; margin-top:5px; text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* HERO FORM CARD (FluentForm host) */
.hero-form { background:var(--white); border-radius:16px; box-shadow:0 32px 80px rgba(0,0,0,.4); overflow:hidden; }
.hf-top { background:var(--teal); padding:18px 28px; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:14px; }
.hf-top-label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.7); min-width:0; }
.hf-top-credit { font-family:'DM Sans', sans-serif; font-size:26px; font-weight:700; color:var(--brand); white-space:nowrap; flex-shrink:0; }
.hf-body { padding:24px 28px 24px; }
.hf-title { font-size:17px; font-weight:800; color:var(--text); margin-bottom:3px; }
.hf-sub { font-size:11px; color:var(--text-mid); margin-bottom:18px; font-weight:500; }
.form-proof { display:flex; align-items:center; gap:10px; padding:14px 28px 16px; border-top:1px solid var(--border); }
.fp-stars { color:#f4b400; font-size:12px; letter-spacing:1px; }
.fp-text { font-size:10px; color:var(--text-lt); }
.fp-text strong { color:var(--text); }
.guarantee-row { display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 0 2px; margin-top:10px; }
.gr-icon { color:var(--brand); font-size:16px; flex-shrink:0; font-weight:700; }
.gr-text { font-size:10px; font-weight:600; color:var(--text-mid); letter-spacing:.2px; }
.trust-anchors { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; padding:10px 0; border-top:1px solid var(--border); margin-top:12px; }
.ta-pill { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--text-lt); }
.ta-pill::before { content:''; width:6px; height:6px; background:#27ae60; border-radius:50%; flex-shrink:0; }

/* ── FluentForm restyle to match brand (form-card) ── */
.form-card .ff-default .ff-el-form-control {
  width:100%; padding:13px 14px; border:1.5px solid var(--border);
  font-family:'DM Sans', sans-serif; font-size:14px; color:var(--text);
  background:var(--white); border-radius:8px; -webkit-appearance:none; transition:border-color .2s;
}
.form-card .ff-default .ff-el-form-control:focus { outline:none; border-color:var(--brand); }
/* Custom caret on FluentForm selects (replaces native arrow) */
.form-card .ff-default select.ff-el-form-control {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c6c6c' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
/* Tighter rows + label sits close to its field (was big inherited line-height + 20px row gap) */
.form-card .ff-default .ff-el-group { margin-bottom:13px; }
.form-card .ff-default .ff-el-input--label { margin-bottom:2px; line-height:1.25; }
.form-card .ff-default .ff-el-input--label label,
.form-card .ff-default label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-lt); margin-bottom:2px; line-height:1.25; }
.form-card button.ff-btn-submit {
  display:block; width:100%; padding:16px; background:var(--brand); border:none; cursor:pointer;
  font-family:'DM Sans', sans-serif; font-size:13px; font-weight:700; letter-spacing:.5px;
  color:var(--white); margin-top:8px; border-radius:50px; transition:background .2s;
}
/* Keep label text white on hover/focus (FluentForm's custom CSS flips it dark otherwise) */
.form-card button.ff-btn-submit:hover,
.form-card button.ff-btn-submit:focus { background:var(--brand-d); color:var(--white) !important; }

/* ══════════════════════════════════════════
   OFFERS STRIP — all white text
   ══════════════════════════════════════════ */
.offers-strip { background:var(--brand); padding:32px 0; }
.offers-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:1200px; margin:0 auto; padding:0 44px; }
/* Two-item layout (B4): centered, not stretched across full width */
.offers-inner-2 { grid-template-columns:repeat(2,max-content); justify-content:center; gap:0; }
.offers-inner-2 .offer-item { padding:0 56px; }
.offer-item { text-align:center; padding:0 20px; border-right:2px solid rgba(255,255,255,.25); }
.offer-item:last-child { border-right:none; }
/* Staggered fade-up on scroll into view (toggled by IntersectionObserver) */
.offer-item { opacity:0; transform:translateY(18px); transition:opacity .5s ease-out, transform .5s ease-out; }
.offer-item.in-view { opacity:1; transform:none; }
.offer-item:nth-child(2){transition-delay:.08s}.offer-item:nth-child(3){transition-delay:.16s}.offer-item:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion: reduce){ .offer-item{opacity:1!important;transform:none!important;transition:none} }
.offer-big { font-family:'DM Sans', sans-serif; font-size:38px; font-weight:700; color:var(--white); line-height:1; }
.offer-label { font-size:13px; font-weight:800; color:var(--white); margin-top:4px; letter-spacing:.3px; }
.offer-sub { font-size:11px; color:rgba(255,255,255,.92); margin-top:3px; }

/* ══════════════════════════════════════════
   CREDIT STRIP
   ══════════════════════════════════════════ */
.credit-strip { background:var(--black); padding:48px 0; border-top:1px solid rgba(255,255,255,.08); }
.csi { max-width:1200px; margin:0 auto; padding:0 44px; display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }
.cs-intro { align-self:start; }
.cs-cta-btn { margin-top:24px; font-size:13px; padding:16px 28px; text-align:center; }
.cs-label { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:10px; display:block; }
.cs-title { font-family:'DM Sans', sans-serif; font-size:30px; font-weight:700; color:var(--white); line-height:1.2; }
.cs-sub { font-size:13px; color:rgba(255,255,255,.65); margin-top:8px; line-height:1.55; }
/* B6: vertically stacked steps */
.cs-steps { display:flex; flex-direction:column; gap:28px; }
.cs-step { display:flex; align-items:flex-start; gap:20px; padding:0; }
.cs-step-body { flex:1; padding-top:4px; }
.cs-num { width:44px; height:44px; flex-shrink:0; border:2px solid var(--brand); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'DM Sans', sans-serif; font-size:18px; font-weight:700; color:var(--white); margin-bottom:0; }
.cs-step-title { font-size:15px; font-weight:700; color:var(--white); margin-bottom:6px; }
.cs-step-desc { font-size:12px; color:rgba(255,255,255,.88); line-height:1.6; }

/* ══════════════════════════════════════════
   TRUST BAR
   ══════════════════════════════════════════ */
.trust-bar { background:var(--near-blk); }
.trust-cells { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-cell { padding:24px 20px; border-right:1px solid rgba(255,255,255,.07); border-top:2px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0; transition:border-color .2s; }
.trust-cell:hover { border-top-color:var(--brand); }
.trust-cell:last-child { border-right:none; }
.tc-dot { display:none; }
.tc-title { font-size:14px; font-weight:700; color:var(--white); line-height:1.3; margin-bottom:4px; }
.tc-sub { font-size:11px; color:rgba(255,255,255,.5); line-height:1.4; }

/* ══════════════════════════════════════════
   WHY IN-STORE
   ══════════════════════════════════════════ */
/* B9: contained two-column layout — text left, comparison chart right */
.why { background:var(--off-white); padding:80px 0; }
.why-content { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.why-text { display:flex; flex-direction:column; }
.why-visual { display:flex; flex-direction:column; justify-content:center; }
.why-photo { position:relative; overflow:hidden; border-radius:16px; margin-bottom:28px; background:var(--grey-2); aspect-ratio:16/10; }
.why-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.why-content h2 { font-family:'DM Sans', sans-serif; font-size:clamp(30px,3.2vw,44px); font-weight:700; color:var(--text); line-height:1.18; margin-bottom:16px; text-wrap:balance; }
.why-content h2 em { font-style:normal; color:var(--brand); }
.why-lead { font-size:15px; color:var(--text-mid); line-height:1.8; margin-bottom:28px; font-weight:400; }
.why-text .btn { align-self:flex-start; }

/* VS TABLE — checkmarks and X */
.vs-table { border:1.5px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:0; }
.why-text .vs-table { margin-bottom:32px; }
.vs-row { display:grid; grid-template-columns:1fr 1fr; }
.vs-row + .vs-row { border-top:1px solid var(--border); }
.vs-head { padding:10px 16px; font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; border-right:1px solid var(--border); }
.vs-head:last-child { border-right:none; }
.vs-head.bad { background:#f5f5f5; color:#aaa; }
.vs-head.good { background:var(--black); color:#ffffff; }
.vs-cell { padding:12px 16px; font-size:13px; line-height:1.4; border-right:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.vs-cell:last-child { border-right:none; }
.vs-cell.bad { background:#fafafa; color:var(--text-lt); }
.vs-cell.good { color:var(--text); font-weight:500; }
.vs-icon-x { font-size:15px; font-weight:700; color:var(--red); flex-shrink:0; }
.vs-icon-c { font-size:15px; font-weight:700; color:var(--green); flex-shrink:0; }

/* ══════════════════════════════════════════
   RITUAL CARDS
   ══════════════════════════════════════════ */
.rituals { background:var(--near-blk); padding:80px 0; }
.rituals-head { text-align:center; margin-bottom:48px; }
.rituals-head h2 { font-family:'DM Sans', sans-serif; font-size:clamp(34px,4vw,48px); font-weight:700; color:var(--white); margin-bottom:12px; line-height:1.1; }
.rituals-head p { font-size:15px; color:rgba(255,255,255,.55); max-width:480px; margin:0 auto; font-weight:300; line-height:1.7; }
.ritual-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:44px; padding:0 44px; max-width:1200px; margin-left:auto; margin-right:auto; }
.ritual-card { position:relative; overflow:hidden; height:440px; cursor:pointer; border-radius:16px; }
.ritual-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s ease; }
.ritual-card:hover .ritual-bg { transform:scale(1.05); }
.ritual-overlay {
  position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.75) 35%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,.1) 100%
  );
}
.ritual-body { position:absolute; bottom:0; left:0; right:0; padding:32px 28px; transform:translateY(4px); transition:transform .3s; }
.ritual-card:hover .ritual-body { transform:translateY(0); }
.ritual-num { font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#ffffff; margin-bottom:8px; display:block; text-shadow:0 1px 4px rgba(0,0,0,.8); }
.ritual-name { font-family:'DM Sans', sans-serif; font-size:34px; font-weight:700; color:var(--white); line-height:1.1; margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,.9); }
.ritual-desc { font-size:14px; color:rgba(255,255,255,.9); line-height:1.6; margin-bottom:18px; text-shadow:0 1px 6px rgba(0,0,0,.8); font-weight:500; text-wrap:balance; }
.ritual-link { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--brand-lite); text-shadow:0 1px 4px rgba(0,0,0,.8); }
.rituals-cta { text-align:center; }

/* ══════════════════════════════════════════
   PRODUCTS
   ══════════════════════════════════════════ */
.products { background:var(--lt-teal); padding:80px 0; }
.sec-head { text-align:center; margin-bottom:48px; }
.sec-head h2 { font-family:'DM Sans', sans-serif; font-size:clamp(34px,4vw,48px); font-weight:700; color:var(--text); margin-bottom:12px; }
.sec-head p { font-size:14px; color:var(--text-lt); max-width:460px; margin:0 auto; line-height:1.7; }
.product-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:32px; }
.pc { position:relative; background:var(--white); border:1px solid var(--border); border-radius:16px; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s, border-color .2s; overflow:hidden; }
.pc-badge { position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; background:#127a3e; color:#fff; font-family:'DM Sans', sans-serif; font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:5px 10px; border-radius:50px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.pc:hover { border-color:var(--brand); }
.pc:hover { box-shadow:0 12px 40px rgba(1,112,185,.15); transform:translateY(-3px); }
/* All product images render the same way — contain + bottom-aligned on a white
   wrap so every tub shares one baseline (the Cove is a white-bg studio photo, so
   white blends seamlessly and no longer needs the is-cover full-bleed override). */
.pc-img-wrap { aspect-ratio:1; background:var(--white); overflow:hidden; display:flex; align-items:flex-end; justify-content:center; }
/* Each source image bakes in a different amount of empty space below the tub, so
   bottom-aligning the image box alone leaves the actual tubs on different lines.
   --tub-nudge (per-card, set inline) pushes each image down by a % of the wrap so
   every tub bottom lands on one baseline; the overflow:hidden wrap clips the slack. */
.pc-img-wrap img { width:100%; height:100%; object-fit:contain; object-position:center bottom; padding:18px 16px 0; transform:translateY(var(--tub-nudge,0)); transform-origin:center bottom; }
/* The Cove is a wide studio photo with generous margins, so plain contain renders
   it smaller than the tight cutouts. Scale it up (bottom-anchored, clipped by the
   wrap's overflow:hidden) so its tub matches the other cards' size and baseline. */
.pc-img-wrap img.is-studio { transform:translateY(var(--tub-nudge,0)) scale(1.4); }
.pc-body { padding:16px 16px 18px; flex:1; display:flex; flex-direction:column; }
.pc-brand { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
.pc-name { font-family:'DM Sans', sans-serif; font-size:18px; font-weight:600; color:var(--text); margin-bottom:8px; line-height:1.2; }
/* Get Pricing link sits at the very bottom of the card (below the features) */
.pc-bw { font-size:12px; font-weight:800; color:var(--teal); margin-top:auto; padding-top:14px; }
.pc-features { list-style:none; }
.pc-features li { font-size:11px; color:var(--text-lt); padding:4px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; }
.pc-features li::before { content:''; width:4px; height:4px; background:var(--brand); border-radius:50%; flex-shrink:0; }
.pc-btn { display:block; text-align:center; padding:12px; background:var(--brand); color:var(--white); font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:.5px; border:none; cursor:pointer; border-radius:50px; transition:background .2s; margin-top:auto; }
.pc-btn:hover { background:var(--brand-d); }
/* Product card button spans full card width */
.pc-btn { width:100%; justify-content:center; }
.instock-band { margin:4px 0 32px; padding:30px 36px; border-radius:16px; background:var(--brand); border:1px solid var(--brand); text-align:center; }
.ib-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); color:#fff; font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:6px 14px; border-radius:50px; margin-bottom:14px; }
.ib-title { font-family:'DM Sans', sans-serif; font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.01em; line-height:1.2; color:#fff; margin-bottom:10px; }
.ib-sub { font-size:15px; line-height:1.65; color:rgba(255,255,255,.85); max-width:640px; margin:0 auto; }
.ib-cta { margin-top:22px; }
.instock-band .ib-cta { background:#fff; color:var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.instock-band .ib-cta:hover { background:var(--off-white); color:var(--brand-d); box-shadow:0 6px 20px rgba(0,0,0,.24); }
@media (max-width:600px){ .instock-band { padding:24px 20px; } .ib-sub { font-size:14px; } }
.products-actions { display:block; margin-top:8px; }

/* Gated price list — B20: full width beneath the product cards */
.price-list-gate { background:var(--brand); border:none; border-radius:16px; padding:28px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; width:100%; max-width:none; box-shadow:0 10px 30px rgba(1,112,185,.25); }
.price-list-gate .plg-text { flex:1; min-width:280px; }
.plg-title { font-family:'DM Sans', sans-serif; font-size:20px; font-weight:700; color:var(--white); margin-bottom:4px; }
.plg-sub { font-size:12px; color:rgba(255,255,255,.85); margin-bottom:0; }
/* On the blue card, the CTA flips to a white fill for contrast */
.price-list-gate .plg-cta { background:var(--white); color:var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.price-list-gate .plg-cta:hover { background:var(--off-white); color:var(--brand-d); }
.plg-form { display:flex; gap:8px; flex:1; min-width:280px; }
.plg-form input { flex:1; padding:13px 16px; border:1.5px solid var(--border); border-radius:50px; font-family:'DM Sans', sans-serif; font-size:13px; color:var(--text); outline:none; transition:border-color .2s; }
.plg-form input:focus { border-color:var(--brand); }
.plg-form button { background:var(--brand); color:var(--white); border:none; padding:13px 22px; border-radius:50px; font-family:'DM Sans', sans-serif; font-size:12px; font-weight:700; letter-spacing:.5px; cursor:pointer; white-space:nowrap; transition:background .2s; }
.plg-form button:hover { background:var(--brand-d); }

/* ══════════════════════════════════════════
   CONVERSION PATHS
   ══════════════════════════════════════════ */
.conv { background:var(--white); padding:80px 0; }
/* DES3 + B21: products (light grey) sits directly above conv (white). Avoid a
   double-80px empty band, but give the "Pick your starting point" heading more
   breathing room above it than the previous tight 28px seam. */
.products + .conv { padding-top:64px; }
.conv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.conv-card { background:var(--off-white); padding:40px 32px 32px; border-radius:16px; display:flex; flex-direction:column; border:1.5px solid var(--border); transition:box-shadow .2s, transform .2s; }
.conv-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.08); transform:translateY(-2px); }
/* B22: primary conversion card on brand-blue background */
.conv-card.primary { background:var(--brand); border-color:var(--brand); }
.conv-card.primary:hover { box-shadow:0 12px 40px rgba(1,112,185,.35); }
.conv-bar { width:32px; height:3px; background:var(--brand); border-radius:50px; margin-bottom:22px; flex-shrink:0; }
.conv-card.primary .conv-bar { background:var(--white); }
.conv-slabel { font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-mid); margin-bottom:8px; flex-shrink:0; }
.conv-card.primary .conv-slabel { color:rgba(255,255,255,.75); }
.conv-title { font-family:'DM Sans', sans-serif; font-size:26px; font-weight:700; color:var(--text); margin-bottom:10px; line-height:1.2; flex-shrink:0; }
.conv-card.primary .conv-title { color:var(--white); }
.conv-desc { font-size:13px; color:var(--text-mid); line-height:1.7; margin-bottom:20px; flex-shrink:0; }
.conv-card.primary .conv-desc { color:rgba(255,255,255,.82); }
.conv-list { list-style:none; margin-bottom:28px; flex:1; }
.conv-list li { font-size:12px; color:var(--text-mid); padding:8px 0; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:10px; line-height:1.45; }
.conv-list li:last-child { border-bottom:none; }
.conv-list li::before { content:''; width:5px; height:5px; background:var(--brand); border-radius:50%; flex-shrink:0; margin-top:4px; }
.conv-card.primary .conv-list li { color:rgba(255,255,255,.92); border-color:rgba(255,255,255,.18); }
.conv-card.primary .conv-list li::before { background:#ffffff; }
.conv-cta { display:block; width:100%; padding:15px 20px; text-align:center; font-family:'DM Sans', sans-serif; font-size:12px; font-weight:700; letter-spacing:.5px; cursor:pointer; border:none; border-radius:50px; transition:all .2s; flex-shrink:0; text-decoration:none; }
.conv-cta.yl { background:var(--yellow); color:var(--white); box-shadow:0 4px 14px rgba(1,112,185,.4); }
.conv-cta.yl:hover { background:var(--yellow-d); transform:translateY(-1px); }
/* B22: on the blue primary card, give the CTA a contrasting white fill */
.conv-card.primary .conv-cta.yl { background:var(--white); color:var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.conv-card.primary .conv-cta.yl:hover { background:var(--off-white); transform:translateY(-1px); }
.conv-cta.dk { background:var(--near-blk); color:var(--white); }
.conv-cta.dk:hover { background:#111; transform:translateY(-1px); }
.conv-cta.ol { background:transparent; border:2px solid var(--teal); color:var(--teal); }
.conv-cta.ol:hover { background:var(--teal); color:var(--white); transform:translateY(-1px); }

/* ══════════════════════════════════════════
   FINANCING CALCULATOR
   ══════════════════════════════════════════ */
.financing { background:var(--off-white); padding:80px 0; border-top:1px solid var(--border); }
.fin-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; margin-top:52px; }
.calc-panel { background:var(--white); border-radius:16px; padding:40px; box-shadow:0 8px 32px rgba(0,0,0,.06); }
.calc-row { margin-bottom:28px; }
.clr { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.cl-lbl { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-lt); }
.cl-val { font-family:'DM Sans', sans-serif; font-size:22px; font-weight:700; color:var(--text); }
/* Range slider — flat #F5F5F5 track, clean blue dot.
   !important is REQUIRED: Astra's main.min.css loads AFTER this file and styles
   input[type=range] at equal specificity (white backing + drop shadow + a :focus
   re-whiten). Without !important Astra wins the cascade and the bar reverts. */
input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:6px; background:transparent; border:none; border-radius:50px; outline:none; cursor:pointer; margin:8px 0 !important; padding:0 !important; }
input[type=range]::-webkit-slider-runnable-track { -webkit-appearance:none; height:6px !important; background:#F5F5F5 !important; border-radius:50px !important; border:none !important; box-shadow:none !important; }
input[type=range]::-moz-range-track { height:6px !important; background:#F5F5F5 !important; border-radius:50px !important; border:none !important; box-shadow:none !important; }
input[type=range]:focus { outline:none; }
input[type=range]:focus::-webkit-slider-runnable-track { background:#F5F5F5 !important; }
input[type=range]:focus-visible { outline:3px solid #0170B9; outline-offset:4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px !important; height:20px !important; margin-top:-7px !important; background:var(--brand) !important; border-radius:50% !important; cursor:pointer; border:none !important; box-shadow:none !important; }
input[type=range]::-moz-range-thumb { width:20px !important; height:20px !important; background:var(--brand) !important; border-radius:50% !important; cursor:pointer; border:none !important; box-shadow:none !important; }
/* K3jaDL: light brand tint with dark text (was solid black) — keeps AA contrast */
.calc-result { background:var(--brand-xl); padding:28px; margin-top:8px; border-radius:12px; border:1px solid var(--border); }
.cr-row { display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.08); }
.cr-row:last-child { border-bottom:none; }
.cr-lbl { font-size:11px; color:var(--text-mid); }
.cr-val { font-family:'DM Sans', sans-serif; font-size:20px; font-weight:700; color:var(--text); }
.cr-val.big { color:var(--brand); font-size:26px; font-weight:800; letter-spacing:-.01em; line-height:1.15; text-align:right; white-space:nowrap; }
.cr-val.grn { color:var(--green); }
/* ApZGfz: plain emphasized line, not a button (removed pill background/padding) */
.cr-bw { background:transparent; color:var(--brand); font-weight:800; font-size:15px; text-align:center; padding:14px 0 4px; border-radius:0; margin-top:8px; }
.fin-copy h2 { font-family:'DM Sans', sans-serif; font-size:clamp(32px,3.5vw,44px); font-weight:700; color:var(--text); line-height:1.15; margin-bottom:16px; }
.fin-copy p { font-size:15px; color:var(--text-mid); line-height:1.8; margin-bottom:24px; font-weight:400; }
.fin-points { list-style:none; margin-bottom:32px; }
.fin-points li { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-mid); line-height:1.5; }
.fin-points li:last-child { border-bottom:none; }
.fin-points li::before { content:''; width:6px; height:6px; background:var(--brand); border-radius:50%; flex-shrink:0; margin-top:4px; }
.fin-ctas { display:flex; gap:12px; flex-wrap:wrap; }

/* ══════════════════════════════════════════
   VIDEO SOCIAL PROOF STRIP
   ══════════════════════════════════════════ */
.video-strip { background:var(--lt-teal); padding:60px 0; }
.video-strip-inner { max-width:860px; margin:0 auto; padding:0 44px; text-align:center; }
.video-strip h3 { font-family:'DM Sans', sans-serif; font-size:32px; font-weight:700; color:var(--black); margin-bottom:8px; }
.video-strip p { font-size:15px; color:var(--text-mid); margin-bottom:32px; font-weight:300; }
.video-poster-wrap { position:relative; cursor:pointer; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:#000; display:block; }
.video-poster-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.video-poster-wrap:hover img { transform:scale(1.03); }
.video-play-overlay { position:absolute; inset:0; background:rgba(0,0,0,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:background .25s; }
.video-poster-wrap:hover .video-play-overlay { background:rgba(0,0,0,.2); }
.video-play-btn-circle { width:72px; height:72px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(0,0,0,.35); transition:transform .2s, box-shadow .2s; }
.video-play-btn-circle svg { width:26px; height:26px; fill:var(--brand); margin-left:3px; display:block; }
.video-poster-wrap:hover .video-play-btn-circle { transform:scale(1.08); box-shadow:0 12px 36px rgba(0,0,0,.45); }
.video-play-label { font-family:'DM Sans', sans-serif; font-size:13px; font-weight:700; color:var(--white); letter-spacing:1px; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.6); }

/* ══════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════ */
.testimonials { background:var(--near-blk); padding:80px 0; }
.testimonials .sec-head h2 { color:var(--white); }
.testimonials .sec-head p { color:rgba(255,255,255,.7); }
.testimonials .eyebrow { display:block; text-align:center; }
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.test-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; padding:32px; display:flex; flex-direction:column; transition:background .2s; }
.test-card:hover { background:rgba(255,255,255,.09); }
.test-stars { color:#f4b400; font-size:14px; letter-spacing:2px; margin-bottom:16px; }
.test-quote { font-family:'DM Sans', sans-serif; font-size:16px; font-style:italic; color:rgba(255,255,255,.95); line-height:1.8; margin-bottom:22px; flex:1; }
.test-reviewer { display:flex; align-items:center; gap:12px; }
.test-av { width:40px; height:40px; background:var(--brand); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'DM Sans', sans-serif; font-size:18px; font-weight:700; color:var(--white); flex-shrink:0; }
.test-name { font-size:13px; font-weight:700; color:var(--white); }
.test-loc { font-size:10px; color:rgba(255,255,255,.62); margin-top:2px; }
.testimonials-cta { text-align:center; margin-top:44px; }

/* Awards strip */
.awards-strip { border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:32px; text-align:center; }
.awards-eyebrow { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:20px; }
.awards-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.award-chip { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:8px 18px; border-radius:50px; font-size:11px; font-weight:600; color:rgba(255,255,255,.6); }
.award-chip.gold { border-color:rgba(58,159,224,.4); color:var(--brand-lite); background:rgba(1,112,185,.07); }

/* ══════════════════════════════════════════
   LOCATIONS — 8 locations, 4x2 grid
   ══════════════════════════════════════════ */
.locations { background:var(--white); padding:80px 0; }
.loc-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; }
.loc-head h2 { font-family:'DM Sans', sans-serif; font-size:clamp(34px,4vw,48px); font-weight:700; color:var(--text); }
.loc-head p { font-size:13px; color:var(--text-lt); max-width:260px; text-align:right; line-height:1.65; }
.loc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.loc-card { background:var(--off-white); padding:26px; border:1.5px solid var(--border); border-radius:14px; display:flex; flex-direction:column; transition:border-color .2s, box-shadow .2s; }
.loc-card:hover { border-color:var(--brand); box-shadow:0 8px 28px rgba(1,112,185,.12); }
.loc-city { font-family:'DM Sans', sans-serif; font-size:20px; font-weight:700; color:var(--text); margin-bottom:6px; }
.loc-addr { font-size:11.5px; color:var(--text-lt); line-height:1.6; margin-bottom:8px; }
/* EPabVn: address is a Google Maps link but reads as plain text until hover */
.loc-addr-link { color:inherit; text-decoration:none; }
.loc-addr-link:hover, .loc-addr-link:focus-visible { text-decoration:underline; color:var(--brand); }
.loc-phone { font-size:11.5px; font-weight:600; color:var(--brand); margin-bottom:8px; }
.loc-hours { font-size:11px; color:var(--text-mid); margin-bottom:16px; flex:1; }
.loc-hours strong { color:var(--text-mid); }
.loc-btn { display:block; text-align:center; padding:11px; background:var(--brand); color:var(--white); font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:.5px; border-radius:50px; transition:background .2s; margin-top:auto; }
.loc-btn:hover { background:var(--brand-d); }
/* ms4b0s: ensure location button label is centered */
.loc-btn { text-align:center; justify-content:center; }
.loc-view-all { text-align:center; margin-top:28px; }

/* ══════════════════════════════════════════
   BOTTOM CTA
   ══════════════════════════════════════════ */
.bottom-cta { position:relative; overflow:hidden; background:var(--teal-d); }
.bc-photo { position:absolute; inset:0; }
.bc-photo img { width:100%; height:100%; object-fit:cover; object-position:center 40%; }
/* Mhd5sB (B equiv): lightened bottom-CTA overlay ~30% so the photo reads, keeping left-copy contrast */
.bc-photo::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.48) 55%, rgba(0,0,0,.32) 100%); }
.bc-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.2) 60%, transparent 100%); }
.bc-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 480px; gap:72px; align-items:center; padding:96px 44px; max-width:1200px; margin:0 auto; }
.bc-copy h2 { font-family:'DM Sans', sans-serif; font-size:clamp(34px,4vw,48px); font-weight:700; color:var(--white); line-height:1.08; margin-bottom:16px; }
.bc-copy h2 em { font-style:normal; color:var(--white); }
.bc-copy p { font-size:15px; color:#fff; line-height:1.8; margin-bottom:24px; font-weight:400; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.bc-list { list-style:none; margin-bottom:32px; }
.bc-list li { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:13px; color:#fff; font-weight:500; line-height:1.5; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.bc-list li:last-child { border-bottom:none; }
.bc-list li::before { content:''; width:5px; height:5px; background:var(--brand); border-radius:50%; flex-shrink:0; margin-top:4px; }

/* ══════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════ */
.faq { background:var(--lt-teal); padding:80px 0; }
.faq .sec-head h2 { color:var(--text); }
.faq-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px; max-width:820px; margin-left:auto; margin-right:auto; }
.faq-item { background:var(--white); border-radius:16px; padding:28px 30px; border:1.5px solid var(--border); cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color:var(--brand); }
.faq-q { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-right:4px; font-size:14px; font-weight:700; color:var(--text); line-height:1.4; }
.faq-toggle { font-size:22px; font-weight:300; color:var(--brand); flex-shrink:0; line-height:1; transition:transform .3s; display:inline-block; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; padding-bottom:0; font-size:12.5px; color:var(--text-lt); line-height:1.8; }
.faq-item.open .faq-a { padding-top:10px; padding-bottom:0; }
.faq-item.open .faq-toggle { transform:rotate(45deg); }
.faq-item.open { border-color:var(--brand); box-shadow:0 4px 16px rgba(1,112,185,.1); }

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
footer { background:var(--black); padding:40px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; }
footer .logo img { height:26px; width:auto; opacity:.45; margin-bottom:8px; display:block; }
footer p { font-size:11px; color:rgba(255,255,255,.6); }
footer a { color:rgba(255,255,255,.6); transition:color .2s; }
footer a:hover { color:var(--brand); }


/* ══════════════════════════════════════════
   EXIT INTENT SLIDE-IN
   ══════════════════════════════════════════ */
/* RES3: z-index sits ABOVE the Salesforce live-chat widget (its container
   computes to z-index:999), so when the popup fires it stacks over the chat
   rather than the chat covering its CTA/close. */
.exit-intent { position:fixed; bottom:-100%; left:0; right:0; z-index:1000; background:var(--white); border-top:4px solid var(--brand); padding:24px 44px; box-shadow:0 -8px 48px rgba(0,0,0,.2); transition:bottom .45s cubic-bezier(.22,.61,.36,1); display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
/* RES3: the live-chat widget floats in the bottom-right corner. Reserve room on
   the right of the exit-intent bar so its CTA and close control never sit under
   the chat button (no overlap / mis-click). */
@media(min-width:769px) { .exit-intent { padding-right:248px; } }
.exit-intent.show { bottom:0; }
.ei-badge { background:var(--brand); color:var(--white); font-size:11px; font-weight:800; padding:6px 14px; border-radius:50px; white-space:nowrap; flex-shrink:0; }
.ei-copy { min-width:0; text-align:center; }
.ei-title { font-family:'DM Sans', sans-serif; font-size:20px; font-weight:700; color:var(--text); margin-bottom:3px; }
.ei-sub { font-size:12px; color:var(--text-lt); }
.ei-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.ei-close { background:none; border:none; color:var(--text-lt); font-size:24px; cursor:pointer; line-height:1; padding:4px; transition:color .2s; }
.ei-close:hover { color:var(--text); }

/* ══════════════════════════════════════════
   MOBILE STICKY BAR
   ══════════════════════════════════════════ */
.mob-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:400; background:var(--white); border-top:1px solid var(--border); padding:12px 16px; grid-template-columns:1fr 1fr; gap:10px; box-shadow:0 -4px 20px rgba(0,0,0,.1); }
@media(max-width:768px) {
  .mob-bar { display:grid; }
  /* DES4: the fixed mobile CTA bar + the floating live-chat widget sit at the
     bottom of the viewport. Reserve space so page content (e.g. the VS
     comparison table and its CTA) is never hidden behind them. */
  body { padding-bottom:88px; }
  .why-content { padding-bottom:56px; }
  .vs-table { margin-bottom:24px; }
  /* DES4: the always-mounted mobile sticky bar already exposes Call + Claim,
     so the Salesforce live-chat launcher is redundant on phones and only
     collides with that bar (it floats over "Call Now"). Hide it on mobile —
     scoped to this LP's stylesheet, which loads only on this page. */
  .embeddedServiceHelpButton,
  .embeddedServiceHelpButton .helpButton { display:none !important; }
}

/* ══════════════════════════════════════════
   HEALTH BENEFITS
   ══════════════════════════════════════════ */
.hbenefit { padding:80px 0; background:var(--white); }
/* B18: top block — 50/50, intro left + stats stacked into one column on the right */
.hb-top { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:72px; }
.hb-intro { max-width:560px; }
.hb-intro .ey { display:block; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--brand); margin-bottom:12px; }
.hb-intro h2 { font-family:'DM Sans', sans-serif; font-size:clamp(32px,4vw,48px); font-weight:700; color:var(--near-blk); letter-spacing:-.02em; line-height:1.1; margin-bottom:16px; }
.hb-intro h2 em { font-style:normal; color:var(--brand); }
.hb-intro p { font-size:15px; color:var(--text-mid); line-height:1.75; font-weight:400; }
/* Three stats stacked vertically into a single bordered column */
.hb-stats { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.hb-stat { display:flex; align-items:baseline; gap:18px; padding:26px 32px; border-bottom:1px solid var(--border); text-align:left; }
.hb-stat:last-child { border-bottom:none; }
.hb-stat-n { font-family:'DM Sans', sans-serif; font-size:44px; font-weight:700; color:var(--brand); line-height:1; display:block; flex-shrink:0; min-width:3.4em; }
.hb-stat-l { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--near-blk); line-height:1.4; margin-top:0; }
/* Titled break above the 8 benefit cards */
.hb-cards-head { text-align:center; max-width:600px; margin:0 auto 40px; }
.hb-cards-head .ey { display:block; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--brand); margin-bottom:12px; }
.hb-cards-head h3 { font-family:'DM Sans', sans-serif; font-size:clamp(26px,3vw,36px); font-weight:700; color:var(--near-blk); letter-spacing:-.02em; line-height:1.1; margin-bottom:14px; }
.hb-cards-sub { font-size:15px; color:var(--text-mid); line-height:1.7; }
/* Horizontal carousel of the 8 benefit cards */
.hb-carousel { position:relative; }
.hb-track {
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 4px 16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hb-track::-webkit-scrollbar { height:0; display:none; }
.hb-track:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:16px; }
.hb-track .hb-card { flex:0 0 calc((100% - 48px) / 3.4); scroll-snap-align:start; }
.hb-card { background:var(--white); padding:36px 28px; border:1px solid var(--border); border-radius:16px; margin:0; transition:background .2s, transform .3s ease-out, box-shadow .3s ease-out; }
.hb-card:hover { background:var(--off-white); transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.hb-icon { width:42px; height:42px; border-radius:50%; background:rgba(1,112,185,.1); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.hb-icon svg { stroke:var(--brand); }
.hb-title { font-size:14px; font-weight:800; color:var(--near-blk); margin-bottom:8px; }
.hb-desc { font-size:13px; color:var(--text-mid); line-height:1.65; }
/* Prev / next controls */
.hb-controls { display:flex; justify-content:center; gap:12px; margin-top:24px; }
.hb-arrow {
  width:46px; height:46px; border-radius:50px;
  border:1.5px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text);
  transition:background .2s ease-out, border-color .2s ease-out, opacity .2s ease-out, transform .2s ease-out;
}
.hb-arrow:hover { background:var(--brand); border-color:var(--brand); color:var(--white); }
.hb-arrow:active { transform:scale(.94); }
.hb-arrow:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.hb-arrow svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Override Astra/Elementor/ElementsKit globals injected by wp_head() ──
   This LP stylesheet loads BEFORE those, so their generic ul/li/button-svg rules
   were winning: re-indenting the custom lists (margin-left) and collapsing the
   carousel-arrow SVGs to width:0. Force the LP values with !important. ── */
.fc-points, .cp-list, .calc-points, .fin-points, .conv-list, .bc-list, .pc-features,
.fc-points li, .cp-list li, .calc-points li, .fin-points li, .conv-list li, .bc-list li, .pc-features li {
  margin-left:0 !important; padding-left:0 !important; list-style:none !important;
}
.bc-arrow svg, .hb-arrow svg { width:20px !important; height:20px !important; min-width:20px; }
.hb-arrow[disabled] { opacity:.35; cursor:default; pointer-events:none; }
@media(max-width:900px) {
  .hb-top { grid-template-columns:1fr; gap:36px; margin-bottom:48px; }
  .hb-track .hb-card { flex:0 0 calc((100% - 16px) / 2.2); }
  .hb-stat-n { font-size:36px; min-width:3em; }
}
@media(max-width:600px) {
  .hb-track .hb-card { flex:0 0 85%; }
  .hb-stat { padding:22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-track { scroll-behavior:auto; }
  .hb-card:hover { transform:none; }
}

/* ══════════════════════════════════════════
   SCROLL-TRIGGERED FADE-IN ANIMATIONS
   ══════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim { opacity:0; }
.anim.visible { animation: fadeInUp .65s cubic-bezier(.22,.61,.36,1) forwards; }
.anim-delay-1 { animation-delay:.1s; }
.anim-delay-2 { animation-delay:.2s; }
.anim-delay-3 { animation-delay:.3s; }
@media(prefers-reduced-motion:reduce) {
  .anim { opacity:1; }
  .anim.visible { animation:none; }
  html { scroll-behavior:auto; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media(max-width:1100px) {
  .wrap { padding:0 24px; }
  nav { padding:0 24px; }
  .hero-inner { grid-template-columns:minmax(0,1fr); padding:48px 24px 60px; }
  #book { min-width:0; }
  .hero-form { max-width:520px; border-radius:16px; }
  .topbar { display:none; }
  .csi { grid-template-columns:1fr; gap:36px; padding:44px 24px; }
  .cs-steps { gap:24px; }
  .offers-inner { grid-template-columns:repeat(2,1fr); }
  .trust-cells { grid-template-columns:repeat(2,1fr); }
  .why { padding:56px 0; }
  .why-content { grid-template-columns:1fr; gap:36px; }
  .why-photo { aspect-ratio:16/9; }
  .people-grid { grid-template-columns:repeat(6,1fr); grid-template-rows:240px 240px; }
  .pg-1 { grid-column:span 3; grid-row:span 2; }
  .pg-2, .pg-3, .pg-4, .pg-5 { grid-column:span 3; }
  .ritual-grid { grid-template-columns:1fr; padding:0 24px; }
  .ritual-card { height:320px; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .conv-grid { grid-template-columns:1fr; }
  .fin-grid { grid-template-columns:1fr; }
  .test-grid { grid-template-columns:1fr; }
  .bc-inner { grid-template-columns:1fr; padding:60px 24px; }
  .loc-grid { grid-template-columns:repeat(2,1fr); }
  .faq-grid { grid-template-columns:1fr; }
  .people-head { flex-direction:column; align-items:flex-start; }
  .people-head-right { text-align:left; max-width:100%; }
}
@media(max-width:768px) {
  nav { padding:0 16px; height:60px; }
  nav .nav-phone { display:none; }
  .nav-cta-full { display:none; }
  .nav-cta-short { display:inline; }
  .nav-cta { padding:11px 18px !important; }
  .hero { min-height:auto; margin-top:60px; }
  .hero-inner { padding:36px 20px 36px; gap:28px; }
  .hero h1 { font-size:30px; letter-spacing:-.01em; overflow-wrap:break-word; max-width:100%; }
  .hero h1 .h1-sub { font-size:26px; margin-top:4px; }
  /* RES2: keep hero body copy inside the column on narrow phones */
  .hero-sub { font-size:14px; max-width:100%; overflow-wrap:break-word; }
  .hero-proof-inline { flex-wrap:wrap; }
  .hpi-text { overflow-wrap:break-word; }
  .hero-ctas { flex-direction:column; gap:10px; }
  .hero-ctas .btn { width:100%; justify-content:center; font-size:14px; padding:17px 24px; }
  /* RES-R1: keep the 3 hero stats on one row (was repeat(2,1fr) → orphaned $270) */
  .hero-stats { padding-top:18px; gap:0; display:grid; grid-template-columns:repeat(3,1fr); }
  .hs { border-right:1px solid rgba(255,255,255,.15); padding:0 6px; margin:0; text-align:center; }
  .hs:last-child { border-right:none; }
  .hs-num { font-size:20px; display:block; }
  .hs-label { font-size:8px; letter-spacing:.3px; margin-top:3px; }
  .product-grid {
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding-bottom:8px;
    scroll-padding-left:20px;
  }
  .product-grid > .pc { flex:0 0 80%; scroll-snap-align:start; }
  .product-grid::-webkit-scrollbar { height:0; }
  .loc-grid { grid-template-columns:repeat(2,1fr); }
  .people-grid { grid-template-columns:1fr 1fr; grid-template-rows:220px 220px; }
  .pg-1 { grid-column:span 2; grid-row:span 1; }
  .pg-2, .pg-3, .pg-4, .pg-5 { grid-column:span 1; }
  .loc-head { flex-direction:column; gap:14px; }
  .loc-head p { text-align:left; }
}
@media(max-width:768px) {
  .credit-strip { padding:40px 0; }
  .csi { padding:0 16px; gap:28px; }
  .cs-steps { gap:20px; }
  .cs-step-title { font-size:14px; }
  .cs-cta-btn { width:100%; justify-content:center; }
  .trust-cells { grid-template-columns:repeat(2,1fr); }
  .trust-cell { padding:18px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
  .tc-title { font-size:12px; }
  .tc-sub { font-size:10px; }
  .why-content h2 { font-size:26px; }
  .why-lead { font-size:14px; margin-bottom:20px; }
  .vs-cell { padding:10px 12px; font-size:12px; }
  .vs-head { font-size:8px; padding:8px 12px; }
  .why-content .btn { width:100%; justify-content:center; }
  .ritual-grid { grid-template-columns:1fr; gap:12px; padding:0 16px; }
  .ritual-card { height:280px; border-radius:12px; }
  .ritual-name { font-size:26px; }
  .ritual-desc { font-size:13px; }
  .ritual-body { padding:24px 20px; }
  .pc-name { font-size:15px; }
  .products-actions { padding:0 16px; }
  .price-list-gate { flex-direction:column; gap:16px; margin:0 16px; padding:22px 20px; }
  .plg-form { flex-direction:column; }
  .plg-form input, .plg-form button { width:100%; font-size:16px; }
  .conv-grid { gap:12px; }
  .conv-card { padding:28px 20px 24px; }
  .conv-title { font-size:22px; }
  .conv-desc { font-size:13px; margin-bottom:14px; }
  .conv-list li { font-size:11px; padding:6px 0; }
  .conv-cta { font-size:13px; padding:16px; }
  .fin-grid { gap:32px; }
  .calc-panel { padding:28px 20px; }
  .calc-row { margin-bottom:22px; }
  .cr-val.big { font-size:22px; }
  .cr-bw { font-size:13px; }
  .fin-copy h2 { font-size:26px; }
  .fin-ctas { flex-direction:column; }
  .fin-ctas .btn { width:100%; justify-content:center; }
  .video-strip { padding:40px 0; }
  .video-strip-inner { padding:0 16px; }
  .video-strip h3 { font-size:24px; }
  .video-strip p { font-size:14px; margin-bottom:20px; }
  .test-grid { gap:16px; }
  .test-card { padding:24px 20px; }
  .test-quote { font-size:14px; }
  .awards-grid { gap:8px; }
  .award-chip { font-size:10px; padding:6px 12px; }
  .loc-grid { grid-template-columns:1fr; gap:10px; }
  .loc-head { gap:10px; }
  .loc-head h2 { font-size:28px; }
  .loc-card { padding:22px 18px; }
  .loc-city { font-size:18px; }
  .loc-btn { padding:13px; font-size:11px; }
  .bc-inner { padding:48px 16px; }
  .bc-copy h2 { font-size:28px; }
  .bc-copy p { font-size:14px; }
  .bc-list li { font-size:12px; padding:10px 0; }
  .faq-grid { gap:10px; }
  .faq-item { padding:20px 18px; }
  .faq-q { font-size:13px; }
  .faq-a { font-size:12px; }
  .mob-bar { padding:10px 14px; gap:8px; padding-bottom:max(14px, env(safe-area-inset-bottom)); }
  .mob-bar .btn { font-size:13px; padding:15px 10px; border-radius:50px; min-height:50px; }
  .exit-intent { padding:20px 16px; gap:16px; }
  .ei-actions .btn { font-size:11px; padding:12px 20px; }
  .hf-top { padding:14px 16px; gap:14px; }
  .hf-top-label { letter-spacing:.5px; font-size:9px; }
  .hf-top-credit { font-size:20px; }
  .hf-body { padding:18px 18px 14px; }
  .hf-title { font-size:15px; }
  .footer-inner { flex-direction:column; gap:14px; text-align:center; }
  .btn, .conv-cta, .loc-btn, .pc-btn, .plg-form button { min-height:48px; }
}
@media(max-width:540px) {
  .offers-inner { grid-template-columns:repeat(2,1fr); gap:1px; }
  .offers-inner-2 { grid-template-columns:repeat(2,1fr); justify-content:stretch; }
  .offers-inner-2 .offer-item { padding:16px 12px; }
  .offer-item { padding:16px 12px; border-right:none; border-bottom:2px solid rgba(255,255,255,.25); }
  .offers-inner-2 .offer-item { border-bottom:none; }
  .offers-inner-2 .offer-item:first-child { border-right:2px solid rgba(255,255,255,.25); }
  .offer-item:nth-child(odd) { border-right:2px solid rgba(255,255,255,.25); }
  .offer-item:nth-last-child(-n+2) { border-bottom:none; }
  .offer-big { font-size:28px; }
  .offer-label { font-size:12px; }
  .offer-sub { font-size:10px; }
  .loc-grid { grid-template-columns:1fr; }
}

/* No italic in headings — DM Sans display weight handles emphasis via color */
h1 em, h2 em, h3 em { font-style:normal; }

/* ══════════════════════════════════════════
   ACCESSIBILITY — focus, skip link, touch targets
   ══════════════════════════════════════════ */
/* Visually-hidden utility (screen-reader only) */
.visually-hidden {
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Skip link — visible on focus */
.skip-link {
  position:fixed; left:8px; top:-60px; z-index:1000;
  background:var(--brand); color:var(--white);
  padding:10px 18px; border-radius:4px; font-size:13px; font-weight:700;
  transition:top .2s;
}
.skip-link:focus { top:8px; }

/* Focus-visible ring (light/default) */
:focus-visible { outline:3px solid #0170B9; outline-offset:2px; }
/* On-dark variant */
.hero :focus-visible,
.credit-strip :focus-visible,
.trust-bar :focus-visible,
.rituals :focus-visible,
.testimonials :focus-visible,
.bottom-cta :focus-visible,
.topbar :focus-visible,
footer :focus-visible,
.conv-card.primary :focus-visible { outline-color:#ffffff; }

/* Restore visible focus ring on FluentForm inputs (override outline:none) */
.form-card .ff-default .ff-el-form-control:focus-visible { outline:3px solid #0170B9; outline-offset:1px; border-color:var(--brand); }

/* FAQ control — keyboard focus + comfortable hit area */
.faq-q:focus-visible { outline:3px solid #0170B9; outline-offset:-2px; }
.faq-toggle { min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; }

/* Price-list CTA (replaces fake form) */
.plg-cta { white-space:normal; text-align:center; }

/* Touch targets ≥24×24 — dismiss/close controls */
.ei-close {
  min-width:32px; min-height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px;
}

/* Extend reduced-motion handling to hover transforms */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .pg:hover img, .ritual-card:hover .ritual-bg, .video-poster-wrap:hover img,
  .pc:hover, .conv-card:hover { transform:none; }
}

/* QA: prevent 2px sub-pixel spill on mobile financing panel */
@media(max-width:768px){.calc-panel,.fin-copy,.fin-grid{max-width:100%;overflow-x:clip;}}