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

/* ══════════════════════════════════════════
   BRAND TOKENS
   ══════════════════════════════════════════ */
:root {
  --brand:     #0170B9;
  --brand-d:   #015a94;
  --black:     #000000;
  --near-blk:  #0d0d0d;
  --grey7:     #97999B;
  --grey2:     #D0D0CE;
  --yellow:    #0170B9;   /* CTA color — kept var name, value remapped to brand blue */
  --yellow-d:  #015a94;   /* CTA hover — remapped to brand-d */
  --white:     #ffffff;
  --offwhite:  #F5F5F5;
  --border:    #E5E5E5;
  --text:      #3A3A3A;
  --mid:       #4B4F58;
  --light:     #6c6c6c;
  --brand-lite:#3a9fe0;   /* lighter brand blue for small text on dark backgrounds (contrast) */
}

/* ── 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-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--brand); margin-bottom:14px; }
.eyebrow-white { color:rgba(255,255,255,.9); }
.section-title { font-family:'DM Sans', sans-serif; font-size:clamp(34px,4vw,48px); font-weight:700; letter-spacing:-.02em; line-height:1.08; margin-bottom:16px; }
.section-sub { font-size:16px; color:var(--mid); line-height:1.8; font-weight:300; letter-spacing:.01em; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'DM Sans', sans-serif; font-weight:700; font-size:13px; letter-spacing:.5px; padding:16px 32px; cursor:pointer; border:none; transition:all .22s ease; white-space:nowrap; line-height:1; border-radius:50px; }
.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-bk { background:var(--black); color:var(--white); }
.btn-bk:hover { background:#222; transform:translateY(-1px); }
.btn-out-wh { background:transparent; border:2px solid rgba(255,255,255,.8); color:var(--white); }
.btn-out-wh:hover { background:var(--white); color:var(--black); }
.btn-out-bk { background:transparent; border:2px solid var(--black); color:var(--black); }
.btn-out-bk:hover { background:var(--black); color:var(--white); }

/* ══════════════════════════════════════════
   NAV — clean white, always visible
   ══════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  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);
}
.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(--light); margin-bottom:2px; }
/* Nav CTA responsive label: full text on desktop, short text on narrow nav */
.nav-cta-short { display:none; }
/* 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; } }

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hero {
  margin-top:72px; position:relative;
  min-height:calc(100vh - 72px);
  background-image:url('https://www.wellnessshop.ca/wp-content/uploads/lp-optimized/hero-bright-1600.webp');
  background-size:cover; background-position:center 35%;
  display:flex; align-items:center;
}
/* Background darkening ported from /lp/hot-tubs-offer (LP-HotTubs-B) so both
   heroes read identically: a black bottom-up gradient over a teal angled wash. */
.hero::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%
  ),
  linear-gradient(
    100deg,
    rgba(0,40,70,.55) 0%,
    rgba(0,34,58,.36) 45%,
    rgba(1,112,185,.05) 100%
  );
}
/* Hero inner: split layout — copy on the left, lead form on the right */
.hero-inner {
  position:relative; z-index:2;
  width:100%; max-width:1200px; margin:0 auto;
  padding:48px 44px;
  display:grid;
  grid-template-columns:1fr 460px;
  gap:48px;
  align-items:center;
}
.hero-copy { min-width:0; }
.hero-form-col { min-width:0; }
/* Hero lead-form card (reuses .form-card skin, sized for the hero) */
.form-card.hero-form { width:100%; box-shadow:0 32px 80px rgba(0,0,0,.4); }
.hero-trust {
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
  flex-wrap:wrap;
}
.ht-pill {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.88);
  font-size:11px; font-weight:600; padding:6px 12px; border-radius:50px;
}
.ht-pill .dot { width:6px; height:6px; background:var(--white); border-radius:50%; }
.hero h1 {
  font-family:'DM Sans', sans-serif;
  font-size:clamp(28px, 3.2vw, 44px);
  font-weight:700; color:var(--white);
  line-height:1.06; letter-spacing:-.01em;
  margin-bottom:24px;
  max-width:24ch;
}
.hero h1 em { font-style:normal; color:var(--white); }
.h-accent { color:var(--brand); font-style:normal; }
/* Sub-copy stays at a comfortable reading width */
.hero-sub {
  font-size:17px; color:rgba(255,255,255,.82);
  line-height:1.7; margin-bottom:36px;
  font-weight:300; max-width:540px;
}
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.hero-note { font-size:13px; color:rgba(255,255,255,.7); font-weight:400; max-width:540px; }
.hero-note strong { color:var(--white); }

