/* Atelier Academy: glassmorphic design layer (loads after styles.css) */
:root{
  --r-lg:30px;--r-md:22px;--r-sm:14px;
  --g-bg:rgba(255,255,255,.50);--g-bg-strong:rgba(255,255,255,.72);--g-bd:rgba(255,255,255,.72);--g-hi:rgba(255,255,255,.85);
  --g-sh:0 18px 50px rgba(16,35,63,.12),0 2px 10px rgba(16,35,63,.06);--g-blur:blur(24px) saturate(165%);
  --g-tint:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.14));
  --accent:#a27c32;--accent-2:#3b6aa8;--btn-grad:linear-gradient(135deg,#17315a,#0d1f3d 60%,#1d3f73);--btn-ink:#fff;
  --ease:cubic-bezier(.22,.9,.28,1);
}
:root[data-theme="dark"]{
  --g-bg:rgba(18,30,50,.52);--g-bg-strong:rgba(18,30,50,.78);--g-bd:rgba(255,255,255,.13);--g-hi:rgba(255,255,255,.14);
  --g-sh:0 22px 60px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.3);
  --g-tint:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  --accent:#e1c27b;--accent-2:#7fb0f0;--btn-grad:linear-gradient(135deg,#e8cd8f,#d2a954 60%,#e6c47a);--btn-ink:#101b2b;
}
html{scroll-behavior:smooth;scroll-padding-top:104px}
::selection{background:rgba(162,124,50,.28)}
:root:root{background:linear-gradient(180deg,#eaf1fb 0%,#f6efe3 48%,#e6f2f1 100%) fixed}
body{background:transparent!important;min-height:100vh}
/* ---------- living aurora backdrop ---------- */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:1;will-change:transform}
body::before{width:62vmax;height:62vmax;left:-18vmax;top:-20vmax;
  background:radial-gradient(circle at 40% 40%,rgba(96,150,240,.78),rgba(167,139,250,.5) 45%,transparent 72%);animation:aurora-a 26s ease-in-out infinite alternate}
body::after{width:58vmax;height:58vmax;right:-20vmax;bottom:-22vmax;
  background:radial-gradient(circle at 55% 55%,rgba(244,190,100,.72),rgba(90,210,190,.46) 48%,transparent 74%);animation:aurora-b 32s ease-in-out infinite alternate}
:root[data-theme="dark"] body::before{background:radial-gradient(circle at 40% 40%,rgba(48,120,200,.5),rgba(110,70,190,.34) 45%,transparent 70%);opacity:.8}
:root[data-theme="dark"] body::after{background:radial-gradient(circle at 55% 55%,rgba(190,140,60,.34),rgba(20,150,140,.3) 48%,transparent 72%);opacity:.75}
@keyframes aurora-a{to{transform:translate3d(14vmax,10vmax,0) scale(1.12)}}
@keyframes aurora-b{to{transform:translate3d(-12vmax,-8vmax,0) scale(1.1)}}
.app-shell{background:transparent!important}
:root:root[data-theme="dark"]{background:linear-gradient(180deg,#07101c,#0a1626 60%,#08141f) fixed}
:root:root:root .art-card,
:root:root:root .floating-chip,
:root:root:root .course-feature,
:root:root:root .enrolment-card,
:root:root:root .achievement-summary>div,
:root:root:root .badge-card,
:root:root:root .inline-module-quiz,
:root:root:root .certification-card,
:root:root:root .portfolio-card,
:root:root:root .admin-panel,
:root:root:root .contact-card,
:root:root:root .dashboard-stats>div,
:root:root:root .empty-state,
:root:root:root .family-stats span,
:root:root:root .faq-item,
:root:root:root .how-step,
:root:root:root .level-details,
:root:root:root .level-table-wrap,
:root:root:root .lesson-sidebar,
:root:root:root .lesson-content,
:root:root:root .learning-feedback-panel,
:root:root:root .verify-result,
:root:root:root .auth-wrap,
:root:root:root .goal-metric,
:root:root:root .ce-family-card,
:root:root:root .ce-career-card,
:root:root:root .ce-detail,
:root:root:root .ce-match-card,
:root:root:root .ce-metric-strip,
:root:root:root .ce-note,
:root:root:root .ce-info-note,
:root:root:root .ce-disclaimer,
:root:root:root .ce-search,
:root:root:root .ce-match-form fieldset,
:root:root:root .quiz-question,
:root:root:root .assignment-instructions,
:root:root:root .learning-progress,
:root:root:root .studio-module,
:root:root:root .studio-lesson,
:root:root:root .video-fallback,
:root:root:root .video-unavailable,
:root:root:root .video-pending,
:root:root:root .lesson-placeholder{background:var(--g-tint),var(--g-bg);border:1px solid var(--g-bd);border-radius:var(--r-md);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi);color:var(--ink);overflow:visible}
:root:root:root .level-table-wrap,
:root:root:root .auth-wrap{overflow:hidden;border-radius:var(--r-lg)}
:root:root:root .lesson-content,
:root:root:root .lesson-sidebar,
:root:root:root .admin-panel,
:root:root:root .contact-card,
:root:root:root .mission-card{border-radius:var(--r-lg)}
:root:root:root .empty-state{border-style:dashed}
:root:root:root .family-stats span,
:root:root:root .floating-chip{border-radius:999px}
:root:root:root .how-step,
:root:root:root .dashboard-stats>div,
:root:root:root .contact-card,
:root:root:root .ce-family-card,
:root:root:root .ce-career-card,
:root:root:root .enrolment-card,
:root:root:root .badge-card,
:root:root:root .course-feature,
:root:root:root .faq-item,
:root:root:root .level-details{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
@media(hover:hover){
:root:root:root .how-step:hover,
:root:root:root .dashboard-stats>div:hover,
:root:root:root .contact-card:hover,
:root:root:root .ce-family-card:hover,
:root:root:root .ce-career-card:hover,
:root:root:root .enrolment-card:hover,
:root:root:root .badge-card:hover,
:root:root:root .course-feature:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(16,35,63,.18),inset 0 1px 0 var(--g-hi);border-color:rgba(255,255,255,.95)}
}
:root[data-theme="dark"] .how-step:hover{border-color:rgba(225,194,123,.45)}
:root:root:root .art-sun,
:root:root:root .course-feature-icon,
:root:root:root .empty-icon,
:root:root:root .badge-art,
:root:root:root .skill-tags span,
:root:root:root .verify-icon,
:root:root:root .contact-icon,
:root:root:root .ce-card-icon,
:root:root:root .ce-detail-tags span,
:root:root:root .ce-trend-chips span,
:root:root:root .ce-field-checks span,
:root:root:root .ce-family-tab,
:root:root:root .status-pill,
:root:root:root .quiz-result,
:root:root:root .how-step b,
:root:root:root .course-card-foot a{background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.22));border:1px solid var(--g-bd);color:var(--accent);box-shadow:inset 0 1px 0 var(--g-hi),0 6px 18px rgba(16,35,63,.08)}
:root:root:root .art-sun,
:root:root:root .course-feature-icon,
:root:root:root .empty-icon,
:root:root:root .verify-icon,
:root:root:root .contact-icon,
:root:root:root .ce-card-icon,
:root:root:root .how-step b{border-radius:50%}
:root:root:root .ce-family-tab,
:root:root:root .studio-tab{border-radius:999px}
:root:root:root .ce-family-tab.active,
:root:root:root .ce-family-tab[aria-selected="true"],
:root:root:root .studio-tab.active{background:var(--btn-grad);color:var(--btn-ink);border-color:transparent;box-shadow:0 10px 26px rgba(16,35,63,.25)}

