/* Motion and finishing layer for every public page. It loads last.
   Static refinements always apply; movement runs only while motion.js keeps
   <html class="m-motion"> (never for visitors who prefer reduced motion). */
:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --m-spring: cubic-bezier(.34, 1.56, .64, 1);
  --m-yellow: #ffda3e;
  --m-navy: #171943;
  --m-lift-shadow: 0 26px 50px -24px rgb(23 25 67 / 32%), 0 3px 8px rgb(23 25 67 / 4%);
}
html:has(body.reference-site) { scrollbar-color: #b9bdd3 #f1f2f7; }

/* Content waits a moment for motion.js so nothing flashes before it animates in;
   it shows on its own if the script never arrives. */
@media (prefers-reduced-motion: no-preference) {
  body.reference-site:not(.m-ready) :is(main, .site-footer) { opacity: 0; animation: m-unhide 0s 1.4s forwards; }
}
@keyframes m-unhide { to { opacity: 1; } }

/* ---- Scroll progress, navigation loader and back to top ---- */
.m-progress, .m-loader {
  position: fixed;
  inset: 0 0 auto;
  z-index: 210;
  height: 3px;
  pointer-events: none;
  transform-origin: right;
}
.m-progress {
  background: linear-gradient(270deg, #ffda3e, #ffc93c 55%, #fff0a8);
  scale: var(--m-scroll, 0) 1;
  box-shadow: 0 0 12px rgb(255 218 62 / 55%);
}
.m-loader { scale: 0 1; opacity: 0; background: linear-gradient(270deg, #ffda3e, #ffffff 70%, #ffda3e); }
html.m-navigating .m-progress { opacity: 0; }
html.m-navigating .m-loader { opacity: 1; animation: m-loader 7s var(--m-ease) forwards; }
@keyframes m-loader { 0% { scale: 0 1; } 8% { scale: .3 1; } 40% { scale: .7 1; } 100% { scale: .94 1; } }

.m-top {
  position: fixed;
  z-index: 75;
  bottom: 24px;
  inset-inline-end: 24px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--m-navy);
  color: var(--m-yellow);
  box-shadow: 0 14px 30px -12px rgb(23 25 67 / 55%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 18px;
  scale: .85;
  transition: opacity .35s ease, translate .5s var(--m-spring), scale .5s var(--m-spring), visibility 0s .35s, background-color .25s;
}
.m-top.is-visible { opacity: 1; visibility: visible; translate: none; scale: 1; transition-delay: 0s; }
.m-top:hover { background: #262a63; }
.m-top:hover .m-top-arrow { translate: 0 -3px; }
.m-top:focus-visible { outline: 3px solid var(--m-yellow); outline-offset: 3px; }
.m-top svg { grid-area: 1 / 1; }
.m-top-ring { width: 52px; height: 52px; rotate: -90deg; }
.m-top-ring circle { fill: none; stroke-width: 2.5; }
.m-top-ring .m-top-track { stroke: rgb(255 255 255 / 14%); }
.m-top-ring .m-top-value { stroke: var(--m-yellow); stroke-linecap: round; stroke-dasharray: 138.23px; stroke-dashoffset: calc(138.23px * (1 - var(--m-scroll, 0))); }
.m-top-arrow { width: 20px; height: 20px; transition: translate .3s var(--m-ease); }
/* Phones already have the bottom bar and a header that returns on scroll up. */
@media (max-width: 600px) { .m-top { display: none; } }

/* ---- Header: glass when scrolled, tucks away while reading down ---- */
body.premium-site.reference-site .site-header {
  view-transition-name: m-site-header;
  transition: translate .5s var(--m-ease), background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
html.m-motion body.premium-site.reference-site .site-header.m-header-hidden { translate: 0 -100%; box-shadow: none; }
body.premium-site.reference-site .site-header.is-scrolled,
body.premium-site.reference-site.reference-home .site-header.is-scrolled {
  background: rgb(255 255 255 / 84%);
  border-color: rgb(226 227 234 / 80%);
  box-shadow: 0 12px 32px -18px rgb(23 25 67 / 28%);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
}
body.premium-site.reference-site .brand-logo { transition: rotate .6s var(--m-spring), scale .6s var(--m-spring); }
body.premium-site.reference-site .brand:hover .brand-logo { rotate: -8deg; scale: 1.08; }
body.premium-site.reference-site .desktop-nav a { transition: color .25s ease; }
body.premium-site.reference-site .desktop-nav a::after {
  inset: auto 18% 13px;
  width: auto;
  height: 3px;
  border-radius: 3px;
  transform-origin: center;
  transition: transform .45s var(--m-ease);
}
body.premium-site.reference-site :is(.header-search, .header-login) { transition: background-color .25s ease, color .25s ease; }
body.premium-site.reference-site .header-search svg { transition: rotate .4s var(--m-spring), scale .4s var(--m-spring); }
body.premium-site.reference-site .header-search:hover svg { rotate: 12deg; scale: 1.1; }

/* Hamburger lines turn into a close mark. */
.menu-toggle .m-burger { position: relative; display: block; width: 20px; height: 14px; pointer-events: none; }
.menu-toggle .m-burger i {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: translate .4s var(--m-ease), rotate .4s var(--m-ease), opacity .2s ease, scale .4s var(--m-ease);
}
.menu-toggle .m-burger i:nth-child(1) { top: 0; }
.menu-toggle .m-burger i:nth-child(2) { top: 6px; inset-inline-start: 5px; }
.menu-toggle .m-burger i:nth-child(3) { top: 12px; }
.menu-toggle:hover .m-burger i:nth-child(2) { inset-inline-start: 0; }
.menu-toggle[aria-expanded="true"] .m-burger i:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] .m-burger i:nth-child(2) { opacity: 0; scale: .2 1; }
.menu-toggle[aria-expanded="true"] .m-burger i:nth-child(3) { translate: 0 -6px; rotate: -45deg; }
/* ---- Full-screen menu (every width that shows the menu button) ----
   The id keeps these rules above the older dropdown styles in other files. */
#mobile-menu :is(.mobile-menu-actions, .mobile-menu-note, .mobile-menu-index) { display: none; }
@media (max-width: 1180px) {
  html.menu-open { overflow: hidden; }
  html.menu-open body.premium-site.reference-site .site-header {
    z-index: 120;
    translate: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.menu-open body.premium-site.reference-site .site-header .header-inner { position: relative; z-index: 2; }
  html.menu-open body.premium-site.reference-site .site-header :is(.brand, .brand strong, .header-login, .header-search, .menu-toggle) { color: #ffffff; }
  html.menu-open body.premium-site.reference-site .site-header .brand-logo { color: var(--m-yellow); }
  html.menu-open body.premium-site.reference-site .site-header .brand small { color: #c4c7df; }
  html.menu-open body.premium-site.reference-site .site-header .menu-toggle { background: rgb(255 255 255 / 10%); border-color: transparent; }
  html.menu-open body.premium-site.reference-site .site-header :is(a, button):focus-visible { outline-color: var(--m-yellow); }
  body.premium-site.reference-site #mobile-menu:not([hidden]) {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: block;
    padding: calc(var(--menu-top, 76px) + 18px) 24px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #ffffff;
    background:
      radial-gradient(70% 45% at 100% 0%, rgb(255 218 62 / 16%), transparent 70%),
      radial-gradient(60% 40% at 0% 100%, rgb(118 128 255 / 18%), transparent 70%),
      #171943;
  }
  #mobile-menu .mobile-menu-panel { display: flex; flex-direction: column; width: min(560px, 100%); min-height: 100%; margin-inline: auto; }
  #mobile-menu .mobile-menu-links { display: grid; }
  body.premium-site.reference-site #mobile-menu .mobile-menu-links a {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 8px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background: none;
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.6;
    transition: color .25s ease;
  }
  #mobile-menu .mobile-menu-index { display: block; min-width: 24px; color: var(--m-yellow); font-size: 12px; font-weight: 600; opacity: .85; }
  #mobile-menu .mobile-menu-links a > svg { width: 20px; height: 20px; margin-inline-start: auto; opacity: .45; transition: translate .35s var(--m-ease), opacity .35s ease; }
  body.premium-site.reference-site #mobile-menu .mobile-menu-links a:is(:hover, :focus-visible, [aria-current]) { color: var(--m-yellow); background: none; }
  #mobile-menu .mobile-menu-links a:is(:hover, :focus-visible) > svg { opacity: 1; translate: -6px 0; }
  #mobile-menu .mobile-menu-links a[aria-current] > svg { opacity: 1; }
  #mobile-menu .mobile-menu-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 28px; }
  body.premium-site.reference-site #mobile-menu .mobile-menu-actions .button { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; padding: 10px 20px; }
  body.premium-site.reference-site #mobile-menu .mobile-menu-actions .button-primary { color: var(--m-navy); background: var(--m-yellow); border-color: var(--m-yellow); }
  body.premium-site.reference-site #mobile-menu .mobile-menu-account { color: #ffffff; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 20%); }
  #mobile-menu .mobile-menu-account svg { width: 20px; height: 20px; }
  #mobile-menu .mobile-menu-note { display: block; margin: 20px 0 0; color: #aeb4cc; font-size: 13px; text-align: center; }
  html.m-motion body.premium-site.reference-site #mobile-menu:not([hidden]) { animation: m-menu-in .38s var(--m-ease) both; }
  html.m-motion body.premium-site.reference-site #mobile-menu.is-closing { animation: m-menu-out .24s ease both; }
  html.m-motion #mobile-menu:not([hidden]):not(.is-closing) :is(.mobile-menu-links a, .mobile-menu-actions, .mobile-menu-note) { animation: m-rise .6s var(--m-ease) var(--m-d, 0ms) both; }
  html.m-motion #mobile-menu .mobile-menu-links a:nth-child(2) { --m-d: 45ms; }
  html.m-motion #mobile-menu .mobile-menu-links a:nth-child(3) { --m-d: 90ms; }
  html.m-motion #mobile-menu .mobile-menu-links a:nth-child(4) { --m-d: 135ms; }
  html.m-motion #mobile-menu .mobile-menu-links a:nth-child(5) { --m-d: 180ms; }
  html.m-motion #mobile-menu .mobile-menu-links a:nth-child(6) { --m-d: 225ms; }
  html.m-motion #mobile-menu .mobile-menu-actions { --m-d: 270ms; }
  html.m-motion #mobile-menu .mobile-menu-note { --m-d: 320ms; }
}
@media (max-width: 1180px) and (max-height: 700px) {
  body.premium-site.reference-site #mobile-menu .mobile-menu-links a { min-height: 54px; font-size: 18px; }
  #mobile-menu .mobile-menu-actions { padding-top: 20px; }
}
@keyframes m-menu-in { from { opacity: 0; } }
@keyframes m-menu-out { to { opacity: 0; } }
@keyframes m-rise { from { opacity: 0; translate: 0 14px; } }

/* ---- Buttons: lift, shine, arrow nudge, ripple ---- */
body.premium-site.reference-site .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .4s var(--m-ease), translate .4s var(--m-ease), scale .2s var(--m-ease);
}
body.premium-site.reference-site .button > svg { transition: translate .4s var(--m-ease); }
body.premium-site.reference-site .button:hover > svg:last-child:not(:first-child) { translate: -5px 0; }
body.premium-site.reference-site .button:hover > svg:first-child:not(:last-child) { translate: 5px 0; }
body.premium-site.reference-site .button:active { scale: .97; }
body.premium-site.reference-site :is(.button-primary, .button-lime, .academy-start-band .button, .continue-button)::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 55%) 48%, transparent 66%);
  translate: 110% 0;
  pointer-events: none;
}
body.premium-site.reference-site .academy-start-band .button::after { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 22%) 48%, transparent 66%); }
body.premium-site.reference-site :is(.button-primary, .button-lime, .academy-start-band .button, .continue-button):hover::after { translate: -110% 0; transition: translate .9s var(--m-ease); }
@media (hover: hover) {
  html body.premium-site.reference-site :is(.button-primary, .button-lime, .learning-enrollment .learning-enrollment-cta, .account-continue .continue-button):hover:not(:disabled) {
    translate: 0 -2px;
    box-shadow: 0 16px 30px -14px rgb(214 162 0 / 70%);
  }
  html body.premium-site.reference-site :is(.button-outline, .button-secondary, .academy-hero-secondary):hover:not(:disabled) {
    translate: 0 -2px;
    box-shadow: 0 14px 26px -16px rgb(23 25 67 / 40%);
  }
  html body.premium-site.reference-site .academy-start-band .button:hover { translate: 0 -2px; box-shadow: 0 16px 30px -14px rgb(23 25 67 / 60%); }
}
/* motion.js gives a static host position: relative before adding these classes. */
.m-ripple-host { overflow: hidden; isolation: isolate; }
.m-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  opacity: .2;
  scale: 0;
  pointer-events: none;
  animation: m-ripple .7s var(--m-ease) forwards;
}
@keyframes m-ripple { to { scale: 1; opacity: 0; } }
body.premium-site.reference-site .icon-button { transition: background-color .25s ease, color .25s ease, border-color .25s ease, scale .3s var(--m-spring); }
body.premium-site.reference-site .icon-button:active:not(:disabled) { scale: .92; }

