/* ==========================================================================
   Certified Face Yoga Instructor Course — Premium Redesign
   Design language: Sage Green + Blush Pink + Soft Cream
   Aligned with the Mokshamyoga PCOS/PCOD Wellness Program design system
   ========================================================================== */

:root {
  /* === Sage Green — Primary Brand === */
  --fy-sage-primary:  #4A6B53;
  --fy-sage-dark:     #37523E;
  --fy-sage-light:    #EEF4F0;
  --fy-sage-border:   #CBE0D2;

  /* === Blush Pink — Accent === */
  --fy-blush-primary: #D48B8B;
  --fy-blush-dark:    #B86B6B;
  --fy-blush-light:   #FDF5F5;
  --fy-blush-border:  #F7D4D4;

  /* === Neutral Cream — Backgrounds === */
  --fy-cream-bg:      #FAF8F5;
  --fy-cream-card:    #F6F3EE;
  --fy-white:         #FFFFFF;

  /* === Text === */
  --fy-text-main:     #2C3531;
  --fy-text-muted:    #5C6660;
  --fy-text-light:    #8A9E93;

  /* === Radii === */
  --fy-radius-lg:     24px;
  --fy-radius-md:     16px;
  --fy-radius-sm:     12px;
  --fy-radius-pill:   50px;

  /* === Shadows === */
  --fy-shadow-subtle: 0 8px 24px rgba(74, 107, 83, 0.07);
  --fy-shadow-card:   0 12px 32px rgba(74, 107, 83, 0.10);
  --fy-shadow-raised: 0 20px 48px rgba(74, 107, 83, 0.14);

  /* === Motion === */
  --fy-transition:    all 0.3s ease;
}

/* ==========================================================================
   Base Body
   ========================================================================== */
body.face-yoga-page {
  background-color: var(--fy-cream-bg);
  color: var(--fy-text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

body.face-yoga-page *,
body.face-yoga-page *::before,
body.face-yoga-page *::after {
  box-sizing: border-box;
}

body.face-yoga-page .main {
  max-width: 100%;
  overflow-x: hidden;
}

/* AOS handles animations once per page load via once: true */

/* ==========================================================================
   Typography
   ========================================================================== */
.fy-serif-title,
.fy-serif-heading {
  font-family: 'Nunito', Georgia, serif;
  font-weight: 700;
  color: var(--fy-sage-primary);
  line-height: 1.25;
}

.fy-section-title-wrap {
  text-align: center;
  margin-bottom: 32px;
}

.fy-section-title-wrap .fy-serif-heading {
  font-size: 2rem;
}

@media (min-width: 992px) {
  .fy-section-title-wrap .fy-serif-heading {
    font-size: 2.3rem;
  }
}

.fy-title-underline {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--fy-sage-primary) 0%, var(--fy-blush-primary) 100%);
  margin: 14px auto 0 auto;
  border-radius: 2px;
}

/* ==========================================================================
   Layout — Container & Section
   ========================================================================== */
.fy-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .fy-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1400px) {
  .fy-container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.fy-section {
  padding: 44px 0;
  position: relative;
}

@media (min-width: 992px) {
  .fy-section {
    padding: 62px 0;
  }
}

.fy-section-alt {
  background-color: var(--fy-cream-card);
}

.fy-header-spacer {
  height: 60px;
}

body.face-yoga-page #hero {
  padding-top: 16px;
  padding-bottom: 62px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.fy-hero-wrapper {
  background: var(--fy-cream-bg);
  border-radius: var(--fy-radius-lg);
  overflow: hidden;
  padding: 28px 20px;
  position: relative;
}

@media (min-width: 992px) {
  .fy-hero-wrapper {
    padding: 36px 40px;
  }
}

/* Pre-heading pill badge */
.fy-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fy-blush-border);
  color: var(--fy-blush-dark);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: var(--fy-radius-pill);
  margin-bottom: 14px;
  background-color: var(--fy-blush-light);
}

/* H1 */
.fy-hero-title {
  font-family: 'Nunito', Georgia, serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--fy-sage-dark);
}

@media (min-width: 992px) {
  .fy-hero-title {
    font-size: 3.25rem;
  }
}

/* Subtitle */
.fy-hero-subhead {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fy-blush-dark);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Body paragraph */
.fy-hero-para {
  font-size: 1rem;
  color: var(--fy-text-muted);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Metric boxes row (80+, Live, Certificate, 1-to-1) */
.fy-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (min-width: 576px) {
  .fy-hero-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fy-metric-item {
  background: var(--fy-white);
  border: 1px solid var(--fy-sage-border);
  border-radius: var(--fy-radius-sm);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--fy-shadow-subtle);
}

.fy-metric-icon {
  color: var(--fy-sage-primary);
  font-size: 1.35rem;
  flex-shrink: 0;
}

.fy-metric-val {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--fy-sage-dark);
  line-height: 1;
}

.fy-metric-lbl {
  font-size: 0.76rem;
  color: var(--fy-text-muted);
  line-height: 1.2;
  margin-top: 2px;
}

/* Primary CTA button */
.fy-btn-primary {
  background-color: var(--fy-sage-primary);
  color: #FFFFFF !important;
  border: 2px solid var(--fy-sage-primary);
  border-radius: var(--fy-radius-pill);
  padding: 14px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--fy-transition);
  text-decoration: none !important;
  cursor: pointer;
}

