.landing-content {
  font-family: "DM Sans", sans-serif;
  background: #ede8dc;
  color: #1c1c1a;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAILWIND UTILITY OVERRIDES — ensures original Tailwind CDN classes work
   when Next.js compiled Tailwind may override or omit them
   ═══════════════════════════════════════════════════════════════════════════ */
.landing-content section#how-it-works {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 1.5rem;
}

.landing-content .text-center { text-align: center; }
.landing-content .mx-auto { margin-left: auto; margin-right: auto; }
.landing-content .mb-5 { margin-bottom: 1.25rem; }
.landing-content .mb-12 { margin-bottom: 3rem; }
.landing-content .mb-14 { margin-bottom: 3.5rem; }
.landing-content .w-full { width: 100%; }
.landing-content .max-w-4xl { max-width: 56rem; }
.landing-content .max-w-5xl { max-width: 64rem; }
.landing-content .max-w-6xl { max-width: 72rem; }
.landing-content .grid { display: grid; }
.landing-content .gap-5 { gap: 1.25rem; }
.landing-content .gap-4 { gap: 1rem; }
.landing-content .gap-8 { gap: 2rem; }
.landing-content .flex { display: flex; }
.landing-content .flex-col { flex-direction: column; }
.landing-content .flex-wrap { flex-wrap: wrap; }
.landing-content .items-center { align-items: center; }
.landing-content .justify-center { justify-content: center; }
.landing-content .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.landing-content .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.landing-content .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.landing-content .pt-20 { padding-top: 5rem; }
.landing-content .pb-20 { padding-bottom: 5rem; }
.landing-content .pt-16 { padding-top: 4rem; }
.landing-content .pb-16 { padding-bottom: 4rem; }
.landing-content .pt-12 { padding-top: 3rem; }
.landing-content .px-4 { padding-left: 1rem; padding-right: 1rem; }
.landing-content .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.landing-content .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.landing-content .relative { position: relative; }
.landing-content .overflow-hidden { overflow: hidden; }
.landing-content .min-h-screen { min-height: 100vh; }
.landing-content .h-auto { height: auto; }

@media (min-width: 768px) {
  .landing-content .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .landing-content .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .landing-content .md\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
  .landing-content .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .landing-content .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
}

@media (min-width: 640px) {
  .landing-content .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .landing-content .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .landing-content .sm\:pt-16 { padding-top: 4rem; }
}

@media (min-width: 1024px) {
  .landing-content .lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }
  .landing-content .lg\:px-24 { padding-left: 6rem; padding-right: 6rem; }
  .landing-content .lg\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FONTS — Playfair Display for headings
   ═══════════════════════════════════════════════════════════════════════════ */
.landing-content .font-play,
.landing-content .font-playfair { font-family: "Playfair Display", serif; }
.landing-content .font-dm { font-family: "DM Sans", sans-serif; }

/* ═══════════════════════════════════════════════════════════════════════════
   WHY WELLTH — bg-face background image (scoped)
   ═══════════════════════════════════════════════════════════════════════════ */
.landing-content .bg-face {
  background:
    linear-gradient(to right, rgba(14,10,7,0.97) 0%, rgba(14,10,7,0.35) 28%, rgba(14,10,7,0.35) 72%, rgba(14,10,7,0.97) 100%),
    linear-gradient(to bottom, rgba(14,10,7,0.72) 0%, rgba(14,10,7,0.1) 22%, rgba(14,10,7,0.1) 58%, rgba(14,10,7,0.92) 100%),
    url("/landing/assets/health-img.webp") center 24% / cover no-repeat !important;
}

