.early-learning-content { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:18px 0 76px; color:#202b3c; }
.early-learning-content #early-home-view[hidden],
.early-learning-content .early-member-section[hidden] { display:none!important; }
.early-member-section { min-height:280px; }
.early-member-breadcrumb { display:flex; align-items:center; flex-wrap:nowrap; width:100%; max-width:100%; min-width:0; height:30px; margin-bottom:18px; box-sizing:border-box; color:#202124; font-size:16px; line-height:30px; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.early-member-breadcrumb > * { flex:0 0 auto; }
.early-member-breadcrumb a { color:#e67e22; text-decoration:none; font-weight:700; }
.early-member-breadcrumb a:hover { text-decoration:underline; }
.early-member-breadcrumb a:focus-visible { outline:2px solid #e67e22; outline-offset:3px; }
.early-member-breadcrumb > span[aria-hidden="true"] { display:inline-flex; flex:0 0 15px; justify-content:center; }
.early-member-breadcrumb [aria-current="page"] { font-weight:800; }
.early-member-heading { margin:0 0 28px; }
.early-member-heading .degree-eyebrow { margin:0 0 9px; color:#e67e22; font-size:15px; font-weight:800; letter-spacing:.14em; }
.early-member-heading h1 { margin:0; color:#202b3c; font-size:32px; font-weight:700; }
.early-member-banner { margin:0 0 24px; }
.early-member-banner img { display:block; width:100%; height:auto; border-radius:0; }
.early-member-content { min-height:180px; }
.early-member-section[data-early-view="age-1"] .early-member-content,
.early-member-section[data-early-view="age-2"] .early-member-content,
.early-member-section[data-early-view="age-3"] .early-member-content,
.early-member-section[data-early-view="age-4"] .early-member-content,
.early-member-section[data-early-view="age-5"] .early-member-content,
.early-member-section[data-early-view="age-6"] .early-member-content { min-height:0; }
.early-age-course-header { margin:0 0 18px; text-align:center; }
.early-age-course-title { margin:0 0 10px; color:#2e8b57; font-size:24px; line-height:1.3; }
.early-age-course-title-button { padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.early-age-course-title-button:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.early-age-course-summary { margin:0; color:#4b5563; font-size:17px; line-height:1.8; }
.early-age-course-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.early-age-course-card { position:relative; display:flex; flex-direction:column; align-items:stretch; width:100%; padding:0; overflow:hidden; border:1px solid #697987; border-radius:0; background:#fff; color:inherit; text-align:center; text-decoration:none; }
.early-age-course-card:hover,.early-age-course-card:focus-visible { border-color:#3d596f; color:inherit; outline:2px solid rgba(61,89,111,.24); outline-offset:2px; text-decoration:none; }
.early-age-course-card-lock-badge { position:absolute; z-index:1; top:8px; right:8px; display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; background:transparent; color:#fff; -webkit-text-stroke:1px #626568; text-shadow:-1px -1px 0 #626568,1px -1px 0 #626568,-1px 1px 0 #626568,1px 1px 0 #626568; filter:drop-shadow(0 1px 1px rgba(0,0,0,.20)); font-size:14px; line-height:1; pointer-events:none; }
@media (min-width:1101px) { #sidebar.sidebar-nav:not(.mini-sidebar) + .main-content .early-age-course-card-lock-badge { top:3px; right:3px; } }
.early-age-course-card-image { display:block; flex:none; width:100%; aspect-ratio:3/2; object-fit:cover; background:#edf4ef; }
.early-age-course-card-body { box-sizing:border-box; display:flex; flex:0 0 auto; min-height:0; aspect-ratio:3/2; flex-direction:column; align-items:center; justify-content:center; padding:14px 8px 10px; }
.early-age-course-card-title { display:block; margin-bottom:5px; color:#1c244b; font-size:22px; font-weight:600; line-height:1.2; }
.early-age-course-card-summary { display:block; color:#324a6d; font-size:15px; font-weight:300; line-height:1.5; }
.early-member-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; color:#e67e22; font-size:15px; font-weight:600; text-decoration:none; }
.early-member-back:hover { text-decoration:underline; }
.early-member-back:focus-visible { outline:2px solid #e67e22; outline-offset:4px; }
.early-member-section#early-member-access-denied h2 { margin:0; color:#202b3c; font-size:28px; }
.early-learning-heading { margin-bottom:28px; }
.early-learning-heading h1 { margin:0; color:#202b3c; font-size:32px; letter-spacing:-.04em; }
.early-learning-hero { margin:0 0 24px; border-radius:12px; }
.early-image-slot { display:flex; min-height:260px; align-items:center; justify-content:center; overflow:hidden; border:1px dashed #c9d5e4; border-radius:20px; background:#edf3fa; color:#7a879b; font-size:16px; text-align:center; }.early-image-slot img { display:block; width:100%; height:100%; min-height:inherit; object-fit:cover; }.early-image-slot img + span { display:none; }
.early-learning-age-link { display:block; margin:8px 0 0; color:#2f5f8f; font-size:24px; font-weight:700; line-height:1.45; text-align:center; }
.early-learning-intro { display:block; box-sizing:border-box; width:100%; max-width:980px; height:auto; max-height:none; margin:18px auto 0; overflow:visible; color:#68758a; font-size:17px; line-height:1.8; text-align:justify; white-space:normal; overflow-wrap:anywhere; }
.early-learning-years { margin-top:35px; }
.early-learning-section-heading { margin-bottom:24px; }
.early-learning-section-heading .degree-eyebrow { margin-bottom:9px; }
.early-learning-section-heading h2 { margin:0; color:#202b3c; font-size:28px; }
.early-learning-card-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.early-learning-card { display:flex; width:100%; padding:0; flex-direction:column; overflow:hidden; border:1px solid #697987; border-radius:0; background:#fff; color:inherit; text-decoration:none; transition:none; }
.early-learning-card:hover,.early-learning-card:focus-visible { color:inherit; text-decoration:none; border-color:#3d596f; outline:2px solid rgba(61,89,111,.24); outline-offset:2px; }
.early-learning-card-image { display:block; width:100%; aspect-ratio:3 / 2; object-fit:cover; background:#edf4ef; }
.early-learning-card-body { box-sizing:border-box; display:flex; width:100%; min-height:0; aspect-ratio:3 / 2; flex-direction:column; align-items:center; justify-content:center; padding:12px 8px; text-align:center; }
.early-learning-card strong { display:block; margin-bottom:7px; color:#1c244b; font-size:20px; font-weight:600; line-height:1.25; }
.early-learning-card-body > span { display:block; width:100%; min-width:0; overflow:hidden; color:#324a6d; font-size:15px; font-weight:300; line-height:1.5; white-space:nowrap; text-overflow:ellipsis; }
body.degree-page.io-black-mode .early-learning-content { color:#edf3fb; }
body.degree-page.io-black-mode .early-age-course-summary,body.degree-page.io-black-mode .early-age-course-card-summary { color:#c4cbd3; }
body.degree-page.io-black-mode .early-age-course-title { color:#67b786; }
body.degree-page.io-black-mode .early-age-course-card { border-color:#49525c; background:#20252b; color:#edf3fb; }
body.degree-page.io-black-mode .early-age-course-card:hover,body.degree-page.io-black-mode .early-age-course-card:focus-visible { border-color:#a98bdd; outline-color:rgba(169,139,221,.35); }
body.degree-page.io-black-mode .early-age-course-card-title { color:#f1f3f4; }
body.degree-page.io-black-mode .early-learning-heading h1,body.degree-page.io-black-mode .early-learning-section-heading h2 { color:#edf3fb; }
body.degree-page.io-black-mode .early-image-slot { border-color:#4a5870; background:#263142; color:#a8b4c7; }
body.degree-page.io-black-mode .early-learning-age-link { color:#9fc5f2; }
body.degree-page.io-black-mode .early-learning-age-link:hover,body.degree-page.io-black-mode .early-learning-age-link:focus { color:#c2ddff; }
body.degree-page.io-black-mode .early-learning-intro { color:#a8b4c7; }
body.degree-page.io-black-mode .early-learning-card { border-color:#49525c; background:#20252b; color:#edf3fb; }
body.degree-page.io-black-mode .early-learning-card:hover,body.degree-page.io-black-mode .early-learning-card:focus-visible { color:#edf0f2; border-color:#a98bdd; outline-color:rgba(169,139,221,.35); }
body.degree-page.io-black-mode .early-learning-card strong { color:#f1f3f4; }
body.degree-page.io-black-mode .early-learning-card-body > span { color:#c4cbd3; }
body.degree-page.io-black-mode .early-member-breadcrumb { color:#fff; }
body.degree-page.io-black-mode .early-member-breadcrumb a,
body.degree-page.io-black-mode .early-member-back { color:#f0a35b; }
body.degree-page.io-black-mode .early-member-heading h1,
body.degree-page.io-black-mode .early-member-section#early-member-access-denied h2 { color:#f1f3f4; }
.early-degree-upgrade-panel { z-index:2147483004; display:block; padding:0; }
.early-degree-upgrade-panel .membership-dialog { position:fixed; top:var(--degree-panel-top,62px); right:var(--degree-panel-right,12px); width:min(460px,calc(100vw - 24px)); max-height:min(90vh,720px,calc(100dvh - var(--degree-panel-top,62px) - 12px)); margin:0; }
.early-degree-upgrade-panel [hidden] { display:none!important; }
.early-degree-upgrade-heading { display:flex; align-items:center; gap:12px; margin:0 34px 16px 0; }
.early-degree-upgrade-icon { display:block; flex:0 0 auto; margin:0; color:#2f5f8f; font-size:28px; }
.early-degree-upgrade-panel .early-degree-upgrade-heading h2 { min-width:0; margin:0; }
.early-degree-upgrade-panel h2 { margin:0 0 16px; color:#202b3c; font-size:22px; font-weight:700; }
.early-degree-upgrade-price { margin:0 0 18px; color:#245b88 !important; font-size:28px; font-weight:700; }
.early-degree-upgrade-price span { color:#667085; font-size:14px; font-weight:400; }
.early-degree-upgrade-panel .membership-dialog > p:not(.early-degree-upgrade-price) { margin:0 0 14px; }
.early-degree-upgrade-note { display:none; }
.early-degree-product-name { display:inline-block; white-space:nowrap; }
.early-degree-upgrade-pay,.early-degree-upgrade-return { display:block; width:100%; margin-top:16px; text-align:center; }
.early-degree-upgrade-return[hidden],.early-degree-upgrade-pay[hidden] { display:none; }
.early-degree-upgrade-panel[data-degree-view="member"] .membership-dialog { width:min(298px,calc(100vw - 24px)); padding:25px 20px; border-radius:12px; }
.early-degree-member-heading { display:flex; align-items:center; gap:12px; margin:0 34px 16px 0; padding-left:4px; }
.early-degree-member-heading i { color:#e67e22; font-size:25px; }
.early-degree-member-heading h2 { margin:0; }
.early-degree-member-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.early-degree-member-item { display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; padding:6px 4px; border:0; background:transparent; color:#202b3c; font:inherit; font-size:17px; font-weight:600; line-height:1.35; text-align:left; text-decoration:none; }
.early-degree-member-item:nth-child(even) { justify-content:flex-end; }
.early-degree-member-item i { flex:none; width:21px; color:var(--item-color); font-size:19px; text-align:center; }
.early-degree-member-item span { min-width:0; }
.early-degree-member-item:disabled { cursor:default; opacity:1; }
.early-degree-member-item:not(:disabled) { cursor:pointer; }
.early-degree-member-item:not(:disabled):hover span { text-decoration:underline; }
.early-degree-member-item:not(:disabled):focus-visible { border-radius:4px; outline:2px solid var(--item-color); outline-offset:2px; }
body.degree-page.io-black-mode .early-degree-upgrade-panel h2 { color:#f1f3f4; }
body.degree-page.io-black-mode .early-degree-upgrade-icon { color:#9fc5f2; }
body.degree-page.io-black-mode .early-degree-member-heading i { color:#f0a35b; }
body.degree-page.io-black-mode .early-degree-member-item { color:#edf3fb; }
@media (max-width:1100px) { .early-learning-card-grid,.early-age-course-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767.98px),(orientation:portrait) and (min-width:768px) and (max-width:1100px) { .early-learning-content { width:min(100% - 40px,680px); padding:18px 0 56px; } }
@media (max-width:991.98px) { .early-member-breadcrumb { font-size:17px; } }
@media (max-width:767px) { .early-learning-heading h1 { font-size:28px; }.early-learning-age-link { font-size:21px; }.early-learning-intro { font-size:16px; line-height:1.8; }.early-learning-years { margin-top:35px; }.early-learning-card-grid,.early-age-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.early-learning-card strong { font-size:18px; }.early-age-course-card-title { font-size:18px; }.early-age-course-card-summary { font-size:14px; } }

@media (min-width:768px) and (max-width:1100px) {
    .early-age-course-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:767.98px) {
    .early-learning-content:has(.early-member-section[data-early-view^="age-"]:not([hidden])) { width:calc(100% - 20px); max-width:none; }
    .early-age-course-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
    .early-age-course-card-body { aspect-ratio:3/2; min-height:0; padding:4px; }
    .early-age-course-card-title { box-sizing:border-box; width:100%; margin-bottom:4px; overflow-x:auto; overflow-y:hidden; font-size:17px; line-height:1.15; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; }
    .early-age-course-card-title::-webkit-scrollbar { display:none; }
    .early-age-course-card-summary { box-sizing:border-box; width:100%; overflow-x:auto; overflow-y:hidden; font-size:14px; line-height:1.45; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; }
    .early-age-course-card-summary::-webkit-scrollbar { display:none; }
}

@media (max-width:360px) { .early-age-course-card-title { font-size:16px; } }
@media (max-width:340px) { .early-age-course-card-title { font-size:14px; } }
@media (max-width:300px) { .early-age-course-card-title { font-size:12px; } }

@media (orientation:portrait) and (min-width:700px) and (max-width:767.98px) {
    .early-age-course-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