.fy-btn-primary:hover,
.fy-btn-primary:focus {
  background-color: var(--fy-sage-dark);
  border-color: var(--fy-sage-dark);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(74, 107, 83, 0.28);
}

/* Secondary / ghost button */
.fy-btn-secondary {
  background-color: var(--fy-white);
  color: var(--fy-blush-dark) !important;
  border: 2px solid var(--fy-blush-border);
  border-radius: var(--fy-radius-pill);
  padding: 14px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--fy-transition);
  text-decoration: none !important;
  cursor: pointer;
}

.fy-btn-secondary:hover,
.fy-btn-secondary:focus {
  background-color: var(--fy-blush-light);
  border-color: var(--fy-blush-primary);
  color: var(--fy-blush-dark) !important;
  transform: translateY(-2px);
}

/* Legacy alias — any old fy-btn-hero usage becomes primary style */
.fy-btn-hero {
  background-color: var(--fy-sage-primary);
  color: #FFFFFF !important;
  border: 2px solid var(--fy-sage-primary);
  border-radius: var(--fy-radius-pill);
  padding: 14px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--fy-transition);
  text-decoration: none !important;
  cursor: pointer;
  white-space: normal;
  text-align: center;
  flex-wrap: wrap;
}

.fy-btn-hero:hover,
.fy-btn-hero:focus {
  background-color: var(--fy-sage-dark);
  border-color: var(--fy-sage-dark);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(74, 107, 83, 0.28);
}

/* Trust badges row below CTA */
.fy-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--fy-text-muted);
  font-weight: 500;
}

.fy-trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fy-trust-badges i {
  color: var(--fy-sage-primary);
}

/* Button group */
.fy-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 4px;
}

/* ==========================================================================
   Hero Right-Side Image
   ========================================================================== */
.fy-hero-img-container {
  border-radius: var(--fy-radius-lg);
  overflow: hidden;
  box-shadow: var(--fy-shadow-subtle);
  height: 100%;
  min-height: 320px;
  position: relative;
}

.fy-hero-img-container img,
.fy-hero-img-container .fy-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--fy-radius-lg);
}

/* Legacy hero image wrap (keep for existing HTML) */
.fy-hero-img-wrap {
  position: relative;
  border-radius: var(--fy-radius-lg);
  overflow: hidden;
  box-shadow: var(--fy-shadow-subtle);
  min-height: 320px;
  height: 100%;
}

.fy-sage-circle-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--fy-sage-light) 0%, var(--fy-cream-card) 100%);
  border-radius: var(--fy-radius-lg);
  z-index: 1;
}

.fy-hero-img {
  position: relative;
  z-index: 2;
  border-radius: var(--fy-radius-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating benefit pills beside hero image */
.fy-floating-benefits {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: -16px;
}

@media (max-width: 991px) {
  .fy-floating-benefits {
    margin-left: 0;
    margin-top: 20px;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.fy-benefit-pill-item {
  background: var(--fy-white);
  border: 1px solid var(--fy-sage-border);
  border-radius: var(--fy-radius-pill);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--fy-shadow-subtle);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--fy-text-main);
  transition: var(--fy-transition);
}

.fy-benefit-pill-item:hover {
  border-color: var(--fy-sage-primary);
  background-color: var(--fy-sage-light);
}

.fy-benefit-pill-item i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fy-sage-light);
  color: var(--fy-sage-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  border: 1px solid var(--fy-sage-border);
}

/* ==========================================================================
   Feature Callout Strip (below hero)
   ========================================================================== */
.fy-strip-container {
  background: var(--fy-blush-light);
  border: 1px solid var(--fy-blush-border);
  border-radius: var(--fy-radius-lg);
  padding: 18px 16px;
  margin-top: 20px;
}

.fy-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
}

@media (min-width: 576px) {
  .fy-strip-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 992px) {
  .fy-strip-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
}

.fy-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fy-strip-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.fy-strip-icon.sage {
  background-color: var(--fy-sage-light);
  color: var(--fy-sage-primary);
  border: 1px solid var(--fy-sage-border);
}

.fy-strip-icon.blush {
  background-color: #FFF0F0;
  color: var(--fy-blush-primary);
  border: 1px solid var(--fy-blush-border);
}

.fy-strip-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--fy-text-main);
  line-height: 1.25;
}

/* Stats strip (dark green — kept for legacy, now styled more softly) */
.fy-stats-strip {
  background: var(--fy-sage-primary);
  color: #FFFFFF;
  padding: 32px 0;
}

.fy-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}

@media (min-width: 768px) {
  .fy-stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.fy-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fy-stat-icon {
  font-size: 1.6rem;
  color: var(--fy-blush-light);
  margin-bottom: 8px;
}

.fy-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
}

.fy-stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
}

/* ==========================================================================
   Plan / Intro Box
   ========================================================================== */
.fy-plan-box {
  background: var(--fy-cream-card);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 26px 22px;
}

@media (min-width: 992px) {
  .fy-plan-box {
    padding: 36px 36px;
  }
}

/* Benefit pills (oval pill check items) */
.fy-benefit-pill {
  background: var(--fy-white);
  border: 1px solid #E5E0D8;
  border-radius: var(--fy-radius-pill);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--fy-text-main);
  transition: var(--fy-transition);
}

