.learn-hub{max-width:72rem;margin:0 auto;padding:7rem 2rem 8rem}
.learn-hero{max-width:52ch;padding-bottom:4rem}
.learn-kicker{margin:0 0 .8rem;color:var(--accent);font:500 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.learn-hero h1{margin:0;color:var(--ink);font-size:clamp(2.2rem, 5vw, 4rem);line-height:1.05;letter-spacing:-.04em}
.learn-hero > p:last-child,.learn-lessons > p:last-child,.learn-feature p{color:var(--muted);font-size:1.05rem;line-height:1.7}
.learn-feature{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(17rem, .8fr);align-items:stretch;gap:2rem;margin:1rem 0 5rem;padding:2rem;border:1px solid var(--line);border-top:2px solid var(--accent);background:var(--bg-soft)}
.learn-feature h2,.learn-lessons h2{max-width:34ch;margin:0;color:var(--ink);font-size:clamp(1.6rem, 3vw, 2.4rem);line-height:1.12;letter-spacing:-.02em}
.learn-feature p{max-width:62ch;margin:.9rem 0}
.learn-feature .learn-button{display:inline-block;margin-top:.7rem;padding:.65rem 1rem;border-radius:var(--r-sm);border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none}
.learn-button:hover{filter:brightness(1.08)}
.learn-game-preview{position:relative;min-height:18rem;overflow:hidden;border:1px solid var(--line-strong);background:#eeeeee;color:#111111}
.learn-game-preview::before,.learn-game-preview::after{position:absolute;inset:auto -12% -35% -12%;height:72%;border:1px solid #111111;border-radius:50%;content:"";opacity:.55}
.learn-game-preview::after{inset:auto -5% -50% -5%;opacity:.25}
.learn-game-preview img{position:absolute;left:50%;top:48%;width:min(58%, 11rem);filter:brightness(0);transform:translate(-50%, -50%) scaleX(-1)}
.learn-current{position:absolute;width:5rem;height:1px;background:#111111;opacity:.45}
.current-one{top:22%;left:8%}
.current-two{top:31%;right:7%;width:3.5rem}
.learn-route{position:absolute;width:.45rem;height:.45rem;border:1px solid #111111;border-radius:50%}
.route-one{left:15%;bottom:26%}
.route-two{right:18%;top:24%}
.learn-obstacle{position:absolute;bottom:0;width:2.4rem;border:1px solid #111111;border-bottom:0;border-radius:50% 50% 0 0;opacity:.75}
.obstacle-one{left:12%;height:22%}
.obstacle-two{right:17%;height:31%;width:3.2rem}
.learn-goal{position:absolute;right:1rem;bottom:.9rem;color:#111111;font:500 .72rem/1 var(--mono);letter-spacing:.08em}
.learn-lessons > p:last-child{max-width:62ch;margin:.9rem 0 1.5rem}
.learn-lesson-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:.8rem}
.learn-lesson{display:grid;gap:.45rem;min-height:8rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-top:2px solid var(--line-strong);background:var(--bg);color:inherit;text-decoration:none;transition:border-color .15s, background .15s}
.learn-lesson:hover{border-color:var(--accent);background:var(--bg-soft)}
.learn-lesson strong{color:var(--ink);font-size:.95rem}
.learn-lesson span{color:var(--muted);font-size:.85rem;line-height:1.5}
@media (max-width: 840px){.learn-feature{grid-template-columns:1fr}.learn-game-preview{min-height:14rem}.learn-lesson-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width: 560px){.learn-hub{padding:4rem 1rem 6rem}.learn-feature{padding:1.25rem}.learn-lesson-grid{grid-template-columns:1fr}}