/* One measured header offset for section links and natural page scrolling. */
:root{--nav-header-height:78px;--nav-screen-height:calc(100dvh - var(--nav-header-height))}
html{scroll-padding-top:var(--nav-header-height)}
#website #main>section{scroll-margin-top:0}
#website .nav-screen{box-sizing:border-box;min-height:var(--nav-screen-height)}
#website header nav a[aria-current="location"]:after{width:100%}
#website header nav{top:var(--nav-header-height)}
#website .nav-screen:focus{outline:none}
#website .nav-screen:focus-visible{outline:2px solid #8c9f78;outline-offset:-3px}

@media(min-width:901px){
  /* A section fills at least one viewport, but grows with its content. */
  #website #main>.nav-screen{height:auto;min-height:var(--nav-screen-height);overflow:visible;padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(24px,4vh,48px)}
  #website .nav-screen .why-anchor{position:static}
  #website .nav-screen .wf-heading,#website .nav-screen .studio-heading{margin-bottom:24px}
  #website .nav-screen .wf-body{min-height:0;padding:22px 28px}
  #website .nav-screen .wf-topbar{padding:14px 24px}
  #website .nav-screen .wf-bottom{padding:12px 24px}
  #website .nav-screen .wf-aside{margin-top:12px;padding-top:16px}
  #website .nav-screen .wf-caption{margin-top:14px}
  #website .nav-screen .studio-room{min-height:0}
  #website .nav-screen .studio-settings{padding:22px}
  #website .nav-screen .studio-settings>p{margin-bottom:18px}
  #website .nav-screen .studio-settings label{margin-bottom:14px}
  #website .nav-screen .studio-empty{padding:24px}
  #website .nav-screen .studio-lumi{width:70px;height:88px}
  #website .nav-screen .why-heading{margin-bottom:26px}
  #website .nav-screen .pricing-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:12px 36px;margin-bottom:24px}
  #website .nav-screen .pricing-intro>.eyebrow{grid-column:1/-1}
  #website .nav-screen .pricing-intro h2{margin:0;grid-column:1;grid-row:2}
  #website .nav-screen .pricing-intro>p{grid-column:2;grid-row:2/4;font-size:15px;align-self:center}
  #website .nav-screen .pricing-intro .billing-toggle{grid-column:1;grid-row:3;margin-top:0}
  #website .nav-screen .pro-plan{padding:22px}
  #website .nav-screen .plan-summary{min-height:0;margin-bottom:16px}
  #website .nav-screen .plan-highlights{min-height:0;margin-bottom:16px}
  #website .nav-screen .plan-head{margin-bottom:14px}
  #website .nav-screen .monthly-equivalent{margin-bottom:16px}
  #website .nav-screen .plan-details{margin-bottom:16px}
}
@media(max-width:900px){
  #website #main>.nav-screen{height:auto;overflow:visible;padding-top:32px;padding-bottom:48px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}