.fy-benefit-pill:hover {
  border-color: var(--fy-sage-border);
  box-shadow: 0 4px 12px rgba(74, 107, 83, 0.08);
}

.fy-benefit-pill i {
  color: var(--fy-sage-primary);
  font-size: 1.1rem;
}

/* ==========================================================================
   Card Grid (Course Highlights)
   ========================================================================== */
.fy-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .fy-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .fy-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Unified card */
.fy-card {
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--fy-transition);
  position: relative;
  overflow: hidden;
}

.fy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
  border-color: var(--fy-sage-border);
}

.fy-card-icon-header {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fy-sage-light);
  border: 1px solid var(--fy-sage-border);
  color: var(--fy-sage-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.fy-card-icon-blush {
  background: var(--fy-blush-light);
  border-color: var(--fy-blush-border);
  color: var(--fy-blush-primary);
}

.fy-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fy-sage-dark);
  margin-bottom: 10px;
}

.fy-card-intro {
  font-size: 0.9rem;
  color: var(--fy-text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

.fy-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fy-card-list li {
  font-size: 0.88rem;
  color: var(--fy-text-main);
  position: relative;
  padding-left: 18px;
  line-height: 1.4;
}

.fy-card-list li::before {
  content: "•";
  color: var(--fy-sage-primary);
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: -2px;
}

/* ==========================================================================
   Course Highlights Grid (existing)
   ========================================================================== */
.fy-highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 22px 22px;
  height: 100%;
}

@media (min-width: 768px) {
  .fy-highlights-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fy-check-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.94rem;
  color: var(--fy-text-main);
  line-height: 1.45;
  margin-bottom: 10px;
}

.fy-check-bullet span,
.fy-faq-btn span,
.fy-price-label,
.fy-price-val,
.fy-aud-lbl,
.fy-metric-val,
.fy-metric-lbl {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fy-check-bullet i {
  color: var(--fy-sage-primary);
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Bonus card */
.fy-bonus-card {
  background: var(--fy-cream-card);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 22px 20px;
  text-align: center;
  height: 100%;
  transition: var(--fy-transition);
}

.fy-bonus-card:hover {
  background: var(--fy-white);
  border-color: var(--fy-sage-border);
  box-shadow: var(--fy-shadow-subtle);
}

.fy-bonus-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FFF0F0;
  color: var(--fy-blush-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 10px;
  border: 1px solid var(--fy-blush-border);
}

.fy-bonus-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--fy-sage-dark);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.fy-bonus-sub {
  font-size: 0.86rem;
  color: var(--fy-text-muted);
  margin-bottom: 12px;
}

.fy-bonus-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fy-bonus-list li {
  font-size: 0.88rem;
  color: var(--fy-text-main);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fy-bonus-list li i {
  color: var(--fy-sage-primary);
}

/* ==========================================================================
   Curriculum — Week Cards
   ========================================================================== */
.fy-curriculum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 576px) {
  .fy-curriculum-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .fy-curriculum-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fy-week-card {
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--fy-transition);
  position: relative;
}

.fy-week-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
  border-color: var(--fy-sage-border);
}

.fy-week-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fy-sage-light);
  color: var(--fy-sage-primary);
  border: 1px solid var(--fy-sage-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

/* Week badge (like PCOS timeline badge) */
.fy-week-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--fy-radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.fy-week-badge.sage {
  background: var(--fy-sage-light);
  color: var(--fy-sage-dark);
  border: 1px solid var(--fy-sage-border);
}

.fy-week-badge.blush {
  background: var(--fy-blush-light);
  color: var(--fy-blush-dark);
  border: 1px solid var(--fy-blush-border);
}

.fy-week-lbl {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fy-sage-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.fy-week-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fy-text-main);
  margin-bottom: 10px;
}

.fy-week-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fy-week-list li {
  font-size: 0.88rem;
  color: var(--fy-text-muted);
  margin-bottom: 9px;
  position: relative;
  padding-left: 18px;
  line-height: 1.4;
}

.fy-week-list li::before {
  content: "\2022";
  color: var(--fy-sage-primary);
  font-weight: bold;
  font-size: 1.1rem;
  position: absolute;
  left: 0;
  top: -2px;
}

.fy-curriculum-detail-panel {
  margin-top: 22px;
  scroll-margin-top: 100px;
}

/* ==========================================================================
   Who Can Join — Audience Grid
   ========================================================================== */
.fy-who-join-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: stretch;
}

@media (min-width: 992px) {
  .fy-who-join-layout {
    grid-template-columns: minmax(0, 42%) minmax(0, 35%) minmax(240px, 23%);
    gap: 28px;
  }
}

.fy-who-join-content,
.fy-who-join-reasons {
  min-width: 0;
}

.fy-who-join-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.fy-who-join-img-wrap {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: var(--fy-radius-lg);
  overflow: hidden;
  box-shadow: var(--fy-shadow-subtle);
  border: 1px solid var(--fy-sage-border);
}

.fy-who-join-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Checklist card style — matching PCOS checklist-card */
.fy-checklist-card {
  background: var(--fy-cream-card);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 24px 22px;
  height: 100%;
}

.fy-checklist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .fy-checklist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
  }
}

