/* ============================================
   YOGA WITH JEN — SITE STYLESHEET
   ============================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --cream:#FAF8F5;
  --warm-white:#FFFFFF;
  --charcoal:#1C1C1C;
  --mid:#5A5A5A;
  --light:#9A9A9A;
  --rose:#C4856A;
  --rose-light:#E8C4B4;
  --rose-pale:#F7EDE8;
  --pink:#E8607A;
  --gold:#C9A45C;
}

html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--charcoal);overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}

/* ===== NAV ===== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  background:rgba(250,248,245,0.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(196,133,106,0.12);
}
.nav-logo-img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-link{font-size:0.85rem;font-weight:500;letter-spacing:0.02em;text-decoration:none;color:var(--mid);transition:color 0.2s}
.nav-link:hover{color:var(--pink)}
.nav-link.active{color:var(--charcoal)}
.nav-cta{
  display:inline-block;background:var(--pink);color:white;text-decoration:none;
  font-size:0.8rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  padding:11px 22px;border-radius:2px;transition:background 0.2s;
}
.nav-cta:hover{background:#d44f68}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--charcoal);margin:5px 0}

/* ===== PAGE HERO (for inner pages) ===== */
.page-hero{
  padding:160px 80px 70px;
  text-align:center;
  background:var(--cream);
}
.eyebrow{font-size:0.72rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--rose);margin-bottom:20px}
.page-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,4vw,3.6rem);font-weight:300;line-height:1.15;max-width:800px;margin:0 auto}
.page-h1 em{font-style:italic;color:var(--rose)}
.page-sub{font-size:1.05rem;font-weight:300;color:var(--mid);max-width:560px;margin:24px auto 0;line-height:1.75}

/* ===== SCROLL STACK EFFECT ===== */
/* Each direct child section becomes sticky and stacks underneath the next as you scroll */
.stack-wrap{position:relative}
.stack-section{
  position:sticky;
  top:0;
  background:var(--cream);
}

/* ===== ANIMATED COUNTER ===== */
.stat-num-static{
  font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;font-style:italic;
  color:var(--rose-light);line-height:1;margin-bottom:8px;
}

/* ===== FLY-IN ANIMATION ===== */
.fly-in{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.fly-in-visible{
  opacity:1;
  transform:translateY(0);
}

/* ===== HERO (home) ===== */
.hero{min-height:92vh;display:grid;grid-template-columns:1.05fr 0.95fr;padding-top:78px}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:60px 60px 60px 80px}
.hero-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,5vw,4.6rem);font-weight:300;line-height:1.08}
.hero-h1 em{font-style:italic;color:var(--rose)}
.hero-p{font-size:1.05rem;font-weight:300;color:var(--mid);line-height:1.75;margin:24px 0 40px;max-width:420px}
.btn-primary{
  display:inline-block;background:var(--pink);color:white;text-decoration:none;
  font-size:0.88rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  padding:18px 44px;border-radius:2px;transition:background 0.2s,transform 0.15s;
}
.btn-primary:hover{background:#d44f68;transform:translateY(-1px)}
.trust{font-size:0.78rem;color:var(--light);margin-top:16px;letter-spacing:0.03em}

.hero-right{position:relative;overflow:hidden;background:#222}
.hero-right img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
.hero-right::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,var(--cream) 0%,rgba(250,248,245,0) 18%)}

/* ===== STATS ===== */
.stats{background:var(--charcoal);color:white;display:grid;grid-template-columns:repeat(3,1fr);padding:48px 80px}
.stat{text-align:center;border-right:1px solid rgba(255,255,255,0.1)}
.stat:last-child{border-right:none}
.stat-num{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;font-style:italic;color:var(--rose-light);line-height:1;margin-bottom:8px}
.stat-label{font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5)}