/* ══════════════════════════════════════════
   OFFERS STRIP
   ══════════════════════════════════════════ */
.offers { border-bottom:1px solid var(--border); }
.offers-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.offer-item { text-align:left; padding:32px 24px; border-right:1px solid var(--border); }
.offer-item:last-child { border-right:none; }
.offer-num { font-family:'DM Sans', sans-serif; font-size:40px; font-weight:700; color:var(--brand); display:block; line-height:1; letter-spacing:-.02em; }
.offer-label { font-size:12px; font-weight:800; color:var(--text); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }
.offer-sub { font-size:11px; color:var(--mid); margin-top:3px; }
/* Scroll-in stagger (item XkBleY) */
.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} }

/* ══════════════════════════════════════════
   HOW IT WORKS
   ══════════════════════════════════════════ */
.how { padding:80px 0; }
.how .wrap { max-width:960px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; margin-top:60px; }
.steps::before { content:''; position:absolute; top:28px; left:calc(16.67% + 20px); right:calc(16.67% + 20px); height:1px; background:var(--border); z-index:0; }
.step { text-align:center; padding:0 32px; position:relative; z-index:1; }
.step-n {
  width:56px; height:56px; border-radius:50%; border:2px solid var(--brand);
  background:var(--white); display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans', sans-serif; font-size:22px; font-weight:700; color:var(--brand);
  margin:0 auto 22px;
}
.step-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:10px; }
.step-body  { font-size:14px; color:var(--mid); line-height:1.65; }

/* ══════════════════════════════════════════
   MID-PAGE IPAD CTA
   ══════════════════════════════════════════ */
.ipad-cta { padding:80px 0; background:#f5f9fc; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ipad-cta-inner { min-height:470px; display:flex; align-items:center; padding:56px; border-radius:16px; overflow:hidden; background-image:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 38%, rgba(255,255,255,.15) 58%, rgba(255,255,255,0) 100%), var(--ipad-cta-bg); background-size:cover; background-position:center right; box-shadow:0 26px 70px rgba(1,112,185,.14); }
.ipad-cta-copy { width:min(100%, 520px); min-width:0; }
.ipad-cta-copy .section-title { max-width:11ch; margin-bottom:18px; }
.ipad-cta-copy p { font-size:16px; color:var(--mid); line-height:1.8; max-width:560px; margin-bottom:24px; }
.ipad-cta-mobile-image { display:none; }
.ipad-cta-list { list-style:none; margin:0 0 32px; }
.ipad-cta-list li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px; font-weight:600; color:var(--text); }
.ipad-cta-list li:last-child { border-bottom:none; }
.ipad-cta-list li::before { content:''; width:6px; height:6px; background:var(--brand); border-radius:50%; flex-shrink:0; }

/* ══════════════════════════════════════════
   RITUAL CARDS
   ══════════════════════════════════════════ */
.rituals { padding:80px 0; background:var(--offwhite); }
.ritual-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.rc { position:relative; height:500px; overflow:hidden; border-radius:16px; background:var(--black); cursor:pointer; }
.rc img { width:100%; height:100%; object-fit:cover; transition:transform .75s; display:block; }
.rc:hover img { transform:scale(1.05); }
.rc-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 55%, transparent 100%); }
.rc-body { position:absolute; bottom:0; left:0; right:0; padding:30px; }
.rc-tag  { font-size:9px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--brand-lite); margin-bottom:8px; display:block; }
.rc-name { font-family:'DM Sans', sans-serif; font-size:30px; font-weight:700; color:var(--white); line-height:1.1; margin-bottom:8px; }
.rc-desc { font-size:13px; color:rgba(255,255,255,.78); line-height:1.6; text-wrap:balance; }

/* ══════════════════════════════════════════
   FEATURE SPLIT
   ══════════════════════════════════════════ */