/* Audience grid boxes */
.fy-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 576px) {
  .fy-audience-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fy-aud-box {
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-md);
  padding: 14px 12px;
  text-align: center;
  transition: var(--fy-transition);
}

.fy-aud-box:hover {
  background: var(--fy-sage-light);
  border-color: var(--fy-sage-border);
}

.fy-aud-icon {
  font-size: 1.45rem;
  color: var(--fy-sage-primary);
  margin-bottom: 6px;
}

.fy-aud-lbl {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--fy-text-main);
  line-height: 1.3;
}

/* ==========================================================================
   Format Cards (Course Delivery Options)
   ========================================================================== */
.fy-format-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 992px) {
  .fy-format-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fy-format-card {
  background: var(--fy-cream-card);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 24px 20px;
  text-align: center;
  transition: var(--fy-transition);
}

.fy-format-card:hover {
  background: var(--fy-white);
  border-color: var(--fy-blush-border);
  box-shadow: var(--fy-shadow-subtle);
}

.fy-format-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFF0F0;
  color: var(--fy-blush-primary);
  border: 1px solid var(--fy-blush-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin: 0 auto 14px auto;
}

.fy-format-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fy-sage-dark);
  margin-bottom: 12px;
}

.fy-format-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fy-blush-dark);
  margin-bottom: 4px;
}

.fy-format-value {
  font-size: 0.95rem;
  color: var(--fy-text-main);
  margin-bottom: 14px;
  line-height: 1.4;
}

/* ==========================================================================
   Business Image / Choose Image Wrap
   ========================================================================== */
.fy-choose-image-wrap,
.fy-business-image-wrap {
  height: 100%;
  min-height: 280px;
  border-radius: var(--fy-radius-lg);
  overflow: hidden;
  box-shadow: var(--fy-shadow-subtle);
  border: 1px solid var(--fy-sage-border);
}

.fy-choose-image-wrap img,
.fy-business-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Course Details / Pricing Card
   ========================================================================== */
.fy-pricing-card {
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 24px 22px;
  box-shadow: var(--fy-shadow-card);
}

.fy-pricing-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--fy-sage-dark);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #ECE7E0;
}

.fy-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #F0EDE8;
  font-size: 0.9rem;
  gap: 12px;
}

.fy-price-label {
  color: var(--fy-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fy-price-label i {
  color: var(--fy-sage-primary);
}

.fy-price-val {
  font-weight: 700;
  color: var(--fy-text-main);
  text-align: right;
}

.fy-price-tag-wrap {
  text-align: center;
  margin: 14px 0;
  padding: 14px;
  background: var(--fy-sage-light);
  border-radius: var(--fy-radius-md);
  border: 1px solid var(--fy-sage-border);
}

.fy-old-price {
  text-decoration: line-through;
  color: var(--fy-text-light);
  font-size: 1rem;
  margin-right: 8px;
}

.fy-new-price {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--fy-sage-primary);
}

/* ==========================================================================
   Certification Section
   ========================================================================== */
.fy-cert-box {
  background: linear-gradient(135deg, var(--fy-sage-light) 0%, var(--fy-cream-card) 100%);
  border: 1px solid var(--fy-sage-border);
  border-radius: var(--fy-radius-lg);
  padding: 28px 24px;
  text-align: center;
}

.fy-cert-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--fy-white);
  color: var(--fy-sage-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin: 0 auto 14px auto;
  border: 2px solid var(--fy-sage-border);
  box-shadow: var(--fy-shadow-subtle);
}

.fy-cert-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fy-sage-dark);
  margin-bottom: 8px;
}

.fy-cert-para {
  font-size: 0.95rem;
  color: var(--fy-text-muted);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 14px auto;
}

/* ==========================================================================
   Instructor Section
   ========================================================================== */
.fy-instructor-box {
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 24px 24px;
}

.fy-instructor-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--fy-sage-border);
  box-shadow: var(--fy-shadow-subtle);
  margin-bottom: 16px;
}

.fy-instructor-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fy-sage-dark);
  margin-bottom: 4px;
}

.fy-instructor-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fy-blush-dark);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ==========================================================================
   Testimonials / Reviews
   ========================================================================== */
.fy-testimonial-card {
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-lg);
  padding: 22px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: var(--fy-transition);
}

.fy-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
  border-color: var(--fy-sage-border);
}

.fy-review-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px auto;
  border: 2px solid var(--fy-sage-border);
  display: block;
}

.fy-review-text {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--fy-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.fy-review-name {
  font-weight: 700;
  color: var(--fy-sage-dark);
  font-size: 0.95rem;
}

.fy-review-meta {
  font-size: 0.78rem;
  color: var(--fy-text-light);
  font-weight: 500;
  margin-top: 4px;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.fy-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 992px) {
  .fy-faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.fy-faq-item {
  background: var(--fy-white);
  border: 1px solid #ECE7E0;
  border-radius: var(--fy-radius-md);
  overflow: hidden;
  transition: var(--fy-transition);
}

.fy-faq-item:hover {
  border-color: var(--fy-sage-border);
}

.fy-faq-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 20px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fy-sage-dark);
  cursor: pointer;
}

.fy-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fy-sage-light);
  color: var(--fy-sage-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  border: 1px solid var(--fy-sage-border);
}