/* ===== ABOUT ===== */
.about{display:grid;grid-template-columns:1fr 1fr;background:var(--warm-white)}
.about-text{padding:100px 80px;display:flex;flex-direction:column;justify-content:center}
.sec-h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3vw,2.7rem);font-weight:300;line-height:1.2;margin-bottom:26px}
.sec-h2 em{font-style:italic;color:var(--rose)}
.sec-p{font-size:1rem;font-weight:300;color:var(--mid);line-height:1.8;margin-bottom:18px}
.about-visual{position:relative;overflow:hidden;min-height:420px}
.about-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* ===== HOW IT WORKS ===== */
.how{padding:100px 80px;background:var(--cream)}
.how-header{text-align:center;margin-bottom:68px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:900px;margin:0 auto}
.how-step{text-align:center}
.how-num{font-family:'Cormorant Garamond',serif;font-size:3.8rem;font-weight:300;font-style:italic;color:var(--rose-light);line-height:1;margin-bottom:14px}
.how-title{font-size:0.86rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px}
.how-desc{font-size:0.9rem;color:var(--mid);line-height:1.7;font-weight:300}

/* ===== FEATURES (dark) ===== */
.features{background:var(--charcoal);color:white;padding:100px 80px}
.features-header{text-align:center;margin-bottom:68px}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-width:900px;margin:0 auto;background:rgba(255,255,255,0.06)}
.feature-item{background:var(--charcoal);padding:42px 46px;border:1px solid rgba(255,255,255,0.06);transition:background 0.2s}
.feature-item:hover{background:#252525}
.feature-icon{font-size:1.5rem;margin-bottom:14px}
.feature-title{font-size:0.98rem;font-weight:500;margin-bottom:10px}
.feature-desc{font-size:0.87rem;color:rgba(255,255,255,0.45);line-height:1.7;font-weight:300}

/* ===== PRICING ===== */
.pricing{padding:100px 80px;background:var(--warm-white);text-align:center}
.pricing-header{margin-bottom:56px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto 44px}
.price-card{border:1px solid rgba(196,133,106,0.2);padding:42px 30px;border-radius:4px;position:relative;transition:border-color 0.2s,transform 0.2s;background:var(--cream)}
.price-card:hover{transform:translateY(-4px);border-color:var(--rose)}
.price-card.featured{border-color:var(--pink);background:var(--charcoal);color:white}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--pink);color:white;font-size:0.66rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:5px 16px;border-radius:20px;white-space:nowrap}
.price-plan{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--rose);margin-bottom:18px}
.price-amount{font-family:'Cormorant Garamond',serif;font-size:3.1rem;font-weight:300;line-height:1;margin-bottom:4px}
.featured .price-amount{color:white}
.featured .price-period{color:rgba(255,255,255,0.5)}
.featured .price-save{color:var(--rose-light)}
.price-period{font-size:0.8rem;color:var(--light);margin-bottom:10px}
.price-save{font-size:0.76rem;color:var(--rose);font-weight:500;margin-bottom:30px;min-height:18px}
.price-btn{display:block;text-decoration:none;font-size:0.78rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:13px 22px;border-radius:2px;transition:all 0.2s}
.btn-outline{border:1px solid rgba(196,133,106,0.4);color:var(--charcoal)}
.btn-outline:hover{border-color:var(--pink);color:var(--pink)}
.btn-filled{background:var(--pink);color:white}
.btn-filled:hover{background:#d44f68}
.pricing-note{font-size:0.8rem;color:var(--light)}

/* ===== APPS / CTA BAND ===== */
.apps{padding:100px 80px;text-align:center;overflow:hidden}
.apps-bg{position:absolute;inset:0;z-index:0}
.apps-bg img{width:100%;height:100%;object-fit:cover}
.apps-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,28,28,0.55),rgba(28,28,28,0.75))}
.apps-content{position:relative;z-index:1;color:white}
.apps-content .eyebrow{color:var(--rose-light)}
.apps-content .sec-h2{color:white}
.apps-sub{font-size:0.98rem;color:rgba(255,255,255,0.8);margin:16px auto 36px;max-width:480px;line-height:1.7;font-weight:300}
.app-badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.app-badge{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(6px);
  color:white;text-decoration:none;padding:14px 28px;border-radius:4px;
  transition:background 0.2s, transform 0.2s;
}
.app-badge:hover{background:rgba(255,255,255,0.28);transform:translateY(-2px)}
.app-badge-icon{font-size:1.3rem}
.app-badge-text{text-align:left}
.app-badge-text small{display:block;font-size:0.64rem;letter-spacing:0.08em;text-transform:uppercase;opacity:0.75}
.app-badge-text strong{display:block;font-size:0.92rem;font-weight:500;color:white}

