/* ============================================================
   Learn landing page — mirrors the home page layout.
   Tokens, header, nav, display links, stats band and footer all come
   from /assets/site.css.
   ============================================================ */

.hero{padding:104px 0 152px;}
.hero h1{
  font-family:var(--face-display);font-weight:400;
  font-size:clamp(2.1rem,4.4vw,60px);
  line-height:1.16;letter-spacing:-.02em;
  margin:24px 0 0;color:var(--ink);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.coinstack{height:1.5em;width:auto;flex:none;}
.hero p.lede{margin:30px 0 0;max-width:610px;font-size:17px;line-height:1.55;color:var(--muted-2);}

.begin{background:var(--paper-soft);padding:112px 0;}
.begin .kicker-row{margin-bottom:32px;}
.begin .head-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;flex-wrap:wrap;
}
.begin .head-row .left,
.begin .head-row .right{
  margin:0;font-size:17px;font-weight:300;line-height:1.5;color:var(--muted);
}
.begin .head-row .right{max-width:500px;text-align:right;}

/* the three grade-set links: big handwriting range + a quiet caption */
.stage-links{max-width:720px;align-items:flex-start;}
.stage-links .display-link{
  display:flex;flex-direction:column;align-items:center;gap:0;
  font-size:clamp(2.4rem,5.6vw,64px);line-height:1.08;
}
.stage-cap{
  font-family:var(--face-serif);font-weight:400;font-size:19px;
  letter-spacing:.02em;color:var(--muted);transition:color .2s ease;
}
.display-link:hover .stage-cap{color:var(--accent-dark);}

.after{padding:88px 0 96px;}
.after-note{margin:22px 0 0;max-width:74ch;font-size:17px;line-height:1.62;color:var(--muted-2);}

@media (max-width:1080px){ .hero{padding:88px 0 112px;} }
@media (max-width:720px){
  .hero{padding:60px 0 72px;}
  .begin{padding:72px 0;}
  .begin .head-row .right{text-align:left;max-width:100%;}
  .stage-links{gap:32px;}
  .stage-links .display-link{align-items:flex-start;}
  .stage-cap{font-size:16px;}
  .after{padding:64px 0 72px;}
}