.fy-faq-btn[aria-expanded="true"] .fy-faq-icon {
  transform: rotate(45deg);
  background: var(--fy-blush-light);
  color: var(--fy-blush-dark);
  border-color: var(--fy-blush-border);
}

.fy-faq-ans {
  padding: 0 20px 16px 20px;
  font-size: 0.92rem;
  color: var(--fy-text-muted);
  line-height: 1.6;
  display: none;
}

.fy-faq-btn[aria-expanded="true"] + .fy-faq-ans {
  display: block;
}

/* Disclaimer box */
.fy-disclaimer-box {
  background-color: var(--fy-blush-light);
  border: 1px solid var(--fy-blush-border);
  border-radius: var(--fy-radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--fy-text-muted);
  margin-top: 24px;
}

.fy-disclaimer-box i {
  color: var(--fy-blush-primary);
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ==========================================================================
   Final CTA Banner
   ========================================================================== */
.fy-cta-banner {
  background: var(--fy-sage-primary);
  color: #FFFFFF;
  border-radius: var(--fy-radius-lg);
  padding: 30px 22px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 992px) {
  .fy-cta-banner {
    padding: 40px;
  }
}

.fy-cta-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 10px;
  font-family: 'Nunito', Georgia, serif;
}

@media (min-width: 992px) {
  .fy-cta-heading {
    font-size: 2.1rem;
  }
}

.fy-cta-sub {
  font-size: 1rem;
  color: #E2ECE5;
  margin-bottom: 18px;
  line-height: 1.55;
}

.fy-cta-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

@media (min-width: 768px) {
  .fy-cta-checklist {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fy-cta-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: #FFFFFF;
}

.fy-cta-check-item i {
  color: #A3D4B0;
  font-size: 1.1rem;
}

.fy-cta-img-box {
  border-radius: var(--fy-radius-md);
  overflow: hidden;
  height: 100%;
  min-height: 220px;
}

.fy-cta-img-box img,
.fy-cta-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fy-radius-md);
  display: block;
}

.fy-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  margin-top: 14px;
  transition: var(--fy-transition);
}

.fy-whatsapp-link:hover {
  color: #A3D4B0;
  text-decoration: underline;
}