/* ===== SOCIAL ===== */
.social{background:var(--warm-white);padding:56px 80px;text-align:center;border-top:1px solid rgba(196,133,106,0.12)}
.social-label{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--light);margin-bottom:26px}
.social-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.social-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.82rem;letter-spacing:0.02em;color:var(--mid);text-decoration:none;
  transition:color 0.2s,border-color 0.2s;font-weight:500;
  border:1px solid rgba(196,133,106,0.25);padding:9px 18px;border-radius:24px;
}
.social-link:hover{color:var(--pink);border-color:var(--pink)}
.social-link svg{width:15px;height:15px;fill:currentColor}

/* ===== FOOTER ===== */
footer{background:var(--charcoal);color:rgba(255,255,255,0.45);padding:56px 80px 32px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-logo-img{height:38px;width:auto;margin-bottom:16px;opacity:0.92}
.footer-blurb{font-size:0.85rem;line-height:1.7;color:rgba(255,255,255,0.4);max-width:280px}
.footer-col-title{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:16px}
.footer-col a{display:block;font-size:0.86rem;color:rgba(255,255,255,0.45);text-decoration:none;margin-bottom:10px;transition:color 0.2s}
.footer-col a:hover{color:rgba(255,255,255,0.85)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:0.78rem;flex-wrap:wrap;gap:12px}

/* ===== BLOG / ARTICLE LIST ===== */
.article-grid{padding:0 80px 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1200px;margin:0 auto}
.article-card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.article-card-img{aspect-ratio:4/3;overflow:hidden;border-radius:4px;margin-bottom:20px;background:var(--rose-pale)}
.article-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.article-card:hover .article-card-img img{transform:scale(1.04)}
.article-tag{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.article-title{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;line-height:1.3;margin-bottom:10px}
.article-excerpt{font-size:0.88rem;color:var(--mid);line-height:1.65;font-weight:300}

/* ===== ARTICLE / SINGLE POST ===== */
.article-body{max-width:680px;margin:0 auto;padding:0 24px 100px}
.article-body h2{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:400;margin:44px 0 18px;line-height:1.3}
.article-body h3{font-size:1.05rem;font-weight:600;margin:32px 0 14px}
.article-body p{font-size:1.02rem;color:var(--mid);line-height:1.85;font-weight:300;margin-bottom:20px}
.article-body ul,.article-body ol{margin:0 0 24px 0;padding-left:22px}
.article-body li{font-size:1.02rem;color:var(--mid);line-height:1.85;font-weight:300;margin-bottom:10px}
.article-body strong{color:var(--charcoal);font-weight:600}
.article-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin-bottom:48px}
.article-meta{display:flex;gap:16px;align-items:center;justify-content:center;font-size:0.78rem;color:var(--light);margin-top:18px;letter-spacing:0.02em}
.article-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--light)}

.callout{background:var(--rose-pale);border-left:3px solid var(--rose);padding:22px 26px;border-radius:2px;margin:32px 0}
.callout p{margin-bottom:0;color:var(--charcoal)}

/* ===== POSE LIBRARY ===== */
.pose-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 80px 50px;max-width:900px;margin:0 auto}
.pose-filter{font-size:0.78rem;font-weight:500;letter-spacing:0.04em;padding:9px 18px;border-radius:20px;border:1px solid rgba(196,133,106,0.3);background:transparent;color:var(--mid);cursor:pointer;transition:all 0.2s}
.pose-filter:hover,.pose-filter.is-active{background:var(--pink);border-color:var(--pink);color:white}

