/* Commercient Partner Academy — styles
   Brand: Teal #29ABE2, Charcoal #3D3D3D, Navy #1B3A5C, Cloud #E8EEF4 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root{
  --teal:#29ABE2; --charcoal:#3D3D3D; --white:#fff;
  --steel:#4A7FA5; --medblue:#7BA7C8; --pale:#B8D4E4;
  --cloud:#E8EEF4; --navy:#1B3A5C;
  --line:#dbe4ec; --muted:#6a7886;
  --shadow:0 1px 3px rgba(27,58,92,.08),0 4px 16px rgba(27,58,92,.06);
  /* spacing tokens */
  --gutter:32px;   /* main content padding (sidebar ↔ content) */
  --pad-x:44px;    /* shared horizontal inset: hero text, headings, cards all align on this line */
  --sec-gap:34px;  /* vertical rhythm between major sections */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Open Sans',-apple-system,Segoe UI,sans-serif;color:var(--charcoal);background:var(--cloud);font-size:16px;line-height:1.6}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Raleway',sans-serif;color:var(--charcoal);line-height:1.25}

/* ---------- Top nav ---------- */
.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;height:64px;padding:0 28px;background:#fff;border-bottom:1px solid var(--line)}
.topnav .brand{display:flex;align-items:center;gap:14px}
.topnav .brand img{height:34px;display:block}
.topnav .brand .div{width:1px;height:26px;background:var(--line)}
.topnav .brand .acad{font-family:'Raleway';font-weight:700;letter-spacing:.13em;font-size:12.5px;color:var(--charcoal);text-transform:uppercase}
.topnav nav{margin-left:auto;display:flex;gap:30px;align-items:center}
.topnav nav a,.topnav .navlink{font-family:'Raleway';font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--charcoal);white-space:nowrap}
.topnav nav a:hover,.topnav .navlink:hover{color:var(--teal);text-decoration:none}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Raleway'}
#navAuth{display:flex;align-items:center;gap:14px}
.nav-auth-link{font-family:'Raleway';font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--charcoal);cursor:pointer}
.nav-auth-link:hover{color:var(--teal);text-decoration:none}
.cert-verify a{color:var(--teal);word-break:break-all;text-decoration:none}
.cert-verify a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.shell{display:flex;align-items:flex-start;max-width:1920px;margin:0 auto}
.sidebar{position:sticky;top:64px;align-self:flex-start;width:300px;min-width:300px;height:calc(100vh - 64px);overflow-y:auto;background:#fff;border-right:1px solid var(--line);padding:28px 22px}
.main{flex:1;min-width:0;padding:28px var(--gutter) 64px}
.page{max-width:1080px;margin:0 auto}

/* ---------- Sidebar ---------- */
.sb-title{font-family:'Raleway';font-weight:800;font-size:19px;line-height:1.2;margin:0 0 16px}
.sb-overview{display:inline-flex;align-items:center;gap:8px;font-family:'Raleway';font-weight:600;font-size:13px;color:var(--teal);cursor:pointer;text-transform:none;letter-spacing:0}
.sb-overview:hover{text-decoration:underline}
.sb-progress{margin:16px 0 6px}
.sb-bar{height:5px;border-radius:4px;background:var(--cloud);overflow:hidden}
.sb-bar > i{display:block;height:100%;background:var(--teal);width:0;transition:width .4s ease}
.sb-count{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:8px}
.sb-group{margin-top:22px}
.sb-group > h4{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);font-weight:700;margin:0 0 8px}
.sb-item{display:flex;align-items:flex-start;gap:11px;padding:8px 10px;margin:1px -10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--charcoal)}
.sb-item:hover{background:var(--cloud)}
.sb-item.active{background:#e7f4fb;color:#13628a;font-weight:600}
.sb-item .dot{flex:none;width:17px;height:17px;border-radius:50%;border:2px solid var(--medblue);margin-top:2px;position:relative;background:#fff}
.sb-item.done .dot{background:var(--teal);border-color:var(--teal)}
.sb-item.done .dot::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- Icons (inline SVG, inherit currentColor) ---------- */
.ic{width:22px;height:22px;flex:none;vertical-align:middle}
.ic-xs{width:15px;height:15px;margin-right:2px;position:relative;top:-1px}
.ic-btn{width:16px;height:16px;margin-left:6px;position:relative;top:-1px}
.ic-inline{width:14px;height:14px;color:var(--teal);position:relative;top:-1px}
.ic-money{width:24px;height:24px;color:#2e9e63;margin-top:1px}

/* ---------- Hero ---------- */
.hero{border-radius:16px;padding:38px var(--pad-x);color:#fff;position:relative;overflow:hidden;background:linear-gradient(120deg,#1B3A5C 0%,#23507b 55%,#2f6ea0 100%)}
.hero .circle{position:absolute;right:-40px;top:-50px;width:300px;height:300px;border-radius:50%;background:rgba(123,167,200,.22)}
.hero .circle.c2{right:120px;top:auto;bottom:-190px;width:260px;height:260px;background:rgba(41,171,226,.14)}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.hero-actions .est{margin-top:0}
.hero-actions .cta.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero-actions .cta.ghost:hover{background:rgba(255,255,255,.12)}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#cfe2f0}
.hero-trust .ic-xs{width:16px;height:16px;color:#7fd4ff}
/* centered content group inside the hero card — keeps text left-aligned but
   pulls the whole block toward the visual center with a comfortable measure */
.hero .hero-inner{position:relative;z-index:1;max-width:760px;margin-inline:auto}
.hero .eyebrow{font-family:'Raleway';font-weight:700;letter-spacing:.18em;font-size:12px;text-transform:uppercase;color:#bcd6ea;margin:0 0 14px}
.hero h1{color:#fff;font-weight:800;font-size:42px;margin:0 0 12px;letter-spacing:.01em}
.hero p{max-width:none;color:#dceaf4;font-size:16px;margin:0}
.hero.sm{padding:26px var(--pad-x)}
.hero.sm h1{font-size:30px;margin-bottom:8px}
.hero .est{display:inline-block;margin-top:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:5px 14px;border-radius:30px;font-size:12.5px;font-weight:600;color:#fff}

/* ---------- Cards / sections ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.course-card{display:flex;gap:22px;align-items:flex-start;padding:28px 30px;margin-top:24px}
.course-card .mark{width:54px;height:54px;flex:none}
.course-card h3{margin:2px 0 8px;font-size:19px;font-weight:700}
.course-card p{margin:0;color:#52606d}
.cta{display:inline-block;margin-top:16px;background:var(--teal);color:#fff;font-family:'Raleway';font-weight:700;letter-spacing:.04em;padding:12px 26px;border-radius:9px;border:none;cursor:pointer;font-size:14px}
.cta:hover{background:#1f93c6;text-decoration:none}
.cta.ghost{background:transparent;color:var(--teal);border:2px solid var(--teal);padding:10px 24px}
.cta.ghost:hover{background:#eaf6fc}

section.block{margin-top:var(--sec-gap);padding:0 var(--pad-x)}
section.block > h2{font-size:24px;font-weight:700;margin:0 0 6px}
section.block > .lead{color:#52606d;margin:0 0 16px}

.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rm-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow)}
.rm-card .step{font-family:'Raleway';font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.rm-card h4{margin:8px 0 6px;font-size:16px}
.rm-card p{margin:0;color:#5a6772;font-size:14px}

.learn-list{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}
.learn-list .li{display:flex;gap:12px;padding:13px 12px;border-bottom:1px solid var(--cloud)}
.learn-list .li:last-child{border-bottom:none}
.learn-list .li .ck{flex:none;width:22px;height:22px;border-radius:50%;background:#e7f4fb;color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}

.note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--steel);border-radius:10px;padding:18px 22px;margin-top:18px;color:#42505c}
.note h4{margin:0 0 6px;font-size:15px;color:var(--navy)}

/* ---------- Module reader ---------- */
.reader{max-width:1080px;margin:0 auto}
.reader .meta{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.chip{background:#e7f4fb;color:#13628a;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:20px;font-family:'Raleway'}
.obj{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 24px;margin:22px 0;box-shadow:var(--shadow)}
.obj h4{margin:0 0 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.obj ul{margin:0;padding-left:20px}
.reader-body{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 34px;box-shadow:var(--shadow)}
.reader-body h3{font-size:18px;margin:26px 0 10px;color:var(--navy)}
.reader-body h3:first-child{margin-top:0}
.reader-body p{margin:0 0 14px}
.reader-body ul{margin:0 0 16px;padding-left:22px}
.reader-body li{margin:5px 0}
.reader-body .flow{background:var(--cloud);border-radius:8px;padding:12px 16px;font-weight:600;color:var(--navy);text-align:center;letter-spacing:.02em}
.reader-body h4.step-h{font-family:'Raleway';font-size:15px;color:#13628a;background:#eef6fb;border-left:4px solid var(--teal);border-radius:0 8px 8px 0;padding:9px 14px;margin:22px 0 10px}
.callout{background:#f3f9fd;border:1px solid #d4e8f5;border-left:4px solid var(--teal);border-radius:10px;padding:16px 20px;margin:18px 0}
.callout h4{margin:0 0 6px;font-size:14px;color:var(--navy);text-transform:none;letter-spacing:0}
.callout p{margin:0;color:#42505c}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 4px}
.col-card{border-radius:12px;padding:16px 20px}
.col-card.is{background:#eef8f1;border:1px solid #cfe9d8}
.col-card.isnt{background:#fdf0ef;border:1px solid #f3d5d2}
.col-card h4{margin:0 0 8px;font-size:14px}
.col-card.is h4{color:#1f7a45}.col-card.isnt h4{color:#b23b32}
.col-card ul{padding-left:18px;font-size:14px}
.data-table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:14px}
.data-table th{background:var(--navy);color:#fff;text-align:left;padding:10px 12px;font-family:'Raleway';font-weight:600}
.data-table td{border:1px solid var(--line);padding:9px 12px;vertical-align:top}
.data-table tr:nth-child(even) td{background:#f7fafc}
.takeaways{background:#eef6fb;border:1px solid #d4e8f5;border-radius:12px;padding:20px 24px;margin-top:22px}
.takeaways h4{margin:0 0 10px;color:var(--navy);font-size:15px}
.takeaways ul{margin:0;padding-left:20px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.pager .spacer{flex:1}

/* ---------- Quiz ---------- */
.quiz-intro{max-width:860px}
.q-block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:16px 0;box-shadow:var(--shadow)}
.q-block .qn{font-weight:700;font-family:'Raleway';color:var(--navy);margin:0 0 14px;font-size:16px}
.q-block .qn span{color:var(--teal);margin-right:8px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 15px;border:1.5px solid var(--line);border-radius:9px;margin:8px 0;cursor:pointer;transition:.15s}
.opt:hover{border-color:var(--medblue);background:#f7fbfe}
.opt input{margin-top:3px}
.opt.correct{border-color:#3fae6a;background:#eef8f1}
.opt.wrong{border-color:#d9534f;background:#fdf0ef}
.qsec-head{font-family:'Raleway';font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.1em;font-size:13px;margin:34px 0 4px;border-bottom:2px solid var(--line);padding-bottom:8px}
.scorebar{position:sticky;bottom:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 22px;margin-top:24px;display:flex;align-items:center;gap:18px;box-shadow:0 -2px 14px rgba(27,58,92,.08)}
.scorebar .count{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.scorebar .res{font-weight:700;font-family:'Raleway';font-size:16px}
.scorebar .res.pass{color:#1f7a45}.scorebar .res.fail{color:#b23b32}

/* ---------- Certificate ---------- */
.cert-wrap{max-width:900px;margin:0 auto}
.certificate{background:#fff;border:3px solid var(--teal);border-radius:14px;padding:46px 56px;text-align:center;position:relative;box-shadow:var(--shadow)}
.certificate::before{content:"";position:absolute;inset:10px;border:1px solid var(--pale);border-radius:8px;pointer-events:none}
.certificate img{height:46px;margin-bottom:18px}
.certificate .cert-seal{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:22px auto 4px;box-shadow:var(--shadow);background:#1B3A5C}
.certificate .ttl{font-family:'Raleway';font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.certificate h2{font-size:30px;margin:10px 0 6px;color:var(--navy)}
.certificate .name{font-family:'Raleway';font-weight:800;font-size:26px;color:var(--teal);margin:18px 0;border-bottom:2px solid var(--cloud);display:inline-block;padding:0 30px 8px}
.certificate .body{color:#52606d;max-width:560px;margin:0 auto}
.certificate .row{display:flex;justify-content:space-between;margin-top:40px;font-size:13px;color:var(--muted)}
.cert-input{padding:11px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit;min-width:280px}
/* registration form */
.regform{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;box-shadow:var(--shadow);max-width:640px}
.field-row{display:flex;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;flex:1}
.field span{font-family:'Raleway';font-weight:600;font-size:13px;color:var(--navy)}
.field input{padding:11px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit;width:100%}
.field input:focus{outline:none;border-color:var(--teal)}
.form-err{color:#b23b32;font-size:14px;margin:0 0 14px;font-weight:600}
.form-ok{color:#2e7d32;font-size:14px;margin:0 0 14px;font-weight:600}
/* certificate meta + banner */
.cert-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;max-width:620px;margin:30px auto 0;text-align:left}
.cert-meta > div{font-size:14px;color:var(--charcoal);border-bottom:1px solid var(--cloud);padding-bottom:8px}
.cert-meta span{display:block;font-family:'Raleway';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:2px}
.email-banner{background:#eef8f1;border:1px solid #cfe9d8;border-left:4px solid #3fae6a;border-radius:10px;padding:14px 18px;margin-bottom:18px;color:#1f5e3a;font-size:14px}
.hide{display:none!important}

/* ---------- Sidebar: academy/catalog mode ---------- */
.sb-tag{font-size:12px;color:var(--muted);margin:-8px 0 6px}
.sb-crumb{font-family:'Raleway';font-weight:600;font-size:12px;color:var(--teal);cursor:pointer;margin-bottom:14px;display:inline-block}
.sb-crumb:hover{text-decoration:underline}
.sb-item .soon-tag{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9aa7b3;background:var(--cloud);padding:1px 6px;border-radius:10px;margin-left:6px;vertical-align:middle}
.sb-item .pct{font-style:normal;font-size:11px;font-weight:700;color:var(--teal);margin-left:6px}

/* ---------- Home hero ---------- */
.home-hero h1{font-size:40px;margin-bottom:14px}
.home-hero p{max-width:none}
.hero-cta{margin-top:20px;background:#fff;color:var(--navy)}
.hero-cta:hover{background:#eaf6fc}

/* ---------- Who is this for ---------- */
.aud-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.aud-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.aud-card .aud-ic{width:42px;height:42px;border-radius:10px;background:#e7f4fb;color:#13628a;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.aud-card h4{margin:0 0 6px;font-size:15px}
.aud-card p{margin:0;font-size:13px;color:#5a6772}

/* ---------- Money band + money callout ---------- */
section.block.money-band{display:flex;gap:22px;align-items:flex-start;background:linear-gradient(118deg,#0d3f2d 0%,#14603f 62%,#1b7a4e 100%);border-radius:14px;padding:28px var(--pad-x);color:#fff;box-shadow:var(--shadow)}
.money-band h2{color:#fff;margin:0 0 8px}
.money-band p{margin:0;color:#dcf3e6;max-width:80ch}
.money-band .money-ic{flex:none;width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;margin-top:4px}
.money-band .money-ic .ic{width:26px;height:26px;color:#9fe8c3}
.callout.money{display:flex;gap:12px;align-items:flex-start;background:#f0faf4;border-color:#cdeada;border-left-color:#2e9e63}
.callout.money strong{color:#176c41;font-weight:600;display:block}

/* ---------- Resume strip (home, returning learner) ---------- */
.resume-strip{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;padding:18px 24px;box-shadow:var(--shadow)}
.resume-ring{--p:0;flex:none;width:62px;height:62px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p)*1%), var(--cloud) 0);display:flex;align-items:center;justify-content:center}
.resume-ring b{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:'Raleway';font-size:13px;color:var(--navy)}
.resume-main{flex:1;min-width:0}
.resume-main .eyebrow{font-family:'Raleway';font-weight:700;letter-spacing:.14em;font-size:11px;text-transform:uppercase;color:var(--steel);margin:0 0 4px}
.resume-main h3{margin:0;font-size:18px}
.resume-strip .cta{margin-top:0;flex:none}

/* ---------- Earn panel (course overview badge showcase) ---------- */
.earn-panel{display:flex;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 28px;box-shadow:var(--shadow)}
.earn-badge{flex:none}
.earn-badge.locked .badge-img{filter:grayscale(.7);opacity:.9}
.earn-copy .eyebrow{font-family:'Raleway';font-weight:700;letter-spacing:.16em;font-size:11px;text-transform:uppercase;color:var(--steel);margin:0 0 6px}
.earn-copy h3{margin:0 0 8px;font-size:20px;color:var(--navy)}
.earn-copy p{margin:0;color:#52606d;max-width:62ch}
.earn-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.earn-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--steel)}
.earn-meta .ic-xs{width:16px;height:16px;color:var(--teal)}

/* ---------- Module reader: course progress in hero ---------- */
.hero-course-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:16px;max-width:420px}
.hero-course-bar i{display:block;height:100%;background:#7fd4ff}

/* ---------- Confetti (quiz pass — journey only, never the certificate) ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:confetti-fall linear forwards}
@keyframes confetti-fall{
  0%{transform:translateY(-10px) rotate(0deg)}
  100%{transform:translateY(105vh) rotate(660deg);opacity:.7}
}

/* ---------- Course catalog ---------- */
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.course-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px;box-shadow:var(--shadow)}
.course-tile.soon{opacity:.92;background:#fbfcfd}
.tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tile-mark{width:42px;height:42px}
.tile-mark.is-badge{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 3px 10px rgba(27,58,92,.22)}
.tile-tag{font-family:'Raleway';font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9aa7b3;background:var(--cloud);padding:4px 10px;border-radius:20px}
.tile-badge{font-family:'Raleway';font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#1f7a45;background:#eef8f1;border:1px solid #cfe9d8;padding:4px 10px;border-radius:20px}
.course-tile h3{margin:0 0 6px;font-size:18px}
.tile-aud{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--steel)}
.tile-desc{margin:0 0 14px;font-size:14px;color:#52606d;flex:0 0 auto}
.tile-money{margin:0 0 14px}
.tile-money strong{font-size:13px}
.tile-bar{height:5px;border-radius:4px;background:var(--cloud);overflow:hidden;margin-bottom:14px}
.tile-bar > i{display:block;height:100%;background:var(--teal)}
.tile-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.tile-time{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.tile-foot .cta{margin-top:0}
.tile-soon{font-family:'Raleway';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9aa7b3}

/* ---------- Badges ---------- */
.badge{display:inline-flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:140px}
.badge .badge-disc{position:relative;width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#3fc0f0,#1b6fa0);box-shadow:0 6px 16px rgba(27,58,92,.25)}
.badge.locked .badge-disc{background:radial-gradient(circle at 35% 30%,#c4d2dd,#8ea2b2)}
.badge .badge-ring{position:absolute;inset:6px;border:2px dashed rgba(255,255,255,.7);border-radius:50%}
.badge .badge-ic{color:#fff;display:flex}
.badge .badge-ic .ic{width:34px;height:34px}
.badge .badge-name{font-family:'Raleway';font-weight:800;font-size:14px;color:var(--navy)}
.badge .badge-sub{font-size:11px;color:var(--muted);letter-spacing:.04em}
.badge.lg{width:170px}
.badge.lg .badge-disc{width:108px;height:108px}
.badge.lg .badge-ic .ic{width:46px;height:46px}
.badge.lg .badge-name{font-size:16px}
.badge.sm{width:120px}
.badge.sm .badge-disc{width:66px;height:66px}
.badge.sm .badge-ic .ic{width:28px;height:28px}
.badge-strip{display:flex;flex-wrap:wrap;gap:24px}
/* image badge — uploaded PNG, circular-masked so square backgrounds crop cleanly */
.badge.img{width:auto}
.badge.img .badge-img{display:block;width:160px;height:160px;border-radius:50%;object-fit:cover;background:#1B3A5C;box-shadow:0 6px 18px rgba(27,58,92,.3)}
.badge.img.lg .badge-img{width:188px;height:188px}
.badge.img.sm .badge-img{width:118px;height:118px}
.badge.img .badge-fallback{display:none}
.badge.img.noimg .badge-fallback{display:inline-flex;flex-direction:column;align-items:center;gap:6px;width:140px}
/* clickable badge (My Achievements + home badge strip) */
.badge-link{display:inline-block;cursor:pointer;border-radius:12px;padding:8px;transition:.15s}
.badge-link:hover{transform:translateY(-3px);background:#fff;box-shadow:var(--shadow)}
/* My Achievements — in-progress rows */
.ach-row{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);margin-bottom:12px}
.ach-ico{width:42px;height:42px;flex:none}
.ach-row-main{flex:1;min-width:0}
.ach-row-main h4{margin:0 0 8px;font-size:16px}
.ach-bar{height:6px;border-radius:4px;background:var(--cloud);overflow:hidden;max-width:420px}
.ach-bar > i{display:block;height:100%;background:var(--teal)}
.ach-meta{display:inline-block;margin-top:7px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ach-row .cta{margin-top:0;flex:none}
.lead.empty{color:var(--muted)}

/* ---------- Achievement / share ---------- */
.achieve{display:flex;gap:28px;align-items:center;background:linear-gradient(120deg,#1B3A5C,#2f6ea0);border-radius:16px;padding:30px 34px;color:#fff;margin-bottom:22px}
.achieve .badge .badge-name,.achieve .badge .badge-sub{color:#fff}
.achieve-copy{flex:1}
.achieve-copy .eyebrow{font-family:'Raleway';font-weight:700;letter-spacing:.18em;font-size:11px;text-transform:uppercase;color:#bcd6ea;margin:0 0 8px}
.achieve-copy h2{color:#fff;margin:0 0 8px;font-size:26px}
.achieve-copy p{margin:0;color:#dceaf4;max-width:62ch}
.share-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.share-li{background:#0a66c2}
.share-li:hover{background:#08528f}
.achieve .cta.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.achieve .cta.ghost:hover{background:rgba(255,255,255,.12)}
.copy-note{display:inline-block;margin-top:10px;font-size:13px;color:#c7f0d6}
.cred-no{margin:0 0 10px!important;font-family:'Raleway';font-weight:700;font-size:14px;color:#7fd4ff;letter-spacing:.03em}
/* next-course pull on the cert page */
.next-course{margin-top:0;margin-bottom:18px}
.next-course .cta{margin-top:10px}
.li-help{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.li-help p{margin:0 0 8px;font-size:13.5px;color:#dceaf4;max-width:62ch}
.li-help .li-step{margin-top:12px;color:#fff}
.skill-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.skill-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;font-family:'Open Sans',sans-serif;font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;transition:.15s}
.skill-chip:hover{background:rgba(255,255,255,.22)}
.skill-chip.copied{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- Screenshots in module bodies ---------- */
.shot{margin:22px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:10px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--cloud)}
.shot .ph{display:none}
.shot.missing img{display:none}
.shot.missing .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:44px 20px;background:repeating-linear-gradient(45deg,#f7fafc,#f7fafc 12px,#eef4f9 12px,#eef4f9 24px);color:var(--steel);font-family:'Raleway';font-weight:600;font-size:13px;letter-spacing:.02em}
.shot .ph code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--navy);background:#fff;padding:3px 10px;border-radius:6px;border:1px solid var(--line)}
/* Placeholders are an authoring aid — never shown to real users on the live
   site (html.prod is set at init for any non-localhost host). */
.prod .shot.missing{display:none}

/* ---------- Mobile course nav (drawer) ---------- */
.sb-toggle{display:none;position:fixed;left:16px;bottom:16px;z-index:220;align-items:center;gap:8px;background:var(--navy);color:#fff;border:none;border-radius:30px;padding:11px 18px;font-family:'Raleway';font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 6px 20px rgba(27,58,92,.35)}
.sb-toggle .ic{width:18px;height:18px}
.sb-backdrop{display:none;position:fixed;inset:0;z-index:200;background:rgba(27,58,92,.45)}
.sb-backdrop.show{display:block}

/* ---------- Keyboard accessibility ---------- */
:focus-visible{outline:3px solid rgba(41,171,226,.55);outline-offset:2px;border-radius:6px}
.sb-item:focus-visible{background:var(--cloud)}

@media print{.topnav,.sidebar,.no-print,.sb-toggle,.sb-backdrop{display:none!important}.main{padding:0}.shell{display:block}}
@media (max-width:1180px){.aud-grid{grid-template-columns:repeat(3,1fr)}.catalog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1080px){.roadmap{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}
@media (max-width:820px){
  .roadmap{grid-template-columns:1fr}.main{padding:20px}.aud-grid{grid-template-columns:1fr 1fr}.catalog{grid-template-columns:1fr}.achieve{flex-direction:column;text-align:center}.home-hero h1{font-size:32px}
  /* drop the shared inset so content uses the full narrow width */
  section.block{padding-left:0;padding-right:0}
  section.block.money-band{padding:22px 20px}
  .hero{padding:26px 22px}
  /* topnav: keep brand + achievements + auth; external links move to the footer of life */
  .topnav{gap:14px;padding:0 14px}
  .topnav nav{gap:14px}
  .topnav nav a[target="_blank"]{display:none}
  .topnav .navlink[data-go="home"]{display:none} /* logo already goes home */
  .topnav .brand img{height:26px}
  .topnav .brand{gap:10px}
  .topnav .brand .acad{display:none}
  /* sidebar becomes a drawer, opened by the floating course-menu button */
  .sidebar{display:none}
  .sidebar.open{display:block;position:fixed;top:64px;left:0;bottom:0;z-index:210;width:min(320px,86vw);height:auto;box-shadow:0 10px 40px rgba(27,58,92,.35)}
  .sb-toggle{display:inline-flex}
  .earn-panel,.resume-strip{flex-direction:column;text-align:center;align-items:center}
  .resume-strip .cta{width:100%;text-align:center}
  section.block.money-band{flex-direction:column}
  .hero-actions .est{display:block}
}

/* ---------- Gamification: XP chip, toast, levels ---------- */
.sb-xp{display:flex;align-items:center;gap:11px;margin:14px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(120deg,#f4f9fc,#eaf4fb);cursor:pointer}
.sb-xp:hover{border-color:var(--pale)}
.sb-xp .xp-ico{color:var(--teal);display:flex}
.sb-xp .xp-ico .ic{width:26px;height:26px}
.sb-xp .xp-main{display:flex;flex-direction:column;line-height:1.3}
.sb-xp .xp-main b{font-family:'Raleway';font-size:12.5px;color:var(--navy)}
.sb-xp .xp-main em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:700;display:inline-flex;align-items:center;gap:3px}
.sb-xp .xp-main em .ic-xs{width:12px;height:12px;margin:0;color:var(--teal)}
.sb-xp .xp-next{font-size:10.5px;color:var(--muted);margin-top:1px}
.xp-toast{position:fixed;bottom:28px;right:28px;z-index:200;background:var(--navy);color:#fff;border-radius:12px;padding:12px 20px;font-family:'Raleway';box-shadow:0 8px 28px rgba(27,58,92,.35);opacity:0;transform:translateY(14px);transition:all .35s ease}
.xp-toast.show{opacity:1;transform:translateY(0)}
.xp-toast b{color:#7fd4ff;font-size:16px}
.xp-toast span{font-size:13px;margin-left:8px;color:#dceaf4}
.level-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 28px;box-shadow:var(--shadow)}
.level-now{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.level-now .lvl-ico.big{color:var(--teal)}
.level-now .lvl-ico.big .ic{width:44px;height:44px}
.level-now h3{margin:2px 0 4px;font-size:22px;font-weight:800}
.level-now .eyebrow{font-family:'Raleway';font-weight:700;letter-spacing:.16em;font-size:11px;text-transform:uppercase;color:var(--steel);margin:0}
.lvl-xp{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.ladder{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lvl{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:#f7fafc;min-width:130px;opacity:.55}
.lvl.reached{opacity:1;border-color:var(--pale);background:#eef7fd}
.lvl.current{border-color:var(--teal);box-shadow:0 0 0 3px rgba(41,171,226,.15);opacity:1}
.lvl-ico{color:var(--steel);display:flex}
.lvl-ico .ic{width:24px;height:24px}
.lvl.current .lvl-ico,.lvl.reached .lvl-ico{color:var(--teal)}
.lvl-name{font-family:'Raleway';font-weight:700;font-size:13px;color:var(--navy);text-align:center}
.lvl-req{font-size:11px;color:var(--muted)}
.lvl-link{flex:none;width:18px;height:2px;background:var(--pale)}
.lvl-next{margin:14px 0 0;font-size:14px;color:#42505c}
/* Charlie's gear chips on the level panel (hidden until gear art exists) */
.gear-row{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--cloud)}
.gear-ready .gear-row{display:flex}
.gear-label{font-family:'Raleway';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-right:4px}
.gear-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);background:#f7fafc;border:1px solid var(--line);border-radius:20px;padding:4px 12px}
.gear-chip.on{color:#1f7a45;background:#eef8f1;border-color:#cfe9d8}

/* ---------- Charlie, the journey guide ---------- */
.charlie{display:flex;align-items:flex-start;gap:14px;margin:6px 0}
.charlie-avatar{position:relative;flex:none;display:inline-block}
.charlie-img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;border:2.5px solid var(--pale);background:#dceaf4;display:block}
.charlie.noimg .charlie-avatar{display:none}
/* Charlie's gear — cosmetic overlays unlocked by certifications (assets/charlie/).
   Hidden until the first gear asset exists (html.gear-ready set at init). */
.charlie-gear{display:none;position:absolute;pointer-events:none}
.gear-ready .charlie-gear{display:block}
.charlie-gear.hat{top:-16px;left:4px;width:46px}
.charlie-gear.shades{top:16px;left:11px;width:44px}
.charlie-gear.pet{right:-20px;bottom:-8px;width:36px}
.charlie-bubble{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;border-top-left-radius:4px;padding:14px 18px;color:#42505c;font-size:15px;line-height:1.55;box-shadow:var(--shadow);max-width:640px}
.charlie-bubble b{color:var(--navy)}

/* ---------- Knowledge checks ---------- */
.kcheck{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:20px 24px;margin-top:26px;box-shadow:var(--shadow)}
.kcheck.kc-done{border-left-color:#4caf7d}
.kc-q{font-family:'Raleway';font-weight:700;font-size:16px;color:var(--charcoal);margin:14px 0 12px}
.kc-opts{display:flex;flex-direction:column;gap:8px}
.kc-opt{text-align:left;font:inherit;font-size:14.5px;padding:11px 16px;border:1.5px solid var(--line);border-radius:10px;background:#f7fafc;cursor:pointer;color:var(--charcoal);transition:border-color .15s, background .15s}
.kc-opt:hover:not(:disabled){border-color:var(--teal);background:#eef7fd}
.kc-opt:disabled{cursor:default}
.kc-opt.correct{border-color:#4caf7d;background:#e5f5e7;font-weight:600}
.kc-opt.wrong{border-color:#d9857e;background:#fbe9e7;opacity:.75}
.kc-feedback{margin:12px 0 0;font-weight:600;font-size:14px}
.kc-feedback.ok{color:#2e7d32}
.kc-feedback.err{color:#b23b32}

/* ---------- video slot + at-a-glance strip (Implementation course) ---------- */
.vid{margin:6px 0 22px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.vid-frame{position:relative;aspect-ratio:16/9;max-width:100%;background:#071a31}
.vid-frame iframe,.vid-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#071a31}
.vid-ph{aspect-ratio:16/9;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;background:#1c3b60;color:#dce7f1}
.vid-ph strong{font-size:18px;color:#fff}
.vid-ph span{font-size:13px;opacity:.85}
.vid-ph a{color:#fff;font-weight:600}
.vid figcaption{padding:10px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--cloud)}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 20px}
.glance div{background:#f3f9fd;border:1px solid #d4e8f5;border-radius:10px;padding:10px 14px;font-size:14px;color:var(--navy);min-width:0}
.glance span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.vid-file{display:flex;justify-content:center;background:#071a31}
.vid-file video{display:block;width:100%;aspect-ratio:16/9;max-height:72vh;object-fit:contain;background:#071a31}