:root {
  --learn-bg: #08090f;
  --learn-panel: rgba(17, 18, 28, 0.82);
  --learn-line: rgba(126, 145, 255, 0.18);
  --learn-text: #f2f3fb;
  --learn-muted: #a8abc2;
  --learn-blue: #7ca8ff;
  --learn-green: #00d97e;
}

.learn-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 80px; }
.learn-back { display: inline-flex; color: var(--learn-muted); font: 500 .76rem/1.2 'Inter', sans-serif; text-decoration: none; transition: color .2s ease; }
.learn-back:hover, .learn-back:focus-visible { color: var(--learn-text); }
.learn-hero { padding: 74px 0 42px; max-width: 760px; }
.learn-eyebrow { color: var(--learn-blue); font: 600 .68rem/1.2 'Geist Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.learn-hero h1 { margin: 15px 0 17px; color: var(--learn-text); font: 800 clamp(2.4rem, 7vw, 5.2rem)/.98 'Inter', sans-serif; letter-spacing: -.065em; }
.learn-hero p { max-width: 670px; margin: 0; color: var(--learn-muted); font: 400 clamp(1rem, 2vw, 1.2rem)/1.7 'Inter', sans-serif; }
.learn-article { padding: clamp(22px, 5vw, 46px); border: 1px solid var(--learn-line); border-radius: 24px; background: linear-gradient(145deg, rgba(24, 28, 46, .88), var(--learn-panel)); box-shadow: 0 24px 80px rgba(0, 0, 0, .22); }
.learn-answer { margin-bottom: 34px; padding: 18px 20px; border: 1px solid rgba(0, 217, 126, .22); border-radius: 14px; background: rgba(0, 217, 126, .055); color: #dcebe6; font: 400 .97rem/1.7 'Inter', sans-serif; }
.learn-answer strong { color: var(--learn-green); }
.learn-article h2 { margin: 35px 0 11px; color: var(--learn-text); font: 700 clamp(1.25rem, 3vw, 1.75rem)/1.2 'Inter', sans-serif; letter-spacing: -.035em; }
.learn-article h2:first-of-type { margin-top: 0; }
.learn-article p, .learn-article li { color: var(--learn-muted); font: 400 .96rem/1.78 'Inter', sans-serif; }
.learn-article p { margin: 0 0 16px; }
.learn-article ul, .learn-article ol { margin: 0 0 20px; padding-left: 1.25rem; }
.learn-article li { margin: 8px 0; padding-left: 4px; }
.learn-article a { color: var(--learn-blue); text-underline-offset: 3px; }
.learn-note { margin-top: 28px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.08); color: #898da9 !important; font-size: .84rem !important; }
.learn-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 19px; padding: 13px 17px; border-radius: 11px; background: var(--learn-text); color: #090a10 !important; font-size: .85rem !important; font-weight: 700 !important; text-decoration: none; }
.learn-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.learn-related a { display: block; padding: 15px; border: 1px solid rgba(126,145,255,.14); border-radius: 13px; color: var(--learn-muted); font: 600 .78rem/1.4 'Inter', sans-serif; text-decoration: none; background: rgba(9, 10, 17, .5); }
.learn-related a:hover, .learn-related a:focus-visible { border-color: rgba(126,145,255,.4); color: var(--learn-text); }
.learn-footer { margin-top: 34px; padding-top: 21px; border-top: 1px solid rgba(255,255,255,.08); color: #696d88; font: 400 .72rem/1.6 'Inter', sans-serif; }
.learn-footer a { margin-left: 14px; color: #8e93b5; }
@media (max-width: 640px) {
  .learn-shell { padding-top: 25px; }
  .learn-hero { padding: 58px 0 30px; }
  .learn-article { border-radius: 18px; padding: 22px 18px; }
  .learn-related { grid-template-columns: 1fr; }
}