:root[data-theme="dark"] .art-sun,:root[data-theme="dark"] .course-feature-icon,:root[data-theme="dark"] .empty-icon,:root[data-theme="dark"] .badge-art,:root[data-theme="dark"] .skill-tags span,:root[data-theme="dark"] .course-card-foot a{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}

/* ---------- floating glass navigation ---------- */
.topbar{position:sticky;top:12px;z-index:60;height:68px;margin:12px clamp(12px,3vw,40px) 0;padding:0 clamp(16px,2.4vw,30px);border:1px solid var(--g-bd);border-radius:999px;
  background:var(--g-tint),var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi)}
:root[data-theme="dark"] .topbar{background:var(--g-tint),var(--g-bg);border-color:var(--g-bd)}
.desktop-nav a{position:relative;padding:8px 14px;border-radius:999px;transition:background .3s,color .3s}
.desktop-nav a:hover{background:rgba(255,255,255,.55);color:var(--ink)}
:root[data-theme="dark"] .desktop-nav a:hover{background:rgba(255,255,255,.1)}
.brand-logo-img{border-radius:12px}
@media(max-width:620px){.topbar{height:60px;margin:8px 10px 0;top:8px}}

/* ---------- buttons ---------- */
:root:root:root .button{border-radius:999px;font-weight:700;letter-spacing:.01em;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s}
:root:root:root .button.dark{background:var(--btn-grad);color:var(--btn-ink);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 28px rgba(16,35,63,.28),inset 0 1px 0 rgba(255,255,255,.28)}
:root:root:root .button.dark:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(16,35,63,.34),inset 0 1px 0 rgba(255,255,255,.35);filter:brightness(1.07)}
:root:root:root .button.light,
:root:root:root .button.outline,
:root:root:root .theme-toggle,
:root:root:root .icon-button,
:root:root:root .rail-arrow,
:root:root:root .rail-edge{background:var(--g-tint),var(--g-bg);border:1px solid var(--g-bd);color:var(--ink);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 var(--g-hi),0 6px 18px rgba(16,35,63,.08)}
:root:root:root .button.light:hover,
:root:root:root .button.outline:hover,
:root:root:root .rail-arrow:hover,
:root:root:root .rail-edge:hover{transform:translateY(-2px);background:var(--g-bg-strong);color:var(--ink);border-color:var(--g-bd)}
:root:root:root .button.quiet{background:transparent}
:root:root:root .button:active{transform:translateY(0) scale(.98)}
.button:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
:root:root:root input:not([type=checkbox]):not([type=radio]):not([type=range]),
:root:root:root textarea,
:root:root:root select{background:var(--g-bg-strong);border:1px solid var(--g-bd);border-radius:var(--r-sm);color:var(--ink);box-shadow:inset 0 1px 3px rgba(16,35,63,.06);transition:border-color .25s,box-shadow .25s}
:root:root:root input:focus,
:root:root:root textarea:focus,
:root:root:root select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(162,124,50,.18)}
:root:root:root .auth-aside{background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,.08)),linear-gradient(135deg,rgba(110,165,235,.28),rgba(240,196,120,.25));border-right:1px solid var(--g-bd)}
:root:root:root .auth-panel,
:root:root:root .auth-wrap{color:var(--ink)}
:root:root:root .form-message,
:root:root:root .config-banner,
:root:root:root .notice{background:var(--g-bg);border:1px solid var(--g-bd);border-radius:var(--r-sm);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--ink)}
:root:root:root .notice,
:root:root:root .config-banner{margin:12px clamp(12px,3vw,40px) 0;border-radius:var(--r-md)}