/* ---- Cards: lift, cursor spotlight, image zoom ---- */
body.premium-site.reference-site :is(.learning-card, .academy-path-card, .journal-card, .account-learning-card, a.account-overview-item, .learning-start-card, .academy-values article, .listening-feature, .academy-podcast-player, .course-checkup-card) {
  transition: translate .55s var(--m-ease), box-shadow .55s var(--m-ease), border-color .3s ease, background-color .3s ease;
}
@media (hover: hover) {
  body.premium-site.reference-site :is(.learning-card, .academy-path-card, .journal-card, .account-learning-card, a.account-overview-item, .learning-start-card):hover {
    translate: 0 -6px;
    border-color: #c6cadf;
    box-shadow: var(--m-lift-shadow);
  }
  body.premium-site.reference-site .academy-values article:hover { translate: 0 -3px; }
}
body.premium-site.reference-site :is(.academy-course-track .learning-card-image img, .journal-card .journal-card-image img, .account-learning-cover img, .academy-mentor-image > img) {
  transition: scale .9s var(--m-ease), filter .6s ease;
}
body.premium-site.reference-site .academy-course-track { padding: 14px 4px 36px; margin-block: -11px -16px; }
body.premium-site.reference-site .academy-course-track .learning-card:hover .learning-card-image img { transform: none; }
body.premium-site.reference-site .academy-course-track .learning-card:hover .learning-card-image img,
body.premium-site.reference-site .journal-card:hover .journal-card-image img,
body.premium-site.reference-site .account-learning-card:hover .account-learning-cover img { scale: 1.06; }
body.premium-site.reference-site .learning-card .learning-card-image img { transition: scale .9s var(--m-ease), filter .6s ease; }
body.premium-site.reference-site .learning-card:hover .learning-card-image img { filter: saturate(1.12) brightness(1.03); }
body.premium-site.reference-site .learning-card-cta > svg,
body.premium-site.reference-site :is(.academy-path-card > a, .academy-all-link, .editorial-inline-link, .text-link, .learning-start-card > a, .account-discover-link) > svg { transition: translate .4s var(--m-ease); }
body.premium-site.reference-site :is(.learning-card:hover .learning-card-cta, .academy-path-card:hover > a, .academy-all-link:hover, .journal-card:hover .editorial-inline-link, .editorial-inline-link:hover, .text-link:hover, .learning-start-card:hover > a) > svg:last-child:not(:first-child) { translate: -5px 0; }