/* Legacy badge circle from old CTA */
.fy-badge-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--fy-white);
  color: var(--fy-sage-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.fy-badge-circle strong {
  font-size: 0.92rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.fy-badge-circle span {
  font-size: 0.72rem;
  color: var(--fy-sage-primary);
}

/* ==========================================================================
   Page Disclaimer
   ========================================================================== */
.fy-page-disclaimer {
  padding: 20px 20px;
  text-align: center;
  font-size: 0.8rem;
  color: #78857C;
  line-height: 1.5;
  border-top: 1px solid #E5E0D8;
  margin-top: 20px;
}

.fy-page-disclaimer strong {
  color: var(--fy-sage-dark);
}

/* ==========================================================================
   Responsive — Tablet
   ========================================================================== */
@media (max-width: 991px) {
  .fy-hero-title {
    font-size: 2rem;
  }

  .fy-section {
    padding: 38px 0;
  }

  .fy-who-join-img-wrap,
  .fy-choose-image-wrap,
  .fy-business-image-wrap {
    min-height: 260px;
  }

  .fy-cta-banner {
    text-align: center;
  }
}

/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */
@media (max-width: 767px) {
  .fy-header-spacer {
    height: 66px;
  }

  .fy-section {
    padding: 36px 0;
  }

  .fy-section-title-wrap {
    margin-bottom: 22px;
  }

  .fy-hero-wrapper {
    padding: 20px 16px;
  }

  .fy-hero-title {
    font-size: 1.85rem;
  }

  .fy-hero-subhead {
    font-size: 1rem;
  }

  .fy-hero-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }

  .fy-btn-primary,
  .fy-btn-hero {
    width: 100%;
    font-size: 0.9rem;
    padding: 13px 18px;
  }

  .fy-trust-badges {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }

  .fy-floating-benefits {
    margin-left: 0;
  }

  .fy-strip-container {
    padding: 14px 12px;
    margin-top: 14px;
  }

  .fy-highlights-grid {
    grid-template-columns: 1fr;
    padding: 16px 16px;
  }

  .fy-curriculum-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fy-faq-grid {
    gap: 10px;
  }

  .fy-faq-btn {
    padding: 14px 16px;
    font-size: 0.92rem;
  }

  .fy-faq-ans {
    padding: 0 16px 14px 16px;
  }

  .fy-cta-heading {
    font-size: 1.5rem;
  }

  .fy-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .fy-plan-box {
    padding: 20px 16px;
  }

  .fy-week-card,
  .fy-format-card,
  .fy-testimonial-card {
    padding: 18px 16px;
  }

  .fy-pricing-card {
    padding: 18px 16px;
  }

  .fy-cta-banner {
    padding: 24px 18px;
  }

  .fy-hero-img-container,
  .fy-hero-img-wrap {
    min-height: 240px;
  }
}

/* ==========================================================================
   Responsive — Small Mobile
   ========================================================================== */
@media (max-width: 420px) {
  .fy-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.face-yoga-page .header .header-container {
    gap: 6px;
    padding: 8px 8px 8px 12px;
  }

  body.face-yoga-page .header .logo h1 {
    font-size: 16px;
  }

  body.face-yoga-page .header .btn-getstarted {
    font-size: 12px;
    padding: 6px 10px;
  }

  .fy-hero-title {
    font-size: 1.7rem;
  }

  .fy-hero-pill {
    font-size: 0.7rem;
    padding: 5px 11px;
  }

  .fy-audience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .fy-aud-box {
    padding: 12px 8px;
  }

  .fy-aud-lbl {
    font-size: 0.76rem;
  }

  .fy-new-price {
    font-size: 1.45rem;
  }

  .fy-section {
    padding: 30px 0;
  }
}

/* ==========================================================================
   RESPONSIVE ENHANCEMENTS — TABLET & MOBILE
   Scoped to body.face-yoga-page only — does NOT affect any other page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global safe image behavior — all images on this page
   -------------------------------------------------------------------------- */
body.face-yoga-page img {
  max-width: 100%;
  height: auto;
}

body.face-yoga-page .fy-hero-img-container img,
body.face-yoga-page .fy-who-join-img,
body.face-yoga-page .fy-business-image-wrap img,
body.face-yoga-page .fy-choose-image-wrap img,
body.face-yoga-page .fy-cta-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overflow guard — no element may break viewport width */
body.face-yoga-page {
  overflow-x: hidden;
}

body.face-yoga-page .main,
body.face-yoga-page .fy-container,
body.face-yoga-page .fy-hero-wrapper,
body.face-yoga-page .fy-strip-container {
  max-width: 100%;
  overflow-x: hidden;
}

/* Safe word wrapping for text nodes */
body.face-yoga-page p,
body.face-yoga-page h1,
body.face-yoga-page h2,
body.face-yoga-page h3,
body.face-yoga-page h4,
body.face-yoga-page span,
body.face-yoga-page div,
body.face-yoga-page li,
body.face-yoga-page a {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   1024px — Large Tablet (iPad Pro, Surface Pro landscape)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Hero: stack text above image at 1024px to avoid squeezing */
  body.face-yoga-page .fy-hero-wrapper .row {
    flex-direction: column;
  }

  body.face-yoga-page .fy-hero-wrapper .col-lg-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  body.face-yoga-page .fy-hero-img-container {
    min-height: 300px;
    max-height: 440px;
    border-radius: var(--fy-radius-md);
  }

  /* Who Can Join: 3-custom-column → 2 col */
  body.face-yoga-page .fy-who-join-layout {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  body.face-yoga-page .fy-who-join-media {
    grid-column: 1 / -1;
    min-height: 260px;
  }

  body.face-yoga-page .fy-who-join-img-wrap {
    min-height: 260px;
  }

  /* Business section 3 col-lg-4 → single col */
  body.face-yoga-page #course-details .row .col-lg-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* Format grid 3 → 2 */
  body.face-yoga-page .fy-format-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   820px — iPad landscape / common mid-tablet
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  body.face-yoga-page .fy-hero-title {
    font-size: 2rem;
  }

  body.face-yoga-page .fy-section-title-wrap .fy-serif-heading {
    font-size: 1.8rem;
  }

  /* Curriculum: 2 col on mid-tablet */
  body.face-yoga-page .fy-curriculum-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Who join: single col stack */
  body.face-yoga-page .fy-who-join-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.face-yoga-page .fy-who-join-media {
    grid-column: auto;
    min-height: 240px;
  }

  body.face-yoga-page .fy-who-join-img-wrap {
    min-height: 240px;
  }

  /* Instructor section stack */
  body.face-yoga-page .fy-instructor-section-row .col-lg-3,
  body.face-yoga-page .fy-instructor-section-row .col-lg-7 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* --------------------------------------------------------------------------
   768px — Bootstrap md breakpoint / iPad portrait
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Format cards: 2 col on iPad portrait */
  body.face-yoga-page .fy-format-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* Override Bootstrap mb-5 added inline on section heading */
  body.face-yoga-page h2.fy-serif-heading.mb-5 {
    margin-bottom: 1.5rem !important;
  }

  /* CTA banner: image first then text */
  body.face-yoga-page .fy-cta-banner .row {
    flex-direction: column;
  }

  body.face-yoga-page .fy-cta-banner .col-lg-4,
  body.face-yoga-page .fy-cta-banner .col-lg-8 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  body.face-yoga-page .fy-cta-banner {
    text-align: center;
  }

  body.face-yoga-page .fy-cta-img-box {
    min-height: 200px;
    max-height: 260px;
    margin-bottom: 16px;
  }

  body.face-yoga-page .fy-cta-checklist {
    grid-template-columns: 1fr;
    text-align: left;
    display: inline-block;
    width: auto;
    margin: 0 auto 16px auto;
  }

  /* Business section all single col */
  body.face-yoga-page #course-details .col-lg-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  body.face-yoga-page .fy-business-image-wrap {
    min-height: 220px;
    max-height: 320px;
  }

  /* Pricing card: center it */
  body.face-yoga-page .fy-pricing-card {
    max-width: 480px;
    margin: 0 auto;
  }

  /* Certification row: stack */
  body.face-yoga-page section .col-lg-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* Instructor row: stack */
  body.face-yoga-page .col-lg-3.text-center,
  body.face-yoga-page .col-lg-7 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* --------------------------------------------------------------------------
   600px — Small tablet / large phone landscape
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {

  body.face-yoga-page .fy-section {
    padding: 30px 0;
  }

  body.face-yoga-page .fy-header-spacer {
    height: 54px;
  }

  body.face-yoga-page #hero {
    padding-top: 12px;
    padding-bottom: 30px;
  }

  body.face-yoga-page .fy-hero-wrapper {
    padding: 18px 14px;
    border-radius: var(--fy-radius-md);
  }

  body.face-yoga-page .fy-hero-title {
    font-size: 1.75rem;
  }

  body.face-yoga-page .fy-hero-subhead {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }

  body.face-yoga-page .fy-section-title-wrap {
    margin-bottom: 18px;
  }

  body.face-yoga-page .fy-section-title-wrap .fy-serif-heading {
    font-size: 1.6rem;
  }

  /* Format grid: 1 col */
  body.face-yoga-page .fy-format-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Audience: 2 col */
  body.face-yoga-page .fy-audience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Strip: 5 items across 3+2 */
  body.face-yoga-page .fy-strip-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Curriculum: single col */
  body.face-yoga-page .fy-curriculum-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Highlights grid: single col */
  body.face-yoga-page .fy-highlights-grid {
    grid-template-columns: 1fr;
    padding: 14px 12px;
  }

  /* Plan box */
  body.face-yoga-page .fy-plan-box {
    padding: 16px 14px;
  }

  body.face-yoga-page .fy-plan-box h2.fy-serif-heading {
    font-size: 1.45rem;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }

  /* Benefits: compact */
  body.face-yoga-page .fy-benefit-pill {
    padding: 8px 12px;
    font-size: 0.87rem;
  }

  body.face-yoga-page .fy-instructor-box {
    padding: 16px 14px;
  }

  body.face-yoga-page .fy-cert-box {
    padding: 20px 14px;
  }

  body.face-yoga-page .fy-cta-heading {
    font-size: 1.35rem;
  }
}

/* --------------------------------------------------------------------------
   480px — Large phones (iPhone Plus, Android XL)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  body.face-yoga-page .fy-section {
    padding: 26px 0;
  }

  body.face-yoga-page .fy-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.face-yoga-page .fy-hero-title {
    font-size: clamp(1.5rem, 5.5vw, 1.85rem);
  }

  body.face-yoga-page .fy-hero-pill {
    font-size: 0.68rem;
    padding: 5px 10px;
    letter-spacing: 0.5px;
  }

  body.face-yoga-page .fy-hero-img-container,
  body.face-yoga-page .fy-hero-img-wrap {
    min-height: 210px;
    max-height: 300px;
    border-radius: var(--fy-radius-md);
  }

  body.face-yoga-page .fy-hero-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  body.face-yoga-page .fy-metric-item {
    padding: 10px 8px;
    gap: 7px;
  }

  body.face-yoga-page .fy-metric-val {
    font-size: 0.95rem;
  }

  body.face-yoga-page .fy-metric-icon {
    font-size: 1.1rem;
  }

  /* Buttons: full-width stacked */
  body.face-yoga-page .fy-btn-group {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  body.face-yoga-page .fy-btn-primary,
  body.face-yoga-page .fy-btn-secondary,
  body.face-yoga-page .fy-btn-hero {
    width: 100%;
    justify-content: center;
    font-size: 0.88rem;
    padding: 12px 16px;
  }

  body.face-yoga-page .fy-trust-badges {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.8rem;
  }

  body.face-yoga-page .fy-strip-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  body.face-yoga-page .fy-strip-label {
    font-size: 0.76rem;
  }

  body.face-yoga-page .fy-who-join-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.face-yoga-page .fy-audience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 12px;
  }

  body.face-yoga-page .fy-aud-box {
    padding: 12px 8px;
  }

  body.face-yoga-page .fy-aud-icon {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }

  body.face-yoga-page .fy-aud-lbl {
    font-size: 0.75rem;
  }

  body.face-yoga-page .fy-week-card {
    padding: 16px 14px;
  }

  body.face-yoga-page .fy-week-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    margin-bottom: 8px;
  }

  body.face-yoga-page .fy-testimonial-card {
    padding: 16px 14px;
    height: auto;
  }

  body.face-yoga-page .fy-faq-btn {
    padding: 13px 14px;
    font-size: 0.88rem;
  }

  body.face-yoga-page .fy-faq-ans {
    padding: 0 14px 14px 14px;
    font-size: 0.88rem;
  }

  body.face-yoga-page .fy-instructor-img {
    width: 110px !important;
    height: 110px !important;
  }

  body.face-yoga-page .fy-cert-icon {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  body.face-yoga-page .fy-cert-title {
    font-size: 1.15rem;
  }

  body.face-yoga-page .fy-bonus-card {
    padding: 16px 14px;
  }

  body.face-yoga-page .fy-pricing-card {
    padding: 16px 14px;
  }

  body.face-yoga-page .fy-new-price {
    font-size: 1.4rem;
  }

  body.face-yoga-page .fy-format-card {
    padding: 16px 14px;
  }

  body.face-yoga-page .fy-section-title-wrap .fy-serif-heading,
  body.face-yoga-page h2.fy-serif-heading {
    font-size: 1.5rem;
  }

  body.face-yoga-page .fy-page-disclaimer {
    padding: 14px 12px;
    font-size: 0.78rem;
    margin-top: 14px;
  }
}