.feature { display:grid; grid-template-columns:1fr 1fr; min-height:540px; }
.feature-photo { overflow:hidden; position:relative; }
.feature-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s; }
.feature:hover .feature-photo img { transform:scale(1.03); }
.feature-copy {
  background:var(--black); padding:80px 72px;
  display:flex; flex-direction:column; justify-content:center;
}
.feature-copy .section-title { color:var(--white); }
.feature-copy .section-title em { font-style:normal; color:var(--brand); }
.feature-copy p { font-size:15px; color:rgba(255,255,255,.7); line-height:1.8; margin-bottom:32px; font-weight:300; }
.fc-points { list-style:none; margin-bottom:36px; }
.fc-points li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px; color:rgba(255,255,255,.85); }
.fc-points li:last-child { border-bottom:none; }
.fc-points li::before { content:''; width:5px; height:5px; background:var(--brand); border-radius:50%; flex-shrink:0; }
/* CTA hugs its content rather than stretching the full copy column (item A1) */
.feature-copy > .btn { align-self:flex-start; width:auto; }

/* ══════════════════════════════════════════
   PRODUCTS
   ══════════════════════════════════════════ */
.products { padding:80px 0; }
.product-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:56px; }
.pc { border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.pc:hover { box-shadow:0 8px 32px rgba(1,112,185,.1); transform:translateY(-2px); }
.pc-img { aspect-ratio:1; background:var(--offwhite); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pc-img img { width:100%; height:100%; object-fit:contain; padding:14px; }
.pc-body { padding:16px; 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:17px; font-weight:600; color:var(--text); margin-bottom:6px; }
.pc-price { font-size:12px; color:var(--mid); margin-bottom:14px; flex:1; font-weight:500; }
.pc-btn   { display:flex; width:100%; align-items:center; justify-content:center; text-align:center; padding:12px; background:var(--brand); color:var(--white); font-size:12px; font-weight:700; letter-spacing:.5px; border:none; cursor:pointer; font-family:'DM Sans', sans-serif; transition:background .2s; border-radius:50px; margin:0 0 8px; }
.pc-btn:hover { background:var(--brand-d); }

/* ══════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════ */
.testimonials { padding:80px 0; background:var(--near-blk); }
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.tc { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:36px; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; }
.tc:hover { background:rgba(255,255,255,.07); }
.tc-stars { color:#f4b400; font-size:13px; letter-spacing:2px; margin-bottom:18px; }
.tc-quote { font-family:'DM Sans', sans-serif; font-size:17px; font-style:italic; color:rgba(255,255,255,.92); line-height:1.85; margin-bottom:24px; flex:1; }
.tc-meta  { display:flex; align-items:center; gap:12px; }
.tc-avatar { 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; }
.tc-name   { font-size:13px; font-weight:700; color:var(--white); }
.tc-detail { font-size:10px; color:rgba(255,255,255,.62); margin-top:2px; letter-spacing:.3px; }

/* ══════════════════════════════════════════
   CALCULATOR
   ══════════════════════════════════════════ */
.calculator { padding:80px 0; background:var(--offwhite); border-top:1px solid var(--border); }
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:60px; }
/* Panel on the LEFT, copy on the right (item s786zZ) — order swap keeps DOM/responsive sane */
.calc-grid .calc-panel { order:1; }
.calc-grid .calc-copy  { order:2; }
.calc-copy p { font-size:15px; color:var(--mid); line-height:1.8; margin-bottom:28px; font-weight:300; }
.calc-points { list-style:none; margin-bottom:36px; }
.calc-points li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--mid); }
.calc-points li:last-child { border-bottom:none; }
.calc-points li::before { content:''; width:5px; height:5px; background:var(--brand); border-radius:50%; flex-shrink:0; }
.calc-panel { background:var(--white); border:1px solid var(--border); padding:40px; border-radius:16px; }
.calc-row { margin-bottom:26px; }
.clr { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.clr-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--light); }
.clr-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; }
/* Result panel: light brand tint with dark text (item K3jaDL), AA contrast */
.calc-result { background:rgba(1,112,185,.08); padding:28px; margin-top:4px; border-radius:12px; }
.cr { display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px solid rgba(1,112,185,.14); }
.cr:last-child { border-bottom:none; }
.cr-lbl { font-size:11px; color:var(--mid); font-weight:500; }
.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:38px; }
.cr-val.grn { color:#1a7a3a; }
/* Bi-weekly line: plain emphasized text, not a button (item ApZGfz) */
.cr-bw { background:transparent; color:var(--brand); text-align:center; padding:13px 0 0; font-size:14px; font-weight:700; margin-top:8px; }

/* ══════════════════════════════════════════
   CONTACT FORM — photo-backed
   ══════════════════════════════════════════ */
.contact { position:relative; overflow:hidden; padding:80px 0; }
.contact-bg { position:absolute; inset:0; }
.contact-bg img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
/* A5 + Mhd5sB — overlay lightened ~30% (from .85/.72/.5 to .60/.50/.32) so the
   background image reads clearly, while keeping white copy above 4.5:1 on the
   left/darkest side where the copy sits. Image far more visible at the .32 end. */
.contact-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.32) 100%); }
.contact-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 480px; gap:80px; align-items:center; }
.contact-copy .section-title { color:var(--white); }
.contact-copy .section-title em { font-style:normal; color:var(--white); }
.contact-copy p { font-size:15px; color:#fff; line-height:1.8; margin-bottom:28px; font-weight:400; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.cp-list { list-style:none; }
.cp-list li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px; color:#fff; font-weight:500; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.cp-list li:last-child { border-bottom:none; }
.cp-list li::before { content:''; width:5px; height:5px; background:var(--brand); border-radius:50%; flex-shrink:0; }

/* Form card — chrome ported from /lp/hot-tubs-offer (LP-HotTubs-B) */
.form-card { background:var(--white); border-radius:16px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.12); }
.fc-title { font-family:'DM Sans', sans-serif; font-size:22px; font-weight:700; color:var(--text); margin-bottom:4px; }
.fc-sub   { font-size:12px; color:var(--light); margin-bottom:24px; }
.hf-top { background:var(--black); padding:18px 28px; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:12px; }
.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(--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(--light); }
.fp-text strong { color:var(--text); }
.guarantee-row { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 0 4px; margin-top:0; }
.gr-icon { color:var(--brand); font-size:16px; flex-shrink:0; font-weight:700; }
.gr-text { font-size:10px; font-weight:600; color:var(--mid); letter-spacing:.2px; } /* already --mid (AA) */
.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(--light); }
.ta-pill::before { content:''; width:6px; height:6px; background:#27ae60; border-radius:50%; flex-shrink:0; }

/* ── FluentForm restyle to match brand ── */
.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); }
/* 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(--light); 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; }

/* Custom caret on FluentForm selects (item fVTmZQ) */
.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;
}