.pose-grid{padding:0 80px 100px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:1100px;margin:0 auto}
.pose-card{background:var(--warm-white);border:1px solid rgba(196,133,106,0.15);border-radius:6px;padding:36px;transition:border-color 0.2s, transform 0.2s}
.pose-card:hover{border-color:var(--rose);transform:translateY(-2px)}
.pose-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:16px}
.pose-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400}
.pose-sanskrit{font-size:0.82rem;font-style:italic;color:var(--rose);margin-top:4px}
.pose-chakra-badge{flex-shrink:0;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;background:var(--rose-pale);color:var(--rose);padding:6px 12px;border-radius:14px;white-space:nowrap}
.pose-desc{font-size:0.92rem;color:var(--mid);line-height:1.75;font-weight:300;margin-bottom:16px}
.pose-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:0.8rem;color:var(--light);border-top:1px solid rgba(196,133,106,0.12);padding-top:14px}
.pose-meta strong{color:var(--charcoal);font-weight:500}

/* ===== CONTACT ===== */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:0 auto;padding:0 80px 100px;gap:64px}
.contact-info-item{margin-bottom:32px}
.contact-info-label{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--rose);margin-bottom:8px}
.contact-info-value{font-size:1.05rem;font-weight:300}
.contact-info-value a{text-decoration:none;color:var(--charcoal);border-bottom:1px solid rgba(196,133,106,0.3)}

.form-group{margin-bottom:22px}
.form-label{display:block;font-size:0.82rem;font-weight:500;margin-bottom:8px;color:var(--charcoal)}
.form-input,.form-textarea{
  width:100%;border:1px solid rgba(196,133,106,0.3);border-radius:3px;padding:13px 16px;
  font-family:'DM Sans',sans-serif;font-size:0.95rem;background:var(--warm-white);color:var(--charcoal);
  transition:border-color 0.2s;
}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--pink)}
.form-textarea{resize:vertical;min-height:130px}
.form-submit{
  background:var(--pink);color:white;border:none;font-size:0.85rem;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;padding:15px 36px;border-radius:2px;
  cursor:pointer;transition:background 0.2s;
}
.form-submit:hover{background:#d44f68}

/* ===== FAQ (used on contact) ===== */
.faq-item{border-bottom:1px solid rgba(196,133,106,0.15);padding:22px 0}
.faq-q{font-size:0.98rem;font-weight:500;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-a{font-size:0.9rem;color:var(--mid);line-height:1.7;font-weight:300;margin-top:12px;display:none}
.faq-item.open .faq-a{display:block}
.faq-icon{transition:transform 0.2s;color:var(--rose)}
.faq-item.open .faq-icon{transform:rotate(45deg)}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .article-grid{grid-template-columns:1fr;padding:0 24px 70px}
  .pose-grid{grid-template-columns:1fr;padding:0 24px 70px}
  .contact-wrap{grid-template-columns:1fr;padding:0 24px 70px;gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}

@media(max-width:768px){
  .stack-section{position:relative !important}

  nav{padding:14px 20px}
  .nav-logo-img{height:38px}
  .nav-links{display:none}
  .nav-toggle{display:block}

  .page-hero{padding:120px 24px 50px}

  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-right{height:64vw;min-height:280px;order:-1}
  .hero-right::after{background:linear-gradient(to bottom,rgba(250,248,245,0) 65%,var(--cream) 100%)}
  .hero-left{padding:32px 24px 56px}

  .stats{padding:36px 24px}
  .about{grid-template-columns:1fr}
  .about-text{padding:56px 24px}
  .about-visual{min-height:280px;order:-1}

  .how{padding:56px 24px}
  .how-grid{grid-template-columns:1fr;gap:36px}

  .features{padding:56px 24px}
  .features-grid{grid-template-columns:1fr}

  .pricing{padding:56px 24px}
  .pricing-grid{grid-template-columns:1fr;gap:16px}

  .apps{padding:64px 24px}
  .social{padding:40px 24px}
  .social-links{gap:10px}

  footer{padding:48px 24px 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-bottom{flex-direction:column;text-align:center}

  .pose-filters{padding:0 24px 36px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}