/* Wellth green used in chart dots etc */
.landing-content .bg-wellth-green { background-color: #7cbb7e; }
.landing-content .text-wellth-green { color: #7cbb7e; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARBITRARY TAILWIND VALUES — from CDN config
   ═══════════════════════════════════════════════════════════════════════════ */
.landing-content .min-h-\[83vh\] { min-height: 83vh; }
.landing-content .text-\[\#f5f2ec\] { color: #f5f2ec; }
.landing-content .text-\[\#FFFFFFBF\] { color: rgba(255,255,255,0.75); }
.landing-content .text-\[\#dedbd4\] { color: #dedbd4; }
.landing-content .text-\[11px\] { font-size: 13px; }
.landing-content .text-\[13px\] { font-size: 13px; }
.landing-content .text-\[0\.65rem\] { font-size: 13px; }
.landing-content .text-\[0\.72rem\] { font-size: 13px; }
.landing-content .text-\[0\.78rem\] { font-size: 13px; }
.landing-content .text-\[0\.84rem\] { font-size: 16px; }
.landing-content .text-\[1\.1rem\] { font-size: 20px; }
.landing-content .text-\[1\.4rem\] { font-size: 24px; }
.landing-content .text-\[2\.2rem\] { font-size: 44px; }
.landing-content .tracking-\[0\.22em\] { letter-spacing: 0.22em; }
.landing-content .max-w-\[90\%\] { max-width: 90%; }
.landing-content .max-w-\[460px\] { max-width: 460px; }
.landing-content .max-w-\[600px\] { max-width: 600px; }
.landing-content .rounded-\[11px\] { border-radius: 11px; }
.landing-content .rounded-\[20px\] { border-radius: 20px; }
.landing-content .rounded-t-\[20px\] { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.landing-content .z-\[8\] { z-index: 8; }
.landing-content .gap-\[5px\] { gap: 5px; }
.landing-content .gap-\[7px\] { gap: 7px; }
.landing-content .inset-0 { inset: 0; }
.landing-content .whitespace-nowrap { white-space: nowrap; }
.landing-content .pointer-events-none { pointer-events: none; }
.landing-content .leading-tight { line-height: 1.25; }
.landing-content .leading-relaxed { line-height: 1.625; }
.landing-content .inline-flex { display: inline-flex; }
.landing-content .uppercase { text-transform: uppercase; }
.landing-content .absolute { position: absolute; }

@media (min-width: 640px) {
  .landing-content .sm\:text-\[3rem\] { font-size: 56px; }
  .landing-content .sm\:text-\[1\.4rem\] { font-size: 24px; }
  .landing-content .sm\:max-w-\[600px\] { max-width: 600px; }
  .landing-content .sm\:mb-14 { margin-bottom: 3.5rem; }
  .landing-content .sm\:inline { display: inline; }
  .landing-content .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .landing-content .sm\:gap-\[7px\] { gap: 7px; }
  .landing-content .sm\:text-\[0\.78rem\] { font-size: 13px; }
  .landing-content .sm\:text-\[0\.84rem\] { font-size: 16px; }
}

@media (min-width: 768px) {
  .landing-content .md\:text-\[3rem\] { font-size: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WELLTH LANDING PAGE — STYLESHEET
   Cleaned & Organized Version
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. RESET & BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
/* reset removed — handled by Tailwind */

/* html styles removed */

/* body styles removed — handled by wrapper */

/* ═══════════════════════════════════════════════════════════════════════════
   2. NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */
/* nav styles removed — MegaNav handles navigation */

/* ═══════════════════════════════════════════════════════════════════════════
   3. HERO SECTION — Video Background
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-video-wrap {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
}

.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Phones: the source is 2.27:1, so a 90vh hero on a portrait screen crops it to
   a ~20% wide slice and the subject of every shot is lost. A shorter hero keeps
   more of the frame. svh is the viewport with browser chrome showing, so the CTA
   can't end up underneath Safari's URL bar; the vh line is the fallback. */
@media (max-width: 767px) {
  .hero-video-wrap {
    height: 68vh;
    height: 68svh;
    min-height: 460px;
  }

  /* Subjects sit mid-frame across the shot list, not in the upper third. */
  .hero-video-wrap video {
    object-position: 50% 45%;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

.hero-overlay-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28) 0%, transparent 50%);
}

/* Hero Content Layout */
.hero-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vh, 64px) clamp(32px, 5vw, 72px) clamp(28px, 4vh, 52px);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  font-family: inherit;
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}

.hero-text {
  flex: 1;
  min-width: 280px;
}

.hero-headline {
  font-size: clamp(44px, calc((100vw - 640px) * 1000), 56px);
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  
  margin-bottom: clamp(10px, 1.5vh, 22px);
  font-family: inherit;
}

.hero-subtext {
  font-size: clamp(16px, calc((100vw - 640px) * 1000), 24px);
  font-weight: 400;
  color: rgb(255, 255, 255);
  line-height: 1.5;
  max-width: 572px;
  font-family: inherit;
  margin-bottom: 0;
}

.hero-cta {
  margin-top: 24px;
  
}

.hero-btn {
  font-size: 18px;
  font-weight: 500;
  background-color: white;
  color: black;
  padding: 13px 32px;
  font-family: inherit;
}

/* Hero Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 4px;
}

.stat-number {
  font-size: clamp(20px, calc((100vw - 640px) * 1000), 32px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  font-family: inherit;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
  font-family: inherit;
}

.stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.28);
  margin: 0 clamp(16px, 2.5vw, 32px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 99px;
  font-size: 16px;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  border: 1.8px solid rgba(20, 15, 8, 0.4);
  color: rgba(20, 15, 8, 0.78);
  background: transparent;
  transition: background 0.22s ease, border-color 0.22s ease;
  text-decoration: none;
}

.btn-outline:hover {
  background: rgba(20, 15, 8, 0.07);
  border-color: rgba(20, 15, 8, 0.6);
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px 11px 28px;
  border-radius: 99px;
  font-size: 16px;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  border: none;
  color: #ffffff;
  background: rgba(20, 15, 8, 0.88);
  transition: background 0.22s ease, transform 0.18s ease;
  text-decoration: none;
}

.btn-solid:hover {
  background: #0f0b05;
  transform: translateY(-1px);
}

.btn-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn-solid:hover .btn-arrow {
  transform: translateX(2px);
}

.btn-dark {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #1c1c1a;
  border: none;
  border-radius: 999px;
  padding: 10px 20px 10px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
}

.btn-dark:hover {
  background: #333;
}

.btn-dark .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. SYMPTOMS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.symptoms-headline {
  font-size: clamp(44px, calc((100vw - 640px) * 1000), 56px);
  font-weight: 400;
  color: #1a1a17;
  
  line-height: 1.04;
}

.symptoms-subtext {
  font-size: clamp(18px, calc((100vw - 640px) * 1000), 18px);
  font-weight: 400;
  color: #1a1a17;
  line-height: 24px;
  max-width: 580px;
}

/* Symptom Cards */
.symptom-card {
  background: #f8f0e7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: none;
  box-shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.07),
    0 1px 3px 0px rgba(0, 0, 0, 0.05);
  padding: 34px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s ease, border-color 0.38s ease, transform 0.28s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.symptom-card:hover {
  background: #8FA382;
  border-color: #8FA382;
  box-shadow: 0 8px 24px rgba(143, 163, 130, 0.25),
    0 20px 60px rgba(143, 163, 130, 0.22);
  transform: translateY(-5px);
}

.card-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  color: #8FA382;
  transition: color 0.38s ease;
  flex-shrink: 0;
}

.symptom-card:hover .card-icon {
  color: rgba(255, 255, 255, 0.88);
}

.card-title {
  font-size: clamp(18px, calc((100vw - 640px) * 1000), 20px);
  font-weight: 500;
  color: #1a1a17;
  
  line-height: 1.22;
  margin-bottom: 14px;
  transition: color 0.38s ease;
}

.symptom-card:hover .card-title {
  color: #ffffff;
}

.card-text {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a17;
  line-height: 24px;
  margin-bottom: 0;
  transition: color 0.38s ease;
}

.symptom-card:hover .card-text {
  color: rgba(255, 255, 255, 0.7);
}

.card-rule {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.07);
  margin: 13px 0;
  transition: background 0.38s ease;
}

.symptom-card:hover .card-rule {
  background: rgba(255, 255, 255, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. WHY WELLTH SECTION — Chart Panel
   ═══════════════════════════════════════════════════════════════════════════ */
.bg-face {
  background: linear-gradient(
      to right,
      rgba(14, 10, 7, 0.97) 0%,
      rgba(14, 10, 7, 0.35) 28%,
      rgba(14, 10, 7, 0.35) 72%,
      rgba(14, 10, 7, 0.97) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(14, 10, 7, 0.72) 0%,
      rgba(14, 10, 7, 0.1) 22%,
      rgba(14, 10, 7, 0.1) 58%,
      rgba(14, 10, 7, 0.92) 100%
    ),
    url("/landing/assets/health-img.webp") center 24% / cover no-repeat;
}

/* Dashed Reference Line */
.h-dashed {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.22) 0,
    rgba(255, 255, 255, 0.22) 6px,
    transparent 6px,
    transparent 14px
  );
}

/* Vertical Hover Line Gradient */
.vline-grad {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 35%,
    rgba(255, 255, 255, 0.45) 65%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Tooltip Arrow */
.tt-arrow::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: white;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* GSAP Target Optimization */
#eyebrow,
#headline,
#subtext,
#chartPanel {
  will-change: transform, opacity;
}

/* Card Hover States */
.card-item:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.card-item.is-active {
  background: rgba(255, 255, 255, 0.115);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PERSONALIZED APPROACH SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background: url("/landing/assets/girl-img.png") center center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.48) 100%
  );
  z-index: 1;
}

/* Slider Components */
.slider-wrap {
  position: relative;
  margin: 18px 0 6px;
  padding-top: 16px;
}

.slider-track {
  position: relative;
  height: 5px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  overflow: visible;
}

.slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  width: 0;
  transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.slider-tri {
  position: absolute;
  top: 2px;
  left: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid rgba(255, 255, 255, 0.95);
  transition: left 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.slider-dot {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
  transition: left 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.slider-fill-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  width: 0;
  transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.track-break {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 11px;
  background: rgba(28, 18, 10, 0.95);
  border-radius: 1px;
  z-index: 3;
}

.stat-num {
  font-size: clamp(44px, calc((100vw - 640px) * 1000), 56px);
  font-weight: 400;
  color: white;
  line-height: 1;
  
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. SWIPER / SLIDER SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.swiper-outer {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.swiper {
  overflow: visible !important;
  padding-bottom: 56px !important;
}

.swiper-slide {
  width: 520px;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.6s ease,
    filter 0.6s ease, box-shadow 0.6s ease;
  transform: scale(0.8);
  opacity: 0.5;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  border-radius: 28px;
  will-change: transform, opacity, filter;
}

.swiper-slide-prev,
.swiper-slide-next {
  transform: scale(0.85) !important;
  opacity: 0.6 !important;
}

.swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1 !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.28), 0 16px 40px rgba(0, 0, 0, 0.16) !important;
  cursor: default;
  z-index: 10;
}

.tablet-frame {
  background: #1a1916;
  border-radius: 28px;
  padding: 12px;
  position: relative;
}

.tablet-frame::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a2a28;
  z-index: 5;
}

.slide-image {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
  display: block;
}

.slide-placeholder {
  width: 100%;
  height: 340px;
  border-radius: 18px;
  background: linear-gradient(145deg, #e8e2d6 0%, #ddd6c8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #a09888;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Swiper Pagination */
.swiper-pagination {
  bottom: 14px !important;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #b8ae9e;
  opacity: 1;
  margin: 0 5px !important;
  transition: all 0.35s ease;
}

.swiper-pagination-bullet-active {
  background: #8FA382;
  width: 28px;
  border-radius: 4px;
}

/* GSAP Reveal States */
#mainTitle,
#mainSub {
  opacity: 0;
  transform: translateY(22px);
}

#sliderWrap {
  opacity: 0;
  transform: translateY(36px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. TESTIMONIAL SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
/* Phone padding and min-height match the complex.wellth.se quote (px-6 py-28, min-h-[70vh]);
   height was fixed at 80vh, which cut the author off on small phones. */
.testimonial-section {
  position: relative;
  padding: 112px 24px;
  min-height: 70vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.testimonial-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 8, 0.8);
}

.testimonial-content {
  position: relative;
  z-index: 10;
  max-width: 700px;
  text-align: center;
}

.testimonial-stars {
  margin-bottom: 24px;
  font-size: 24px;
  color: #c9a44a;
  letter-spacing: 0.04em;
}

/* Same as the complex.wellth.se quote: 24px on phones, 32px from 640px (2026-09-26). */
.testimonial-quote {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  
  font-style: italic;
  margin-bottom: 26px;
}

.testimonial-author {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.42);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PRICING SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.pricing-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url("/landing/assets/pricing-bg.png") center center / cover no-repeat;
  display: flex;
  align-items: center;
  padding: 80px 24px;
}

.pricing-eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8FA382;
  box-shadow: 0 0 8px rgba(143, 163, 130, 0.7);
  display: inline-block;
}

.pricing-eyebrow-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(30, 20, 10, 0.75);
}

