/* ==========================================================================
   HOME: match the original suroshripaul.com page, in brand fonts.
   Loaded after the page's own styles. Sizes, spacing and alignment follow the
   original site (measured at 1280px wide). Cormorant Garamond runs narrower than
   the original serifs, so its sizes are scaled up until each line is as wide as on
   the original; Plus Jakarta Sans matches Inter at the same sizes.
   ========================================================================== */

/* ---------- Section headings: 38px (as wide as the original's 32px Playfair),
   with the original's 62px from heading to text ---------- */
body .section-heading-playfair,
body .card-title-white,
body .udemy-title { font-size: 38px !important; font-weight: 600 !important; line-height: 46px !important; letter-spacing: -0.3px !important; margin-bottom: 16px !important; }

/* Body text: 14px / 1.8, as on the other pages; #333 on white, as on the original. */
body .begin-journey-text,
body .naadalayam-way-text { font-size: 14px !important; line-height: 1.8 !important; color: #333333 !important; }
body .masterclass-card-desc,
body .community-text,
body .about-suroshri-desc { font-size: 14px !important; line-height: 1.8 !important; }

/* ---------- Experience the Music: 74px under the banner; 368 x 600 poster on the
   left, quote and button in a 450px column on the right ---------- */
body .home-hero-banner + .home-spacer-80 { height: 54px !important; }
body .experience-music-section { padding-bottom: 44px !important; }
body .experience-music-section .section-heading-playfair { margin-bottom: 92px !important; }
body .experience-grid { max-width: 888px !important; gap: 70px !important; position: relative; }
/* As on the original, the pair sits 66px right of centre, on screens wide enough for it. */
@media (min-width: 1200px) { body .experience-grid { left: 66px; } }
body .experience-media { flex: 0 0 368px !important; max-width: 368px !important; }
body .experience-content { flex: 0 0 450px !important; max-width: 450px !important; }
body .experience-music-section .video-poster-box { max-width: 368px !important; border-radius: 0 !important; }
body .experience-music-section .video-poster-box img { height: 600px !important; }
body .experience-quote { font-size: 22.5px !important; line-height: 1.4 !important; }

/* ---------- Begin Your Raga Journey: one phrase per line, as on the original ---------- */
body .begin-journey-close { display: block; margin-top: 23px; }
body .begin-journey-text { margin-bottom: 45px !important; }

/* ---------- Countdown box: closer to the sections around it ---------- */
body .begin-journey-section + .home-spacer-60 { height: 20px !important; }
body .masterclass-card-section { padding-bottom: 20px !important; }
body .masterclass-card-section + .home-spacer-40 { height: 40px !important; }
/* Box: no shadow; yellow title, as the other headings on navy. */
body .masterclass-navy-card { box-shadow: none !important; }
body .card-title-white { color: #ECB127 !important; }
/* Date and time: the soft Ochre pills from the Masterclass page. */
body .webinar-badge-item {
  background: #F6ECDC !important; border: 1px solid rgba(197, 143, 56, 0.5) !important; border-radius: 50px !important;
  box-shadow: 0 6px 16px rgba(27, 40, 87, 0.12), 0 1px 3px rgba(27, 40, 87, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  padding: 10px 18px !important; gap: 10px !important;
  color: #1B2857 !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 1.3px !important;
}
body .webinar-badge-item i { color: #C58F38 !important; }

/* ---------- The Naadalayam Way: an 800px justified paragraph ---------- */
body .naadalayam-way-content { max-width: 800px !important; }
body .naadalayam-way-text { text-align: justify !important; }
body .naadalayam-way-section + .home-spacer-40 { height: 10px !important; }

/* ---------- Free Crash Course: the original's 798px graphic; title as on the Method page ---------- */
body .crash-course-graphic { width: 100% !important; max-width: 798px !important; }
/* The graphic has 47px of empty space under the devices: shift it 35px down into the navy
   band (closer to the title) without changing any section's height. */
body .crash-course-graphic { transform: translateY(35px); }
body .crash-course-gold-title { font-size: 39px !important; font-weight: 600 !important; letter-spacing: -0.78px !important; line-height: 46px !important; margin-top: 0 !important; margin-bottom: 12px !important; }
/* The 10px gap above the title is navy padding (a margin here showed as a white strip). */
/* No light hairline where the graphic band meets the navy body: the band's white/navy gradient
   must not repeat (its fractional height let a row of the next, white, tile show at the bottom). */
body .crash-course-split-hero { background-color: #1B2857 !important; background-repeat: no-repeat !important; }
body .crash-course-navy-body { padding-top: 10px !important; margin-top: -1px; }

/* ---------- Community and About boxes: the same size as on the live page
   (485px and 410px tall), text centred in them ---------- */
body .community-navy-card { min-height: 485px; display: flex; flex-direction: column; justify-content: center; }
body .about-suroshri-navy-card { min-height: 410px; }
body .about-gold-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: 36px !important; font-weight: 600 !important; line-height: 1.2 !important;
}
body .btn-read-more-pill { align-self: center !important; }

/* ---------- Udemy: the original's 1020px badge ---------- */
body .udemy-container { max-width: 1020px !important; }
body .udemy-badge-img { max-width: 1020px !important; }

@media (max-width: 991px) {
  body .experience-grid { left: 0; max-width: 100% !important; gap: 30px !important; }
  body .experience-media, body .experience-content { flex: 1 1 auto !important; max-width: 100% !important; }
  body .experience-music-section .video-poster-box img { height: 520px !important; }
  body .experience-music-section .section-heading-playfair { margin-bottom: 30px !important; }
}
@media (max-width: 768px) {
  body .section-heading-playfair, body .card-title-white, body .udemy-title { font-size: 30px !important; line-height: 1.25 !important; }
  body .crash-course-gold-title { font-size: 32px !important; }
  body .about-gold-title { font-size: 24px !important; }
  body .crash-course-graphic { width: 90% !important; max-width: 480px !important; transform: translateY(20px); }
}