/* V78 — INTER SITEWIDE TYPOGRAPHY + NAV + CTA SYSTEM
   One typography system across the public site.
   Inter is used for headings, body copy, navigation, buttons and footer text.
   Lovish navy/rose/cream remain the core visual language.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --site-navy:#132f55;
  --site-navy-2:#0d2948;
  --site-rose:#b85a6c;
  --site-rose-dark:#a94f61;
  --site-cream:#fbf7f1;
  --site-blush:#fbf1ed;
  --site-muted:#60748e;
  --site-white:#fff;
}

/* =========================================================
   1. ONE FONT FAMILY — PUBLIC SITE
   ========================================================= */
html,body,
body *,
button,input,textarea,select{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
}

body{
  color:var(--site-navy);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =========================================================
   2. HEADING SYSTEM — BOLD AND HIGH VISIBILITY
   ========================================================= */
main h1,
.hero h1,
.page-hero h1,
.pricing-hero h1,
.support-hero h1,
.course-detail-hero h1,
.course-hero h1{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-size:48px !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  letter-spacing:-1.5px !important;
  color:var(--site-navy) !important;
}

main h2,
.section-title h2,
.course-group h2,
.about-card h2,
.contact-card h2,
.resource-card h2,
.resource-section-title,
.course-section h2,
.course-bottom-cta h2,
.lead-cta h2,
.cta h2{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-size:25px !important;
  font-weight:800 !important;
  line-height:1.18 !important;
  letter-spacing:-.65px !important;
  color:var(--site-navy) !important;
}

main h3,
.course-card h3,
.unit h3,
.aside-card h3,
.about-card h3,
.contact-card h3,
.plan-name,
.plan-card h3,
.monthly-option h3{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-size:20px !important;
  font-weight:700 !important;
  line-height:1.22 !important;
  letter-spacing:-.25px !important;
  color:var(--site-navy) !important;
}

main h4{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  color:var(--site-navy) !important;
}

h1[style],h2[style],h3[style],h4[style],
.success h2,.success h3{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-weight:800 !important;
  color:var(--site-navy) !important;
}

/* Named section headings that may not use heading tags. */
.section-title,
.directory-head,
.resource-section-title,
.course-group,
.monthly-head,
.test-head{
  color:var(--site-navy);
}

/* =========================================================
   3. BODY / SUPPORTING TEXT
   ========================================================= */
main p,
main li,
main label,
main small,
main .section-sub,
main .section-note,
main .resource-section-sub,
main .directory-intro,
main .hero p,
main .page-hero p,
main .resource-card p,
main .about-card p,
main .contact-card p,
main .course-card p,
main .course-section p,
main .course-section li,
main .aside-help{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
}

.section-sub,
.resource-section-sub,
.directory-intro{
  font-size:15px !important;
  line-height:1.6 !important;
  color:var(--site-muted) !important;
}

/* =========================================================
   4. TOP NAVIGATION — LARGER, INTER, BOLD
   ========================================================= */
body>header .navlinks a,
body header.mini-nav .navlinks a,
header.mini-nav .navlinks a,
.navlinks a{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:-.1px !important;
  color:var(--site-navy) !important;
}

body>header .top-cta,
body header.mini-nav .top-cta,
header.mini-nav .top-cta,
.top-cta{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.footer-nav,
.footer-nav a,
.footer-copy{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
}

.footer-nav a{
  font-size:13px !important;
  font-weight:600 !important;
}

.footer-copy{font-size:12px !important}

@media(max-width:1100px){
  .navlinks a{font-size:14px !important}
}
@media(max-width:850px){
  .navlinks a{font-size:14px !important}
}

/* =========================================================
   5. SITEWIDE NAV/CTA KICKER — RED TOP LABEL
   ========================================================= */
.site-cta-kicker,
.lead-eyebrow,
.pricing-kicker{
  display:block !important;
  margin:0 0 8px !important;
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:3px !important;
  text-transform:uppercase !important;
  color:var(--site-rose) !important;
}

/* =========================================================
   6. ALL FOOTER-ADJACENT ACTION PANELS — NAVY BLUE
   ========================================================= */
.lead-cta,
.cta,
.course-cta,
.course-bottom-cta,
.probono-cta,
.contact-bottom-cta{
  background:var(--site-navy) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 34px rgba(19,47,85,.12) !important;
}

.lead-cta{
  padding:38px 0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
}

.lead-cta-inner{
  padding:0 28px !important;
}

.lead-cta h2,
.cta h2,
.course-cta h2,
.course-bottom-cta h2,
.probono-cta h3,
.contact-bottom-cta h2{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-weight:800 !important;
  color:#fff !important;
}

.lead-cta h2{font-size:32px !important;line-height:1.14 !important}
.cta h2{font-size:30px !important;line-height:1.16 !important}
.course-cta h2,.course-bottom-cta h2{font-size:26px !important;line-height:1.2 !important}
.probono-cta h3{font-size:27px !important;line-height:1.2 !important}
.contact-bottom-cta h2{font-size:30px !important;line-height:1.16 !important}

.lead-cta p,
.cta p,
.course-cta p,
.course-bottom-cta p,
.probono-cta p,
.contact-bottom-cta p{
  color:#eaf0f6 !important;
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
}

/* Red CTA buttons on navy panels. */
.lead-cta .btn,
.lead-cta .btn-primary,
.lead-cta .btn-outline,
.cta .btn,
.course-cta .btn,
.course-bottom-cta a,
.probono-cta .btn,
.probono-cta .btn-primary,
.contact-bottom-cta .btn,
.contact-bottom-cta .btn-primary{
  background:var(--site-rose) !important;
  border-color:var(--site-rose) !important;
  color:#fff !important;
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-weight:800 !important;
}

.lead-cta .btn:hover,
.lead-cta .btn-primary:hover,
.lead-cta .btn-outline:hover,
.cta .btn:hover,
.course-cta .btn:hover,
.course-bottom-cta a:hover,
.probono-cta .btn:hover,
.probono-cta .btn-primary:hover,
.contact-bottom-cta .btn:hover,
.contact-bottom-cta .btn-primary:hover{
  background:var(--site-rose-dark) !important;
  border-color:var(--site-rose-dark) !important;
}

/* Contact's previous inline cream panel is intentionally overridden. */
.contact-bottom-cta{
  max-width:1120px !important;
  margin:0 auto !important;
  border-radius:22px !important;
  padding:30px 40px !important;
}

.contact-bottom-cta .contact-bottom-copy{
  min-width:0;
}

/* Pricing Support Program kicker stays red; content remains white. */
.probono-cta .pricing-kicker{
  color:var(--site-rose) !important;
}

/* =========================================================
   7. TICKER / SMALL UI TEXT
   ========================================================= */
.site-offer-v73,
.site-offer-v73 *{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
}

/* =========================================================
   8. MOBILE
   ========================================================= */
@media(max-width:700px){
  main h1,.hero h1,.page-hero h1,.pricing-hero h1,.support-hero h1,.course-detail-hero h1,.course-hero h1{
    font-size:39px !important;
    line-height:1.1 !important;
    letter-spacing:-1px !important;
  }
  main h2,.section-title h2,.course-group h2,.about-card h2,.contact-card h2,.resource-card h2,.resource-section-title,.course-section h2{
    font-size:24px !important;
    line-height:1.2 !important;
  }
  main h3,.course-card h3,.unit h3,.aside-card h3,.about-card h3,.contact-card h3,.plan-name,.plan-card h3,.monthly-option h3{
    font-size:19px !important;
  }
  .site-cta-kicker,.lead-eyebrow,.pricing-kicker{font-size:11px !important;letter-spacing:2.5px !important}
  .lead-cta h2,.contact-bottom-cta h2{font-size:27px !important}
  .cta h2{font-size:26px !important}
  .course-cta h2,.course-bottom-cta h2{font-size:23px !important}
  .probono-cta h3{font-size:24px !important}
  .contact-bottom-cta{padding:28px 22px !important}
}

/* =========================================================
   9. CONSISTENT BOXED TREATMENT FOR BOTTOM CTAs
   ========================================================= */
.lead-cta,
.cta{
  width:min(1120px,92%) !important;
  margin:30px auto !important;
  border-radius:22px !important;
  overflow:hidden;
}

.lead-cta-inner,
.cta-inner{
  width:auto !important;
  max-width:none !important;
  padding:4px 28px !important;
}

@media(max-width:700px){
  .lead-cta,
  .cta{width:92% !important;margin:24px auto !important}
  .lead-cta-inner,
  .cta-inner{padding:0 !important}
}

/* V78.1 — navigation active-state + dark-panel heading visibility */
.navlinks a.active,
.navlinks a[aria-current="page"]{
  color:var(--site-rose) !important;
}
.navlinks a.active:hover,
.navlinks a[aria-current="page"]:hover{
  color:var(--site-rose-dark) !important;
}

/* Contact "Before Your First Session" panel: white heading on navy background. */
.contact-highlight h2,
.contact-highlight h2[style]{
  color:#fff !important;
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
  font-weight:800 !important;
}


/* V78.2 — final primary-nav active state. Loaded last and cache-busted on every page. */
body>header .navlinks a.active,
body>header .navlinks a[aria-current="page"],
body header.mini-nav .navlinks a.active,
body header.mini-nav .navlinks a[aria-current="page"]{
  color:var(--site-rose) !important;
}
body>header .navlinks a.active:after,
body>header .navlinks a[aria-current="page"]:after,
body header.mini-nav .navlinks a.active:after,
body header.mini-nav .navlinks a[aria-current="page"]:after{
  background:var(--site-rose) !important;
  opacity:1 !important;
  transform:scaleX(1) !important;
}