.m-glow {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 218 62 / 10%), transparent 45%);
  transition: opacity .45s ease;
}
.m-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(255 200 30 / 95%), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.m-glow-host:hover > .m-glow { opacity: 1; }
.academy-method .m-glow, .academy-sample .m-glow { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 218 62 / 9%), transparent 45%); }

/* Feature icons wake up with their card. */
body.premium-site.reference-site :is(.academy-feature-icon, .overview-symbol, .learning-start-icon, .empty-icon) {
  transition: background-color .4s ease, color .4s ease, rotate .6s var(--m-spring), scale .6s var(--m-spring);
}
body.premium-site.reference-site :is(.academy-path-card, .academy-values article, .academy-account-features > div, a.account-overview-item, .learning-start-card):hover :is(.academy-feature-icon, .overview-symbol, .learning-start-icon) {
  background: var(--m-navy);
  color: var(--m-yellow);
  rotate: -8deg;
  scale: 1.07;
}
body.premium-site.reference-site :is(.academy-path-card, .academy-values article, .academy-account-features > div):hover .academy-feature-icon::after { animation: m-dot 1.4s ease-in-out infinite; }
@keyframes m-dot { 50% { scale: 1.6; box-shadow: 0 0 0 4px rgb(255 218 62 / 30%); } }
body.premium-site.reference-site .academy-path-card li { transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
body.premium-site.reference-site .academy-path-card:hover li { background: #fff8d6; border-color: #f4dc7a; color: var(--m-navy); }
.academy-account-features > div { transition: translate .45s var(--m-ease); }
.academy-account-features > div:hover { translate: -6px 0; }
.academy-account-features { transition: box-shadow .6s var(--m-ease), translate .6s var(--m-ease); }
@media (hover: hover) { .academy-account-features:hover { box-shadow: 16px 16px 0 #ffda3e; translate: -4px -4px; } }

/* ---- Reveal on scroll ----
   The entrance is short-lived (motion.js removes the attribute once it ends),
   so it may override each component's own transition while it runs. */
html.m-motion [data-m-reveal] {
  opacity: 0 !important;
  translate: 0 34px !important;
  transition: opacity .9s var(--m-ease), translate 1.05s var(--m-ease), scale 1.05s var(--m-ease), filter .9s var(--m-ease) !important;
  transition-delay: calc(var(--m-i, 0) * 90ms + var(--m-delay, 0ms)) !important;
}
html.m-motion [data-m-reveal="fade"] { translate: none !important; }
html.m-motion [data-m-reveal="start"] { translate: 44px 0 !important; }
html.m-motion [data-m-reveal="end"] { translate: -44px 0 !important; }
html.m-motion [data-m-reveal="zoom"] { translate: 0 24px !important; scale: .94; }
html.m-motion [data-m-reveal="blur"] { translate: 0 18px !important; filter: blur(10px); }
html.m-motion [data-m-reveal].m-in { opacity: 1 !important; translate: none !important; scale: none; filter: none; }
html.m-motion .academy-section-kicker[data-m-reveal]::before,
html.m-motion .learning-kicker[data-m-reveal] > span:first-child { scale: 0 1; transform-origin: right; transition: scale .8s var(--m-ease) .35s; }
html.m-motion .academy-section-kicker[data-m-reveal].m-in::before,
html.m-motion .learning-kicker[data-m-reveal].m-in > span:first-child { scale: 1; }
@media print { [data-m-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; } }

/* Highlighted words in page titles get a marker stroke. */
body.premium-site.reference-site :is(.learning-catalog-copy h1 em, .journal-heading h1 > span, .auth-intro h1 > span) {
  font-style: normal;
  background: linear-gradient(transparent 60%, rgb(255 218 62 / 60%) 60%, rgb(255 218 62 / 60%) 88%, transparent 88%) no-repeat right / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .08em;
  transition: background-size 1.1s var(--m-ease) .45s;
}
html.m-motion h1[data-m-reveal]:not(.m-in) > :is(em, span) { background-size: 0 100%; }

/* ---- Home hero ---- */
body.premium-site.reference-site .reference-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -25% -15%;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 72% 28%, rgb(255 218 62 / 15%), transparent 72%),
    radial-gradient(closest-side at 22% 68%, rgb(118 128 255 / 20%), transparent 70%),
    radial-gradient(closest-side at 48% 92%, rgb(255 218 62 / 8%), transparent 70%);
}
html.m-motion body.premium-site.reference-site .reference-hero::after { animation: m-aurora 22s ease-in-out infinite alternate; }
@keyframes m-aurora {
  0% { translate: 0 0; rotate: 0deg; }
  50% { translate: 3% -4%; rotate: 4deg; }
  100% { translate: -4% 3%; rotate: -3deg; }
}
html.m-motion .academy-hero-pattern::after { animation: m-drift 11s ease-in-out infinite alternate; }
@keyframes m-drift { to { translate: -26px 18px; } }
html.m-motion .academy-hero-pattern::before { animation: m-grid 60s linear infinite; }
@keyframes m-grid { to { translate: 120px 0; } }

/* Words of the first line are direct spans too; keep them out of the yellow highlight. */
body.premium-site.reference-site .reference-hero h1.m-split > .m-w { color: inherit; text-decoration: none; }
html.m-motion .reference-hero h1.m-split .m-w {
  display: inline-block;
  opacity: 0;
  translate: 0 .55em;
  filter: blur(10px);
  animation: m-word .95s var(--m-ease) forwards;
  animation-delay: calc(var(--w, 0) * 75ms + 180ms);
}
html.m-motion .reference-hero h1.m-split > span:not(.m-w),
html.m-motion .reference-hero h1.m-split > span:not(.m-w) .m-w {
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: .2em;
  text-decoration-color: transparent;
}
html.m-motion .reference-hero h1.m-split > span:not(.m-w) { animation: m-underline .8s ease forwards; animation-delay: var(--m-underline-delay, 1.2s); }
html.m-motion .reference-hero h1.m-split > span:not(.m-w) .m-w { animation: m-word .95s var(--m-ease) forwards, m-underline .8s ease forwards; animation-delay: calc(var(--w, 0) * 75ms + 180ms), var(--m-underline-delay, 1.2s); }
@keyframes m-word { to { opacity: 1; translate: none; filter: none; } }
@keyframes m-underline { to { text-decoration-color: #ffda3e; } }
@media (max-width: 480px) {
  html.m-motion .reference-hero h1.m-split > span:not(.m-w),
  html.m-motion .reference-hero h1.m-split > span:not(.m-w) .m-w { text-decoration-thickness: 3px; }
}
html.m-motion .academy-identity > span:first-of-type { animation: m-line-grow .9s var(--m-ease) .1s both; transform-origin: right; }
@keyframes m-line-grow { from { scale: 0 1; } }

.academy-hero-portrait { transition: transform .8s var(--m-ease); }
html.m-motion .academy-portrait-panel { animation: m-bob 7s ease-in-out infinite; }
html.m-motion .academy-portrait-outline { animation: m-bob-soft 7s ease-in-out -1.8s infinite; }
html.m-motion .academy-learning-cycle { animation: m-bob-soft 6s ease-in-out -3s infinite; }
@keyframes m-bob { 50% { translate: 0 -10px; } }
@keyframes m-bob-soft { 50% { translate: 0 -5px; } }
.academy-portrait-word { translate: var(--m-px, 0) var(--m-py, 0); transition: translate .8s var(--m-ease); }
html.m-motion .academy-portrait-word { animation: m-breathe 6s ease-in-out infinite; }
@keyframes m-breathe { 50% { opacity: .17; } }
html.m-motion .academy-learning-cycle b { animation: m-cycle 6s ease-in-out infinite; }
html.m-motion .academy-learning-cycle > div:nth-of-type(2) b { animation-delay: 1.2s; }
html.m-motion .academy-learning-cycle > div:nth-of-type(3) b { animation-delay: 2.4s; }
html.m-motion .academy-learning-cycle > div:nth-of-type(4) b { animation-delay: 3.6s; }
@keyframes m-cycle {
  0%, 22%, 100% { scale: 1; background: #ffda3e; color: #171943; box-shadow: 0 0 0 0 rgb(255 218 62 / 0); }
  8% { scale: 1.2; background: #171943; color: #ffda3e; box-shadow: 0 0 0 7px rgb(255 218 62 / 30%); }
}
html.m-motion .academy-learning-cycle > i { background: linear-gradient(270deg, #dfe0e8 0 40%, #ffda3e 50%, #dfe0e8 60% 100%) no-repeat; background-size: 300% 100%; animation: m-link 6s linear infinite; }
html.m-motion .academy-learning-cycle > i:nth-of-type(2) { animation-delay: 1.2s; }
html.m-motion .academy-learning-cycle > i:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes m-link { 0% { background-position: 100% 0; } 20%, 100% { background-position: 0 0; } }
html.m-motion .academy-hero-ribbon { animation: m-ribbon 1.3s var(--m-ease) .5s both; }
@keyframes m-ribbon { from { translate: -140px 140px; } }
html.m-motion .academy-intro-actions .button-primary { animation: m-cta-pulse 3.4s ease-out 2.4s 3; }
html.m-motion .academy-intro-actions .button-primary:is(:hover, :focus-visible) { animation: none; }
@keyframes m-cta-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 218 62 / 55%); } 45%, 100% { box-shadow: 0 0 0 14px rgb(255 218 62 / 0); } }
.academy-hero-topics li { transition: color .3s ease; }
.academy-hero-topics li::before { transition: rotate .5s var(--m-spring), scale .5s var(--m-spring); }
.academy-hero-topics li:hover { color: #ffffff; }
.academy-hero-topics li:hover::before { rotate: 135deg; scale: 1.4; }

/* ---- Topic strip marquee ---- */
.academy-topic-strip.m-marquee > div {
  --m-gap: 34px;
  min-width: 0;
  justify-content: flex-start;
  gap: var(--m-gap);
  padding-inline: 0 var(--m-gap);
  animation: m-marquee 42s linear infinite;
}
.academy-topic-strip.m-marquee:hover > div,
.academy-topic-strip.m-marquee.m-paused > div { animation-play-state: paused; }
@keyframes m-marquee { to { translate: 50% 0; } }
.academy-topic-strip.m-marquee { -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.academy-topic-strip span { transition: color .35s ease, -webkit-text-stroke-color .35s ease; }
.academy-topic-strip .academy-outline-word:hover { color: #25295f; }
.academy-topic-strip span:not(.academy-outline-word):hover { color: #c79a00; }
@media (max-width: 900px) { .academy-topic-strip.m-marquee > div { --m-gap: 24px; } }

/* ---- Method steps: a line fills as the visitor reads ---- */
html.m-motion .academy-method-steps { position: relative; }
html.m-motion .academy-method-steps::before,
html.m-motion .academy-method-steps::after {
  content: '';
  position: absolute;
  top: 22px;
  bottom: var(--m-line-bottom, 22px);
  inset-inline-start: 22px;
  width: 1px;
  background: rgb(255 255 255 / 14%);
}
html.m-motion .academy-method-steps::after {
  inset-inline-start: 21px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(#ffda3e, #ffe879);
  box-shadow: 0 0 14px rgb(255 218 62 / 55%);
  transform-origin: top;
  scale: 1 var(--m-line, 0);
}
html.m-motion .academy-method-steps li { position: relative; z-index: 1; }
html.m-motion .academy-method-steps li > span { background: #1d2052; transition: background-color .45s ease, color .45s ease, border-color .45s ease, scale .6s var(--m-spring), box-shadow .45s ease; }
html.m-motion .academy-method-steps li.m-active > span { background: #ffda3e; border-color: #ffda3e; color: #171943; scale: 1.08; box-shadow: 0 0 0 6px rgb(255 218 62 / 12%); }
html.m-motion .academy-method-steps li h3 { transition: color .45s ease; }
html.m-motion .academy-method-steps li.m-active h3 { color: #ffda3e; }

/* ---- Belief statement lights up word by word ---- */
html.m-motion .academy-belief-text .m-w { color: #c9cbdd; transition: color .55s ease; }
html.m-motion .academy-belief-text .m-w.m-lit { color: #25295f; }
html.m-motion .academy-belief-text .m-w.m-lit.m-accent { color: #b88a00; }

/* ---- Mentor, podcast and account blocks ---- */
.academy-mentor-image::before { transition: inset .8s var(--m-ease); }
.academy-mentor-image:hover::before { inset: 10px 30px 0 -10px; }
.academy-mentor-image > img { translate: 0 var(--m-par, 0); }
.academy-mentor-image figcaption { transition: translate .6s var(--m-ease); }
.academy-mentor-image:hover figcaption { translate: 0 -6px; }
.academy-mentor-tags span svg { transition: rotate .5s var(--m-spring); }
.academy-mentor-tags span:hover svg { rotate: -12deg; }
.academy-podcast-symbol { position: relative; transition: rotate .6s var(--m-spring), scale .6s var(--m-spring); }
.academy-podcast-player:hover .academy-podcast-symbol { rotate: -8deg; scale: 1.06; }
.m-playing .academy-podcast-symbol::before,
.m-playing .academy-podcast-symbol::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #ffda3e;
  animation: m-ring 1.8s ease-out infinite;
}
.m-playing .academy-podcast-symbol::after { animation-delay: .9s; }
@keyframes m-ring { from { opacity: .8; scale: 1; } to { opacity: 0; scale: 1.7; } }
.m-eq { display: inline-flex; align-items: end; gap: 3px; height: 16px; margin-inline-start: 10px; vertical-align: middle; opacity: 0; transition: opacity .3s ease; }
.m-eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; scale: 1 .3; transform-origin: bottom; }
.m-playing .m-eq { opacity: 1; }
.m-playing .m-eq i { animation: m-eq .9s ease-in-out infinite alternate; }
.m-playing .m-eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.m-playing .m-eq i:nth-child(3) { animation-delay: -.5s; animation-duration: 1.1s; }
.m-playing .m-eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }
@keyframes m-eq { from { scale: 1 .25; } to { scale: 1 1; } }
.academy-podcast-player, .listening-feature { transition: border-color .4s ease, box-shadow .5s var(--m-ease), translate .55s var(--m-ease); }
.academy-podcast-player.m-playing { border-color: #ffda3e; box-shadow: 0 0 0 1px #ffda3e, 0 24px 60px -30px rgb(255 218 62 / 55%); }
.listening-row { transition: background-color .4s ease, box-shadow .4s ease; }
.listening-row.m-playing { background: linear-gradient(270deg, rgb(255 218 62 / 16%), transparent 75%); box-shadow: inset -3px 0 0 #ffda3e; }
body.premium-site.reference-site .listening-feature.m-playing { border-color: #e9c437; box-shadow: 0 0 0 1px #ffda3e, var(--m-lift-shadow); }

/* ---- FAQ and other disclosures ---- */
.academy-faq-list details { transition: border-color .35s ease, background-color .35s ease, box-shadow .45s var(--m-ease); }
.academy-faq-list details:hover { border-color: #c6cadf; }
.academy-faq-list details[open] { box-shadow: 0 18px 40px -28px rgb(23 25 67 / 35%); }
.academy-faq-list summary > span { border-radius: 50%; line-height: 1; transition: transform .5s var(--m-spring), background-color .35s ease, color .35s ease; }
.academy-faq-list details[open] summary > span { background: #ffda3e; color: #171943; }
.academy-faq-list summary { transition: color .3s ease; }
.academy-faq-list summary:hover { color: #25295f; }

/* ---- Yellow start band ---- */
.academy-start-band { position: relative; isolation: isolate; overflow: hidden; }
.academy-start-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 0 -80px;
  background: repeating-linear-gradient(-45deg, transparent 0 28px, rgb(255 255 255 / 26%) 28px 56px);
  background-size: 79.2px 79.2px;
  -webkit-mask: linear-gradient(90deg, #000, transparent 55%);
  mask: linear-gradient(90deg, #000, transparent 55%);
}
.academy-start-band::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 340px;
  aspect-ratio: 1;
  inset-inline-end: -90px;
  top: -170px;
  border-radius: 50%;
  border: 40px solid rgb(255 255 255 / 20%);
}
html.m-motion .academy-start-band::before { animation: m-stripes 4s linear infinite; }
html.m-motion .academy-start-band::after { animation: m-bob 9s ease-in-out infinite; }
@keyframes m-stripes { to { translate: 79.2px 0; } }

/* ---- Inner pages: a soft light wash behind the opening section ---- */
body.premium-site.reference-site:not(.reference-home) main::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  inset-inline: 0;
  height: 760px;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 88% 6%, rgb(255 218 62 / 24%), transparent 70%),
    radial-gradient(38% 50% at 8% 18%, rgb(118 128 255 / 13%), transparent 70%),
    radial-gradient(circle at 1px 1px, rgb(23 25 67 / 9%) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask: linear-gradient(#000 40%, transparent);
  mask: linear-gradient(#000 40%, transparent);
}
html.m-motion body.premium-site.reference-site:not(.reference-home) main::before { animation: m-wash 18s ease-in-out infinite alternate; }
@keyframes m-wash { to { translate: -2% 18px; } }

/* Filters, chips and small controls. */
body.premium-site.reference-site :is(.learning-filters a, .editorial-filters a, .folder-nav a) {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, translate .35s var(--m-ease), box-shadow .35s var(--m-ease);
}
body.premium-site.reference-site :is(.learning-filters a, .editorial-filters a, .folder-nav a):hover { translate: 0 -2px; box-shadow: 0 10px 20px -14px rgb(23 25 67 / 45%); }
body.premium-site.reference-site .learning-search { transition: box-shadow .35s ease, border-color .35s ease; }
body.premium-site.reference-site .learning-search:focus-within { border-color: var(--m-navy); box-shadow: 0 0 0 4px rgb(255 218 62 / 45%), 0 18px 40px -26px rgb(23 25 67 / 40%); }
body.premium-site.reference-site .learning-search-icon svg { transition: rotate .45s var(--m-spring), scale .45s var(--m-spring); }
body.premium-site.reference-site .learning-search:focus-within .learning-search-icon svg { rotate: 12deg; scale: 1.15; }

/* ---- Forms and feedback ---- */
body.premium-site.reference-site :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"]), select, textarea) { transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease; }
html body.premium-site.reference-site :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"]), select, textarea):focus:not(.learning-search input) {
  border-color: var(--m-navy);
  box-shadow: 0 0 0 4px rgb(255 218 62 / 40%);
}
html.m-motion .form-message.m-flash:not(.success) { animation: m-shake .5s var(--m-ease); }
html.m-motion .form-message.m-flash.success { animation: m-pop .5s var(--m-spring); }
@keyframes m-shake { 15%, 55% { translate: -7px 0; } 35%, 75% { translate: 6px 0; } 90% { translate: -2px 0; } }
@keyframes m-pop { from { opacity: 0; scale: .94; } }
html.m-motion [data-auth-verify]:not([hidden]) { animation: m-rise .55s var(--m-ease) both; }
html.m-motion .auth-progress li[aria-current] .auth-step-number { animation: m-pop-in .6s var(--m-spring) both; }
@keyframes m-pop-in { from { scale: .5; } }
.auth-benefits li > span:first-child { transition: rotate .5s var(--m-spring), scale .5s var(--m-spring), background-color .3s ease, color .3s ease; }
.auth-benefits li:hover > span:first-child { rotate: -8deg; scale: 1.08; background: var(--m-navy); color: var(--m-yellow); }
html.m-motion .toast:not([hidden]) { animation: m-toast .55s var(--m-spring) both; }
@keyframes m-toast { from { opacity: 0; translate: 0 24px; scale: .94; } }
html.m-motion dialog[open] { animation: m-dialog .5s var(--m-ease) both; }
html.m-motion dialog[open]::backdrop { animation: m-fade .4s ease both; }
@keyframes m-dialog { from { opacity: 0; translate: 0 28px; } }
@keyframes m-fade { from { opacity: 0; } }

/* Lazy images settle in once they arrive. */
html.m-motion img.m-img-pending { opacity: 0; filter: blur(8px); }
html.m-motion img.m-img-loaded { transition: opacity .7s ease, filter .8s var(--m-ease), scale .9s var(--m-ease); }
html.m-motion :is(.learning-card-image, .journal-card-image, .account-learning-cover):has(> img.m-img-pending) {
  background-image: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 45%) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: m-shimmer 1.3s linear infinite;
}
@keyframes m-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Mouse users can drag the course carousel. */
@media (hover: hover) and (pointer: fine) {
  .academy-course-track { cursor: grab; }
  .academy-course-track.m-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .academy-course-track.m-dragging a { pointer-events: none; }
}

/* ---- Footer and mobile shortcuts ---- */
body.premium-site.reference-site .footer-main > div > a:not(.footer-brand),
body.premium-site.reference-site .footer-explore > a {
  background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
  transition: color .3s ease, background-size .45s var(--m-ease);
}
body.premium-site.reference-site .footer-main > div > a:not(.footer-brand):hover,
body.premium-site.reference-site .footer-explore > a:hover { background-size: 100% 1px; }
body.premium-site.reference-site .footer-manifesto .icon-button { transition: translate .45s var(--m-spring), background-color .3s ease, color .3s ease, border-color .3s ease; }
body.premium-site.reference-site .footer-manifesto .icon-button:hover { translate: 0 -4px; background: var(--m-yellow); color: var(--m-navy); border-color: var(--m-yellow); }
body.premium-site.reference-site .bottom-nav { view-transition-name: m-bottom-nav; }
body.premium-site.reference-site .bottom-nav a { transition: background-color .3s ease, color .3s ease; }
body.premium-site.reference-site .bottom-nav a svg { transition: translate .45s var(--m-spring), scale .3s var(--m-spring); }
body.premium-site.reference-site .bottom-nav a[aria-current] svg { translate: 0 -2px; }
body.premium-site.reference-site .bottom-nav a:active svg { scale: .82; }
html.m-motion body.premium-site.reference-site .bottom-nav a[aria-current] { view-transition-name: m-nav-pill; }
::view-transition-group(m-nav-pill) { animation-duration: .5s; animation-timing-function: var(--m-ease); }
::view-transition-group(m-site-header),
::view-transition-group(m-bottom-nav) { animation-duration: .35s; }

/* Visitors who prefer less motion get a calm, fully visible page. */
@media (prefers-reduced-motion: reduce) {
  [data-m-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  .m-progress, .m-loader { display: none; }
  body.premium-site.reference-site .site-header { view-transition-name: none; }
  body.premium-site.reference-site .bottom-nav, body.premium-site.reference-site .bottom-nav a[aria-current] { view-transition-name: none; }
}

/* ---- Phones: shorter, lighter movement that stays smooth on modest devices ---- */
@media (max-width: 600px) {
  html.m-motion [data-m-reveal] {
    translate: 0 22px !important;
    transition: opacity .7s var(--m-ease), translate .8s var(--m-ease), scale .8s var(--m-ease), filter .7s var(--m-ease) !important;
    transition-delay: calc(var(--m-i, 0) * 70ms + var(--m-delay, 0ms)) !important;
  }
  html.m-motion [data-m-reveal="fade"] { translate: none !important; }
  html.m-motion [data-m-reveal="start"] { translate: 24px 0 !important; }
  html.m-motion [data-m-reveal="end"] { translate: -24px 0 !important; }
  html.m-motion [data-m-reveal].m-in { translate: none !important; }
  html.m-motion .reference-hero h1.m-split .m-w { filter: none; translate: 0 .35em; }
  html.m-motion .academy-hero-pattern::before,
  html.m-motion .academy-portrait-outline,
  html.m-motion .academy-learning-cycle { animation: none; }
  body.premium-site.reference-site .site-header.is-scrolled,
  body.premium-site.reference-site.reference-home .site-header.is-scrolled {
    background: rgb(255 255 255 / 97%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (hover: none) {
  body.premium-site.reference-site :is(.button, .icon-button, .bottom-nav a, .learning-filters a, .editorial-filters a, #mobile-menu a, .learning-card-cta) { -webkit-tap-highlight-color: transparent; }
}

/* ---- Phone layout: fewer, tighter blocks so long lists stay easy to scan ---- */
@media (max-width: 600px) {
  /* Learning paths become a swipeable row with the next card peeking in. */
  body.premium-site.reference-site .academy-path-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    gap: 14px;
    margin-inline: -20px;
    padding: 4px 20px 14px;
    overflow-x: auto;
    /* Reveal offsets must not create a second, vertical scroll area. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  body.premium-site.reference-site .academy-path-grid::-webkit-scrollbar { display: none; }
  body.premium-site.reference-site .academy-path-card { scroll-snap-align: start; padding: 24px 22px; }
  .academy-portrait-word { font-size: 70px; }

  /* Course catalogue: compact cards with a square cover beside the details. */
  body.premium-site.reference-site .course-grid { gap: 14px; }
  body.premium-site.reference-site .course-grid .learning-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    border-radius: 18px;
  }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-image { padding: 12px; padding-inline-end: 0; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-placeholder { aspect-ratio: 1; min-height: 0; padding: 8px; border-radius: 12px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-placeholder span { display: none; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-placeholder svg { width: 30px; height: 30px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-body { padding: 12px 14px 12px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-badge { margin-bottom: 6px; padding: 1px 8px; font-size: 11px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-topline { margin-bottom: 2px; font-size: 11px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-topline img { width: 20px; height: 20px; }
  body.premium-site.reference-site .course-grid .learning-card h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.8; }
  body.premium-site.reference-site .course-grid .learning-card h3 a { min-height: 0; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-meta { margin-bottom: 8px; gap: 10px; font-size: 11px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-bottom { flex-wrap: nowrap; padding-top: 8px; gap: 8px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-price { flex: 1 1 auto; width: auto; min-width: 0; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-price strong { font-size: 16px; }
  body.premium-site.reference-site .course-grid .learning-card .learning-card-cta { min-width: 0; min-height: 38px; padding: 4px 12px; font-size: 13px; }

  /* Journal lists: a small square cover next to the title instead of a tall empty frame. */
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    padding: 12px;
    border-radius: 18px;
  }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) .journal-card-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
  }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) :is(.journal-card-image img, .image-placeholder) { height: 100%; aspect-ratio: 1; }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) .image-placeholder::before { inset: 8px; border-radius: 10px; }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) .image-placeholder svg { width: 28px; height: 28px; }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) .journal-card-body { padding: 2px 14px 2px 0; padding-inline: 14px 0; }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) h3 { margin: 2px 0 4px; font-size: 17px; line-height: 1.8; }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) .journal-card-body > p { display: none; }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) .journal-meta { font-size: 11px; }
  body.premium-site.reference-site :is(.academy-article-grid, .journal-grid) .journal-card:not(.journal-card-featured) .editorial-inline-link { min-height: 32px; font-size: 13px; }
  body.premium-site.reference-site .journal-grid { gap: 14px; }
  body.premium-site.reference-site .journal-card-featured .journal-card-image { min-height: 0; aspect-ratio: 16 / 9; }
  body.premium-site.reference-site .journal-card-featured :is(.journal-card-image img, .image-placeholder) { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 600px) {
  /* My courses: the same compact card, with the progress kept to one slim bar. */
  body.premium-site.reference-site .account-learning-grid { gap: 12px; }
  body.premium-site.reference-site .account-learning-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; border-radius: 18px; }
  body.premium-site.reference-site .account-learning-cover { padding: 12px; padding-inline-end: 0; }
  body.premium-site.reference-site .account-learning-cover img,
  body.premium-site.reference-site .account-cover-placeholder { aspect-ratio: 1; border-radius: 12px; }
  body.premium-site.reference-site .account-cover-placeholder svg { width: 30px; height: 30px; }
  body.premium-site.reference-site .account-course-state { display: none; }
  body.premium-site.reference-site .account-learning-body { padding: 12px 14px 0; }
  body.premium-site.reference-site .account-course-meta { margin-bottom: 2px; font-size: 11px; }
  body.premium-site.reference-site .account-learning-body h3 { min-height: 0; margin: 0 0 8px; font-size: 16px; line-height: 1.8; }
  body.premium-site.reference-site .account-learning-card .course-learning-progress { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; }
  body.premium-site.reference-site .account-learning-card .course-learning-progress__heading { margin-bottom: 6px; font-size: 11px; }
  body.premium-site.reference-site .account-learning-card .course-learning-progress progress { height: 5px; }
  body.premium-site.reference-site .account-learning-card .course-learning-progress > small { display: none; }
  body.premium-site.reference-site .account-learning-action { min-height: 42px; }
  body.premium-site.reference-site .account-learning-action > a { min-height: 42px; font-size: 13px; }

  /* Learning history and orders: one tidy row per item. */
  body.premium-site.reference-site .learning-history-list { gap: 10px; }
  body.premium-site.reference-site .learning-history-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 2px 12px;
    padding: 14px;
  }
  body.premium-site.reference-site .learning-history-icon { width: 40px; height: 40px; grid-row: 1 / span 2; }
  body.premium-site.reference-site .learning-history-icon svg { width: 18px; height: 18px; }
  body.premium-site.reference-site .learning-history-course { font-size: 12px; }
  body.premium-site.reference-site .learning-history-copy h2 { margin: 2px 0; font-size: 16px; line-height: 1.8; }
  body.premium-site.reference-site .learning-history-copy p { margin: 2px 0; font-size: 12px; }
  body.premium-site.reference-site .learning-history-copy > small { font-size: 11px; }
  body.premium-site.reference-site .learning-history-item > .button { grid-column: 2; justify-self: start; min-height: 38px; margin: 8px 0 0; padding: 4px 14px; font-size: 13px; }
  body.premium-site.reference-site .orders-list { gap: 10px; }
  body.premium-site.reference-site .order-row { gap: 8px 12px; padding: 14px; }
  body.premium-site.reference-site .order-row .order-symbol { width: 40px; height: 40px; }
  body.premium-site.reference-site .order-row .order-info { flex: 1 1 calc(100% - 56px); min-width: 0; }
  body.premium-site.reference-site .order-row .order-info h2 { margin: 0 0 2px; font-size: 16px; line-height: 1.8; }
  body.premium-site.reference-site .order-row .order-info > div { font-size: 12px; }
  body.premium-site.reference-site .order-row .status-pill { margin-inline-start: 52px; font-size: 11px; }
  body.premium-site.reference-site .order-row .order-price { margin-inline-start: auto; font-size: 13px; }
}
@media (max-width: 420px) {
  body.premium-site.reference-site .academy-path-grid { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}