@font-face{font-family:'Outfit';src:url('./fonts/Outfit.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap;size-adjust:112%;}
/* Prevent 100vw full-bleed elements from creating a horizontal scrollbar (Windows scrollbar width) */
html, body { overflow-x: clip; }

*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{background:#FFFFFF;font-family:'Outfit',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#0e1116;min-height:100vh}button,input,textarea,select{font-family:inherit}a{color:inherit}img{max-width:100%;display:block}input::placeholder{color:#A8AEB6;font-weight:400;opacity:1;}
.swap-hero-image{width:100%;max-height:240px;object-fit:cover;border-radius:12px;display:block;margin-bottom:16px}@media print{.swap-hero-image{display:none !important}}
/* === peak-media-feed: scalable "Explore More" grid ===
   To add a future article/video card, drop this markup inside <div class="peak-media-feed">:
     <div class="peak-card">
       <span class="peak-pill">VIDEO</span>   (or METABOLISM, GUIDE, etc.)
       <div class="peak-card-title">Card title</div>
       <div class="peak-card-desc">Short description.</div>
     </div>
   Cards auto-render as uniform white cards with a soft shadow. */
.peak-media-feed{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.peak-media-feed{grid-template-columns:1fr 1fr}}
.peak-media-feed .peak-card{background:#fff;border:1px solid #E2E8F0;border-radius:6px;padding:14px;box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.peak-media-feed .peak-pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#2E6F4E;background:rgba(46,111,78,0.10);padding:2px 8px;border-radius:99px}
.peak-media-feed .peak-card-title{font-weight:800;font-size:16px;margin:8px 0 4px}
.peak-media-feed .peak-card-desc{font-size:13px;color:#5B6470;line-height:1.5}
.peak-video-vault{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.peak-video-vault{grid-template-columns:1fr 1fr}}
.money-input{border:1px solid #94A3B8 !important;background:#FFFFFF !important;box-shadow:0 2px 4px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03) !important;transition:border-color .15s ease, box-shadow .15s ease}
.money-input:focus{border-color:#475569 !important;outline:none}
.money-field{border:1px solid #94A3B8 !important;background:#FFFFFF !important;box-shadow:0 2px 4px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03) !important;transition:border-color .15s ease}
.money-field:focus-within{border-color:#475569 !important}
.lp-shell{max-width:1200px !important;margin:0 auto !important;width:100% !important}
@media(min-width:768px){.lp-quote-text{font-size:1.25rem !important}}

/* Product photos fill the full width of their card (fix: object-fit:contain pillarboxed them).
   Scoped to the 6 modal product images via alt; excludes the Spark spotlight + logo. */
#root img[alt^="AdvoCare"]:not([alt*="Spark"]){height:auto !important;aspect-ratio:16/10;object-fit:cover !important;}

/* Homepage redesign: crisp white canvas + more breathing room between category sections */
html, body { background:#FFFFFF !important; }
.lp-shell { background:#FFFFFF !important; }
.lp-section { margin-top:18px; }

/* Editorial polish: desktop hero spans full width (left-aligned), spotlight full-width */
@media (min-width: 768px) {
  .lp-hero > h1 { font-size: 46px !important; text-align: center !important; }
  .lp-hero .lp-hero-sub { font-size: 16px !important; text-align: center !important; }
  .lp-spotlight { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .lp-spotlight-inner > div { width: 53.333% !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; }
  .lp-bottom-quote { display: flex !important; align-items: center !important; justify-content: center !important; gap: 28px !important; }
  .lp-bottom-quote::before, .lp-bottom-quote::after { content: ""; flex: 0 0 60px; height: 3px; background: #E1C97D; }
  .lp-bottom-quote p { font-size: 22px !important; line-height: 1.4 !important; margin: 0 !important; white-space: nowrap !important; } .lp-quote-attr { font-size: 14px !important; margin-top: 8px !important; }
}

/* Product Spotlight: cream/gold standalone card (content grouped left, image + text together) */
.lp-spotlight-inner > div { background: #FFFFFF !important; border: 1px solid #EADFBE !important; padding: 18px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important; }

/* Navy header spans the full width of the screen at all times (breaks out of the centered shell) */
.lp-header { width: 100vw !important; max-width: none !important; position: static !important; top: 0 !important; z-index: 55 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }

/* Internal tool detail modals -> dark navy theme, white text */
.lp-detail { background: #03182D !important; }
/* header bar -> navy with white title */
.lp-detail [style*="sticky"] { background: #03182D !important; }
.lp-detail [style*="sticky"] h2 { color: #FFFFFF !important; }
/* all text sitting on navy (not inside a card/background element) -> white */
.lp-detail *:not(.lp-detail [style*="background"] *):not([style*="background"]) { color: #FFFFFF !important; }
/* card/background elements keep dark base text (their own inline white/gray/green still win) */
.lp-detail [style*="background"] { color: #2A2A2E; }



/* Mobile-only (<900px): softer, balanced typography + thinner accent bars */
@media (max-width: 767px) {
  .lp-section > div:first-child { border-bottom-width: 8px !important; }
  .lp-tile > div:nth-child(2) { font-weight: 500 !important; }
}

/* ── Home page polish (4 tweaks) ───────────────────────────────────────── */

/* 1. Sticky header: bar height locked at its current total (no thicker);
      logo asset scaled up so the graphic fills the bar nearly edge to edge.
      The PNG's baked-in navy padding overflows and is clipped invisibly
      by the header's overflow:hidden. */
.lp-header { height: 77px !important; }
.lp-logo { height: 109px !important; width: auto !important; max-width: none !important; }
.lp-tm { font-size: 9px !important; transform: translate(124px, -9px) !important; }
@media (min-width: 768px) {

}

/* 2. Hero breathing room below the navy header */
.lp-hero { padding-top: 36px !important; }

/* 3. Hero sub-text matches the dark headline color exactly */
.lp-hero-sub { color: #2A2A2E !important; }

/* ── Photo hero (full-bleed image + left gradient, white/gold text) ── */
.lp-hero-photo {
  position: relative !important;
  padding: 0 !important;
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-start;
  background-image: url("img/hero-venice-web.webp?v=89");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 78% bottom;
  border-radius: 16px;
  overflow: hidden;
}
.lp-hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(3,18,38,0.95) 0%, rgba(3,18,38,0.88) 22%,
    rgba(3,18,38,0.55) 42%, rgba(3,18,38,0.15) 62%, rgba(3,18,38,0.00) 80%);
}
.lp-hero-inner {
  position: relative; z-index: 2;
  padding: 36px 22px 22px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.lp-hero-photo .lp-promo-pill {
  width: 96%; max-width: 360px; margin: 0 auto 26px !important;
  justify-content: center; white-space: nowrap; font-size: 11.5px;
  background: rgba(3,18,38,0.35) !important; backdrop-filter: blur(2px);
  border-color: rgba(201,161,74,0.9) !important; color: #fff !important;
}
.lp-hero-photo h1 { color: #fff !important; text-align: left !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35); }
.lp-hero-photo h1 span { color: #E9C063 !important; }
.lp-hero-photo .lp-hero-sub {
  color: rgba(255,255,255,0.9) !important; text-align: left !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

/* Desktop: bigger framing, headline centered in left two-thirds */
@media (min-width: 768px) {
  .lp-hero-photo { min-height: 560px; }
  .lp-hero-inner { width: 66%; padding: 56px 40px; align-items: center; }
  .lp-hero-photo h1 { font-size: 46px !important; text-align: center !important; }
  .lp-hero-photo .lp-hero-sub { text-align: center !important; }
  .lp-hero-photo .lp-promo-pill { margin: 0 auto 28px !important; font-size: 15px; }
}

/* 4. Larger card titles to balance against section headers */
.lp-tile > div:nth-child(2) { font-size: 17px !important; }

/* ── Responsive test: desktop-only dark navy grid cards (mobile untouched) ── */
@media (min-width: 768px) {
  /* 1. card surface: navy with thin muted-gold border */
  .lp-tile { background: #03182D !important; border: 1px solid rgba(201,161,74,0.5) !important; padding: 18px !important; }
  /* 2. title: pure white, semi-bold, scaled up for legibility on navy */
  .lp-tile > div:nth-child(2) { color: #FFFFFF !important; font-weight: 600 !important; font-size: clamp(15px, 1.6vw, 20px) !important; }
  /* 2. icon chip + icon/chevron: gold on a soft light chip, scaled to match */
  .lp-tile > div:first-child { background: rgba(255,255,255,0.12) !important; width: 40px !important; height: 40px !important; }
  .lp-tile > div:first-child svg { stroke: #E1C97D !important; width: 21px !important; height: 21px !important; }
  .lp-tile > svg { stroke: #E1C97D !important; }
}

/* ── Hero notification pill + smooth anchor scrolling ──────────────────── */
html { scroll-behavior: smooth; }
.lp-promo-pill {
  display: flex;
  width: max-content;
  max-width: 97%;
  margin: 0 auto 26px;
  align-items: center;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid #32AEFF;
  border-radius: 9999px;
  padding: 6px 12px;
  color: #32AEFF;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.lp-promo-pill svg { flex-shrink: 0; display: block; }

/* ── Product Spotlight: global 40/60 full-bleed split (all screen sizes) ── */
/* 1. content hits the gold border everywhere */
.lp-spotlight-inner > .lp-spot-card { padding: 0 !important; overflow: hidden; }
.lp-spot-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
  align-items: stretch !important;
}
/* 2. left column: strict 40%, full-bleed photo, matched left radii */
.lp-spot-img {
  width: 40% !important;
  flex-shrink: 0 !important;
  aspect-ratio: auto !important;
  align-self: stretch;
  height: auto !important;
  border: none !important;
  border-radius: 18px 0 0 18px !important;
}
.lp-spot-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 65% center;
}
/* 3. right column: strict 60%, centered vertical stack */
.lp-spot-body {
  width: 60% !important;
  flex: none !important;
  min-width: 0 !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* 4. children (incl. both buttons) span the full 60% column minus padding */
.lp-spot-body > * { width: 100%; }
.lp-spot-body > div:first-child { justify-content: center; }
.lp-spot-title { font-size: 1.15rem !important; }
.lp-spot-review { margin: 0 12px 12px !important; }
.lp-spot-disc { text-align: center; }


/* ── Workout subtitle: stacked on mobile, single line on desktop ───────── */
.lp-wsub span { display: block; }
.lp-wsub .lp-wsub-sep { display: none; }
@media (min-width: 768px) {
  .lp-wsub span { display: inline; }
  .lp-wsub .lp-wsub-sep { display: inline; }
}

/* ── Wide-desktop hero scale, pill prominence, anchor offset ───────────── */
/* anchor lands clear of the sticky navy header */
#spark-spotlight { scroll-margin-top: 95px; }
@media (min-width: 768px) {
  /* bigger pill on PC (size only — vertical rhythm unchanged) */
  .lp-promo-pill { font-size: 15px; padding: 9px 18px; gap: 9px; }
  .lp-promo-pill svg { width: 15px; height: 15px; }
}

/* ── Locked layout constraints ─────────────────────────────────────────── */
/* Grid: 2 columns on narrow screens, 4 across on wide — no in-between */
.lp-section > div[style*="grid"] { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 768px) {
  .lp-section > div[style*="grid"] { grid-template-columns: repeat(4, 1fr) !important; gap: 28px !important; }
}
/* Desktop: card section side padding 18px -> 14px (card-to-edge, match mobile) */
@media (min-width: 900px) {
  .lp-section { padding-left: 14px !important; padding-right: 14px !important; }
}
/* Hero + Fuel sit together as one cohesive unit on desktop */
@media (min-width: 768px) {
  .lp-hero-sub { margin-bottom: 6px !important; }
  .lp-section:first-of-type { margin-top: 6px !important; }
}

/* ── LOCK-DOWN refactor ────────────────────────────────────────────────── */
/* Header cap handled in the base .lp-header rule via min() — no media query needed */
/* Cards: locked proportions in 4-column mode — no vertical stretching */
@media (min-width: 1024px) {
  .lp-tile { aspect-ratio: 2.1 / 1 !important; height: auto !important; min-height: fit-content !important; }
}

/* ── Workout modal rows: mobile legibility + tap targets ───────────────── */
@media (max-width: 767px) {
  div[role="button"] > div:nth-child(2) > div:first-child { font-weight: 700 !important; }
}
div[role="button"] > svg {
  width: 22px !important;
  height: 22px !important;
  padding: 12px;
  margin: -10px -6px -10px -4px;
  box-sizing: content-box;
}

/* Mobile-only: category tile titles bumped 19px -> 22px */
@media (max-width: 767px) {
  .lp-tile > div:nth-child(2) { font-size: 17px !important; letter-spacing: 0.02em !important; line-height: 1.4 !important; color: #03182D !important; }
  /* Mobile-only: hero subtext bumped 13px -> 15px */
  .lp-hero-sub { font-size: 15px !important; }
  /* Mobile-only: hero title bumped to 32px (bigger than Fuel 28px) */
  .lp-hero > h1 { font-size: 32px !important; }
  /* Mobile-only: tighten gap below hero so Fuel row stays put */
  .lp-hero { padding-bottom: 2px !important; }
  /* Mobile-only: uniform tile height (matches tallest title at each width) */
  .lp-tile { min-height: 122px !important; }
}
@media (max-width: 379px) {
  .lp-tile { min-height: 144px !important; }
}

/* Header logo fit: flex-centered; mobile 77px bar = 8px pad + 61px logo; desktop 92px bar = 12px pad + 68px logo */
.lp-header { display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 0 !important; box-sizing: border-box !important; }
.lp-header .lp-logo { height: auto !important; max-height: 66px !important; width: auto !important; max-width: 380px !important; object-fit: contain !important; display: block !important; transform: translateX(-16px) !important; }
@media (min-width: 768px) {
  .lp-header { height: 92px !important; padding: 6px 0 !important; }
  .lp-header .lp-logo { max-height: 85px !important; transform: translateX(-21px) !important; }
}

/* Balance spacing around Product Spotlight: equal gap above (from Money) and below (to quote) */
.lp-spotlight { margin-top: 32px !important; }
.lp-bottom-quote { margin-top: 32px !important; }

/* Hero subtext: break before "mindset" on mobile only */
.lp-sub-break { display: none; }
@media (max-width: 767px) { .lp-sub-break { display: inline; } }

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD HERO — fixed 620px container, image acts as a cropped background.
   Image is used exactly as provided (navy-left + sunset-right + subtle white
   fade baked in). No new gradient / overlay / CSS fade. Hero height is fixed
   so the image's natural height does NOT push Fuel down behind a big white gap.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero container: height follows the image's aspect ratio so the WHOLE image
   shows — navy top, the people, AND the baked-in white fade at the bottom.
   A fixed height can't contain this 0.463-aspect image without hiding either
   the people or the fade, so we scale to the image and let Fuel begin exactly
   where the fade ends. Image is used as-is; no new gradient/overlay/CSS fade. */
.lp-hero-dash {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 452 / 646 !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.lp-hero-dash::before { content: none !important; }   /* no inherited overlay */

/* Image fills the aspect-ratio box exactly (no vertical crop) */
.lp-hero-dash-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  margin: 0 !important;
}

/* Spark pill — floats over the image, blended (translucent, white text) */
.lp-spark-pill {
  position: absolute !important;
  top: 22px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  height: 36px !important;
  margin: 0 !important;
  z-index: 2 !important;
  background: rgba(3,24,45,0.60) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap !important;
}
/* leading icon — white */
.lp-spark-pill > svg { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; fill: #438271 !important; }
/* trailing arrow — white */
.lp-spark-pill > span[aria-hidden] { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; color: #E1C97D !important; }
.lp-spark-chev { width: 20px !important; height: 20px !important; }
/* text span — content-sized so the pill hugs it */
.lp-spark-pill > span:not([aria-hidden]) {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  color: #FFFFFF !important;
}
@media (max-width: 389px) {
  .lp-spark-pill { padding-left: 12px !important; padding-right: 12px !important; }
  .lp-spark-pill > span:not([aria-hidden]) { font-size: 12px !important; }
}

/* Hero text block */
.lp-hero-dash-text {
  position: absolute;
  top: 100px;
  left: 28px;
  right: 24px;
  z-index: 2;
  max-width: 330px;
  text-align: left;
}
.lp-hero-dash-h1 { margin: 0; padding: 0; font-family: 'Outfit', system-ui, sans-serif; }

/* Title line 1 — white */
.lp-hero-dash-l1 {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.8px;
  color: #FFFFFF;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.6);
}
/* Superscript "HQ" in hero headline — matches logo treatment (smaller + raised) */
.lp-hero-hq {
  font-size: 0.6em;
  vertical-align: 0.5em;
  letter-spacing: 0.5px;
  font-weight: 800;
}
/* HQ rendered from the logo letterforms (matches header, fixes the odd Q) */
.lp-hero-hq-img {
  height: 0.38em;
  width: auto;
  vertical-align: 0.33em;
  margin-left: 0.04em;
  display: inline-block;
}
/* Title line 2 — gold (solid #E1C97D per spec) */
.lp-hero-dash-l2 {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.8px;
  color: #FFFFFF;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.6);
}
/* Subheadline */
.lp-hero-dash-sub {
  margin: 16px 0 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
  max-width: 330px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.7);
}

/* Fuel section starts immediately after the hero, 28px gutter */
.lp-hero-row + .lp-section {
  margin-top: -54px !important;   /* overlap into the white fade so Fuel starts as the image turns white */
  position: relative !important;
  z-index: 2 !important;
  padding: 0 14px 0 14px !important;
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD HERO — DESKTOP (≥768px)
   Locked vertical: fixed height that does NOT grow with width (overrides the
   portrait aspect-ratio used on mobile). The WIDE landscape image fills it via
   cover, so widening the window just reveals the image — height never changes.
   Pill + text overlaid top-left, left-aligned. Mobile (<768px) untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .lp-hero-row .lp-hero-dash,
  .lp-hero-dash {
    aspect-ratio: unset !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    background-image: url("img/hero-dashboard-desktop-1500.webp?v=106"),
      linear-gradient(180deg, #011530 0%, #011530 70%, #1C2E46 78%, #586474 85%, #A1A8B2 90%, #E9EAEC 95%, #FDFDFD 100%) !important;
    background-size: auto 400px, 100% 100% !important;
    background-position: right center, left center !important;   /* image pinned right; gradient fills the rest (navy+fade matches image) */
    background-repeat: no-repeat, no-repeat !important;
  }
  .lp-hero-dash-img { display: none !important; }

  /* ── Hero full-bleed to viewport (desktop), matching the header. Image is
     pinned right at locked scale (no zoom); widening the viewport reveals more
     navy on the left (curtain). ── */
  .lp-hero-row {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .lp-spark-pill {
    top: 28px !important;
    left: 56px !important;
    right: auto !important;
    transform: none !important;
    height: 32px !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .lp-spark-pill > svg { width: 18px !important; height: 18px !important; fill: #438271 !important; }
  .lp-spark-pill > span[aria-hidden] { color: #E1C97D !important; }
  .lp-spark-chev { width: 23px !important; height: 23px !important; }
  .lp-spark-pill > span:not([aria-hidden]) { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; color: #FFFFFF !important; }

  .lp-hero-dash-text {
    top: 112px !important;
    left: 56px !important;
    right: auto !important;
    max-width: 560px !important;
    text-align: left !important;
  }
  .lp-hero-dash-l1 { font-size: 40px !important; line-height: 1.1 !important; letter-spacing: normal !important; text-shadow: 0 2px 5px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.6) !important; }
  .lp-hero-dash-l2 { font-size: 40px !important; line-height: 1.1 !important; letter-spacing: normal !important; text-shadow: 0 2px 5px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.6) !important; }
  .lp-hero-dash-sub { font-size: 18px !important; line-height: 1.5 !important; max-width: 420px !important; margin-top: 16px !important; text-shadow: none !important; }

  /* Fuel begins right after the locked banner (no overlap needed at fixed height) */
  .lp-hero-row + .lp-section { margin-top: 0 !important; }
}


/* ── Mobile cards: navy (match header + desktop cards), 3:2 ratio, 14px gap ── */
@media (max-width: 767px) {
  .lp-tile {
    background: #03182D !important;
    border: 1px solid rgba(201,161,74,0.5) !important;
    aspect-ratio: 3 / 2 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* title: white */
  .lp-tile > div:nth-child(2) { color: #FFFFFF !important; }
  /* icon chip: soft light, gold icon */
  .lp-tile > div:first-child { background: rgba(255,255,255,0.12) !important; }
  .lp-tile > div:first-child svg { stroke: #E1C97D !important; }
  /* chevron arrow gold (already gold, ensure) */
  .lp-tile > svg { stroke: #E1C97D !important; }
}

/* Detail sheet opens full-height, flush to the top of the viewport */
.lp-detail { max-height: 100vh !important; max-height: 100dvh !important; }
@media (min-width: 900px) { .lp-detail { max-height: 100vh !important; max-height: 100dvh !important; } }

/* Mobile: tighten side padding 18px -> 14px on main content blocks */
@media (max-width: 899px) {
  .lp-section, .lp-spotlight-inner, .lp-bottom-quote, .lp-foot,
  .lp-shell [style*="28px 18px"], .lp-shell [style*="40px 18px"],
  .lp-shell [style*="18px 18px 10px"], .lp-shell [style*="18px 18px 40px"] { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Title block: Outfit at natural proportions (no size-adjust) to match the PDF look */
@font-face{font-family:'OutfitNatural';src:url('./fonts/Outfit.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap;}

/* Section titles (Fuel/Move/Mind/Money) indented to line up with the tile icon */
.lp-sec-title { padding-left: 15px; }
@media (min-width: 768px) { .lp-sec-title { padding-left: 19px; } }

/* ── MOBILE (<768px): tighter padding inside tile detail sheets ─────────── */
@media (max-width: 767.98px) {
  /* Workout exercise dropdown — remove side padding so images/content go edge-to-edge */
  .lp-detail [style*="6px 12px 12px"] { padding-left: 0 !important; padding-right: 0 !important; }
  /* Halve the internal padding on content cards inside tiles */
  .lp-detail [style*="padding: 14px"] { padding: 7px !important; }
  .lp-detail [style*="padding: 16px"] { padding: 8px !important; }
  .lp-detail [style*="padding: 12px"] { padding: 6px !important; }
  .lp-detail [style*="padding: 9px"]  { padding: 4.5px !important; }
}

/* auto-fs: free the fixed timer overlay from the modal's transform containing-block */
.lp-detail:has(.lp-tcanvas[data-fs="1"]){transform:none!important}


/* ════════════════════════════════════════════════════════════════════════
   SET 1 — Global dark background + abstract navy/gold hero  (LOOK ONLY)
   ════════════════════════════════════════════════════════════════════════ */
html, body { background: linear-gradient(180deg,#03182D 0%,#041B33 48%,#03182D 100%) !important; }
body { color: #FFFFFF; }

/* logo header: navy band, centered, ~92px */
.lp-header { background:#03182D !important; display:flex !important; align-items:center !important; justify-content:center !important; min-height:92px !important; }

/* hide the baked-in beach photo */
.lp-hero-dash.lp-hero-abstract .lp-hero-dash-img { display:none !important; }

/* hero container: fixed height, dark gradient, gold bottom border */
.lp-hero-dash.lp-hero-abstract {
  position:relative !important; aspect-ratio:auto !important;
  height:335px !important; min-height:0 !important; max-height:none !important;
  background:linear-gradient(135deg,#03182D 0%,#061F3A 52%,#020D19 100%) !important;
  border-radius:0 !important; border-bottom:1px solid rgba(216,184,90,.45) !important; overflow:hidden !important;
}
.lp-hero-dash.lp-hero-abstract::before { content:none !important; }

/* right-side abstract peak (SVG-as-bg + glow), plus dot pattern */
.lp-hero-abstract .lp-hd-peak {
  position:absolute; right:-26%; bottom:0; width:90%; height:100%; pointer-events:none; z-index:1; opacity:.42;
  background-image: radial-gradient(circle at var(--fx,62%) var(--fy,19%), rgba(255,250,232,.48) 0%, rgba(242,214,142,.28) 2.2%, rgba(230,202,112,.08) 6%, transparent 10.5%), radial-gradient(circle at var(--fx,62%) var(--fy,19%), rgba(226,199,110,.21) 0%, rgba(226,199,110,.08) 18%, transparent 44%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27xMaxYMax%20slice%27%3E%3Cpolyline%20points%3D%270%2C322%20130%2C232%20250%2C272%20380%2C82%20462%2C172%20600%2C58%27%20fill%3D%27none%27%20stroke%3D%27rgba%28229%2C201%2C109%2C0.28%29%27%20stroke-width%3D%271%27%2F%3E%3Cpolyline%20points%3D%270%2C360%20140%2C250%20262%2C300%20380%2C120%20470%2C210%20600%2C92%27%20fill%3D%27none%27%20stroke%3D%27rgba%28233%2C204%2C111%2C0.68%29%27%20stroke-width%3D%271.4%27%2F%3E%3Cpolyline%20points%3D%270%2C400%20150%2C300%20270%2C340%20380%2C182%20480%2C250%20600%2C160%27%20fill%3D%27none%27%20stroke%3D%27rgba%28229%2C201%2C109%2C0.28%29%27%20stroke-width%3D%271.2%27%2F%3E%3Cpolyline%20points%3D%27196%2C400%20380%2C140%20560%2C262%27%20fill%3D%27none%27%20stroke%3D%27rgba%2847%2C207%2C144%2C0.69%29%27%20stroke-width%3D%271.3%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat; background-position:center,center,right bottom; background-size:cover,cover,cover;
}
.lp-hero-abstract .lp-hd-peak::after {
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:radial-gradient(rgba(226,199,110,.16) 1px, transparent 1px); background-size:16px 16px;
}

/* inner container: centered max-width, vertical-centered */
.lp-hero-abstract .lp-hd-inner {
  position:relative; z-index:2; max-width:1220px; margin:0 auto; height:100%; padding:0 22px;
  display:flex; flex-direction:column; justify-content:center;
}

/* pill -> in-flow above headline */
.lp-hero-abstract .lp-spark-pill {
  position:static !important; transform:none !important; top:auto !important; left:auto !important; right:auto !important;
  width:-moz-fit-content !important; width:fit-content !important; max-width:calc(100vw - 44px) !important;
  height:30px !important; margin:0 0 18px 0 !important; padding:0 16px !important;
  border:1px solid rgba(226,199,110,.55) !important; background:rgba(3,24,45,.72) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-radius:999px !important; color:#FFFFFF !important; box-shadow:none !important;
}
.lp-hero-abstract .lp-spark-pill > svg { fill:#35C889 !important; }
.lp-hero-abstract .lp-spark-pill > span[aria-hidden] { color:#E2C76E !important; }
.lp-hero-abstract .lp-spark-pill > span:not([aria-hidden]) { font-size:11.5px !important; font-weight:700 !important; color:#FFFFFF !important; letter-spacing:0 !important; }

/* headline + subtext -> static inside inner, subtle shadow */
.lp-hero-abstract .lp-hero-dash-text { position:static !important; top:auto !important; left:auto !important; right:auto !important; max-width:470px !important; text-align:left !important; }
.lp-hero-abstract .lp-hero-dash-h1 { margin:0 !important; }
.lp-hero-abstract .lp-hero-dash-l1, .lp-hero-abstract .lp-hero-dash-l2 {
  font-size:34px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:-.03em !important;
  color:#FFFFFF !important; text-shadow:0 3px 12px rgba(0,0,0,.35) !important;
}
.lp-hero-abstract .lp-hero-dash-sub {
  margin:14px 0 0 0 !important; font-size:15.5px !important; line-height:1.45 !important; font-weight:400 !important;
  color:rgba(255,255,255,.84) !important; max-width:390px !important; text-shadow:none !important;
}

/* bottom fade */
.lp-hero-abstract .lp-hd-fade { position:absolute; left:0; right:0; bottom:0; height:70px; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent 0%, #03182D 100%); }

/* old image had a white fade Fuel overlapped into; neutralize so Fuel sits below the new hero */
.lp-hero-row + .lp-section { margin-top:0 !important; }

/* desktop */
@media (min-width:768px) {
  .lp-hero-dash.lp-hero-abstract { height:390px !important; min-height:390px !important; max-height:390px !important; background:linear-gradient(135deg,#03182D 0%,#061F3A 52%,#020D19 100%) !important; }
  .lp-hero-abstract .lp-hd-inner { padding:0 36px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
  .lp-hero-abstract .lp-hd-peak { right:0; width:62%; opacity:1; }
  .lp-hero-abstract .lp-spark-pill { height:34px !important; margin-bottom:34px !important; max-width:520px !important; }
  .lp-hero-abstract .lp-spark-pill > span:not([aria-hidden]) { font-size:14px !important; }
  .lp-hero-abstract .lp-hero-dash-l1, .lp-hero-abstract .lp-hero-dash-l2 { font-size:46px !important; line-height:.98 !important; }
  .lp-hero-abstract .lp-hero-dash-sub { font-size:18px !important; margin-top:18px !important; max-width:390px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   SET 2 — Dark dashboard bands + compact glass tiles  (LOOK ONLY)
   ════════════════════════════════════════════════════════════════════════ */

/* reveal the dark page background behind the content wrapper */
.lp-shell { background: transparent !important; }

/* remove the old thick pale-gold divider bars */
.lp-section > div:not(.lp-sec-head):not([style*="grid"]) { display: none !important; }

/* section band */
.lp-section {
  max-width: none !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(226,199,110,.045), transparent 32%),
    rgba(3,24,45,.36) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(226,199,110,.08) !important;
  padding: 30px 24px 34px !important;
  margin: 0 !important;
  position: relative !important;
}
.lp-hero-row + .lp-section { margin-top: 0 !important; }

/* soft fading section divider (replaces hard full-width gold rule) */
.lp-section::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(226,199,110,.18) 10%, rgba(226,199,110,.32) 50%, rgba(226,199,110,.18) 90%, transparent 100%);
}

/* header: circular badge + (title / subtitle) */
.lp-sec-head { display: grid !important; grid-template-columns: 76px 1fr !important; column-gap: 20px !important; align-items: center !important; margin-bottom: 20px !important; }
.lp-sec-badge { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(226,199,110,.75); background: rgba(6,31,58,.72); display: flex; align-items: center; justify-content: center; }
.lp-sec-badge svg { color: #E2C76E !important; stroke: #E2C76E !important; width: 30px; height: 30px; }
.lp-section .lp-sec-title { color: #FFFFFF !important; font-size: 31px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -.02em !important; margin: 0 !important; padding-left: 0 !important; }
.lp-sec-sub { color: #E2C76E !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; margin-top: 8px !important; }

/* tile grid container */
.lp-section > div[style*="grid"] { gap: 28px !important; margin-left: 96px !important; margin-right: 0 !important; }

/* glass tiles */
.lp-section .lp-tile {
  display: grid !important; grid-template-columns: 44px 1fr 22px !important; align-items: center !important; column-gap: 14px !important; gap: 0 !important; flex-direction: unset !important;
  height: 97px !important; min-height: 97px !important; max-height: 97px !important; aspect-ratio: auto !important; position: relative !important; overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.040) 34%, rgba(3,24,45,.78) 100%),
    linear-gradient(180deg, rgba(6,31,58,.88) 0%, rgba(3,24,45,.86) 100%) !important;
  border: 1px solid rgba(226,199,110,.18) !important; border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 10px 24px rgba(0,0,0,.22) !important;
  padding: 18px !important;
}
/* satin shine */
.lp-section .lp-tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 18%, transparent 48%);
  opacity: .75;
}
.lp-section .lp-tile > div:first-child { width: 38px !important; height: 38px !important; border-radius: 10px !important; background: linear-gradient(145deg, rgba(226,199,110,.13), rgba(255,255,255,.045)) !important; border: 1px solid rgba(226,199,110,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important; align-self: center !important; }
.lp-section .lp-tile > div:first-child svg { stroke: #E2C76E !important; color: #E2C76E !important; width: 22px !important; height: 22px !important; opacity: .92 !important; }
.lp-section .lp-tile > div:nth-child(2) { color: #FFFFFF !important; font-size: 15.5px !important; font-weight: 750 !important; line-height: 1.18 !important; letter-spacing: -.01em !important; padding-right: 0 !important; }
.lp-section .lp-tile > svg { position: static !important; top: auto !important; right: auto !important; justify-self: end !important; align-self: center !important; color: #8FE8AF !important; stroke: #8FE8AF !important; opacity: .95 !important; width: 22px !important; height: 22px !important; transition: transform .18s ease, color .18s ease !important; }

/* hover (desktop pointer only) */
@media (hover: hover) and (pointer: fine) {
  .lp-section .lp-tile:hover { transform: translateY(-2px) !important; border-color: rgba(226,199,110,.30) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.055) 34%, rgba(3,24,45,.76) 100%),
      linear-gradient(180deg, rgba(7,38,70,.90) 0%, rgba(3,24,45,.86) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.24),
      0 15px 30px rgba(0,0,0,.30),
      0 0 18px rgba(53,200,137,.07) !important; }
  .lp-section .lp-tile:hover > svg { transform: translateX(3px) !important; }
}

/* desktop: 4 columns */
@media (min-width: 768px) {
  .lp-section > div[style*="grid"] { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 28px !important; margin-left: 96px !important; }
}

/* tablet */
@media (max-width: 900px) {
  .lp-section > div[style*="grid"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 26px !important; margin-left: 82px !important; }
  .lp-section .lp-tile { height: 88px !important; min-height: 88px !important; max-height: 88px !important; }
}

/* mobile */
@media (max-width: 640px) {
  .lp-section { padding: 24px 14px 28px !important; }
  .lp-sec-head { grid-template-columns: 46px 1fr !important; column-gap: 12px !important; margin-bottom: 14px !important; }
  .lp-sec-badge { width: 42px; height: 42px; }
  .lp-sec-badge svg { width: 22px; height: 22px; }
  .lp-section .lp-sec-title { font-size: 27px !important; }
  .lp-sec-sub { font-size: 10.5px !important; letter-spacing: .055em !important; margin-top: 6px !important; }
  .lp-section > div[style*="grid"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px 18px !important; margin-left: 0 !important; margin-right: 0 !important; }
  .lp-section .lp-tile {
    height: 82px !important; min-height: 82px !important; max-height: 82px !important; border-radius: 6px !important; padding: 11px !important;
    grid-template-columns: 1fr 18px !important; grid-template-rows: 28px 1fr !important; column-gap: 6px !important; row-gap: 7px !important; align-items: start !important;
  }
  .lp-section .lp-tile > div:first-child { width: 28px !important; height: 28px !important; border-radius: 8px !important; grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; }
  .lp-section .lp-tile > div:first-child svg { width: 16px !important; height: 16px !important; }
  .lp-section .lp-tile > svg { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; width: 16px !important; height: 16px !important; }
  .lp-section .lp-tile > div:nth-child(2) { grid-column: 1 / span 2 !important; grid-row: 2 !important; font-size: 13.3px !important; line-height: 1.15 !important; font-weight: 750 !important; align-self: end !important; }
}

/* very narrow */
@media (max-width: 340px) {
  .lp-section > div[style*="grid"] { grid-template-columns: 1fr !important; }
  .lp-section .lp-tile { height: 72px !important; min-height: 72px !important; max-height: 72px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   CLEANUP PASS — mobile hero/section refinements + desktop tile sizing
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* hero: tighter header + shorter hero, content nudged up, Fuel starts higher */
  .lp-header { min-height: 72px !important; }
  .lp-hero-dash.lp-hero-abstract { height: 300px !important; }
  .lp-hero-abstract .lp-hd-inner { justify-content: center !important; padding-bottom: 22px !important; }
  .lp-hero-abstract .lp-spark-pill { height: 28px !important; }
  .lp-hero-abstract .lp-spark-pill > span:not([aria-hidden]) { font-size: 10.8px !important; }
  .lp-hero-abstract .lp-hero-dash-l1, .lp-hero-abstract .lp-hero-dash-l2 { font-size: 32px !important; }
  .lp-hero-abstract .lp-hero-dash-sub { font-size: 15px !important; }
  .lp-hero-abstract .lp-hd-peak { opacity: .48 !important; --fx:58%; --fy:32%; }
  /* section subtitles: smaller, tighter tracking, Move wraps with comfortable line-height */
  .lp-sec-sub { font-size: 10px !important; letter-spacing: .045em !important; line-height: 1.25 !important; }
}

/* desktop tiles (4-col view): slightly taller, slightly larger title */
@media (min-width: 901px) {
  .lp-section .lp-tile { height: 96px !important; min-height: 96px !important; max-height: 96px !important; }
  .lp-section .lp-tile > div:nth-child(2) { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   SET 3 — Lower page: spotlight / Browse / quote / save / footer (LOOK ONLY)
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Product Spotlight ---- */
.lp-spotlight.lp-spotlight-inner { max-width: 980px !important; margin: 34px auto 28px !important; padding: 0 14px !important; }
.lp-spotlight-inner > .lp-spot-card {
  width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  background: linear-gradient(145deg, rgba(6,31,58,.92), rgba(3,24,45,.88)) !important;
  border: 1px solid rgba(226,199,110,.42) !important; border-radius: 15px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;
}
.lp-spotlight-inner .lp-spot-row { display: grid !important; grid-template-columns: 310px 1fr !important; gap: 0 !important; margin: 0 !important; align-items: stretch !important; }
.lp-spotlight-inner .lp-spot-img { width: auto !important; min-height: 210px !important; aspect-ratio: auto !important; height: auto !important; border: none !important; border-radius: 0 !important; background: #061F3A !important; align-self: stretch !important; }
.lp-spotlight-inner .lp-spot-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.lp-spotlight-inner .lp-spot-body {
  width: auto !important; flex: none !important; padding: 28px 34px !important; text-align: left !important;
  display: grid !important; grid-template-columns: 1fr 260px !important; column-gap: 28px !important; align-items: center !important;
}
.lp-spotlight-inner .lp-spot-body > div:first-child { grid-column: 1 !important; justify-content: flex-start !important; margin-bottom: 10px !important; }
.lp-spotlight-inner .lp-spot-body > div:first-child span { color: #8FE8AF !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .09em !important; }
.lp-spotlight-inner .lp-spot-title { grid-column: 1 !important; color: #FFFFFF !important; font-size: 24px !important; line-height: 1.15 !important; font-weight: 800 !important; margin: 0 0 10px !important; text-align: left !important; }
.lp-spotlight-inner .lp-spot-body > p:first-of-type { grid-column: 1 !important; color: rgba(255,255,255,.68) !important; font-size: 15px !important; line-height: 1.4 !important; text-align: left !important; }
.lp-spotlight-inner .lp-spot-btns { grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: center !important; margin-top: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.lp-spotlight-inner .lp-spot-btns > button, .lp-spotlight-inner .lp-spot-btns > a {
  width: 100% !important; height: 44px !important; border-radius: 9px !important; padding: 0 14px !important;
  border: 1px solid rgba(226,199,110,.58) !important; background: rgba(3,24,45,.56) !important; color: #FFFFFF !important;
  font-size: 14px !important; font-weight: 750 !important; justify-content: space-between !important; margin: 0 !important;
}
.lp-spotlight-inner .lp-spot-btns > button svg, .lp-spotlight-inner .lp-spot-btns > a svg { color: #35C889 !important; stroke: #35C889 !important; }
.lp-spotlight-inner .lp-spot-disc { grid-column: 2 !important; color: rgba(255,255,255,.62) !important; font-size: 12px !important; line-height: 1.35 !important; margin-top: 8px !important; text-align: left !important; }
/* review panel (when expanded) -> dark */
.lp-spotlight-inner .lp-spot-review { background: #016df8 !important; border-color: rgba(226,199,110,.3) !important; }
.lp-spotlight-inner .lp-spot-review div { color: #FFFFFF !important; }
.lp-spotlight-inner .lp-spot-review strong { color: #FFFFFF !important; }

/* ---- Browse AdvoCare ---- */
.lp-browse { max-width: 980px !important; margin: 22px auto 34px !important; padding: 0 14px !important; text-align: center !important; }
.lp-browse > div:nth-child(1) { color: #E2C76E !important; font-size: 20px !important; font-weight: 850 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 8px !important; }
.lp-browse > div:nth-child(2) { color: rgba(255,255,255,.66) !important; font-size: 14px !important; margin-bottom: 18px !important; }
.lp-browse > div:nth-child(3) { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 10px !important; }
.lp-browse > div:nth-child(3) > a {
  height: 42px !important; border-radius: 8px !important; padding: 0 12px !important; justify-content: space-between !important;
  border: 1px solid rgba(226,199,110,.50) !important; background: rgba(3,24,45,.48) !important; color: #FFFFFF !important;
  font-size: 13.5px !important; font-weight: 750 !important;
}
.lp-browse > div:nth-child(3) > a svg { color: #E2C76E !important; stroke: #E2C76E !important; opacity: .9 !important; }

/* ---- Quote band ---- */
.lp-bottom-quote { background: rgba(255,255,255,.06) !important; border-top: 1px solid rgba(226,199,110,.22) !important; border-bottom: 1px solid rgba(226,199,110,.22) !important; padding: 28px 20px !important; margin-top: 34px !important; }
.lp-bottom-quote p { color: rgba(255,255,255,.78) !important; font-size: 22px !important; font-style: italic !important; line-height: 1.35 !important; }
.lp-bottom-quote .lp-quote-attr { color: rgba(255,255,255,.48) !important; font-size: 13px !important; margin-top: 8px !important; }

/* ---- Save to Desktop button ---- */
.lp-save-wrap { margin: 0 !important; }
.lp-save-wrap > button { margin: 30px auto !important; height: 42px !important; border-radius: 999px !important; background: #020D19 !important; border: 1px solid rgba(226,199,110,.45) !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 800 !important; padding: 0 22px !important; }

/* ---- Footer ---- */
.lp-foot { background: #03182D !important; border-top: 2px solid rgba(226,199,110,.60) !important; padding: 34px 20px 46px !important; margin-top: 34px !important; }
.lp-foot > div:nth-child(1), .lp-foot > div:nth-child(2) { display: none !important; }
.lp-foot div, .lp-foot p { color: rgba(255,255,255,.50) !important; }
.lp-foot > div:nth-child(3) { color: #FFFFFF !important; font-size: 14px !important; font-weight: 800 !important; }
.lp-foot p { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; font-size: 11px !important; line-height: 1.55 !important; }

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .lp-spotlight-inner .lp-spot-row { grid-template-columns: 240px 1fr !important; }
  .lp-spotlight-inner .lp-spot-body { grid-template-columns: 1fr !important; row-gap: 18px !important; }
  .lp-spotlight-inner .lp-spot-btns { grid-column: 1 !important; grid-row: auto !important; }
  .lp-spotlight-inner .lp-spot-disc { grid-column: 1 !important; }
  .lp-browse > div:nth-child(3) { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .lp-spotlight.lp-spotlight-inner { margin: 28px auto 24px !important; width: calc(100% - 28px) !important; padding: 0 !important; }
  .lp-spotlight-inner .lp-spot-row { grid-template-columns: 1fr !important; }
  .lp-spotlight-inner .lp-spot-img { width: 100% !important; height: 320px !important; min-height: 0 !important; }
  .lp-spotlight-inner .lp-spot-img img { object-position: center 18% !important; }
  .lp-spotlight-inner .lp-spot-body { grid-template-columns: 1fr !important; padding: 22px !important; row-gap: 14px !important; }
  .lp-spotlight-inner .lp-spot-title { font-size: 21px !important; }
  .lp-browse { margin: 22px 14px 30px !important; }
  .lp-browse > div:nth-child(3) { grid-template-columns: repeat(2, 1fr) !important; gap: 9px !important; }
  .lp-browse > div:nth-child(3) > a { height: 40px !important; font-size: 12.5px !important; }
  .lp-bottom-quote p { font-size: 18px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   LOWER-PAGE POLISH PASS 2 (LOOK ONLY)
   ════════════════════════════════════════════════════════════════════════ */

/* Quote band -> darker navy, stronger gold rules */
.lp-bottom-quote { background: rgba(6,31,58,.72) !important; border-top: 1px solid rgba(226,199,110,.28) !important; border-bottom: 1px solid rgba(226,199,110,.28) !important; }
.lp-bottom-quote p { color: rgba(255,255,255,.78) !important; }
.lp-bottom-quote .lp-quote-attr { color: rgba(255,255,255,.52) !important; }

/* Browse AdvoCare -> a touch more contrast */
.lp-browse > div:nth-child(2) { color: rgba(255,255,255,.68) !important; }
.lp-browse > div:nth-child(3) > a { border: 1px solid rgba(226,199,110,.46) !important; color: rgba(255,255,255,.88) !important; }
.lp-browse > div:nth-child(3) > a svg { color: #E2C76E !important; stroke: #E2C76E !important; }

/* Footer -> more readable name + lines */
.lp-foot > div:nth-child(3) { color: #FFFFFF !important; }
.lp-foot > div:nth-child(4) { color: rgba(255,255,255,.56) !important; }
.lp-foot p { color: rgba(255,255,255,.48) !important; }

/* Product Spotlight -> title +1px, buttons slightly more readable */
.lp-spotlight-inner .lp-spot-title { font-size: 25px !important; }
.lp-spotlight-inner .lp-spot-btns > button, .lp-spotlight-inner .lp-spot-btns > a { color: #FFFFFF !important; border: 1px solid rgba(226,199,110,.50) !important; }
@media (max-width: 640px) { .lp-spotlight-inner .lp-spot-title { font-size: 22px !important; } }

/* First dashboard section (Fuel): restore comfortable space under the hero divider.
   An older rule forced padding-top:0, leaving Fuel touching the gold line. Top only. */
.lp-hero-row + .lp-section { padding-top: 26px !important; }
@media (max-width: 640px) { .lp-hero-row + .lp-section { padding-top: 17px !important; } }

/* ════════════════════════════════════════════════════════════════════════
   SET 4 — Modal shell polish (navy/gold). Shell + light reusable only.
   Inner content / calculators / PDFs / videos / cards untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* Overlay */
.lp-ov { background: rgba(0,0,0,.62) !important; -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important; }

/* Container (navy already set earlier) -> gold border + shadow + clip */
.lp-detail { box-sizing: border-box !important; border: 1px solid rgba(226,199,110,.42) !important; box-shadow: 0 24px 70px rgba(0,0,0,.48) !important; }
.lp-detail > div { box-sizing: border-box !important; }
.lp-detail img, .lp-detail video, .lp-detail iframe { max-width: 100% !important; }

/* Desktop: centered card */
@media (min-width: 900px) {
  .lp-detail {
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: auto !important;
    width: min(920px, calc(100vw - 48px)) !important; max-width: min(920px, calc(100vw - 48px)) !important;
    height: -moz-max-content !important; height: max-content !important;
    max-height: calc(100vh - 36px) !important; max-height: calc(100dvh - 36px) !important;
    border-radius: 16px !important; overflow: hidden !important; overflow-y: auto !important;
  }
}

/* Mobile / small: full-screen */
@media (max-width: 899px) {
  .lp-detail {
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important;
    border-radius: 0 !important; border-left: none !important; border-right: none !important; overflow-x: hidden !important;
  }
}

/* Header */
.lp-detail > div:first-child { background: #03182D !important; border-bottom: 1px solid rgba(226,199,110,.34) !important; padding: 18px 24px !important; min-height: 72px !important; }
@media (max-width: 640px) { .lp-detail > div:first-child { padding: 18px 22px !important; } }

/* Drag handle (kept centered at top of header) */
.lp-detail > div:first-child > div:first-child { width: 54px !important; height: 5px !important; border-radius: 999px !important; background: rgba(255,255,255,.78) !important; }

/* Title */
.lp-detail > div:first-child h2 { color: #FFFFFF !important; font-size: 30px !important; line-height: 1.05 !important; font-weight: 850 !important; letter-spacing: -0.025em !important; margin: 0 !important; }

/* Close button */
.lp-detail > div:first-child button { width: 54px !important; height: 54px !important; border-radius: 50% !important; background: #FFFFFF !important; color: #03182D !important; border: none !important; flex-shrink: 0 !important; }
.lp-detail > div:first-child button:hover { background: #F5E7AD !important; }
.lp-detail > div:first-child button svg { width: 22px !important; height: 22px !important; color: #03182D !important; stroke: #03182D !important; }

/* Body */
.lp-detail > div:last-child { background: #03182D !important; padding: 20px !important; }
@media (max-width: 640px) { .lp-detail > div:last-child { padding: 12px 8px 24px !important; } }
.lp-detail > div:last-child > * { max-width: 100% !important; }

/* Inputs stay white + dark (readability + tap) */
.lp-detail input, .lp-detail select, .lp-detail textarea { background: #FFFFFF !important; color: #1A1F2B !important; max-width: 100% !important; }

/* ════════════════════════════════════════════════════════════════════════
   MODAL HEADER TYPOGRAPHY CONSISTENCY (header only; same rules all modals)
   ════════════════════════════════════════════════════════════════════════ */

/* Desktop / base: title 26 / 1.08 / 850 (close button unchanged at 54px) */
.lp-detail > div:first-child h2 { font-size: 26px !important; line-height: 1.08 !important; font-weight: 850 !important; }

/* Mobile: grid header so long titles wrap without crowding the close button */
@media (max-width: 640px) {
  .lp-detail > div:first-child {
    display: grid !important; grid-template-columns: 1fr 50px !important; column-gap: 14px !important;
    align-items: center !important; padding: 16px 18px !important; min-height: 66px !important;
  }
  .lp-detail > div:first-child h2 {
    font-size: 25px !important; line-height: 1.04 !important; font-weight: 850 !important;
    letter-spacing: -0.025em !important; margin: 0 !important; max-width: 100% !important;
    overflow-wrap: normal !important; word-break: normal !important;
  }
  .lp-detail > div:first-child > div:last-child { justify-self: end !important; width: 50px !important; }
  .lp-detail > div:first-child button { width: 50px !important; height: 50px !important; font-size: 22px !important; flex-shrink: 0 !important; }
  .lp-detail > div:first-child button svg { width: 20px !important; height: 20px !important; }
}

/* Very narrow: 1fr 46px grid, smaller title + close */
@media (max-width: 360px) {
  .lp-detail > div:first-child { grid-template-columns: 1fr 46px !important; }
  .lp-detail > div:first-child h2 { font-size: 23px !important; }
  .lp-detail > div:first-child > div:last-child { width: 46px !important; }
  .lp-detail > div:first-child button { width: 46px !important; height: 46px !important; font-size: 21px !important; }
}

/* Spotlight review "Unlock 20%" pill: inverted — white pill, blue text */
.lp-spotlight-inner .lp-spot-review .pcta-unlock { color:#016df8 !important; border-color:#016df8 !important; background:#FFFFFF !important; }
.lp-spotlight-inner .lp-spot-review .pcta-unlock svg { color:#016df8 !important; stroke:#016df8 !important; }

/* ════════════════════════════════════════════════════════════════════════
   SATIN POLISH (light) — coach pill • spotlight buttons • browse pills
   Surface-only. Consistent with upgraded dashboard tiles. No blur, no thick
   bright borders, no gloss stripe. Keeps existing size/radius/typography.
   ════════════════════════════════════════════════════════════════════════ */

/* 1) Top coach pill */
.lp-hero-abstract .lp-spark-pill {
  position: relative !important; overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.025) 26%, rgba(3,24,45,.84) 100%),
    linear-gradient(180deg, rgba(6,31,58,.90) 0%, rgba(3,24,45,.88) 100%) !important;
  border: 1px solid rgba(226,199,110,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 14px rgba(0,0,0,.16) !important;
}
.lp-hero-abstract .lp-spark-pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 16%, transparent 42%);
  opacity: .60;
}

/* 2) Product spotlight action buttons */
.lp-spotlight-inner .lp-spot-btns > button,
.lp-spotlight-inner .lp-spot-btns > a {
  position: relative !important; overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 28%, rgba(3,24,45,.86) 100%),
    linear-gradient(180deg, rgba(6,31,58,.90) 0%, rgba(3,24,45,.88) 100%) !important;
  border: 1px solid rgba(226,199,110,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 7px 16px rgba(0,0,0,.16) !important;
}
.lp-spotlight-inner .lp-spot-btns > button::before,
.lp-spotlight-inner .lp-spot-btns > a::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 18%, transparent 45%);
  opacity: .55;
}
@media (hover: hover) and (pointer: fine) {
  .lp-spotlight-inner .lp-spot-btns > button:hover,
  .lp-spotlight-inner .lp-spot-btns > a:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(226,199,110,.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 10px 18px rgba(0,0,0,.22),
      0 0 12px rgba(53,200,137,.05) !important;
  }
}

/* 3) Browse AdvoCare category pills (weakest treatment) */
.lp-browse > div:nth-child(3) > a {
  position: relative !important; overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 24%, rgba(3,24,45,.88) 100%),
    linear-gradient(180deg, rgba(6,31,58,.88) 0%, rgba(3,24,45,.88) 100%) !important;
  border: 1px solid rgba(226,199,110,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 4px 10px rgba(0,0,0,.12) !important;
}
.lp-browse > div:nth-child(3) > a::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 18%, transparent 46%);
  opacity: .32;
}
@media (hover: hover) and (pointer: fine) {
  .lp-browse > div:nth-child(3) > a:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(226,199,110,.30) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 8px 14px rgba(0,0,0,.18) !important;
  }
}

/* Preserve the designed color scheme; prevent browser forced-dark auto-inversion
   (e.g. Samsung Internet forced dark mode). Does not alter any colors. */
:root { color-scheme: light only; }
html,
body { color-scheme: light only; }
#root,
.app,
main { color-scheme: light only; }

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP CONTENT-COLUMN ALIGNMENT (≥901px, 4-col only)
   One shared left edge for hero text + section titles + card grids.
   Section icons hang into the left gutter as decorative accents (negative
   margin = zero net width, so they don't push the content). Balanced right
   gutter; +~14px below each grid before the divider. Tablet/mobile untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* ONE container: shell (max-width 1200, centered) + symmetric 72px side
     padding. Hero, section headers, card rows and dividers all live in this
     same content box, so everything shares one left edge and one right edge.
     Vertical rhythm so the divider sits CENTERED between sections (not hugging
     the cards): ~52px below the last card row → divider → ~52px down to the
     next heading (44px padding + the heading's cap inset). Same for every
     section incl. Fuel, so the divider never feels attached to the cards. */
  .lp-section,
  .lp-hero-row + .lp-section {
    padding-left: 72px !important;
    padding-right: 72px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  /* grouped header: [icon] Title — icon sits at the container's left edge,
     title immediately to its right with a small gap. No far-left float. */
  .lp-section .lp-sec-head {
    display: flex !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    align-items: center !important;
  }
  .lp-section .lp-sec-badge {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 16px !important;   /* tight gap between icon and title */
  }
  .lp-section .lp-sec-headtext { flex: 1 1 auto !important; min-width: 0 !important; }

  /* card grid fills the container content box; its left edge = the icon's */
  .lp-section > div[style*="grid"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* hero shares the same container content-left at ALL desktop widths */
  .lp-hero-abstract .lp-hd-inner { max-width: 1200px !important; padding-left: 72px !important; }

  /* divider matches the card row: inset the soft gradient line to the container
     content box and drop the full-width bottom border, so every section
     boundary shows ONE line spanning exactly the card width (not the gutters). */
  .lp-section { border-bottom: 0 !important; }
  .lp-section::after { left: 72px !important; right: 72px !important; }
}

/* Mobile fix: Fuel's bottom padding was forced to 0 by the
   `.lp-hero-row + .lp-section` shorthand (~line 450), which outranks the mobile
   `.lp-section` padding on specificity. Restore it to 28px so the Fuel↔Move
   divider matches the spacing under Move/Mind/Money. Mobile only. */
@media (max-width: 640px) {
  .lp-hero-row + .lp-section { padding-bottom: 28px !important; }
}

/* Desktop: open the card modal anchored to the top of the page (not vertically centered) */
@media (min-width: 900px) {
  .lp-detail { top: 0 !important; bottom: auto !important; height: max-content !important; max-height: 100vh !important; max-height: 100dvh !important; margin: 0 auto !important; }
}

/* Header height cut a further 15% (vertical padding/min-height); X circle 20% smaller w/ larger glyph */
.lp-detail > div:first-child { padding: 12.7px 21.6px !important; min-height: 55px !important; }
.lp-detail > div:first-child button { width: 43.2px !important; height: 43.2px !important; }
.lp-detail > div:first-child button svg { width: 24px !important; height: 24px !important; }
@media (max-width: 640px) {
  .lp-detail > div:first-child { padding: 11.3px 16.2px !important; min-height: 50px !important; grid-template-columns: 1fr 40px !important; }
  .lp-detail > div:first-child > div:last-child { width: 40px !important; }
  .lp-detail > div:first-child button { width: 40px !important; height: 40px !important; }
  .lp-detail > div:first-child button svg { width: 22px !important; height: 22px !important; }
}
@media (max-width: 360px) {
  .lp-detail > div:first-child { grid-template-columns: 1fr 36.8px !important; }
  .lp-detail > div:first-child > div:last-child { width: 36.8px !important; }
  .lp-detail > div:first-child button { width: 36.8px !important; height: 36.8px !important; }
}

/* 'Why I Use' product-card dropdowns: match the Product Spotlight 'clean review' scheme */
.lp-why-review { background: #016df8 !important; border-color: rgba(226,199,110,.3) !important; }
.lp-why-review div { color: #FFFFFF !important; }
.lp-why-review strong { color: #FFFFFF !important; }
.lp-why-review .pcta-unlock { color:#016df8 !important; border-color:#016df8 !important; background:#FFFFFF !important; }
.lp-why-review .pcta-unlock svg { color:#016df8 !important; stroke:#016df8 !important; }

/* Spark card image — trim a little off the bottom */
.lp-spark-media{ aspect-ratio:780/790; overflow:hidden; }
.lp-spark-media img{ display:block; }

/* Spark energy card — desktop only: wider image left, title + stacked buttons right */
@media (min-width:1024px){
  .lp-spark-card{ display:flex; align-items:stretch; }
  .lp-spark-card > .lp-spark-media{ flex:0 0 400px; max-width:400px; align-self:flex-start; }
  .lp-spark-card > .lp-spark-right{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
  .lp-spark-right > .lp-spark-cta{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
  .lp-spark-cta > div > div:first-of-type{ flex-direction:column !important; }
  .lp-spark-cta > div > div:first-of-type > .pcta-btn{ flex:0 0 auto !important; width:100%; }
}

/* Spark band — mobile: keep card height the same; box absorbs only the crop space */
@media (max-width:1023px){
  .lp-spark-band{ padding:24px 18px !important; }
}

/* Header: arrow on the left, title centered — sizes unchanged from deploy */
@media (max-width: 9999px) {
  .lp-detail > div:first-child { display:flex !important; grid-template-columns:none !important; align-items:center !important; justify-content:flex-start !important; }
}
@media (max-width: 899px) {
  .lp-detail > div:first-child h2 { order:2 !important; position:static !important; transform:none !important; flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; text-align:center !important; margin:0 !important; padding-left:30px !important; font-size:24px !important; line-height:1.1 !important; word-spacing:0.14em !important; }
  .lp-detail > div:first-child > div:last-child { order:1 !important; }
}
@media (min-width: 900px) {
  .lp-detail > div:first-child h2 { position:absolute !important; left:50% !important; transform:translateX(-50%) !important; white-space:nowrap !important; text-align:center !important; margin:0 !important; font-size:28px !important; line-height:1.08 !important; word-spacing:0.14em !important; }
}
.lp-detail > div:first-child > div:first-child { display:none !important; }

/* Back button pill: override legacy circle rules so arrow + "Dashboard" fit */
.lp-detail > div:first-child button { width: auto !important; height: 26px !important; padding: 0 6px 0 5px !important; border-radius: 13px !important; gap: 2px !important; margin-left: 0 !important; }
.lp-detail > div:first-child button svg { width: 12px !important; height: 12px !important; }
.lp-detail > div:first-child button span { font-size: 10px !important; letter-spacing: .2px !important; }