/* Course recommendation cards stay in the original hero location. */
.course-banner-carousel{position:relative;margin-top:16px;min-width:0;isolation:isolate;border-radius:24px;overflow:hidden}
.course-banner-viewport{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:24px;touch-action:pan-x pan-y;outline-offset:-3px}
.course-banner-viewport::-webkit-scrollbar{display:none}.course-banner-viewport:focus-visible{outline:2px solid #2864ff}
.course-banner-slide{position:relative;isolation:isolate;flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;min-height:276px;padding:18px 18px 52px;background:linear-gradient(115deg,#ddf4ff,#eaefff 57%,#dfd6ff)}
.course-banner-image{background:linear-gradient(115deg,#ebefff,#e7e7ff 58%,#e9d9ff)}.course-banner-video{background:linear-gradient(115deg,#e1f0ff,#e9e8ff 58%,#ded9ff)}
.course-banner-copy{position:relative;z-index:2;max-width:70%;pointer-events:none}.course-banner-copy .eyebrow{font-size:calc(11px * var(--font-scale));letter-spacing:0;gap:5px;line-height:1.5;white-space:normal}.course-banner-copy .eyebrow svg{width:15px;height:15px;flex-shrink:0}
.course-banner-copy h1{font-size:calc(24px * var(--font-scale));line-height:1.4;font-weight:800;letter-spacing:-.7px;margin:10px 0 8px;color:#101a30}.course-banner-copy h1 em{color:#2864ff;font-style:normal}.course-banner-copy p{font-size:calc(12px * var(--font-scale));line-height:1.8;color:#607190;max-width:172px}.course-banner-copy .course-banner-action{pointer-events:auto;min-height:48px;font-size:calc(12px * var(--font-scale));padding:10px 14px;margin-top:16px;max-width:100%}
.course-banner-art{position:absolute;z-index:1;right:-4px;bottom:26px;width:55%;max-height:224px;aspect-ratio:1;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 8px 12px #7073c521)}
.course-banner-cover{width:38%;height:104px;aspect-ratio:4/3;object-fit:cover;border:4px solid #ffffffa0;border-radius:18px;right:10px;bottom:58px;transform:rotate(6deg);box-shadow:0 8px 18px #6268b922}
.course-banner-decoration{position:absolute;z-index:0;width:165px;height:165px;border:1px solid #ffffff80;border-radius:50%;right:-15px;top:44px;box-shadow:0 0 0 15px #ffffff15,0 0 0 30px #ffffff15;pointer-events:none}
.course-banner-pagination{position:absolute;bottom:0;left:12px;z-index:3;display:flex}.course-banner-pagination button{min-width:48px;min-height:48px;display:grid;place-items:center;background:transparent;border:0;border-radius:12px}.course-banner-pagination button span{width:5px;height:5px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px #96a6d23a;transition:width .18s,background .18s}.course-banner-pagination button.active span{width:18px;background:#2864ff;box-shadow:none}.course-banner-pagination button:focus-visible{outline:2px solid #2864ff;outline-offset:-6px}
.course-banner-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.course-banner-viewport.is-dragging{scroll-snap-type:none;user-select:none;cursor:grabbing}
.course-learning-path .course-path-continue{margin-top:24px}.course-catalog-more{margin-top:16px}.course-catalog-hint{font-size:calc(12px * var(--font-scale));line-height:1.8;color:#65718b;margin-top:14px;overflow-wrap:anywhere}.course-catalog-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;font-size:calc(12px * var(--font-scale));color:#65718b;margin:4px 0 12px;flex-wrap:wrap}.course-search-submit,.course-clear-search{color:#2864ff;font-size:calc(12px * var(--font-scale));min-width:48px;min-height:48px;padding:8px 4px;flex-shrink:0;white-space:nowrap}.course-all-grid{margin-bottom:20px}.course-catalog-empty{text-align:center;padding:24px 18px}.course-catalog-empty>svg{width:32px;height:32px;color:#8b4dff}.course-catalog-empty h2{font-size:calc(18px * var(--font-scale));line-height:1.6;margin-top:12px}.course-catalog-empty p{font-size:calc(14px * var(--font-scale));line-height:1.8;color:#65718b;margin:12px 0 16px}
.font-large .course-banner-copy{max-width:100%}.font-large .course-banner-copy p{max-width:none}.font-large .course-banner-art{position:relative;right:auto;bottom:auto;width:180px;max-height:none;height:180px;display:block;margin:16px auto 0}.font-large .course-banner-cover{width:100%;height:auto;aspect-ratio:16/9;max-width:270px;transform:none;opacity:1}.font-large .course-banner-copy .course-banner-action{font-size:calc(12px * var(--font-scale));min-height:56px}.font-large .course-search-submit{white-space:normal}.font-large .course-learning-path .course-path-continue{margin-top:24px}
@media(prefers-reduced-motion:reduce){.course-banner-pagination button span{transition:none}}

/* Compact recommendation banners in the Android preview; the web app keeps its own layout. */
body:not(.web-app) .course-banner-slide{min-height:144px;padding:10px 14px}
body:not(.web-app) .course-banner-copy{max-width:68%}
body:not(.web-app) .course-banner-copy .eyebrow{font-size:calc(10px * var(--font-scale));line-height:1.3;padding:2px 6px}
body:not(.web-app) .course-banner-copy .eyebrow svg{width:13px;height:13px}
body:not(.web-app) .course-banner-copy h1{font-size:calc(20px * var(--font-scale));line-height:1.25;letter-spacing:-.4px;margin:3px 0 5px}
body:not(.web-app) .course-banner-copy p{display:none}
body:not(.web-app) .course-banner-copy .course-banner-action{min-height:48px;margin-top:0;padding:10px 12px}
body:not(.web-app) .course-banner-art{width:100px;height:100px;max-height:none;right:3px;top:2px;bottom:auto}
body:not(.web-app) .course-banner-cover{width:89px;height:67px;right:10px;top:19px;border-width:3px;border-radius:14px}
body:not(.web-app) .course-banner-decoration{width:104px;height:104px;right:-10px;top:0}
body:not(.web-app) .course-banner-pagination{left:auto;right:4px;bottom:10px}
body.font-large:not(.web-app) .course-banner-slide{padding:12px 14px 60px}
body.font-large:not(.web-app) .course-banner-copy{max-width:100%}
body.font-large:not(.web-app) .course-banner-copy .course-banner-action{min-height:56px;margin-top:7px}
body.font-large:not(.web-app) .course-banner-art{position:relative;width:96px;height:96px;right:auto;top:auto;bottom:auto;margin:8px 0 0 auto}
body.font-large:not(.web-app) .course-banner-cover{width:104px;height:78px;transform:none}
body.font-large:not(.web-app) .course-banner-pagination{bottom:6px}