/* ---------- hero ---------- */
.hero{gap:clamp(24px,4vw,56px);padding-top:clamp(36px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
:root:root:root .hero-copy{position:relative;padding:clamp(28px,4vw,56px);border-radius:40px;background:var(--g-tint),var(--g-bg);border:1px solid var(--g-bd);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi),inset 0 -1px 0 rgba(255,255,255,.12)}

.hero-copy::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--mx,20%) var(--my,0%),rgba(255,255,255,.42),transparent 55%);opacity:.8;mix-blend-mode:soft-light}
.hero .eyebrow{display:inline-flex;padding:8px 16px;border-radius:999px;background:var(--g-bg-strong);border:1px solid var(--g-bd);color:var(--accent);box-shadow:inset 0 1px 0 var(--g-hi)}
.hero h1{font-weight:700;letter-spacing:-.06em}
.hero h1 em{background:linear-gradient(110deg,var(--accent) 0%,#e6c27a 38%,var(--accent-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.08em}
.hero-lede{color:var(--muted)}
.hero-proof span{padding:8px 14px;border-radius:999px;background:var(--g-bg);border:1px solid var(--g-bd);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero-art{height:420px}
.art-orbit{border:1px solid rgba(162,124,50,.35);box-shadow:0 0 60px rgba(120,160,230,.18),inset 0 0 40px rgba(255,255,255,.12);animation:orbit-spin 40s linear infinite}
.orbit-two{animation:orbit-spin-2 52s linear infinite;border-color:rgba(59,106,168,.35)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes orbit-spin-2{from{transform:rotate(-32deg)}to{transform:rotate(328deg)}}
:root:root:root .main-art-card{width:min(360px,84%);padding:26px 28px;border-radius:34px;transform:rotate(-2deg);animation:float-a 9s ease-in-out infinite}
:root:root:root .floating-chip{padding:13px 18px;animation:float-b 7s ease-in-out infinite;color:var(--accent)}
:root:root:root .chip-bottom{animation-delay:-3.5s}

@keyframes float-a{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-9px)}}
@keyframes float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.art-progress span{background:rgba(120,130,150,.25)}
.art-progress span:first-child,.art-progress span:nth-child(2){background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.live-dot{box-shadow:0 0 0 0 rgba(120,200,140,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(120,200,140,0)}100%{box-shadow:0 0 0 0 rgba(120,200,140,0)}}
@media(max-width:850px){.hero-art{height:360px}}
@media(max-width:620px){.hero-copy{border-radius:30px}.hero-art{height:330px}}

/* ---------- value strip, quote, CTA, footer ---------- */
:root:root:root .value-strip{margin:0 clamp(16px,5vw,72px);padding:22px clamp(20px,3vw,40px);border:1px solid var(--g-bd);border-radius:var(--r-lg);background:var(--g-tint),var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi)}
:root:root:root .value-strip>div>b{background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:32px}
:root:root:root .quote-band{margin:30px clamp(16px,5vw,72px);padding:clamp(28px,4vw,48px) clamp(22px,6vw,90px);border:1px solid var(--g-bd);border-radius:40px;background:var(--g-tint),var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi);color:var(--ink)}
:root:root:root .quote-mark{color:var(--accent);opacity:.8}
:root:root:root .final-cta{margin:30px auto;max-width:1120px;padding:clamp(30px,4vw,52px);border:1px solid var(--g-bd);border-radius:40px;background:var(--g-tint),var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi);width:calc(100% - clamp(32px,10vw,144px))}
:root:root:root .footer{margin:30px clamp(12px,3vw,40px) 18px;border:1px solid var(--g-bd);border-radius:36px;background:var(--g-tint),var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi);color:var(--ink)}
:root:root:root .mission-card{background:linear-gradient(145deg,rgba(23,49,90,.82),rgba(13,31,61,.9));-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid rgba(255,255,255,.18);box-shadow:var(--g-sh),inset 0 1px 0 rgba(255,255,255,.22)}
:root:root:root .section-heading h2,
:root:root:root .page-title,
:root:root:root .final-cta h2,
:root:root:root .family-h2{letter-spacing:-.05em}
:root:root:root .page-title,
:root:root:root .family-h2{background:linear-gradient(120deg,var(--ink) 30%,var(--accent) 140%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:root:root:root .eyebrow{color:var(--accent)}

/* ---------- flip cards ---------- */
.flip-card{position:relative;isolation:isolate;perspective:1600px;overflow:visible!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:var(--r-lg);padding:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;cursor:default;outline-offset:6px;transition:transform .5s var(--ease)}
/* Phase 1: the static glass panel (::before) was removed; the glass now lives on .flip-front so it flips with the tile */
.flip-inner{position:relative;z-index:1;display:grid;transform-style:preserve-3d;transition:transform .9s var(--ease);will-change:transform;border-radius:var(--r-lg)}
.flip-face{grid-area:1/1;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .01s linear .45s}
.flip-back{transform:rotateY(180deg);background:linear-gradient(155deg,rgba(23,49,90,.9),rgba(13,31,61,.94) 55%,rgba(40,70,120,.9));color:#f4f0e8;pointer-events:none;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.flip-back h3,.flip-back p,.flip-back li,.flip-back .level-badge,.flip-back .course-meta{color:#f4f0e8}
.flip-back .flip-eyebrow,.flip-back .level-badge{color:#e4c783;font-size:10px;letter-spacing:.16em;font-weight:800}
:root[data-theme="dark"] .flip-back{background:linear-gradient(155deg,rgba(30,46,72,.92),rgba(14,24,40,.96) 60%,rgba(48,60,90,.9))}
.is-flipped>.flip-inner{transform:rotateY(180deg)}
.is-flipped>.flip-inner>.flip-back{pointer-events:auto}
.is-flipped>.flip-inner>.flip-front{pointer-events:none}
.flip-toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:2px 0 14px;padding:9px 16px;border-radius:999px;border:1px solid var(--g-bd);background:var(--g-bg-strong);color:var(--ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 var(--g-hi);transition:transform .3s var(--ease),background .3s}
.flip-toggle:hover{transform:translateY(-1px)}
.flip-toggle span{display:inline-block;transition:transform .6s var(--ease)}
.flip-toggle:hover span{transform:rotate(180deg)}
.flip-back .flip-toggle{background:rgba(255,255,255,.12);color:#f4f0e8;border-color:rgba(255,255,255,.22)}
@media(hover:hover){
  .flip-card:hover{transform:translateY(-6px)}
    .course-card.flip-card:hover>.flip-inner,.course-card.flip-card:focus-within>.flip-inner{transform:rotateY(180deg)}
  .course-card.flip-card:hover>.flip-inner>.flip-back,.course-card.flip-card:focus-within>.flip-inner>.flip-back{pointer-events:auto}
  .course-card.flip-card:hover>.flip-inner>.flip-front,.course-card.flip-card:focus-within>.flip-inner>.flip-front{pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}

/* ---------- course tiles ---------- */
.course-rail{padding:14px 8px 30px;margin:-14px -8px -30px}
.course-card.flip-card{min-width:0}
.course-card.flip-card .flip-front{background:none}
.course-card .course-card-art.course-card-image{height:170px;padding:0;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;position:relative;background:#10233f}
.course-card .course-card-art.course-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.course-card.flip-card:hover .course-card-art img{transform:scale(1.07)}
.course-card .course-card-art.course-card-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,35,63,.25));pointer-events:none}
.course-card .course-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.course-card .course-card-body p{min-height:0;flex:1}
.course-card-foot{border-top:1px solid var(--g-bd)!important}
.course-card .flip-back{padding:28px 26px 26px;gap:2px;justify-content:flex-start}
.course-card .flip-back h3{font-size:21px;margin:10px 0 10px}
.course-card .flip-back p{font-size:13px;line-height:1.75;margin:0 0 14px;flex:1;display:block;-webkit-line-clamp:unset;overflow:visible;opacity:.92}
.course-card .flip-back .course-meta{margin-bottom:16px;opacity:.8}
.course-card .flip-back .button.dark{background:linear-gradient(135deg,#e8cd8f,#d2a954 60%,#e6c47a);color:#101b2b;border-color:transparent}

/* ---------- level tiles ---------- */
.level-grid{gap:clamp(18px,2.4vw,30px);padding-top:14px}
.level-card.flip-card{display:block}
.level-card .flip-face{padding:30px 26px 26px}
.level-card .flip-front{background:none}
.level-card .level-badge{color:var(--accent)}
.level-card h3{font-size:23px;letter-spacing:-.04em}
.level-card .level-desc{color:var(--muted)}
.level-card .level-sub{color:var(--ink)}
.level-card .flip-back .level-list li{color:#f4f0e8}
.level-card .flip-back .level-list svg{color:#e4c783}
.level-card .flip-back .level-cert{color:#d8dde6;margin-top:auto}
.level-card .level-facts{background:var(--g-bg-strong);border:1px solid var(--g-bd);border-radius:18px;box-shadow:inset 0 1px 0 var(--g-hi);margin:auto 0 14px}
.level-card .level-facts b{color:var(--ink)}
.level-card .button{margin-top:2px}
.level-card .button.dark{background:var(--btn-grad)}
.level-card .flip-back .button.dark{background:linear-gradient(135deg,#e8cd8f,#d2a954 60%,#e6c47a);color:#101b2b}
.level-card .flip-back .button.outline{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.level-card-featured::before{border-color:rgba(228,199,131,.9)!important;box-shadow:0 0 0 1px rgba(228,199,131,.55),0 30px 80px rgba(212,168,83,.28),inset 0 1px 0 var(--g-hi)!important}
.level-flag{z-index:5;background:linear-gradient(135deg,#17315a,#0d1f3d);color:#f1e5c9;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 26px rgba(16,35,63,.35)}
.level-table thead th{background:var(--btn-grad);color:var(--btn-ink)}
.level-table th,.level-table td{border-color:var(--g-bd)}
.level-table{background:transparent}
.level-table tbody tr{transition:background .3s}
.level-table tbody tr:hover{background:rgba(255,255,255,.35)}
.how-step b{color:var(--accent)}
.level-details summary::after,.faq-item summary::after{color:var(--accent)}
.family-stats span{padding:10px 18px}
@media(max-width:900px){.level-grid{grid-template-columns:1fr}}

/* ---------- rails & misc ---------- */
.course-rail-controls span{background:var(--g-bg);border:1px solid var(--g-bd);padding:6px 14px;border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.settings-drawer,.feedback-drawer{background:var(--g-tint),var(--g-bg-strong)!important;-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border-color:var(--g-bd)!important}
.settings-scrim{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dashboard-stats strong{background:linear-gradient(135deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lesson-nav-item{border-radius:var(--r-sm);transition:background .3s}
.lesson-nav-item:hover{background:rgba(255,255,255,.4)}
:root[data-theme="dark"] .lesson-nav-item:hover{background:rgba(255,255,255,.07)}
.lesson-nav-item.locked{background:transparent}
.lesson-video,.lesson-video iframe,.lesson-video video{border-radius:var(--r-md);overflow:hidden}
video.lesson-video,.lesson-video{box-shadow:var(--g-sh)}
table{border-collapse:collapse}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:rgba(120,130,150,.35);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(120,130,150,.55);background-clip:content-box;border:3px solid transparent}
/* dark text colours on glass in dark mode */
:root[data-theme="dark"] .button.dark{color:#101b2b}
:root[data-theme="dark"] .level-table thead th{color:#101b2b}
/* fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--g-bg:rgba(255,255,255,.9);--g-bg-strong:#fff}
  :root[data-theme="dark"]{--g-bg:rgba(18,30,50,.95);--g-bg-strong:#122033}
}
@media(prefers-reduced-motion:reduce){body::before,body::after,.art-orbit,.main-art-card,.floating-chip,.live-dot{animation:none!important}}

/* ---------- ambient video sections blend into the aurora ---------- */
.home-ambient-video{opacity:.5!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mix-blend-mode:multiply}
:root[data-theme="dark"] .home-ambient-video{opacity:.4!important;mix-blend-mode:screen}
.home-ambient::before{opacity:.5}
/* old square tag -> glass pill */
.hero-art::after{content:'LEARN  /  APPLY  /  GROW'!important;right:4%!important;bottom:2%!important;padding:10px 18px!important;border-radius:999px!important;background:var(--g-bg-strong)!important;color:var(--accent)!important;border:1px solid var(--g-bd);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi);font-weight:700}
/* let the aurora show through page containers */
main,.home-page{background:transparent!important}
/* light mode: remove the old whitening overlays so the aurora shows through the glass */
:root:not([data-theme="dark"]) .home-ambient::before{background:none!important}
.home-ambient-video{background:transparent!important}
/* gold call-to-action on the dark back faces */
:root:root:root .flip-back .button.dark{background:linear-gradient(135deg,#f0d898,#d8ae58 60%,#ecc97e);color:#101b2b;border-color:rgba(255,255,255,.35);box-shadow:0 10px 28px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5)}
:root:root:root .flip-back .button.outline{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}

/* ---------- Career Explorer home block ---------- */
:root:root:root .ce-home{margin-top:40px;padding:0;border-radius:44px;overflow:hidden;background:var(--g-tint),var(--g-bg);border:1px solid var(--g-bd);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-sh),inset 0 1px 0 var(--g-hi);color:var(--ink)}
:root:root:root .ce-home-top{margin:14px;border-radius:32px;background:radial-gradient(circle at 84% 10%,rgba(70,130,200,.8),rgba(22,44,80,.86) 42%,rgba(12,26,46,.92) 85%);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 20px 50px rgba(10,25,50,.25)}
:root:root:root .ce-home-body{background:transparent}
:root:root:root .ce-purpose-note{background:var(--g-tint),var(--g-bg-strong);border:1px solid var(--g-bd);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--g-hi);color:var(--ink)}
:root:root:root .ce-home-top .ce-metric-strip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:24px;color:#fff7e8;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
:root:root:root .ce-home-top .ce-metric-strip>div{border-color:rgba(255,255,255,.16)}
:root:root:root .ce-family-tab{border-radius:999px;padding:12px 20px}
:root:root:root .ce-explore-center{border-color:var(--g-bd)}
:root:root:root .ce-center-orbit{background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.25));border:1px solid var(--g-bd);color:var(--accent)}
:root:root:root .ce-tab-arrow{border-radius:50%;background:var(--g-bg-strong);border:1px solid var(--g-bd);color:var(--ink)}
:root:root:root .ce-inner-hero,
:root:root:root .ce-detail-hero,
:root:root:root .ce-opportunity-band{border-radius:var(--r-lg);overflow:hidden}

/* softer shadows on rail tiles so the scroll area edge never shows */
.course-rail{padding:16px 10px 44px;margin:-16px -10px -44px}
/* flip tiles: inner fills the tile, so equal-height rails and grids line up */
:root:root:root .flip-card{display:flex;flex-direction:column}
:root:root:root .flip-card>.flip-inner{flex:1 1 auto;width:100%}
/* auth card: no stray inner gap; footer text readable on glass */
:root:root:root .auth-wrap{padding:0}
:root:root:root .footer .brand,:root:root:root .footer .brand b,:root:root:root .footer .brand small,:root:root:root .footer-brand,:root:root:root .footer-links a{color:var(--ink)}
:root:root:root .footer p,:root:root:root .footer>small{color:var(--muted)}
:root:root:root .footer-links a{padding:6px 12px;border-radius:999px;transition:background .3s}
:root:root:root .footer-links a:hover{background:rgba(255,255,255,.5);color:var(--ink)}
:root[data-theme="dark"] .footer-links a:hover{background:rgba(255,255,255,.08)}
/* settings control: compact glass control-panel button */
:root:root:root .settings-trigger{width:42px;height:42px;min-height:42px;padding:0;border-radius:14px;display:inline-grid;place-items:center;background:var(--g-tint),var(--g-bg-strong);border:1px solid var(--g-bd);color:var(--ink);box-shadow:inset 0 1px 0 var(--g-hi),0 6px 16px rgba(16,35,63,.1)}
:root:root:root .settings-trigger:hover{transform:translateY(-1px);color:var(--accent)}
:root:root:root .settings-trigger svg{width:18px;height:18px;transition:transform .5s var(--ease)}
:root:root:root .settings-trigger:hover svg{transform:scale(1.12)}

/* =====================================================================
   PHASE 1 (v60)
   ===================================================================== */

/* ---- Fix 1: tile flips on its own, nothing static behind it ---- */
.flip-card{--fs:var(--g-sh);--fs-h:0 34px 80px rgba(16,35,63,.22)}
.course-rail .flip-card{--fs:0 14px 34px rgba(16,35,63,.12);--fs-h:0 22px 46px rgba(16,35,63,.2)}
:root[data-theme="dark"] .flip-card{--fs-h:0 34px 80px rgba(0,0,0,.6)}
:root[data-theme="dark"] .course-rail .flip-card{--fs:0 14px 34px rgba(0,0,0,.4);--fs-h:0 22px 46px rgba(0,0,0,.55)}
:root:root:root .flip-card .flip-front{position:relative;background:var(--g-tint),var(--g-bg);border:1px solid var(--g-bd);box-shadow:var(--fs),inset 0 1px 0 var(--g-hi);transition:box-shadow .5s var(--ease),border-color .4s,opacity .01s linear .45s}
:root:root:root .flip-card .flip-back{box-shadow:var(--fs),inset 0 1px 0 rgba(255,255,255,.25)}
:root:root:root .flip-card:hover .flip-front,:root:root:root .flip-card:hover .flip-back{box-shadow:var(--fs-h),inset 0 1px 0 var(--g-hi)}
/* hover glow rides on the front face, so it never leaves a static shape behind */
.flip-front::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.34),transparent 55%);opacity:0;mix-blend-mode:soft-light;transition:opacity .4s}
@media(hover:hover){.flip-card:hover .flip-front::after{opacity:1}}

/* ---- Fix 2: rail edges fade out like a carousel, no square clip ---- */
@property --fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-r{syntax:"<length>";inherits:false;initial-value:0px}
.course-rail{
  --edge:56px;--fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),rgba(0,0,0,0) 100%);
  transition:--fade-l .3s ease,--fade-r .3s ease}
.course-rail.has-prev{--fade-l:var(--edge)}
.course-rail.has-next{--fade-r:var(--edge)}
.course-rail:not(.has-prev):not(.has-next){-webkit-mask-image:none;mask-image:none}
@media(max-width:620px){.course-rail{--edge:28px}}
@media(prefers-reduced-motion:reduce){.course-rail{transition:none}}

/* ---- Fix 3: arrows live outside the tile window ---- */
.course-rail-wrap{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;column-gap:14px;align-items:center}
.course-rail-wrap>.course-rail-controls{grid-column:1/-1;grid-row:1}
.course-rail-wrap>.course-rail{grid-column:2;grid-row:2;min-width:0}
:root .course-rail-wrap>.rail-edge{position:static!important;top:auto!important;left:auto!important;right:auto!important;grid-row:2;align-self:center;justify-self:center;flex:none}
:root .course-rail-wrap>.rail-edge-prev{grid-column:1}
:root .course-rail-wrap>.rail-edge-next{grid-column:3}
/* hidden arrows keep their gutter, so the rail never jumps */
:root .course-rail-wrap .rail-edge[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
@media(max-width:620px){
  .course-rail-wrap{grid-template-columns:auto auto;justify-content:center;column-gap:14px;row-gap:12px}
  .course-rail-wrap>.course-rail{grid-column:1/-1}
  :root .course-rail-wrap>.rail-edge{grid-row:3}
  :root .course-rail-wrap>.rail-edge-prev{grid-column:1}
  :root .course-rail-wrap>.rail-edge-next{grid-column:2}
}

/* ---- Fix 4 (v63): top navigation: clean text links, pushed right, sliding gold underline ---- */
@media(min-width:621px){.desktop-nav{margin-left:auto;margin-right:clamp(6px,1.2vw,18px);gap:clamp(18px,2.2vw,32px)}}
:root:root .desktop-nav a{position:relative;padding:10px 2px;border:0;border-radius:0;background:none;box-shadow:none;
  font-weight:700;letter-spacing:.02em;color:#10233f;text-shadow:0 1px 0 rgba(255,255,255,.65);transition:color .3s,transform .3s var(--ease)}
:root[data-theme="dark"]:root .desktop-nav a{color:#f4f0e8;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#e4c783,#d2a954,#3b6aa8);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
:root:root .desktop-nav a:hover,:root:root .desktop-nav a:focus-visible{background:none;box-shadow:none;border:0;color:#8a6420;transform:translateY(-1px)}
:root[data-theme="dark"]:root .desktop-nav a:hover,:root[data-theme="dark"]:root .desktop-nav a:focus-visible{background:none;color:#e4c783}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav a[aria-current="page"]::after{transform:scaleX(1)}
:root:root .desktop-nav a:focus-visible{outline:2px solid #a27c32;outline-offset:4px;border-radius:4px}
:root:root .desktop-nav a[aria-current="page"]{background:none;box-shadow:none;border:0;color:#8a6420;text-shadow:none}
:root[data-theme="dark"]:root .desktop-nav a[aria-current="page"]{color:#e4c783}
@media(prefers-reduced-motion:reduce){.desktop-nav a,.desktop-nav a::after{transition:none}:root:root .desktop-nav a:hover,:root:root .desktop-nav a:focus-visible{transform:none}}

/* ---- Hero mascot: Pip waves from the top edge of the learning-journey card (v61) ---- */
.main-art-card{position:relative}
.hero-pip{position:absolute;left:7%;bottom:calc(100% - 26px);width:clamp(118px,12.5vw,168px);z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none;line-height:0}
.hero-pip img{display:block;width:100%;height:auto}
@media(max-width:850px){.hero-pip{left:4%;width:clamp(104px,20vw,140px)}}
@media(max-width:620px){.hero-art{margin-top:84px}.hero-pip{left:6%;width:112px;bottom:calc(100% - 20px)}}