/* Compact course strip: one row on laptops, two small rows on phones. */
.prep-ribbon { padding: 0 16px 12px; font-family: 'DM Sans', system-ui, sans-serif; color: #fff; background: #eef4fb; }
.prep-ribbon-inner { position: relative; isolation: isolate; overflow: hidden; max-width: 1180px; margin: auto; padding: 14px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; border: 1px solid #3769b3; border-radius: 18px; background: radial-gradient(ellipse at 85% 110%, #1880bd80, transparent 58%), linear-gradient(112deg, #092c68, #124fac 72%, #1559b5); box-shadow: 0 8px 24px -18px #16488480; }
.prep-ribbon-inner::before { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 360px; height: 360px; top: -300px; right: 20%; border: 1px solid #8cceff20; border-radius: 50%; box-shadow: 0 0 0 35px #8cceff08, 0 0 0 70px #8cceff06; }
.prep-ribbon-intro { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.prep-ribbon-intro strong { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.2px; }
.prep-ribbon-intro em { color: #a6f0eb; font-style: normal; }
.prep-motion { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid #a1c8ff4d; border-radius: 50%; background: #ffffff0b; color: #c5f6f5; cursor: pointer; }
.prep-motion::before { content: ''; position: absolute; inset: -8px; }
.prep-motion svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.prep-motion[hidden], .prep-play-icon, .prep-motion[aria-pressed="true"] .prep-pause-icon { display: none; }
.prep-motion[aria-pressed="true"] .prep-play-icon { display: block; }
.prep-ribbon-courses { min-width: 0; padding-left: 22px; border-left: 1px solid #96bdf733; }
.prep-course-rail { display: flex; align-items: center; gap: 8px; }
.prep-ribbon-window { min-width: 0; flex: 1; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); border-radius: 8px; }
.prep-ribbon-window::-webkit-scrollbar { display: none; }
.prep-ribbon-track { width: max-content; }
.prep-ribbon-group { display: flex; align-items: center; gap: 7px; list-style: none; margin: 0; padding: 0 14px 0 0; }
.prep-ribbon-group li { flex: none; padding: 7px 12px; border: 1px solid #9abff33b; border-radius: 8px; background: #ffffff0b; color: #eff6ff; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.prep-ribbon-group .prep-chip-featured { position: relative; overflow: hidden; font-weight: 700; transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.prep-ribbon-group .is-highlighted { color: #073c51; background: #a6f0eb; border-color: #c3fffa; box-shadow: inset 0 0 0 1px #ffffff50, 0 0 12px #65ddd62b; }
.prep-ribbon-group .is-highlighted::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 20%, #ffffff55 50%, transparent 80%); animation: prep-highlight-sheen .75s ease-out both; }
.prep-next { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #a1c8ff4d; background: #ffffff0e; color: #d5ecff; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.prep-next[hidden] { display: none; }
.prep-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.prep-next.is-end svg { transform: rotate(180deg); }
.prep-next:hover { background: #ffffff25; }
.prep-next:active { transform: scale(.97); }
.prep-ribbon :is(button, [tabindex]):focus-visible { outline: 2px solid #a6f0eb; outline-offset: 3px; }
@media (max-width: 600px) {
  .prep-ribbon { padding: 0 12px 10px; }
  .prep-ribbon-inner { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 12px; border-radius: 16px; }
  .prep-ribbon-intro { gap: 8px; }
  .prep-ribbon-intro strong { font-size: 14px; }
  .prep-ribbon-courses { padding: 0; border: 0; }
}
@keyframes prep-highlight-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tnc-splash-on .prep-ribbon *, .tnc-splash-on .prep-ribbon *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .prep-ribbon *, .prep-ribbon *::before, .prep-ribbon *::after { animation: none !important; transition: none !important; }
  .prep-ribbon-window { mask-image: none; }
  .prep-motion { display: none; }
  .prep-ribbon-group .prep-chip-featured { background: #e2f1ff; color: #10396d; border-color: #e2f1ff; }
  .prep-ribbon-group .is-highlighted::after { display: none; }
}