/* Tutorial brand layer: shared service proportions, with a dedicated reading measure. */
.learning-page {
  --learning-space: clamp(64px, 8vw, 104px);
  --learning-title: clamp(36px, 4.5vw, 62px);
  --learning-subtitle: clamp(28px, 3.5vw, 48px);
  --learning-radius: var(--site-radius);
  --learning-reading: 760px;
  --learning-layout-gap: 48px;
  --learning-source-measure: 840px;
}
.learning-page .upgrade-wrap { width: min(1160px, calc(100% - 48px)); }
.learning-page .upgrade-hero { padding-block: var(--learning-space) 48px; }
.learning-page .upgrade-hero h1,
.learning-page .oc-page-head h1,
.learning-page .oc-chapter-head h1 {
  font-size: var(--learning-title);
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.learning-page .upgrade-eyebrow { font-size: 14px; margin: 0 0 24px; }
.learning-page .upgrade-lead { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.7; }
.learning-page .upgrade-actions { gap: 16px 28px; }
.learning-page .upgrade-link { display: inline-flex; align-items: center; min-height: 48px; }
.learning-page a { text-underline-offset: 4px; }
.learning-page .upgrade-section { padding-block: var(--learning-space); }
.learning-page .upgrade-section h2 { font-size: var(--learning-subtitle); line-height: 1.25; margin-bottom: 40px; }
.learning-page .upgrade-card { border-radius: var(--site-radius); padding: 28px; }
.learning-page .upgrade-card h3 { line-height: 1.4; }
.learning-page .upgrade-card h3 a { margin-top: 0; }
.learning-intro { width: min(1160px, calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-block: var(--learning-space); }
.learning-page .learning-intro .upgrade-hero { width: auto; padding: 0; margin: 0; }
.learning-page .learning-intro h1 { font-size: clamp(36px, 4vw, 56px); }
.learning-page .learning-hero-image { width: 100%; margin: 0; }
.learning-page .learning-hero-image img { border-radius: var(--site-image-radius); }
.learning-page .upgrade-feature { padding: 48px; gap: 64px; border-radius: var(--learning-radius); }
.learning-page .upgrade-feature h2 { font-size: var(--learning-subtitle); line-height: 1.25; letter-spacing: -.02em; }
.learning-page .upgrade-feature > div + div { border-left: 1px solid var(--site-line); padding-left: 40px; }
.learning-page .upgrade-feature h3 { font-size: 24px; line-height: 1.5; }
.learning-page #learning-topics .upgrade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.learning-page [data-course-card]:not([hidden]) { display: flex; flex-direction: column; }
.learning-page [data-course-card] a { margin-top: auto; padding-top: 20px; min-height: 48px; }
.learning-page .learning-controls { max-width: 760px; }
.learning-page .reader-layout { justify-content: center; grid-template-columns: 240px minmax(0, var(--learning-reading)); gap: 64px; padding-bottom: var(--learning-space); }
.learning-page .reader-directory { padding: 24px; border-radius: var(--site-radius); top: 92px; }
.learning-page .reader-directory summary { line-height: 1.5; }
.learning-page .reader-directory a { padding-block: 10px; }
.learning-page .reader-article,
.learning-page .tutorial-body { font-size: 17px; line-height: 1.95; max-width: var(--learning-reading); min-width: 0; }
.learning-page .reader-article h2,
.learning-page .tutorial-body h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.4; margin: 56px 0 20px; scroll-margin-top: 100px; }
.learning-page .reader-article h3,
.learning-page .tutorial-body h3 { font-size: 23px; line-height: 1.45; margin: 36px 0 16px; scroll-margin-top: 100px; }
.learning-page .reader-article p { margin-block: 20px; }
.learning-page .reader-article img { display: block; margin-block: 28px; }
.learning-page .reader-article blockquote { border-left-width: 1px; }
.learning-page .oc-page-head { padding-block: var(--learning-space) 48px; text-align: center; }
.learning-page .oc-page-head .site-section-title,
.learning-page .oc-page-head .site-section-copy { margin-inline: auto; }
.learning-page .oc-chapter-head { padding-block: 64px 48px; background: var(--site-white); }
.learning-page .oc-chapter-layout { padding-block: 48px var(--learning-space); }
.learning-page .oc-chapter-head .site-wrap { max-width: 1160px; }
.learning-page .oc-eyebrow { color: var(--site-blue); letter-spacing: 0; }
.learning-page .tutorial-card a { border-radius: var(--site-radius); }
.learning-topic-intro { width: min(1160px, calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--learning-layout-gap); align-items: center; padding-block: var(--learning-space) var(--learning-layout-gap); }
.learning-page .learning-topic-intro .upgrade-hero { width: auto; margin: 0; padding: 0; min-width: 0; }
.learning-page .learning-topic-intro h1 { font-size: clamp(36px, 4vw, 56px); }
.learning-topic-intro .course-banner { margin: 0; }
.learning-page .learning-topic-plain { text-align: center; }
.learning-page .learning-topic-plain :is(h1, .upgrade-lead) { margin-inline: auto; }
.learning-page .learning-topic-plain .upgrade-actions { justify-content: center; }
.learning-topic-intro + .course-directory, .learning-topic-plain + .course-directory { padding-top: var(--learning-layout-gap); }
.learning-page .course-directory h2 { font-size: clamp(24px, 3.5vw, 48px); }
.course-count-main, .course-count-note { display: block; }
.course-count-note { margin-top: 12px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; line-height: 1.6; color: var(--site-muted); }

.learning-page .course-directory h2,
.learning-page .course-source h2,
.learning-page #learning-topics h2 { text-align: center; text-wrap: balance; }
.learning-page .course-source > .upgrade-wrap { max-width: var(--learning-source-measure); }
.learning-page .course-source > .upgrade-wrap > .upgrade-link { display: flex; justify-content: center; }
.learning-page .course-chapters > .upgrade-card:first-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--story-gap, 24px); }
.learning-page .course-chapters > .upgrade-card:first-child :is(h3, p) { margin: 0; }
.learning-page .course-chapters > .upgrade-card:first-child p { flex-shrink: 0; color: var(--site-muted); }
.learning-page #learning-topics .learning-controls { margin-inline: auto; }
.learning-page #learning-topics [data-learning-status] { text-align: center; }
@media (max-width: 900px) {
  .learning-intro, .learning-topic-intro { grid-template-columns: 1fr; gap: 36px; }
  .learning-topic-intro .course-banner { max-width: 640px; justify-self: center; }
  .learning-page .learning-hero-image { max-width: 640px; margin-inline: 0; }
  .learning-page .reader-layout { justify-content: center; grid-template-columns: 1fr; gap: 32px; }
  .learning-page .reader-directory { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .learning-page .upgrade-feature { padding: 28px; gap: 28px; }
  .learning-page .upgrade-feature > div + div { border-left: 0; border-top: 1px solid var(--site-line); padding: 24px 0 0; }
  .learning-page #learning-topics .upgrade-grid { grid-template-columns: 1fr; }
  .learning-page .oc-chapter-head { padding-top: 40px; }
  .learning-page .reader-article h2 { margin-top: 40px; }
}