.f-trust { display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 0; border-top:1px solid var(--border); margin-top:12px; flex-wrap:wrap; }
.f-trust span { font-size:10px; font-weight:600; color:var(--light); display:flex; align-items:center; gap:5px; }
.f-trust span::before { content:''; width:5px; height:5px; background:#27ae60; border-radius:50%; }

/* ══════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════ */
.faq { padding:80px 0; background:var(--white); }
.faq-list { max-width:720px; margin:56px auto 0; }
.faq-item { border-bottom:1px solid var(--border); cursor:pointer; }
.faq-q { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-size:15px; font-weight:700; color:var(--text); }
.faq-icon { font-size:20px; font-weight:300; color:var(--brand); flex-shrink:0; transition:transform .3s; line-height:1; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a { padding-bottom:18px; }
.faq-a p { font-size:14px; color:var(--mid); line-height:1.75; }
.faq-cta { text-align:center; margin-top:48px; }

/* ══════════════════════════════════════════
   LOCATIONS
   ══════════════════════════════════════════ */
.locations { padding:80px 0; background:var(--offwhite); border-top:1px solid var(--border); }
.loc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); margin-top:56px; border-radius:16px; overflow:hidden; }
.loc-card { background:var(--white); padding:26px 22px; transition:background .2s; display:flex; flex-direction:column; }
.loc-card:hover { background:var(--offwhite); }
.loc-city  { font-family:'DM Sans', sans-serif; font-size:19px; font-weight:700; color:var(--text); margin-bottom:5px; }
.loc-addr  { font-size:11.5px; color:var(--light); line-height:1.6; margin-bottom:5px; }
/* Address links look like plain text, underline on hover/focus (item EPabVn) */
.loc-addr a { color:inherit; text-decoration:none; }
.loc-addr a:hover, .loc-addr a:focus-visible { text-decoration:underline; }
.loc-phone { font-size:12px; font-weight:700; color:var(--brand); margin-bottom:10px; }
.loc-hours { font-size:10.5px; color:var(--mid); line-height:1.55; margin-bottom:16px; flex:1; }
.loc-hours strong { color:var(--mid); }
.loc-btn { display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; border:1px solid var(--border); color:var(--text); font-family:'DM Sans', sans-serif; font-size:12px; font-weight:700; letter-spacing:.5px; transition:all .2s; border-radius:50px; }
.loc-btn:hover { background:var(--brand); border-color:var(--brand); color:var(--white); }

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
footer { background:var(--black); padding:40px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; }
footer .f-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); }

