/* Landing: the hero at the fold, in the same boiler house as the sign-in page. Later sections stack below .hero inside .landing. */
.landing{flex:1;display:grid;align-content:center;padding:24px max(var(--gutter),env(safe-area-inset-right)) 56px max(var(--gutter),env(safe-area-inset-left))}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) auto;align-items:center;gap:48px clamp(40px,6vw,96px);width:min(100%,1200px);margin:0 auto;animation:screen-in .9s var(--ease) both}
.hero h1{font-size:clamp(2.75rem,1.4rem + 4.4vw,5rem);line-height:1;letter-spacing:-.03em}
.hero .sub{margin-top:22px;max-width:46ch;font-size:var(--text-lg)}
.hero .lesson-actions{margin-top:34px}
.facts{display:flex;flex-wrap:wrap;gap:16px 40px;margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--line);list-style:none}
.facts li{display:grid;gap:6px}
.facts strong{font:480 1.75rem/1 var(--font-display);letter-spacing:-.02em;color:var(--ink-0);font-variant-numeric:lining-nums}
.facts span{font-size:var(--text-sm);color:var(--ink-3)}
.hero .dial{--dial:clamp(300px,32vw,440px)}
.dial-label{position:absolute;translate:-50% -50%;font:500 max(20px,7.4cqw)/1 var(--font-display);color:var(--ink-2);font-variant-numeric:lining-nums}
.dial-label:nth-of-type(-n+2){left:29.6%}.dial-label:nth-of-type(n+4){left:70.4%}.dial-label:nth-of-type(3){left:50%;top:33.1%}
.dial-label:is(:nth-of-type(1),:nth-of-type(5)){top:77.2%}.dial-label:is(:nth-of-type(2),:nth-of-type(4)){top:47.8%}
.dial-label.top{color:var(--moss)}

@media(max-width:900px){
 .hero{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
 .hero .dial{--dial:clamp(240px,46vw,340px);order:-1}
 .hero .eyebrow,.hero .lesson-actions,.facts{justify-content:center}
 .hero .sub{margin-inline:auto}
}
@media(max-width:520px){
 .landing{align-content:start;padding-top:8px}
 .hero{gap:28px}
 .hero .sub{font-size:var(--text-md)}
 .hero .lesson-actions .btn{flex:1 1 auto}
 .facts{gap:16px 28px;margin-top:36px}
 .site-head .wide{display:none}
}