:root{--font-body:"Inter",Arial,sans-serif;--font-display:"Poppins",Arial,sans-serif}
html{font-kerning:normal}
html,body{overflow-x:clip}
body,button,input,select,textarea{font-family:var(--font-body)!important}
h1,h2,h3,h4,h5,h6,.program,.price{font-family:var(--font-display)!important;font-weight:800;letter-spacing:-.035em}
h1{line-height:1.08}
h2,h3,h4,h5,h6{line-height:1.15}
.eyebrow,.kicker{font-family:var(--font-body)!important;font-weight:800;letter-spacing:.1em}

/* Keep the brand visible when the white logo asset sits on a light navigation bar. */
header .logo{filter:brightness(0) saturate(100%)!important}
.footer .logo{filter:brightness(0) invert(1)!important}

/* Section labels must orient the reader without competing with the headline. */
.eyebrow,.kicker{
  display:inline-block;
  font-size:clamp(.875rem,.82rem + .25vw,1rem)!important;
  line-height:1.35;
  margin-bottom:.7rem;
}

/* Related heading and supporting copy read as one group, not distant columns. */
.intro{
  grid-template-columns:1fr!important;
  align-items:start!important;
  gap:.75rem!important;
  max-width:56rem;
}
.intro h2{max-width:18ch;margin-bottom:0}
.intro p{max-width:44rem;margin:0!important}

/* Hub pages have no hero image: use the full content width and a restrained display scale. */
.hero .shell>:only-child{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  max-width:56rem;
}
.hero .shell>:only-child h1{
  max-width:min(18ch,100%);
  font-size:clamp(2.75rem,4.2vw,4.5rem);
  line-height:1.04;
  overflow-wrap:anywhere;
}
.hero .shell>:only-child>p{max-width:45rem}
@media(min-width:801px){.hero .shell>:only-child{min-height:clamp(28rem,55vh,36rem);display:flex;flex-direction:column;justify-content:center}}

/* Long course and article titles need hierarchy without becoming the whole viewport. */
.hero-copy h1{
  max-width:min(20ch,100%);
  font-size:clamp(2.5rem,4vw,4rem);
  line-height:1.06;
  overflow-wrap:anywhere;
}

.path,.path a{min-width:0}
.path .age{overflow-wrap:anywhere}

@media(max-width:800px){
  .intro{max-width:42rem}
  .hero .shell>:only-child{padding:4rem 0}
  .hero .shell>:only-child h1{font-size:clamp(2.35rem,10vw,3rem)}
  .nav .logo{width:7.5rem}
  .nav .button{min-height:2.75rem;padding:.6rem .8rem;font-size:.82rem;white-space:nowrap}
  .topbar .shell{display:grid;grid-template-columns:1fr;gap:.2rem}
}