/* --------------------------------------------------------------------------
   390px — iPhone 14/15 Pro
   -------------------------------------------------------------------------- */
@media (max-width: 390px) {

  body.face-yoga-page .fy-section {
    padding: 24px 0;
  }

  body.face-yoga-page .fy-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.face-yoga-page .fy-hero-wrapper {
    padding: 16px 12px;
  }

  body.face-yoga-page .fy-hero-title {
    font-size: clamp(1.3rem, 7vw, 1.6rem);
    line-height: 1.2;
  }

  body.face-yoga-page .fy-hero-subhead {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }

  body.face-yoga-page .fy-hero-pill {
    font-size: 0.65rem;
    padding: 4px 9px;
    letter-spacing: 0;
    margin-bottom: 10px;
  }

  body.face-yoga-page .fy-trust-badges {
    font-size: 0.75rem;
    gap: 6px;
  }

  body.face-yoga-page .fy-strip-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  body.face-yoga-page .fy-strip-icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  body.face-yoga-page .fy-strip-label {
    font-size: 0.68rem;
  }

  body.face-yoga-page .fy-strip-container {
    padding: 12px 10px;
    margin-top: 12px;
  }

  body.face-yoga-page .fy-section-title-wrap .fy-serif-heading,
  body.face-yoga-page h2.fy-serif-heading {
    font-size: 1.38rem;
  }

  body.face-yoga-page .fy-new-price {
    font-size: 1.3rem;
  }

  body.face-yoga-page .fy-hero-img-container,
  body.face-yoga-page .fy-hero-img-wrap {
    min-height: 190px;
  }
}

