.learn-hero { padding: 76px 0 64px; border-bottom: 1px solid var(--line); }
.page-kicker { margin: 0 0 14px; color: var(--teal); font: 700 11px/1 "Trebuchet MS", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.learn-hero h1, .learning-article h1 { max-width: 790px; margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: .98; letter-spacing: -.045em; }
.learn-hero > .shell > p:last-child { max-width: 630px; margin: 22px 0 0; color: var(--muted); font-size: 19px; line-height: 1.5; }
.learn-library { padding: 54px 0 78px; }.article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.article-grid article { min-height: 310px; padding: 25px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }.article-grid article > p:first-child, .article-grid article > p:first-child span { color: var(--teal); font: 700 10px/1 "Trebuchet MS", sans-serif; letter-spacing: .08em; text-transform: uppercase; }.article-grid article > p:first-child span { margin-left: 12px; color: var(--muted); }.article-grid h2 { max-width: 440px; margin: 18px 0 0; font-size: 29px; line-height: 1.05; }.article-grid article > p:not(:first-child) { max-width: 470px; margin: 17px 0 0; color: var(--muted); font: 15px/1.5 "Trebuchet MS", sans-serif; }.article-grid a { display: inline-block; margin-top: 22px; color: var(--teal); font: 700 12px/1 "Trebuchet MS", sans-serif; letter-spacing: .04em; text-transform: uppercase; }.article-grid a b, .related-guides b { margin-left: 8px; }.article-rule { display: flex; gap: 7px; margin-top: 25px; }.article-rule i { display: block; width: 19px; height: 31px; border-radius: 2px; background: var(--coral); }.article-rule i:nth-child(3), .article-rule i:nth-child(4) { background: var(--teal); }.learning-article { width: min(800px, calc(100% - 40px)); margin: 0 auto; padding: 76px 0 0; }.learning-article header { border-bottom: 1px solid var(--line); padding-bottom: 42px; }.page-kicker span { color: var(--muted); }.article-intro { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: 20px; line-height: 1.5; }.article-visual { display: flex; align-items: center; gap: 12px; padding: 27px 0; border-bottom: 1px solid var(--line); color: var(--teal); font: 700 11px/1 "Trebuchet MS", sans-serif; letter-spacing: .06em; text-transform: uppercase; }.article-visual i { display: block; width: 28px; height: 1px; background: var(--line); }.article-body { padding: 20px 0 48px; }.article-body section { position: relative; padding: 30px 0 30px 65px; border-bottom: 1px solid var(--line); }.section-number { position: absolute; top: 34px; left: 0; margin: 0; color: var(--coral); font: 700 13px/1 "Trebuchet MS", sans-serif; }.article-body h2 { margin: 0; font-size: 28px; line-height: 1.1; }.article-body section > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }.article-disclaimer { padding: 20px; border-left: 4px solid var(--coral); background: var(--panel); color: var(--muted); font: 13px/1.5 "Trebuchet MS", sans-serif; }.related-guides { margin-top: 72px; padding: 48px 0 70px; border-top: 1px solid var(--line); }.related-guides a { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 22px; line-height: 1.2; }.related-guides a span { color: var(--muted); font: 700 10px/1 "Trebuchet MS", sans-serif; letter-spacing: .06em; text-transform: uppercase; }.related-guides a b { color: var(--teal); }
@media (max-width: 800px) { .learn-hero { padding: 52px 0 46px; }.article-grid { grid-template-columns: 1fr; }.learning-article { width: min(100% - 28px, 800px); padding-top: 50px; }.article-visual { flex-wrap: wrap; gap: 9px; }.article-visual i { width: 14px; }.article-body section { padding-left: 47px; }.article-body h2 { font-size: 25px; }.related-guides { margin-top: 50px; }.related-guides a { font-size: 18px; }.related-guides a span { max-width: 80px; } }