/* Learn pages share the guides' sidebar (review-pages.css .review-toc):
   "On this page" links, sticky while the reader scrolls. The call to action
   is the floating bar at the bottom of the screen (floating-cta.css). On wide
   screens an article's text column moves right of the 240px sidebar; the
   index puts the sidebar beside the guide list. */
.learn-toc { border-left: 1px solid #d6e2da; padding-left: 20px; }
.learn-toc .eyebrow { margin: 0 0 18px; color: var(--green); font-size: 12px; letter-spacing: .07em; line-height: 1.5; }
.learn-toc nav a { display: block; margin: 0 0 15px; color: #5b685e; font-size: 13px; line-height: 1.5; text-decoration: none; }
.learn-toc nav a:hover { color: var(--green); text-decoration: underline; }

/* Articles: one page background under the sidebar, like the guides, instead
   of alternating white and gray bands. */
.learn-article-body { position: relative; }
.learn-article-body .section { padding: 56px 0; }
.learn-article-body .section-white { background: transparent; }
.learn-article-body .answer-first { background: #edf4ed; }
@media (max-width: 760px) { .learn-article-body .section { padding: 40px 0; } }
.learn-side-rail { display: none; }
@media (min-width: 1100px) {
  .learn-side-rail { display: block; position: absolute; top: 0; bottom: 0; left: max(24px, calc(50% - 590px)); z-index: 2; width: 240px; pointer-events: none; }
  .learn-side-rail .learn-toc { position: sticky; top: 95px; margin-top: 56px; pointer-events: auto; }
  .learn-article-body .answer-first, .learn-article-body .prose, .learn-article-body .section-heading.center, .learn-article-body .article-cta .cta-card { margin-left: 304px; margin-right: 0; max-width: min(760px, calc(100% - 304px)); }
}
.learn-article-body [id] { scroll-margin-top: 100px; }

/* The mid-article call to action sits in the text column, like the rest of
   the article. */
.learn-article-body .article-cta .cta-card { max-width: 760px; margin-inline: auto; grid-template-columns: 1fr; gap: 22px; padding: 34px 36px; }
.learn-article-body .article-cta .cta-card h2 { font-size: clamp(26px, 3vw, 34px); }

/* The Learn index */
.learn-list-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.learn-list-side { position: sticky; top: 95px; }
.learn-list-main { min-width: 0; }
@media (max-width: 1100px) { .learn-list-layout { gap: 40px; } .learn-list-layout .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .learn-list-layout { grid-template-columns: 1fr; } .learn-list-side { display: none; } .learn-list-layout .related-grid { grid-template-columns: 1fr; } }