.pricing-headline {
  font-size: clamp(44px, calc((100vw - 640px) * 1000), 56px);
  font-weight: 400;
  color: rgba(20, 12, 6, 0.92);
  
  line-height: 1.1;
  margin-bottom: 16px;
}

.pricing-subtext {
  font-size: clamp(18px, calc((100vw - 640px) * 1000), 20px);
  font-weight: 500;
  color: #1a1a17;
  line-height: 1.55;
  max-width: 460px;
  margin: 0 auto 28px;
}

/* Toggle Container */
.toggle-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin-bottom: 35px;
}

.toggle-border-top {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  height: 0.5px;
  background: rgba(26, 26, 26, 0.332);
}

.toggle-border-bottom {
  position: absolute;
  bottom: -10px;
  left: -10px;
  right: -10px;
  height: 0.5px;
  background: rgba(26, 26, 26, 0.292);
}

.toggle-border-left {
  position: absolute;
  left: -10px;
  top: -10px;
  bottom: -10px;
  width: 0.5px;
  background: rgba(26, 26, 26, 0.268);
}

.toggle-border-right {
  position: absolute;
  right: -10px;
  top: -10px;
  bottom: -10px;
  width: 0.5px;
  background: rgba(26, 26, 26, 0.267);
}

.toggle-corner {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(26, 26, 26, 0.75);
  border-radius: 50%;
}