/* --------------------------------------------------------------------------
   360px — Common Android (Galaxy A, Redmi, Moto)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {

  body.face-yoga-page .fy-section {
    padding: 20px 0;
  }

  body.face-yoga-page .fy-hero-title {
    font-size: 1.28rem;
    line-height: 1.25;
  }

  body.face-yoga-page .fy-hero-para {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  body.face-yoga-page .fy-hero-img-container,
  body.face-yoga-page .fy-hero-img-wrap {
    min-height: 175px;
  }

  body.face-yoga-page .fy-btn-primary,
  body.face-yoga-page .fy-btn-secondary,
  body.face-yoga-page .fy-btn-hero {
    font-size: 0.83rem;
    padding: 10px 12px;
  }

  body.face-yoga-page .fy-metric-val {
    font-size: 0.85rem;
  }

  body.face-yoga-page .fy-metric-lbl {
    font-size: 0.68rem;
  }

  body.face-yoga-page .fy-metric-item {
    padding: 8px 6px;
    gap: 5px;
  }

  body.face-yoga-page .fy-section-title-wrap .fy-serif-heading,
  body.face-yoga-page h2.fy-serif-heading {
    font-size: 1.25rem;
  }

  body.face-yoga-page .fy-week-card,
  body.face-yoga-page .fy-format-card,
  body.face-yoga-page .fy-testimonial-card,
  body.face-yoga-page .fy-bonus-card {
    padding: 14px 12px;
  }

  body.face-yoga-page .fy-audience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  body.face-yoga-page .fy-strip-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  body.face-yoga-page .fy-check-bullet {
    font-size: 0.84rem;
  }
}

/* --------------------------------------------------------------------------
   320px — iPhone SE 1st gen / minimum supported width
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {

  body.face-yoga-page .fy-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.face-yoga-page .fy-hero-title {
    font-size: 1.18rem;
  }

  body.face-yoga-page .fy-hero-pill {
    font-size: 0.6rem;
    padding: 4px 8px;
    letter-spacing: 0;
  }

  body.face-yoga-page .fy-hero-img-container,
  body.face-yoga-page .fy-hero-img-wrap {
    min-height: 155px;
  }

  body.face-yoga-page .fy-strip-icon {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
  }

  body.face-yoga-page .fy-strip-label {
    font-size: 0.62rem;
  }

  body.face-yoga-page .fy-faq-btn {
    padding: 11px 12px;
    font-size: 0.82rem;
  }

  body.face-yoga-page .fy-btn-primary,
  body.face-yoga-page .fy-btn-secondary {
    font-size: 0.8rem;
    padding: 9px 10px;
  }

  body.face-yoga-page .fy-audience-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body.face-yoga-page .fy-check-bullet {
    font-size: 0.82rem;
    gap: 8px;
  }

  body.face-yoga-page .fy-new-price {
    font-size: 1.2rem;
  }

  body.face-yoga-page .fy-pricing-title {
    font-size: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   Footer responsive — scoped to face-yoga-page only
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.face-yoga-page #footer .footer-top .row {
    flex-direction: column;
    gap: 20px;
  }

  body.face-yoga-page #footer .col-lg-4,
  body.face-yoga-page #footer .col-lg-2,
  body.face-yoga-page #footer .col-md-6,
  body.face-yoga-page #footer .col-md-3 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  body.face-yoga-page #footer .social-links {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  body.face-yoga-page #footer .footer-brand {
    font-size: 1rem !important;
  }

  body.face-yoga-page #footer .copyright {
    font-size: 0.8rem;
    padding: 10px 0;
  }
}