/* ══════════════════════════════════════════
   MOBILE STICKY
   ══════════════════════════════════════════ */
.mob-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--white); border-top:1px solid var(--border); padding:10px 14px max(14px, env(safe-area-inset-bottom)); grid-template-columns:1fr 1fr; gap:10px; box-shadow:0 -4px 16px rgba(0,0,0,.1); }
@media(max-width:768px) { .mob-bar { display:grid; } }

/* A3 — On mobile, the persistent CTA bar IS the conversion action, so the
   floating Salesforce live-chat launcher is redundant and was overlapping the
   right CTA. Hide it ≤768px (scoped: this style.css only loads on this LP). */
@media(max-width:768px) {
  .embeddedServiceHelpButton,
  .embeddedServiceHelpButton .helpButton,
  .helpButton { display:none !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media(max-width:1024px) {
  .wrap { padding:0 28px; }
  nav   { padding:0 24px; }
  .hero { min-height:0; }
  .hero-inner { grid-template-columns:1fr; gap:36px; padding:44px 28px; max-width:560px; }
  .hero-form-col { width:100%; }
  .hero-form { max-width:520px; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .test-grid    { grid-template-columns:1fr; }
  .calc-grid    { grid-template-columns:1fr; }
  /* Mobile stack: copy first, panel second (reset desktop order swap) */
  .calc-grid .calc-copy  { order:1; }
  .calc-grid .calc-panel { order:2; }
  .contact-grid { grid-template-columns:1fr; padding:0 28px; }
  .feature      { grid-template-columns:1fr; }
  .feature-photo { min-height:360px; }
  .feature-copy  { padding:56px 40px; }
  .loc-grid      { grid-template-columns:repeat(2,1fr); }
  .ritual-grid   { grid-template-columns:1fr; }
  .rc { height:320px; }
  .ipad-cta-inner { min-height:420px; padding:40px; background-image:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.25) 72%, rgba(255,255,255,.08) 100%), var(--ipad-cta-bg); }
  .ipad-cta-copy .section-title { max-width:100%; }
}
@media(max-width:768px) {
  .wrap { padding:0 20px; }
  nav { height:60px; padding:0 16px; }
  nav .nav-phone { display:none; }
  .nav-cta-full { display:none; }
  .nav-cta-short { display:inline; }
  .nav-cta { padding:11px 18px !important; }
  .hero { min-height:0; margin-top:60px; }
  .hero-inner { padding:32px 20px; max-width:100%; gap:28px; }
  .hero h1 { font-size:30px; max-width:100%; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .offers-grid { grid-template-columns:repeat(2,1fr); }
  .offer-item { padding:20px 12px; }
  .section-title { font-size:28px; }
  .feature-copy { padding:40px 24px; }
  .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; }
  .contact { padding:60px 0; }
  .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; }
  .loc-grid { grid-template-columns:1fr; gap:0; }
  .faq-list { margin:40px 0 0; }
  .footer-inner { flex-direction:column; gap:14px; text-align:center; }
  .steps { grid-template-columns:1fr; gap:32px; }
  .steps::before { display:none; }
  .step { padding:0; }
  .ipad-cta { padding:56px 0; }
  .ipad-cta-inner { min-height:0; display:flex; flex-direction:column; align-items:stretch; padding:0; background:var(--white); box-shadow:0 18px 48px rgba(1,112,185,.14); }
  .ipad-cta-mobile-image { display:block; background:#e8f7f9; }
  .ipad-cta-mobile-image img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:68% center; display:block; }
  .ipad-cta-copy { width:100%; padding:28px 22px; }
  .ipad-cta-copy p { font-size:14px; }
  .ipad-cta-copy .btn { width:100%; }
  .mob-bar .btn { font-size:13px; padding:15px 10px; border-radius:50px; min-height:50px; }
}

/* No italic in any heading */
h1 em, h2 em, h3 em { font-style:normal; }
.section-title em { font-style:normal; color:var(--brand); }

/* ══════════════════════════════════════════
   HEALTH BENEFITS
   ══════════════════════════════════════════ */
