/* Skillity 2.0 · Brand System · Guest + Learner first · 2026-10-27
   Staff keeps the proven functional layouts with restrained changes. */
:root{--blue:#4865e8;--green:#17b6b0;--paper:#f5f7fc;--ink:#1f2a4a;--muted:#6b7796;--line:#e4e9f5;--lime:#e9faf5;--shadow:0 12px 36px rgba(32,55,119,.065);--radius:18px;color-scheme:light}
html{scroll-behavior:smooth}
body{font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;letter-spacing:-.005em}
h1,h2,h3,.brand{font-family:Manrope,Inter,'Segoe UI',system-ui,sans-serif}
.card{border-radius:18px;box-shadow:0 9px 30px rgba(32,55,119,.055)}
.button,button:not(.calendar-days button){border-radius:11px}
a:focus-visible,button:focus-visible{outline:3px solid #6d95ff;outline-offset:3px}
.skillity-theme-toggle{border:1px solid #dfe6f4;background:#fff;color:#385183;box-shadow:none;padding:9px 13px;border-radius:999px;margin-right:12px;font-size:12px}
.skillity-theme-toggle:hover{background:#eaf0ff;color:#2c4bd3}
.sidebar{background:#fff;border-right:1px solid #e8edf7}
.sidebar-brand .brand{color:#243c83}
.sidebar nav a.active,.sidebar nav a[aria-current=page]{background:#eaf0ff;color:#3756cc;font-weight:750}
.sidebar nav a:hover{background:#f2f6ff;color:#3756cc}
.sidebar-note{background:linear-gradient(135deg,#dbeaff,#ecdeff);border-radius:17px}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid #e7ecf7}
.content{max-width:1530px}
.welcome{border-radius:25px}
.skillity-student .sidebar{background:#fefeff}
.skillity-student .sidebar .role{color:#7791c1}
.skillity-student .welcome{background:linear-gradient(115deg,#4865e8 0%,#5875f2 46%,#6b82f9 100%);color:white;position:relative;overflow:hidden;min-height:248px;box-shadow:0 20px 36px rgba(72,101,232,.16)}
.skillity-student .welcome:before{content:"";position:absolute;width:420px;height:420px;border:1px solid #ffffff35;border-radius:50%;right:-130px;top:-120px;pointer-events:none}
.skillity-student .welcome:after{content:"✦";position:absolute;right:37%;top:25px;color:#ffdf88;font-size:30px;pointer-events:none}
.skillity-student .welcome-copy{position:relative;z-index:2;max-width:62%}
.skillity-student .welcome-copy h1{color:#fff;font-weight:800;line-height:1.15;font-size:clamp(27px,3.2vw,43px);letter-spacing:-.045em}
.skillity-student .welcome-copy p{color:#e4ebff;max-width:510px;font-size:14px;line-height:1.65}
.skillity-student .welcome-date{color:#d1dcff;font-size:12px}
.skillity-student .welcome-link{background:white!important;color:#3450bb!important;border-radius:12px;padding:12px 17px;font-weight:780;display:inline-flex;gap:8px;box-shadow:0 6px 18px #101e6a29}
.skillity-student .welcome-visual{display:flex;align-items:flex-end;justify-content:flex-end;overflow:visible;position:absolute;right:1%;bottom:-16px;width:50%;height:100%}
.skillity-student .welcome-visual img{position:relative;z-index:1;max-width:100%;width:460px;max-height:105%;height:auto;object-fit:contain;filter:drop-shadow(0 16px 16px #253da129)}
.skillity-student .welcome-visual .cloud{display:none}
.student-resume-card{background:linear-gradient(120deg,#fff,#eff8ff);border:1px solid #dde9fd;box-shadow:0 12px 30px #3159ac0a}
.student-resume-card .eyebrow{color:#5877ee}
.student-progress-mini{background:white;border:1px solid #e1e9f7}
.student-progress-mini progress,.course-progress-card progress{accent-color:#17b6b0}
.skillity-student .reward-card{background:linear-gradient(120deg,#fff9e7,#fff);border:1px solid #f7e8ad}
.skillity-student .metric-icon{background:#eef2ff;color:#4865e8}
.skillity-student .section-heading h2{color:#273a6d;font-weight:800}
.skillity-student .sidebar-bottom{margin-top:auto}
.skillity-student .course-cover{background:linear-gradient(135deg,#587af4,#8e73f2)}
.skillity-student .course-card{transition:transform .2s,box-shadow .2s}
.skillity-student .course-card:hover{transform:translateY(-3px);box-shadow:0 18px 33px #29418117}
/* Guest and school acquisition pages */
.marketing{--site-navy:#1f2a4a;--site-text:#273658;--site-blue:#4865e8;--site-violet:#8b5cf6;--site-mint:#17b6b0;--site-soft:#f5f7fc;--site-border:#e1e8f6;--site-muted:#697995;background:#fff;font-family:Inter,'Segoe UI',system-ui,sans-serif}
.marketing .site-header{border-bottom:1px solid #e8edf7;background:#ffffffeb;height:82px}
.marketing .site-button-primary{background:#4865e8;color:#fff;border-color:#4865e8;box-shadow:0 13px 24px #4865e829}
.marketing .site-button-primary:hover{background:#3854d0;color:white}
.marketing .site-button-ghost{background:#f4f6fd;border:1px solid #e1e8f5;color:#334677}
.marketing .site-pill{background:#eaf1ff;color:#4865e8;border:1px solid #dbe7ff}
.marketing .site-hero-home{background:radial-gradient(circle at 84% 36%,#e2f5ff 0,#f2f4ff 36%,#fff 83%);overflow:hidden}
.marketing .site-hero h1{color:#1f2a4a;letter-spacing:-.055em;font-weight:850}
.marketing .site-hero h1 em,.marketing .site-section h2 em{color:#4865e8}
.marketing .site-hero-trust span{color:#2d6880}
.marketing .site-hero-stage{position:relative;min-height:465px;display:flex;align-items:flex-end;justify-content:center}
.marketing .skillity-team-art{display:block;width:min(100%,645px);height:auto;max-height:390px;position:absolute;right:0;top:0;z-index:2;filter:drop-shadow(0 20px 24px #405fc321)}
.marketing .site-hero-home .site-hero-card{position:relative;z-index:3;width:min(440px,90%);margin-left:-15%;margin-top:270px;transform:rotate(-2deg);box-shadow:0 24px 54px #1f2a4a24}
.marketing .site-float-chip{z-index:4}
.marketing .site-hero-glow{background:radial-gradient(circle,#ccddff,#e9efff00 69%)}
.marketing .site-values-strip{background:#293a7c;color:#fff}
.marketing .site-values-strip span{color:#fff}
.marketing .site-section{scroll-margin-top:100px}
.marketing .site-panel,.marketing .site-form-card,.marketing .site-contact-card{border-radius:24px;box-shadow:0 13px 35px rgba(28,58,112,.055)}
.marketing .site-trial-visual{position:relative}
.marketing .skillity-trial-team{width:min(100%,520px);height:auto;object-fit:contain;position:relative;z-index:2}
.marketing .site-trial-emoji{display:none}
.marketing .site-hero-inner{background:linear-gradient(140deg,#f1f5ff 0%,#f8fcff 75%)}
.marketing .site-form input:focus,.marketing .site-form textarea:focus{border-color:#4865e8;box-shadow:0 0 0 3px #4865e820}
/* Auth */
.auth-body{--auth-blue:#4865e8;--auth-navy:#1f2a4a}
.auth-story{background:linear-gradient(140deg,#3d59ce,#6982fc)}
.auth-story .auth-mentor-art.skillity-auth-team{width:min(640px,100%);max-height:380px;object-fit:contain;filter:drop-shadow(0 16px 22px #24377f3d)}
/* Dark theme is opt-in and currently implemented for app workspace */
html[data-skillity-theme="dark"]{color-scheme:dark}
html[data-skillity-theme="dark"] body.skillity-student,html[data-skillity-theme="dark"] body.skillity-staff{--paper:#121b33;--ink:#f4f7ff;--muted:#a9b7d0;--line:#324261;--white:#243251;--shadow:0 12px 32px #0002;--blue:#7790ff;--green:#36d6c5;--lime:#2b3b5a;background:#121b33;color:#f4f7ff}
html[data-skillity-theme="dark"] :is(.sidebar,.topbar,.card,.student-progress-mini,.student-resume-card,.skillity-session-readiness){background:#243251;border-color:#334665;color:#f4f7ff}
html[data-skillity-theme="dark"] .sidebar{background:#182440}
html[data-skillity-theme="dark"] .sidebar .brand,html[data-skillity-theme="dark"] :is(h1,h2,h3,.strong){color:#f7f9ff}
html[data-skillity-theme="dark"] .skillity-student .welcome-copy h1{color:#fff}
html[data-skillity-theme="dark"] :is(.muted,small,.skillity-student .section-heading h2){color:#c1cee8}
html[data-skillity-theme="dark"] .skillity-theme-toggle,html[data-skillity-theme="dark"] button.secondary,html[data-skillity-theme="dark"] .button.secondary{background:#344569;color:#eaf0ff;border-color:#4b6288}
html[data-skillity-theme="dark"] .sidebar nav a{color:#c1cee8}
html[data-skillity-theme="dark"] .sidebar nav a.active,html[data-skillity-theme="dark"] .sidebar nav a:hover{background:#34466d;color:#fff}
html[data-skillity-theme="dark"] input,html[data-skillity-theme="dark"] textarea,html[data-skillity-theme="dark"] select{background:#1d2b47;border-color:#455778;color:#f4f7ff}
html[data-skillity-theme="dark"] .welcome{background:linear-gradient(135deg,#364ba1,#243a80)}
html[data-skillity-theme="dark"] .skillity-student .reward-card{background:#343550}
html[data-skillity-theme="dark"] .sidebar-note{background:#34436b}
html[data-skillity-theme="dark"] .topbar{background:#192640}
html[data-skillity-theme="dark"] .skillity-rich-text{color:#edf3ff}
html[data-skillity-theme="dark"] .skillity-table-scroll,html[data-skillity-theme="dark"] .skillity-rich-text table{background:#202e4c;color:#edf3ff}
html[data-skillity-theme="dark"] .skillity-rich-text th,html[data-skillity-theme="dark"] .skillity-rich-text td{border-color:#45597a;color:#e9f1ff}
html[data-skillity-theme="dark"] .skillity-rich-text thead th{background:#2a3c61}
@media(max-width:1120px){.skillity-student .welcome-copy{max-width:69%}.skillity-student .welcome-visual{width:43%}.marketing .skillity-team-art{width:100%}}
@media(max-width:760px){.skillity-student .welcome{min-height:300px}.skillity-student .welcome-copy{max-width:100%;padding-bottom:130px}.skillity-student .welcome-visual{height:180px;width:68%;right:0;bottom:-16px}.skillity-student .welcome-visual img{max-height:195px}.marketing .site-hero-stage{min-height:385px}.marketing .skillity-team-art{max-height:255px;top:0;right:auto}.marketing .site-hero-home .site-hero-card{margin:170px auto 0;transform:none}.skillity-theme-toggle span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skillity-student .course-card,.marketing .site-button{transition:none}}

/* Public card state is backed by an actually running, non-demo cohort. */
.marketing .site-course-badges .site-badge-live{
  background:#e7f9f5;color:#157e76;border:1px solid #c3efe6;
  display:inline-flex;align-items:center;gap:5px;font-weight:800
}
.marketing .site-course-badges .site-badge-live::first-letter{color:#16b8a7}
html[data-skillity-theme="dark"] .marketing .site-course-badges .site-badge-live{
  background:#163f42;color:#93f3dc;border-color:#257274
}