/* /learn hub + topic pages. Reuses --course-* vars from courses.css */
.learn-body { background: var(--course-bg); font-family: 'Outfit', sans-serif; color: #e8e8e8; }
.learn-hero { padding: 120px 0 48px; text-align: center; }
.learn-hero h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); }
.learn-hero p { color: #a8a8a8; max-width: 640px; margin: 12px auto 0; }
.learn-track { padding: 32px 0; }
.learn-track h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; }
.learn-card {
    display: block; height: 100%; padding: 22px; border-radius: 16px; text-decoration: none; color: inherit;
    background: var(--course-surface); border: 1px solid var(--glass-border); transition: transform .2s, border-color .2s;
}
a.learn-card:hover { transform: translateY(-4px); border-color: var(--course-primary); color: inherit; }
.learn-card h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.learn-card p { color: #a8a8a8; font-size: .92rem; margin: 0; }
.learn-card.is-soon { opacity: .6; }
.learn-badge { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; font-size: .72rem; background: var(--glass-white); color: var(--course-accent); }
/* topic page */
.learn-article { max-width: 780px; margin: 0 auto; padding: 120px 16px 48px; }
.learn-article h1 { font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.learn-article h2 { margin-top: 2rem; font-size: 1.5rem; font-weight: 700; }
.learn-article p, .learn-article li { color: #cfcfcf; line-height: 1.7; }
.learn-cta { margin-top: 2.5rem; padding: 24px; border-radius: 16px; background: var(--course-surface-2); border: 1px solid var(--glass-border); }
.learn-article a:not(.btn) { color: var(--course-accent); }
.learn-updated { font-size: .85rem; color: #a8a8a8 !important; }
.learn-keyfacts, .learn-toc { margin: 1.5rem 0; padding: 20px 24px; border-radius: 16px; background: var(--course-surface); border: 1px solid var(--glass-border); }
.learn-toc ol { margin: 8px 0 0; padding-left: 1.2rem; }
.learn-toc li { line-height: 1.9; }
.learn-article .table { --bs-table-bg: transparent; font-size: .92rem; }
.learn-article .table th, .learn-article .table td { color: #e0e0e0; }
.learn-article h2[id] { scroll-margin-top: 90px; }
.learn-figure { margin: 1.5rem 0; }
.learn-figure svg { width: 100%; height: auto; }
.learn-figure figcaption { font-size: .85rem; color: #a8a8a8; text-align: center; margin-top: 6px; }