.benefits { padding:80px 0; background:var(--white); }
/* Top block — 50/50 Z-pattern: intro on the left, stats stacked on the right (item A3) */
.benefits-top {
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center; margin-bottom:72px;
}
.benefits-intro { max-width:560px; }
.benefits-intro .section-title { margin-bottom:16px; }
.benefits-intro p { font-size:15px; color:var(--mid); line-height:1.75; font-weight:400; }
/* Three stats stacked vertically into a single column */
.benefits-stats {
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
.bstat {
  display:flex; align-items:baseline; gap:18px;
  padding:26px 32px;
  border-bottom:1px solid var(--border);
}
.bstat:last-child { border-bottom:none; }
.bstat-num {
  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;
}
.bstat-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text); line-height:1.4; }
/* Titled break above the 8 benefit cards (item 5WDFsY) */
.benefits-cards-head { text-align:center; max-width:600px; margin:0 auto 40px; }
.benefits-cards-head .section-title { font-size:clamp(26px,3vw,36px); margin-bottom:14px; }
.benefits-cards-head .section-sub { font-size:15px; }
/* Horizontal carousel of the 8 benefit cards (item A3) */
.benefits-carousel { position:relative; }
.benefits-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%);
}
.benefits-track::-webkit-scrollbar { height:0; display:none; }
.benefits-track:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:16px; }
.benefits-track .benefit-card {
  flex:0 0 calc((100% - 48px) / 3.4);
  scroll-snap-align:start;
}
.benefit-card {
  background:var(--white); padding:36px 28px;
  border:1px solid var(--border); border-radius:16px;
  transition:background .2s, transform .3s ease-out, box-shadow .3s ease-out;
}
.benefit-card:hover { background:var(--offwhite); transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); }
/* Prev / next controls */
.benefits-controls { display:flex; justify-content:center; gap:12px; margin-top:24px; }
.bc-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;
}
.bc-arrow:hover { background:var(--brand); border-color:var(--brand); color:var(--white); }
.bc-arrow:active { transform:scale(.94); }
.bc-arrow:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.bc-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, .ipad-cta-list,
.fc-points li, .cp-list li, .calc-points li, .fin-points li, .conv-list li, .bc-list li, .pc-features li, .ipad-cta-list 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; }
.bc-arrow[disabled] { opacity:.35; cursor:default; pointer-events:none; }
.bc-icon {
  width:44px; height:44px; border-radius:50%;
  background:rgba(1,112,185,.1);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.bc-icon svg { width:20px; height:20px; stroke:var(--brand); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.bc-title { font-size:14px; font-weight:800; color:var(--text); margin-bottom:8px; }
.bc-desc  { font-size:13px; color:var(--mid); line-height:1.65; }
.benefits-conditions {
  margin-top:56px; background:var(--offwhite);
  border-radius:16px; padding:40px 48px;
  display:grid; grid-template-columns:1fr 1fr; gap:32px 64px;
  align-items:center;
}
.bc-left h3 { font-family:'DM Sans', sans-serif; font-size:24px; font-weight:700; color:var(--text); margin-bottom:12px; }
.bc-left p  { font-size:13px; color:var(--mid); line-height:1.7; }
.bc-right { display:flex; flex-wrap:wrap; gap:10px; }
.bc-tag {
  font-size:12px; font-weight:700; letter-spacing:.5px;
  padding:8px 16px; border-radius:50px;
  border:1.5px solid var(--border); color:var(--text);
  background:var(--white);
}
@media(max-width:900px){
  .benefits-top { grid-template-columns:1fr; gap:36px; }
  .benefits-track .benefit-card { flex:0 0 calc((100% - 16px) / 2.2); }
  .bstat-num { font-size:36px; min-width:3em; }
}
@media(max-width:600px){
  .benefits-track .benefit-card { flex:0 0 85%; }
  .bstat { padding:22px 24px; }
}

/* ══════════════════════════════════════════
   ACCESSIBILITY — focus, skip link, touch targets, reduced motion
   ══════════════════════════════════════════ */
/* 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,
.feature-copy :focus-visible,
.testimonials :focus-visible,
footer :focus-visible,
.mob-bar :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-icon { min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; }

/* Touch targets ≥24×24 */
.pc-btn, .loc-btn, .btn { min-height:44px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .gi:hover img, .rc:hover img, .feature:hover .feature-photo img { transform:none; }
  .benefit-card:hover { transform:none; }
}