.toggle-corner-tl {
  top: -11px;
  left: -11px;
}
.toggle-corner-tr {
  top: -11px;
  right: -11px;
}
.toggle-corner-bl {
  bottom: -11px;
  left: -11px;
}
.toggle-corner-br {
  bottom: -11px;
  right: -11px;
}

.toggle-pill {
  display: inline-flex;
  background-color: #ebe7e7;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.toggle-btn {
  padding: 8px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  color: rgba(12, 12, 12, 0.65);
  background: transparent;
  border: none;
  outline: none;
}

.toggle-btn.active {
  background: rgba(20, 14, 8, 0.92);
  color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Plan Cards */
.plan-card {
  position: relative;
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.plan-name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.plan-price {
  font-size: clamp(32px, calc((100vw - 640px) * 1000), 44px);
  font-weight: 500;
  color: white;
  
}

.price-period {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

.plan-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  margin-bottom: 22px;
}

.plan-feature {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.bullet-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  margin-top: 5px;
}

.cta-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 13px 24px;
  border-radius: 99px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: white;
  background: transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
  letter-spacing: 0.01em;
}

.cta-btn:hover {
  background: white;
  color: rgba(20, 14, 8, 0.92);
  border-color: white;
}

/* Price Toggle States */
.price-annual {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. PHOTO MOSAIC SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.strip-track {
  display: flex;
  gap: 14px;
  width: max-content;
}

.img-card {
  flex-shrink: 0;
  width: 340px;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s ease;
}

.img-card:hover img {
  transform: scale(1.07);
}

/* Rotating Circle */
.circle-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spinSlow 16s linear infinite;
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Fade Edges */
.fade-left {
  background: linear-gradient(
    to right,
    #f0ebe2 0%,
    rgba(240, 235, 226, 0) 12%
  );
}

.fade-right {
  background: linear-gradient(to left, #f0ebe2 0%, rgba(240, 235, 226, 0) 12%);
}

/* Reveal States */
#secTitle {
  opacity: 0;
  transform: translateY(22px);
}

#gridWrap {
  opacity: 0;
  transform: translateY(18px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. FAQ SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.faq-answer {
  margin-top: 0;
  overflow: hidden;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.25s;
  display: inline-block;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section Labels */
.section-label {
  font-size: 13px;
  color: #999;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin-bottom: 14px;
}

.section-label-left {
  text-align: left;
}

/* Progress Bars */
.prog-track {
  height: 5px;
  background: #ede8dc;
  border-radius: 9px;
}

.prog-fill {
  height: 5px;
  border-radius: 9px;
}

/* Media Label */
.media-label {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 6px;
  padding: 4px 8px;
  z-index: 5;
  pointer-events: none;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
  animation: fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. GSAP INITIAL STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.reveal {
  /* opacity handled by GSAP ScrollTrigger */
}

.reveal-left {
  /* opacity handled by GSAP ScrollTrigger */
}

.reveal-right {
  /* opacity handled by GSAP ScrollTrigger */
}

.reveal-scale {
  /* opacity handled by GSAP ScrollTrigger */
}

.card-reveal {
  /* opacity handled by GSAP ScrollTrigger */
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile (< 640px) */
@media (max-width: 639px) {
  /* Hero Content */
  .hero-content {
    padding: 24px 20px 36px !important;
  }

  .hero-text {
    margin-top: 0 !important;
  }

  .hero-headline {
    margin-bottom: 14px !important;
  }

  .hero-subtext {
    max-width: 100% !important;
  }

  /* Stack bottom row vertically */
  .hero-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }

  /* Stats adjustments */
  .hero-stats {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .hero-stats .stat-number {
    font-size: 20px !important;
  }

  .hero-stats .stat-label {
    font-size: 13px !important;
  }

  .hero-stats .stat-divider {
    margin: 0 16px !important;
  }
}

/* Tablet (640px – 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-content {
    padding: 48px 40px 44px !important;
  }

  .hero-text {
    margin-top: 140px !important;
  }

  .hero-headline {
    font-size: 56px !important;
  }

  .hero-subtext {
    font-size: 20px !important;
  }

  .hero-stats .stat-divider {
    margin: 0 20px !important;
  }

  /* Swiper adjustments */
  .swiper-slide {
    width: 420px;
  }

  .slide-image,
  .slide-placeholder {
    height: 280px;
  }
}

/* Small screens */
@media (max-width: 768px) {
  .swiper-slide {
    width: 85vw;
  }

  .slide-image,
  .slide-placeholder {
    height: 360px;
  }

  .tablet-frame {
    border-radius: 20px;
    padding: 8px;
  }

  .slide-image {
    border-radius: 14px;
  }
}

/* Specific viewport fix: 768px wide + short viewport */
@media (min-width: 766px) and (max-width: 770px) and (max-height: 650px) {
  .hero-stats {
    display: none !important;
  }

  .hero-bottom {
    margin-bottom: 20px !important;
    gap: 16px !important;
  }

  .hero-headline {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }

  .hero-subtext {
    font-size: 16px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   LIFESTYLE MEDICINE SECTION — RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section Container */
.lifestyle-section {
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  background: #f0ebe2;
}

/* Headline */
.lifestyle-headline {
  font-size: clamp(32px, calc((100vw - 640px) * 1000), 56px);
  font-weight: 400;
  color: #1a1a14;
  
  line-height: 1.04;
}

/* Subtext */
.lifestyle-subtext {
  font-size: clamp(18px, calc((100vw - 640px) * 1000), 20px);
  color: #2a2a1e;
  font-weight: 500;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWIPER RESPONSIVE — Tablet (768px and below)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Section padding */
  .lifestyle-section,
  .w-full.pt-20.pb-20 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Header spacing */
  .lifestyle-section .text-center.mb-16,
  .w-full.pt-20.pb-20 .text-center.mb-16 {
    margin-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Headline size */
  #mainTitle {
    font-size: clamp(32px, calc((100vw - 640px) * 1000), 44px) !important;
    line-height: 1.1;
  }

  /* Subtext */
  #mainSub {
    font-size: 18px !important;
    line-height: 1.5;
  }

  #mainSub br {
    display: none;
  }

  /* Swiper slides */
  .swiper-slide {
    width: 85vw !important;
    max-width: 400px;
  }

  /* Tablet frame */
  .tablet-frame {
    border-radius: 16px;
    padding: 8px;
  }

  /* Slide image */
  .slide-image {
    height: 320px;
    border-radius: 12px;
  }

  /* Placeholder */
  .slide-placeholder {
    height: 320px;
    border-radius: 12px;
  }

  /* Swiper pagination */
  .swiper-pagination {
    bottom: 10px !important;
  }

  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }

  .swiper-pagination-bullet-active {
    width: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWIPER RESPONSIVE — Mobile Small (480px and below)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Section padding */
  .lifestyle-section,
  .w-full.pt-20.pb-20 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Header spacing */
  .lifestyle-section .text-center.mb-16,
  .w-full.pt-20.pb-20 .text-center.mb-16 {
    margin-bottom: 32px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Headline */
  #mainTitle {
    font-size: 32px !important;
    
  }

  /* Subtext */
  #mainSub {
    font-size: 16px !important;
    max-width: 280px;
  }

  /* Swiper slides */
  .swiper-slide {
    width: 88vw !important;
    max-width: 320px;
  }

  /* Tablet frame */
  .tablet-frame {
    border-radius: 14px;
    padding: 6px;
  }

  .tablet-frame::before {
    width: 6px;
    height: 6px;
    top: 4px;
  }

  /* Slide image */
  .slide-image {
    height: 260px;
    border-radius: 10px;
  }

  /* Placeholder */
  .slide-placeholder {
    height: 260px;
    border-radius: 10px;
    gap: 10px;
  }

  .slide-placeholder svg {
    width: 40px;
    height: 40px;
  }

  .slide-placeholder span {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWIPER RESPONSIVE — Very Small Screens (360px and below)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  #mainTitle {
    font-size: 24px !important;
  }

  #mainSub {
    font-size: 13px !important;
  }

  .swiper-slide {
    width: 92vw !important;
  }

  .slide-image,
  .slide-placeholder {
    height: 220px;
  }

  .tablet-frame {
    padding: 5px;
    border-radius: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIFIC FIX: 768x642 Viewport
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 766px) and (max-width: 770px) and (max-height: 650px) {
  .lifestyle-section,
  .w-full.pt-20.pb-20 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lifestyle-section .text-center.mb-16,
  .w-full.pt-20.pb-20 .text-center.mb-16 {
    margin-bottom: 24px;
  }

  #mainTitle {
    font-size: 32px !important;
  }

  #mainSub {
    font-size: 16px !important;
    margin-top: 12px;
  }

  .swiper-slide {
    width: 70vw !important;
    max-width: 480px;
  }

  .slide-image,
  .slide-placeholder {
    height: 280px;
  }

  .swiper {
    padding-bottom: 40px !important;
  }
}
/* Letter spacing matched to Aeonik on scarlet.cc (2026-09-25), same as the Tailwind scale in
   tailwind.config.ts: text -2%, headings -4%. Negative letter-spacing elsewhere in the landing
   files was removed so these apply; positive tracking on uppercase eyebrows is untouched. */
.landing-content { letter-spacing: -0.02em; }
.landing-content h1,
.landing-content h2,
.landing-content h3 { letter-spacing: -0.04em; }

@media (min-width: 640px) {
  .landing-content .testimonial-quote { font-size: 32px; }
  .landing-content .testimonial-section { padding: 110px 72px; min-height: 80vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE SET OF SIZES — the same roles and sizes as complex.wellth.se (2026-09-26).
   Every heading and paragraph on this page takes its size from here, whatever
   the markup above says, so the page cannot drift into one-off sizes again.
     page headline   44px phone · 56px from 640px
     section heading 32px phone · 44px from 640px
     body text       18px, line-height 1.6
   Fluid sizes are stepped, not scaled: clamp(a, calc((100vw - 640px) * 1000), b) is a on
   phones and b from 640px, so no in-between size appears at any window width.
   ═══════════════════════════════════════════════════════════════════════════ */
.landing-content .font-arial { font-family: inherit !important; }
.landing-content h1,
.landing-content .hero-headline { font-size: 44px !important; line-height: 1.1 !important; }
.landing-content h2 { font-size: 32px !important; line-height: 1.15 !important; }
.landing-content p { line-height: 1.6 !important; }
.landing-content .symptoms-subtext,
.landing-content .card-text,
.landing-content .hero-subtext { font-size: 18px !important; line-height: 1.6 !important; }
.landing-content .hero-subtext { line-height: 1.5 !important; }
.landing-content .testimonial-quote { line-height: 1.5 !important; }
@media (min-width: 640px) {
  .landing-content h1,
  .landing-content .hero-headline { font-size: 56px !important; }
  .landing-content h2 { font-size: 44px !important; line-height: 1.1 !important; }
  .landing-content .hero-subtext { font-size: 20px !important; }
}
/* Phones: the hero grows with its text instead of cutting the stats off, and the
   text sits at the bottom of the video as on complex.wellth.se. */
@media (max-width: 639px) {
  .landing-content .hero-video-wrap { height: auto !important; min-height: max(460px, 68svh); display: flex; }
  .landing-content .hero-content { height: auto !important; min-height: 100%; justify-content: flex-end !important; padding-top: 96px !important; }
}