/* ===========================================================
   OEEGURU — stylesheet
   Design system variables live in :root, edit them to re-theme.
   =========================================================== */

:root{
  /* Colour system */
  --navy-900:#0a1220;
  --navy-800:#0f1a2b;
  --navy-700:#152238;
  --ink:#0b1220;
  --slate-600:#4a5a70;
  --slate-400:#8296ae;
  --line:#e3e9f0;
  --surface:#ffffff;
  --surface-alt:#f4f7fb;
  --accent:#38bdf8;          /* single strong accent */
  --accent-deep:#0b7fb8;

  /* Typography */
  --font-sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Spacing / shape */
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06),0 4px 14px rgba(11,18,32,.05);
  --shadow-md:0 10px 30px rgba(11,18,32,.10);
  --maxw:1180px;
  --nav-h:70px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 10px);scrollbar-gutter:stable}
body{
  margin:0;font-family:var(--font-sans);color:var(--ink);
  background:var(--surface);line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:750}
h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.accent{color:var(--accent)}
.eyebrow{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-deep);margin:0 0 .8rem
}
.note{font-size:.82rem;color:var(--slate-400);margin:.8rem 0 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;font-weight:650;font-size:.95rem;
  border:1px solid var(--line);cursor:pointer;transition:.22s ease;
  background:var(--surface);color:var(--ink);
}
.btn:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.15rem;font-size:.88rem}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#04121d;border-color:transparent}
.btn-primary:hover{color:#04121d;border-color:transparent;transform:translateY(-2px);box-shadow:0 12px 24px rgba(56,189,248,.3)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateY(-2px)}
.btn-ghost-dark{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost-dark:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  background:rgba(10,18,32,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);color:#fff;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;color:#fff}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.55rem;box-shadow:0 2px 6px rgba(11,127,184,.35)}
.brand-text{font-weight:800;letter-spacing:.12em;font-size:.95rem}
.brand-text em{font-style:normal;font-weight:500;font-size:.75rem;letter-spacing:.1em;color:var(--slate-400)}
.primary-nav{display:flex;align-items:center;gap:1.35rem}
.primary-nav a{font-size:.86rem;font-weight:550;color:#cbd8e6;padding:.35rem 0;position:relative;transition:color .2s}
.primary-nav a:hover,.primary-nav a.active{color:#fff}
.primary-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .25s
}
.primary-nav a.active:not(.nav-cta)::after,.primary-nav a:hover:not(.nav-cta)::after{width:100%}
.nav-cta{border:1px solid var(--accent);color:#fff !important;border-radius:999px;padding:.45rem 1.05rem !important}
.nav-cta:hover{background:var(--accent);color:#04121d !important}

/* "Log in" / "My Learning" header link — two separate elements, toggled
   purely by CSS off a class set on <html> as early as possible (see
   supabase-client.js, which sets it synchronously from localStorage
   before the page body even parses, and script.js's initAuthNavLink()
   which confirms/corrects it once the real session check resolves).
   Doing this swap in CSS rather than by rewriting a single link's text
   from JS after the page has already painted is what actually removes
   the flash of "Log in" a logged-in learner used to see on every page
   load — by the time anything is on screen, the right one is already
   showing. */
#navMyLearningLink{display:none}
html.likely-logged-in #navLoginLink{display:none}
html.likely-logged-in #navMyLearningLink{display:revert}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:#fff;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Nav dropdown (Lessons) ---------- */
.nav-dropdown{position:relative}
.nav-dropdown-menu{
  display:none;position:absolute;top:100%;left:0;min-width:170px;margin-top:.4rem;
  background:var(--navy-900);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:.4rem;box-shadow:0 14px 30px rgba(10,18,32,.35);z-index:60
}
.nav-dropdown-menu::before{
  content:"";position:absolute;left:0;right:0;top:-.4rem;height:.4rem;
}
.nav-dropdown-menu a{display:block;white-space:nowrap;padding:.55rem .75rem !important;border-radius:6px;border-bottom:0 !important}
.nav-dropdown-menu a::after{display:none}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,.08)}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.scroll-progress{height:2px;width:0;background:var(--accent);transition:width .1s linear}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;color:#fff;padding:calc(var(--nav-h) + 60px) 0 80px;overflow:hidden}
.hero-media{
  position:absolute;inset:0;
  background:url("assets/images/hero.jpg") center/cover no-repeat;
  transform:scale(1.04);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(8,15,26,.95) 0%,rgba(10,18,32,.86) 45%,rgba(10,18,32,.45) 100%);
}
.hero-inner{position:relative;z-index:2}
.hero-inner > *{max-width:820px}
.hero .lede{font-size:clamp(1rem,1.6vw,1.16rem);color:#c6d4e3;max-width:640px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0 3rem}
.hero-stats{list-style:none;display:flex;flex-wrap:wrap;gap:2.5rem;padding:0;margin:0}
.hero-stats strong{display:block;font-size:2rem;font-weight:800;color:var(--accent);font-family:var(--font-mono)}
.hero-stats span{font-size:.8rem;color:var(--slate-400);letter-spacing:.06em}

/* ---------- Chain strip ---------- */
.chain-strip{background:var(--navy-800);color:#cbd8e6;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.chain-label{margin:0 0 .55rem;text-align:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-400)}
.chain{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0;padding:0;justify-content:center;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.chain li{position:relative;padding-right:1.2rem}
.chain li::after{content:"→";position:absolute;right:0;color:var(--accent)}
.chain li:last-child{padding-right:0}
.chain li:last-child::after{content:""}

/* ---------- Sections ---------- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-alt{background:var(--surface-alt)}
.section-head{max-width:760px;margin-bottom:3rem}
.section-lede{color:var(--slate-600);font-size:1.03rem}

/* ---------- Profile page ---------- */
.profile-wrap{width:100%;max-width:560px;margin:0 auto}
.profile-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:2rem}
.profile-avatar{
  flex:none;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#04121d;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:800;font-family:var(--font-mono);
}
.profile-head h2{margin:0}
.profile-head .note{margin:.2rem 0 0}
.profile-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:1.6rem;
}
.profile-card h3{
  margin:0;padding:1rem 1.4rem;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-600);background:var(--surface-alt);
  border-bottom:1px solid var(--line);
}
.profile-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);
}
.profile-row:last-child{border-bottom:none}
.profile-row-text{min-width:0}
.profile-row-label{font-size:.76rem;color:var(--slate-400);letter-spacing:.03em;margin:0 0 .2rem}
.profile-row-value{font-size:1rem;font-weight:650;color:var(--ink);word-break:break-word}
.profile-row-value.is-empty{color:var(--slate-400);font-weight:500;font-style:italic}
.profile-edit-panel{
  display:none;background:var(--surface-alt);border-top:1px solid var(--line);
  padding:1.3rem 1.4rem 1.5rem;
}
.profile-edit-panel.is-open{display:block}
.profile-edit-panel .builder-name{max-width:none;margin-bottom:1.1rem}

/* ---------- Business / bespoke training banner (homepage) ---------- */
.biz-section{
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.biz-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 85% 20%, rgba(56,189,248,.18) 0%, rgba(56,189,248,0) 55%);
}
.biz-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:2.4rem;align-items:center}
.biz-grid .section-head{margin-bottom:1.4rem;max-width:620px}
.biz-grid .section-head .eyebrow{color:var(--accent)}
.biz-grid .section-head h2{color:#fff}
.biz-grid .section-lede{color:#c6d4e3}
.biz-features{list-style:none;margin:0 0 0;padding:0;display:grid;gap:.85rem}
.biz-features li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:#dce6f0}
.biz-features li svg{flex:none;margin-top:.2rem;color:var(--accent)}
.biz-features li strong{display:block;color:#fff}
.biz-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:1.8rem;backdrop-filter:blur(6px);
}
.biz-card h3{color:#fff;margin:0 0 .5rem}
.biz-card p{color:#c6d4e3;font-size:.92rem}
.biz-card .btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
@media (max-width:900px){
  .biz-grid{grid-template-columns:1fr}
}

/* ---------- Cards ---------- */
.card-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.card-grid-2{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow-sm);transition:.25s ease;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:auto auto 0 0;height:3px;width:0;background:var(--accent);transition:width .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2f2}
.card:hover::before{width:100%}
.card .idx{font-family:var(--font-mono);font-size:.7rem;color:var(--accent-deep);letter-spacing:.16em}
.card h3{margin:.5rem 0 .45rem}
.card p{font-size:.9rem;color:var(--slate-600);margin:0}

/* ---------- Flow diagram ---------- */
.flow{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.6rem;align-items:stretch}
.flow-step{
  flex:1 1 140px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:.9rem .8rem;text-align:center;font-size:.84rem;font-weight:650;position:relative;box-shadow:var(--shadow-sm)
}
.flow-step::after{content:"";position:absolute;right:-.45rem;top:50%;width:.9rem;height:2px;background:var(--accent);z-index:1}
.flow-step:last-child::after{display:none}
.section-alt .flow-step{background:#fff}

/* ---------- Diagram panels ---------- */
.diagram-panel{
  margin-top:2.5rem;background:var(--navy-900);color:#e6eef7;border-radius:var(--radius);
  padding:1.8rem;box-shadow:var(--shadow-md)
}
.diagram-panel h3{color:#fff}
.cost-bars{display:flex;gap:1rem;align-items:flex-end;height:180px;margin-top:1.4rem}
.cost-bar{flex:1;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.cost-bar span{
  display:block;height:var(--h);border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,var(--accent),rgba(56,189,248,.15));transition:height .8s cubic-bezier(.2,.7,.2,1)
}
.cost-bar b{font-size:.78rem;margin-top:.6rem}
.cost-bar i{font-style:normal;font-family:var(--font-mono);font-size:.72rem;color:var(--accent)}
.tol-svg{width:100%;height:auto}
.tol-lbl{fill:#c7d6e6;font-size:9px;font-family:var(--font-mono)}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem;align-items:start}
.split .diagram-panel{margin-top:0}

/* ---------- Methodologies (accordion cards) ---------- */
.method-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.method{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.method button{
  width:100%;text-align:left;background:none;border:0;padding:1.15rem 1.3rem;cursor:pointer;
  font:inherit;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink)
}
.method button small{display:block;font-weight:500;font-size:.8rem;color:var(--slate-400);margin-top:.15rem}
.method button .chev{color:var(--accent-deep);transition:transform .25s;font-size:1.1rem}
.method[aria-expanded="true"] .chev{transform:rotate(45deg)}
.method .body{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 1.3rem}
.method[aria-expanded="true"] .body{max-height:420px;padding-bottom:1.3rem}
.method .body p{font-size:.9rem;color:var(--slate-600);margin:0 0 .6rem}
.method .body ol{margin:0;padding-left:1.1rem;font-size:.88rem;color:var(--slate-600)}

/* ---------- Toolkit ---------- */
.tool-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tool{
  background:var(--navy-800);color:#dce7f2;border-radius:var(--radius);padding:1.3rem;
  border:1px solid rgba(255,255,255,.08);transition:.28s ease;cursor:default
}
.tool h3{color:#fff;margin-bottom:.4rem}
.tool p{font-size:.86rem;color:#9db0c5;margin:0;max-height:0;opacity:0;overflow:hidden;transition:.3s ease}
.tool:hover,.tool:focus-within{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 30px rgba(10,18,32,.25)}
.tool:hover p,.tool:focus-within p{max-height:200px;opacity:1;margin-top:.4rem}
.tool .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--accent)}

/* ---------- Learning Paths & Certifications ---------- */
.path-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.path-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);transition:.25s}
.path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.path-card h3{font-size:1.15rem}
.path-card ul{list-style:none;padding:0;margin:.9rem 0 0}
.path-card li{font-size:.89rem;color:var(--slate-600);padding-left:1.2rem;position:relative;margin-bottom:.35rem}
.path-card li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--accent)}

/* ---------- Articles ---------- */
.article-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.25s}
.article:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.article p{font-size:.9rem;color:var(--slate-600);flex:1}
.article .more{align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-size:.86rem;font-weight:700;color:var(--accent-deep);cursor:pointer}
.article .more:hover{text-decoration:underline}

/* ---------- Calculators ---------- */
.calc-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.calc{background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:.75rem}
.section-alt .calc{background:#fff}
.calc label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600;color:var(--slate-600)}
.calc input{
  font:inherit;padding:.6rem .75rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)
}
.calc textarea,.calc select{
  font:inherit;padding:.6rem .75rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);resize:vertical
}
.calc textarea:focus,.calc select:focus{outline:2px solid var(--accent);outline-offset:1px}
.calc input:focus,.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.calc-out{display:none;font-family:var(--font-mono);font-size:.85rem;background:var(--navy-900);color:#dbe8f5;border-radius:10px;padding:.9rem 1rem;white-space:pre-line}
.calc-out.show{display:block}
.calc-out b{color:var(--accent)}
.calc-main{border:2px solid var(--accent);box-shadow:0 12px 30px rgba(56,189,248,.16)}
.calc-fields{display:grid;gap:.9rem 1.1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.calc-fields label{justify-content:flex-end}

/* ---------- About ---------- */
.about-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:2.5rem;align-items:start}
blockquote{margin:0 0 1.2rem;padding-left:1.1rem;border-left:3px solid var(--accent);font-size:1.1rem;color:var(--ink);font-weight:600}
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pillars li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;box-shadow:var(--shadow-sm)}
.pillars b{display:block;font-size:.95rem}
.pillars span{font-size:.82rem;color:var(--slate-400)}

/* ---------- Contact ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:start}
.disclaimer{font-size:.85rem;color:var(--slate-600);background:var(--surface-alt);border-left:3px solid var(--accent);padding:.8rem 1rem;border-radius:0 8px 8px 0}
.policy-wrap{max-width:760px}
.policy-updated{color:var(--slate-600);font-size:.9rem;margin-top:-.3rem}
.policy-wrap h3{margin-top:2.1rem}
.policy-list{margin:0 0 1rem;padding-left:1.2rem}
.policy-list li{margin-bottom:.4rem}
.contact-form{display:grid;gap:.9rem;background:var(--surface-alt);border:1px solid var(--line);padding:1.8rem;border-radius:var(--radius)}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.contact-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600;color:var(--slate-600)}
.contact-form input,.contact-form textarea{font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;background:#fff;resize:vertical}
.form-status{font-size:.85rem;margin:0;min-height:1.2em;color:var(--accent-deep);font-weight:600}
.form-status.error{color:#c0392b}

/* ---------- Footer / to-top ---------- */
.site-footer{background:var(--navy-900);color:#8ea3ba;padding:2rem 0;font-size:.85rem}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.footer-inner nav{display:flex;gap:1.2rem}
.footer-inner a:hover{color:var(--accent)}
.social-links{display:flex;gap:.6rem}
.social-links a{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#8ea3ba;transition:.2s;flex-shrink:0
}
.social-links a:hover{color:var(--accent);border-color:var(--accent);background:rgba(56,189,248,.08);transform:translateY(-2px)}
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:55;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--accent);color:#04121d;font-size:1.1rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow-md)
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* ---------- Book-style pager (lesson.html / course.html) ---------- */
.book-progress-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.book-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .3s ease}
.book-page{min-height:200px;margin:1.2rem 0}
.book-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.book-nav .btn:disabled{opacity:.45;cursor:not-allowed}
.book-nav .btn:disabled:hover{transform:none}

/* ---------- Cookie consent banner ---------- */
#cookieConsentBanner{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);color:#fff;
  box-shadow:0 -8px 24px rgba(0,0,0,.18);animation:cookieBannerIn .3s ease-out
}
#cookieConsentBanner.cookie-banner-hide{animation:cookieBannerOut .25s ease-in forwards}
.cookie-banner-inner{
  max-width:var(--maxw);margin:0 auto;padding:1rem 20px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1rem 1.5rem
}
.cookie-banner-inner p{margin:0;font-size:.85rem;color:#c6d4e3;flex:1 1 320px}
.cookie-banner-inner a{color:var(--accent);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:.6rem;flex:0 0 auto}
@keyframes cookieBannerIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cookieBannerOut{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(7,13,23,.7);backdrop-filter:blur(3px)}
.modal-panel{
  position:relative;background:#fff;border-radius:var(--radius);max-width:620px;width:100%;
  max-height:82vh;overflow:auto;padding:2rem;box-shadow:var(--shadow-md);animation:pop .25s ease
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.modal-close{position:absolute;top:.6rem;right:.9rem;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--slate-400)}
.modal-panel h4{margin:1.2rem 0 .4rem;font-size:.95rem}
.modal-panel p,.modal-panel li{font-size:.92rem;color:var(--slate-600)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .split,.about-wrap,.contact-wrap{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .primary-nav{
    position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0;overflow:hidden;transition:max-height .3s ease
  }
  .primary-nav.open{max-height:80vh;overflow:auto}
  .primary-nav a{padding:.95rem 20px;border-bottom:1px solid rgba(255,255,255,.06);font-size:.95rem}
  .nav-dropdown{width:100%}
  .nav-dropdown-menu{
    display:block !important;position:static;margin:0;background:none;border:0;box-shadow:none;padding:0
  }
  .nav-dropdown-menu a{padding:.85rem 20px .85rem 40px !important;font-size:.9rem;color:#a9bacd;border-bottom:1px solid rgba(255,255,255,.06) !important}
  .nav-cta{margin:.9rem 20px;text-align:center}
  .hero{min-height:auto}
  .hero-stats{gap:1.6rem}
  .flow-step::after{display:none}
  .contact-form .row{grid-template-columns:1fr}
  .cost-bars{height:150px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}


/* ---------- Subject chip nav ---------- */
.chip-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chip-nav a{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;padding:.5rem 1rem;
  border-radius:999px;border:1px solid var(--line);color:var(--slate-600);background:var(--surface);transition:.2s
}
.chip-nav a:hover{border-color:var(--accent);color:var(--accent-deep);background:rgba(56,189,248,.08)}
.subjects-intro{padding-bottom:0}

/* Cards used as plain links on the home "explore" grid */
.card-grid a.card{display:block}
.card-grid a.card:hover h3{color:var(--accent-deep)}

/* ---------- Learning additions ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.badge{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid rgba(56,189,248,.45);color:var(--accent);background:rgba(56,189,248,.08)}
.course-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px;font-size:.78rem;color:var(--accent-deep);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.course-meta span{background:rgba(56,189,248,.12);padding:4px 9px;border-radius:999px}
.card .level{display:inline-block;margin-top:10px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);font-weight:700}

/* ---------- Auth form fields ---------- */
.builder-name{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--slate-600);max-width:360px;margin:0 0 1.4rem}
.builder-name[hidden]{display:none}
.builder-name input{font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;color:var(--ink)}

.steps-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:32px}
.step-card{background:var(--surface);border:1px solid rgba(15,32,56,.10);border-radius:var(--radius);padding:22px}
.step-card b{display:block;font-size:1.75rem;color:var(--accent-deep);line-height:1}
.step-card h3{margin:8px 0 6px;font-size:1.02rem}
.step-card p{margin:0;font-size:.92rem;color:#54657c}
.path-card .price{margin-top:14px;font-weight:700;color:var(--accent-deep);font-size:.9rem}

/* ---------- Certificate of completion ---------- */
.certificate-sheet{
  --cert-navy:#0a162c; --cert-gold:#a67c24; --cert-gold-light:#d6b76a; --cert-paper:#fdfbf6;
  max-width:820px; margin:0 auto; padding:14px; background:var(--cert-paper);
  border-radius:6px; box-shadow:0 20px 60px rgba(10,22,44,.22);
  font-family:Georgia,'Times New Roman',serif;
}
.certificate-sheet .cert-frame{
  position:relative; text-align:center; border:2px solid var(--cert-navy);
  background:
    radial-gradient(circle at 50% 62%, rgba(214,183,106,.10) 0%, rgba(214,183,106,0) 58%),
    var(--cert-paper);
}
.certificate-sheet .cert-frame::before{
  content:""; position:absolute; inset:5px; border:1px solid var(--cert-gold); pointer-events:none;
}
.certificate-sheet .cert-frame::after{
  content:""; position:absolute; inset:9px; border:1px solid rgba(214,183,106,.55); pointer-events:none;
}
.certificate-sheet .cert-inner{ position:relative; padding:1.8rem 2.8rem 2rem; }
/* Header band — slate blue with the gold logo */
.certificate-sheet .cert-band{
  position:relative; margin:9px 9px 0; padding:.55rem 1rem;
  display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,4vw,2.2rem);
  background:#36557f; border-bottom:3px solid #c9a227;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.certificate-sheet .cert-band-logo{ height:clamp(46px,9vw,86px); width:auto; display:block; filter:drop-shadow(0 1px 1.5px rgba(40,28,0,.45)); }
.certificate-sheet .cert-band-word{
  font-family:var(--font-sans,system-ui); font-weight:700; color:#f3dd8f;
  font-size:clamp(.62rem,2vw,1.05rem); letter-spacing:.42em; flex:1 1 0; white-space:nowrap;
}
.certificate-sheet .cert-band-word.left{ text-align:right; margin-right:-.42em; }
.certificate-sheet .cert-band-word.right{ text-align:left; }
.certificate-sheet .cert-corner{ position:absolute; width:26px; height:26px; border:2px solid var(--cert-gold); }
.certificate-sheet .cert-corner.tl{ top:14px; left:14px; border-right:none; border-bottom:none; border-color:#e6c964; z-index:2; }
.certificate-sheet .cert-corner.tr{ top:14px; right:14px; border-left:none; border-bottom:none; border-color:#e6c964; z-index:2; }
.certificate-sheet .cert-corner.bl{ bottom:14px; left:14px; border-right:none; border-top:none; }
.certificate-sheet .cert-corner.br{ bottom:14px; right:14px; border-left:none; border-top:none; }

.certificate-sheet .cert-eyebrow{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cert-navy); margin:0; font-weight:700;
}
.certificate-sheet .cert-heading{
  margin:.7rem 0 .5rem; font-size:2.35rem; color:var(--cert-navy); font-weight:400; letter-spacing:.02em;
}
.certificate-sheet .cert-heading::after{
  content:"◆"; display:block; color:var(--cert-gold); font-size:.5rem; margin:.5rem auto 0;
  position:relative;
}
.certificate-sheet .cert-subheading{
  margin:0 0 1.4rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:#6c7078;
}
.certificate-sheet .cert-line{ margin:.35rem 0; color:#6c7078; font-size:.95rem; font-style:italic; }
.certificate-sheet .cert-name{
  margin:.6rem auto .7rem; font-size:2.4rem; font-weight:700; color:var(--cert-navy);
  letter-spacing:.01em; display:inline-block; padding:0 1.4rem .4rem;
  border-bottom:1px solid var(--cert-gold-light);
}
.certificate-sheet .cert-course{
  margin:.6rem 0 .2rem; font-family:var(--font-sans,system-ui); font-size:1.15rem;
  font-weight:700; color:var(--cert-navy); letter-spacing:.01em;
}
.certificate-sheet .cert-awarded{ margin-top:.6rem; font-size:.9rem; }

.certificate-sheet .cert-footer{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.2rem;
  margin-top:2.2rem;
}
.certificate-sheet .cert-sig-block{ flex:1; min-width:0; }
.certificate-sheet .cert-sig{
  font-family:'Brush Script MT',Georgia,cursive,serif; font-size:1.3rem; color:var(--cert-navy);
  padding-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.certificate-sheet .cert-sig-date{ font-style:italic; font-family:Georgia,serif; font-size:1.05rem; }
.certificate-sheet .cert-rule{ height:1px; background:var(--cert-navy); opacity:.55; }
.certificate-sheet .cert-sig-label{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:#8b9099; margin-top:.4rem;
}
.certificate-sheet .cert-seal{
  position:relative; flex:0 0 86px; width:86px; height:86px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff6df 0%, #efdcab 55%, var(--cert-gold-light) 100%);
  border:2px solid var(--cert-gold); display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:var(--cert-navy);
  box-shadow:0 3px 10px rgba(166,124,36,.35);
}
.certificate-sheet .cert-seal-ring{
  position:absolute; inset:5px; border:1px dashed rgba(10,22,44,.35); border-radius:50%;
}
.certificate-sheet .cert-seal-text{
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.16em; font-weight:700;
}
.certificate-sheet .cert-seal-star{ font-size:1.1rem; line-height:1.1; color:var(--cert-navy); }
.certificate-sheet .cert-id{
  font-family:var(--font-mono); font-size:.62rem; color:#a9aeb6; margin:1.6rem 0 0; letter-spacing:.06em;
}
.cert-actions{ margin-top:1.2rem; justify-content:center; }

@media (max-width:640px){
  .certificate-sheet .cert-inner{ padding:1.4rem 1.1rem 1.4rem; }
  .certificate-sheet .cert-band{ margin:9px 9px 0; padding:.45rem .6rem; }
  .certificate-sheet .cert-heading{ font-size:1.55rem; }
  .certificate-sheet .cert-name{ font-size:1.6rem; padding:0 .6rem .3rem; }
  .certificate-sheet .cert-footer{ flex-direction:column; align-items:center; gap:1.4rem; text-align:center; }
  .certificate-sheet .cert-sig-block{ width:100%; }
}

/* Printing: the certificate alone, edge to edge, landscape. */
@media print{
  @page{ size:A4 landscape; margin:10mm; }
  body *{ visibility:hidden !important; }
  .certificate-sheet, .certificate-sheet *{ visibility:visible !important; }
  .certificate-sheet{
    position:absolute; inset:0; margin:0; max-width:none; box-shadow:none; border-radius:0;
  }
  .cert-actions{ display:none !important; }
}
.brand-logo{height:40px;width:auto;flex-shrink:0;margin-right:.6rem;display:block}

/* Hero: individuals / businesses */
.hero-inner > *{max-width:820px}
.hero .lede{font-size:clamp(1rem,1.6vw,1.16rem);color:#c6d4e3;max-width:640px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0 3rem}
.hero-stats{list-style:none;display:flex;flex-wrap:wrap;gap:2.5rem;padding:0;margin:0}
.hero-stats strong{display:block;font-size:2rem;font-weight:800;color:var(--accent);font-family:var(--font-mono)}
.hero-stats span{font-size:.8rem;color:var(--slate-400);letter-spacing:.06em}

/* ---------- Chain strip ---------- */
.chain-strip{background:var(--navy-800);color:#cbd8e6;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.chain-label{margin:0 0 .55rem;text-align:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-400)}
.chain{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0;padding:0;justify-content:center;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.chain li{position:relative;padding-right:1.2rem}
.chain li::after{content:"→";position:absolute;right:0;color:var(--accent)}
.chain li:last-child{padding-right:0}
.chain li:last-child::after{content:""}

/* ---------- Sections ---------- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-alt{background:var(--surface-alt)}
.section-head{max-width:760px;margin-bottom:3rem}
.section-lede{color:var(--slate-600);font-size:1.03rem}

/* ---------- Profile page ---------- */
.profile-wrap{width:100%;max-width:560px;margin:0 auto}
.profile-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:2rem}
.profile-avatar{
  flex:none;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#04121d;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:800;font-family:var(--font-mono);
}
.profile-head h2{margin:0}
.profile-head .note{margin:.2rem 0 0}
.profile-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:1.6rem;
}
.profile-card h3{
  margin:0;padding:1rem 1.4rem;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-600);background:var(--surface-alt);
  border-bottom:1px solid var(--line);
}
.profile-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);
}
.profile-row:last-child{border-bottom:none}
.profile-row-text{min-width:0}
.profile-row-label{font-size:.76rem;color:var(--slate-400);letter-spacing:.03em;margin:0 0 .2rem}
.profile-row-value{font-size:1rem;font-weight:650;color:var(--ink);word-break:break-word}
.profile-row-value.is-empty{color:var(--slate-400);font-weight:500;font-style:italic}
.profile-edit-panel{
  display:none;background:var(--surface-alt);border-top:1px solid var(--line);
  padding:1.3rem 1.4rem 1.5rem;
}
.profile-edit-panel.is-open{display:block}
.profile-edit-panel .builder-name{max-width:none;margin-bottom:1.1rem}

/* ---------- Business / bespoke training banner (homepage) ---------- */
.biz-section{
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.biz-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 85% 20%, rgba(56,189,248,.18) 0%, rgba(56,189,248,0) 55%);
}
.biz-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:2.4rem;align-items:center}
.biz-grid .section-head{margin-bottom:1.4rem;max-width:620px}
.biz-grid .section-head .eyebrow{color:var(--accent)}
.biz-grid .section-head h2{color:#fff}
.biz-grid .section-lede{color:#c6d4e3}
.biz-features{list-style:none;margin:0 0 0;padding:0;display:grid;gap:.85rem}
.biz-features li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:#dce6f0}
.biz-features li svg{flex:none;margin-top:.2rem;color:var(--accent)}
.biz-features li strong{display:block;color:#fff}
.biz-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:1.8rem;backdrop-filter:blur(6px);
}
.biz-card h3{color:#fff;margin:0 0 .5rem}
.biz-card p{color:#c6d4e3;font-size:.92rem}
.biz-card .btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
@media (max-width:900px){
  .biz-grid{grid-template-columns:1fr}
}

/* ---------- Cards ---------- */
.card-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.card-grid-2{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow-sm);transition:.25s ease;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:auto auto 0 0;height:3px;width:0;background:var(--accent);transition:width .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2f2}
.card:hover::before{width:100%}
.card .idx{font-family:var(--font-mono);font-size:.7rem;color:var(--accent-deep);letter-spacing:.16em}
.card h3{margin:.5rem 0 .45rem}
.card p{font-size:.9rem;color:var(--slate-600);margin:0}

/* ---------- Flow diagram ---------- */
.flow{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.6rem;align-items:stretch}
.flow-step{
  flex:1 1 140px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:.9rem .8rem;text-align:center;font-size:.84rem;font-weight:650;position:relative;box-shadow:var(--shadow-sm)
}
.flow-step::after{content:"";position:absolute;right:-.45rem;top:50%;width:.9rem;height:2px;background:var(--accent);z-index:1}
.flow-step:last-child::after{display:none}
.section-alt .flow-step{background:#fff}

/* ---------- Diagram panels ---------- */
.diagram-panel{
  margin-top:2.5rem;background:var(--navy-900);color:#e6eef7;border-radius:var(--radius);
  padding:1.8rem;box-shadow:var(--shadow-md)
}
.diagram-panel h3{color:#fff}
.cost-bars{display:flex;gap:1rem;align-items:flex-end;height:180px;margin-top:1.4rem}
.cost-bar{flex:1;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.cost-bar span{
  display:block;height:var(--h);border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,var(--accent),rgba(56,189,248,.15));transition:height .8s cubic-bezier(.2,.7,.2,1)
}
.cost-bar b{font-size:.78rem;margin-top:.6rem}
.cost-bar i{font-style:normal;font-family:var(--font-mono);font-size:.72rem;color:var(--accent)}
.tol-svg{width:100%;height:auto}
.tol-lbl{fill:#c7d6e6;font-size:9px;font-family:var(--font-mono)}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem;align-items:start}
.split .diagram-panel{margin-top:0}

/* ---------- Methodologies (accordion cards) ---------- */
.method-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.method{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.method button{
  width:100%;text-align:left;background:none;border:0;padding:1.15rem 1.3rem;cursor:pointer;
  font:inherit;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink)
}
.method button small{display:block;font-weight:500;font-size:.8rem;color:var(--slate-400);margin-top:.15rem}
.method button .chev{color:var(--accent-deep);transition:transform .25s;font-size:1.1rem}
.method[aria-expanded="true"] .chev{transform:rotate(45deg)}
.method .body{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 1.3rem}
.method[aria-expanded="true"] .body{max-height:420px;padding-bottom:1.3rem}
.method .body p{font-size:.9rem;color:var(--slate-600);margin:0 0 .6rem}
.method .body ol{margin:0;padding-left:1.1rem;font-size:.88rem;color:var(--slate-600)}

/* ---------- Toolkit ---------- */
.tool-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tool{
  background:var(--navy-800);color:#dce7f2;border-radius:var(--radius);padding:1.3rem;
  border:1px solid rgba(255,255,255,.08);transition:.28s ease;cursor:default
}
.tool h3{color:#fff;margin-bottom:.4rem}
.tool p{font-size:.86rem;color:#9db0c5;margin:0;max-height:0;opacity:0;overflow:hidden;transition:.3s ease}
.tool:hover,.tool:focus-within{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 30px rgba(10,18,32,.25)}
.tool:hover p,.tool:focus-within p{max-height:200px;opacity:1;margin-top:.4rem}
.tool .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--accent)}

/* ---------- Learning Paths & Certifications ---------- */
.path-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.path-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);transition:.25s}
.path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.path-card h3{font-size:1.15rem}
.path-card ul{list-style:none;padding:0;margin:.9rem 0 0}
.path-card li{font-size:.89rem;color:var(--slate-600);padding-left:1.2rem;position:relative;margin-bottom:.35rem}
.path-card li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--accent)}

/* ---------- Articles ---------- */
.article-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.25s}
.article:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.article p{font-size:.9rem;color:var(--slate-600);flex:1}
.article .more{align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-size:.86rem;font-weight:700;color:var(--accent-deep);cursor:pointer}
.article .more:hover{text-decoration:underline}

/* ---------- Calculators ---------- */
.calc-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.calc{background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:.75rem}
.section-alt .calc{background:#fff}
.calc label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600;color:var(--slate-600)}
.calc input{
  font:inherit;padding:.6rem .75rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)
}
.calc textarea,.calc select{
  font:inherit;padding:.6rem .75rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);resize:vertical
}
.calc textarea:focus,.calc select:focus{outline:2px solid var(--accent);outline-offset:1px}
.calc input:focus,.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.calc-out{display:none;font-family:var(--font-mono);font-size:.85rem;background:var(--navy-900);color:#dbe8f5;border-radius:10px;padding:.9rem 1rem;white-space:pre-line}
.calc-out.show{display:block}
.calc-out b{color:var(--accent)}
.calc-main{border:2px solid var(--accent);box-shadow:0 12px 30px rgba(56,189,248,.16)}
.calc-fields{display:grid;gap:.9rem 1.1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.calc-fields label{justify-content:flex-end}

/* ---------- About ---------- */
.about-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:2.5rem;align-items:start}
blockquote{margin:0 0 1.2rem;padding-left:1.1rem;border-left:3px solid var(--accent);font-size:1.1rem;color:var(--ink);font-weight:600}
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pillars li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;box-shadow:var(--shadow-sm)}
.pillars b{display:block;font-size:.95rem}
.pillars span{font-size:.82rem;color:var(--slate-400)}

/* ---------- Contact ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:start}
.disclaimer{font-size:.85rem;color:var(--slate-600);background:var(--surface-alt);border-left:3px solid var(--accent);padding:.8rem 1rem;border-radius:0 8px 8px 0}
.policy-wrap{max-width:760px}
.policy-updated{color:var(--slate-600);font-size:.9rem;margin-top:-.3rem}
.policy-wrap h3{margin-top:2.1rem}
.policy-list{margin:0 0 1rem;padding-left:1.2rem}
.policy-list li{margin-bottom:.4rem}
.contact-form{display:grid;gap:.9rem;background:var(--surface-alt);border:1px solid var(--line);padding:1.8rem;border-radius:var(--radius)}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.contact-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600;color:var(--slate-600)}
.contact-form input,.contact-form textarea{font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;background:#fff;resize:vertical}
.form-status{font-size:.85rem;margin:0;min-height:1.2em;color:var(--accent-deep);font-weight:600}
.form-status.error{color:#c0392b}

/* ---------- Footer / to-top ---------- */
.site-footer{background:var(--navy-900);color:#8ea3ba;padding:2rem 0;font-size:.85rem}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.footer-inner nav{display:flex;gap:1.2rem}
.footer-inner a:hover{color:var(--accent)}
.social-links{display:flex;gap:.6rem}
.social-links a{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#8ea3ba;transition:.2s;flex-shrink:0
}
.social-links a:hover{color:var(--accent);border-color:var(--accent);background:rgba(56,189,248,.08);transform:translateY(-2px)}
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:55;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--accent);color:#04121d;font-size:1.1rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow-md)
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* ---------- Book-style pager (lesson.html / course.html) ---------- */
.book-progress-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.book-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .3s ease}
.book-page{min-height:200px;margin:1.2rem 0}
.book-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.book-nav .btn:disabled{opacity:.45;cursor:not-allowed}
.book-nav .btn:disabled:hover{transform:none}

/* ---------- Cookie consent banner ---------- */
#cookieConsentBanner{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);color:#fff;
  box-shadow:0 -8px 24px rgba(0,0,0,.18);animation:cookieBannerIn .3s ease-out
}
#cookieConsentBanner.cookie-banner-hide{animation:cookieBannerOut .25s ease-in forwards}
.cookie-banner-inner{
  max-width:var(--maxw);margin:0 auto;padding:1rem 20px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1rem 1.5rem
}
.cookie-banner-inner p{margin:0;font-size:.85rem;color:#c6d4e3;flex:1 1 320px}
.cookie-banner-inner a{color:var(--accent);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:.6rem;flex:0 0 auto}
@keyframes cookieBannerIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cookieBannerOut{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(7,13,23,.7);backdrop-filter:blur(3px)}
.modal-panel{
  position:relative;background:#fff;border-radius:var(--radius);max-width:620px;width:100%;
  max-height:82vh;overflow:auto;padding:2rem;box-shadow:var(--shadow-md);animation:pop .25s ease
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.modal-close{position:absolute;top:.6rem;right:.9rem;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--slate-400)}
.modal-panel h4{margin:1.2rem 0 .4rem;font-size:.95rem}
.modal-panel p,.modal-panel li{font-size:.92rem;color:var(--slate-600)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .split,.about-wrap,.contact-wrap{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .primary-nav{
    position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0;overflow:hidden;transition:max-height .3s ease
  }
  .primary-nav.open{max-height:80vh;overflow:auto}
  .primary-nav a{padding:.95rem 20px;border-bottom:1px solid rgba(255,255,255,.06);font-size:.95rem}
  .nav-dropdown{width:100%}
  .nav-dropdown-menu{
    display:block !important;position:static;margin:0;background:none;border:0;box-shadow:none;padding:0
  }
  .nav-dropdown-menu a{padding:.85rem 20px .85rem 40px !important;font-size:.9rem;color:#a9bacd;border-bottom:1px solid rgba(255,255,255,.06) !important}
  .nav-cta{margin:.9rem 20px;text-align:center}
  .hero{min-height:auto}
  .hero-stats{gap:1.6rem}
  .flow-step::after{display:none}
  .contact-form .row{grid-template-columns:1fr}
  .cost-bars{height:150px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}


/* ---------- Subject chip nav ---------- */
.chip-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chip-nav a{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;padding:.5rem 1rem;
  border-radius:999px;border:1px solid var(--line);color:var(--slate-600);background:var(--surface);transition:.2s
}
.chip-nav a:hover{border-color:var(--accent);color:var(--accent-deep);background:rgba(56,189,248,.08)}
.subjects-intro{padding-bottom:0}

/* Cards used as plain links on the home "explore" grid */
.card-grid a.card{display:block}
.card-grid a.card:hover h3{color:var(--accent-deep)}

/* ---------- Learning additions ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.badge{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid rgba(56,189,248,.45);color:var(--accent);background:rgba(56,189,248,.08)}
.course-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px;font-size:.78rem;color:var(--accent-deep);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.course-meta span{background:rgba(56,189,248,.12);padding:4px 9px;border-radius:999px}
.card .level{display:inline-block;margin-top:10px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);font-weight:700}

/* ---------- Auth form fields ---------- */
.builder-name{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--slate-600);max-width:360px;margin:0 0 1.4rem}
.builder-name[hidden]{display:none}
.builder-name input{font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;color:var(--ink)}

.steps-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:32px}
.step-card{background:var(--surface);border:1px solid rgba(15,32,56,.10);border-radius:var(--radius);padding:22px}
.step-card b{display:block;font-size:1.75rem;color:var(--accent-deep);line-height:1}
.step-card h3{margin:8px 0 6px;font-size:1.02rem}
.step-card p{margin:0;font-size:.92rem;color:#54657c}
.path-card .price{margin-top:14px;font-weight:700;color:var(--accent-deep);font-size:.9rem}

/* ---------- Certificate of completion ---------- */
.certificate-sheet{
  --cert-navy:#0a162c; --cert-gold:#a67c24; --cert-gold-light:#d6b76a; --cert-paper:#fdfbf6;
  max-width:820px; margin:0 auto; padding:14px; background:var(--cert-paper);
  border-radius:6px; box-shadow:0 20px 60px rgba(10,22,44,.22);
  font-family:Georgia,'Times New Roman',serif;
}
.certificate-sheet .cert-frame{
  position:relative; text-align:center; border:2px solid var(--cert-navy);
  background:
    radial-gradient(circle at 50% 62%, rgba(214,183,106,.10) 0%, rgba(214,183,106,0) 58%),
    var(--cert-paper);
}
.certificate-sheet .cert-frame::before{
  content:""; position:absolute; inset:5px; border:1px solid var(--cert-gold); pointer-events:none;
}
.certificate-sheet .cert-frame::after{
  content:""; position:absolute; inset:9px; border:1px solid rgba(214,183,106,.55); pointer-events:none;
}
.certificate-sheet .cert-inner{ position:relative; padding:1.8rem 2.8rem 2rem; }
/* Header band — slate blue with the gold logo */
.certificate-sheet .cert-band{
  position:relative; margin:9px 9px 0; padding:.55rem 1rem;
  display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,4vw,2.2rem);
  background:#36557f; border-bottom:3px solid #c9a227;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.certificate-sheet .cert-band-logo{ height:clamp(46px,9vw,86px); width:auto; display:block; filter:drop-shadow(0 1px 1.5px rgba(40,28,0,.45)); }
.certificate-sheet .cert-band-word{
  font-family:var(--font-sans,system-ui); font-weight:700; color:#f3dd8f;
  font-size:clamp(.62rem,2vw,1.05rem); letter-spacing:.42em; flex:1 1 0; white-space:nowrap;
}
.certificate-sheet .cert-band-word.left{ text-align:right; margin-right:-.42em; }
.certificate-sheet .cert-band-word.right{ text-align:left; }
.certificate-sheet .cert-corner{ position:absolute; width:26px; height:26px; border:2px solid var(--cert-gold); }
.certificate-sheet .cert-corner.tl{ top:14px; left:14px; border-right:none; border-bottom:none; border-color:#e6c964; z-index:2; }
.certificate-sheet .cert-corner.tr{ top:14px; right:14px; border-left:none; border-bottom:none; border-color:#e6c964; z-index:2; }
.certificate-sheet .cert-corner.bl{ bottom:14px; left:14px; border-right:none; border-top:none; }
.certificate-sheet .cert-corner.br{ bottom:14px; right:14px; border-left:none; border-top:none; }

.certificate-sheet .cert-eyebrow{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cert-navy); margin:0; font-weight:700;
}
.certificate-sheet .cert-heading{
  margin:.7rem 0 .5rem; font-size:2.35rem; color:var(--cert-navy); font-weight:400; letter-spacing:.02em;
}
.certificate-sheet .cert-heading::after{
  content:"◆"; display:block; color:var(--cert-gold); font-size:.5rem; margin:.5rem auto 0;
  position:relative;
}
.certificate-sheet .cert-subheading{
  margin:0 0 1.4rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:#6c7078;
}
.certificate-sheet .cert-line{ margin:.35rem 0; color:#6c7078; font-size:.95rem; font-style:italic; }
.certificate-sheet .cert-name{
  margin:.6rem auto .7rem; font-size:2.4rem; font-weight:700; color:var(--cert-navy);
  letter-spacing:.01em; display:inline-block; padding:0 1.4rem .4rem;
  border-bottom:1px solid var(--cert-gold-light);
}
.certificate-sheet .cert-course{
  margin:.6rem 0 .2rem; font-family:var(--font-sans,system-ui); font-size:1.15rem;
  font-weight:700; color:var(--cert-navy); letter-spacing:.01em;
}
.certificate-sheet .cert-awarded{ margin-top:.6rem; font-size:.9rem; }

.certificate-sheet .cert-footer{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.2rem;
  margin-top:2.2rem;
}
.certificate-sheet .cert-sig-block{ flex:1; min-width:0; }
.certificate-sheet .cert-sig{
  font-family:'Brush Script MT',Georgia,cursive,serif; font-size:1.3rem; color:var(--cert-navy);
  padding-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.certificate-sheet .cert-sig-date{ font-style:italic; font-family:Georgia,serif; font-size:1.05rem; }
.certificate-sheet .cert-rule{ height:1px; background:var(--cert-navy); opacity:.55; }
.certificate-sheet .cert-sig-label{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:#8b9099; margin-top:.4rem;
}
.certificate-sheet .cert-seal{
  position:relative; flex:0 0 86px; width:86px; height:86px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff6df 0%, #efdcab 55%, var(--cert-gold-light) 100%);
  border:2px solid var(--cert-gold); display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:var(--cert-navy);
  box-shadow:0 3px 10px rgba(166,124,36,.35);
}
.certificate-sheet .cert-seal-ring{
  position:absolute; inset:5px; border:1px dashed rgba(10,22,44,.35); border-radius:50%;
}
.certificate-sheet .cert-seal-text{
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.16em; font-weight:700;
}
.certificate-sheet .cert-seal-star{ font-size:1.1rem; line-height:1.1; color:var(--cert-navy); }
.certificate-sheet .cert-id{
  font-family:var(--font-mono); font-size:.62rem; color:#a9aeb6; margin:1.6rem 0 0; letter-spacing:.06em;
}
.cert-actions{ margin-top:1.2rem; justify-content:center; }

@media (max-width:640px){
  .certificate-sheet .cert-inner{ padding:1.4rem 1.1rem 1.4rem; }
  .certificate-sheet .cert-band{ margin:9px 9px 0; padding:.45rem .6rem; }
  .certificate-sheet .cert-heading{ font-size:1.55rem; }
  .certificate-sheet .cert-name{ font-size:1.6rem; padding:0 .6rem .3rem; }
  .certificate-sheet .cert-footer{ flex-direction:column; align-items:center; gap:1.4rem; text-align:center; }
  .certificate-sheet .cert-sig-block{ width:100%; }
}

/* Printing: the certificate alone, edge to edge, landscape. */
@media print{
  @page{ size:A4 landscape; margin:10mm; }
  body *{ visibility:hidden !important; }
  .certificate-sheet, .certificate-sheet *{ visibility:visible !important; }
  .certificate-sheet{
    position:absolute; inset:0; margin:0; max-width:none; box-shadow:none; border-radius:0;
  }
  .cert-actions{ display:none !important; }
}
.brand-logo{height:40px;width:auto;flex-shrink:0;margin-right:.6rem;display:block}

.hero-inner > *{max-width:820px}
.hero-inner > .audience-grid{max-width:900px}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0 2.2rem}
.audience-card{background:rgba(8,15,26,.62);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:1.3rem 1.4rem;backdrop-filter:blur(6px)}
.audience-card h2{font-size:1.25rem;margin:.35rem 0 .4rem;color:#fff}
.audience-card p{font-size:.95rem;color:#c6d4e3;margin:0 0 1rem}
.audience-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.audience-link{margin-left:.9rem;color:#fff;font-weight:600;font-size:.9rem;white-space:nowrap}
.audience-link:hover{color:var(--accent)}
@media(max-width:720px){.audience-grid{grid-template-columns:1fr}}
@media(max-width:720px){.audience-link{margin-left:.2rem;display:inline-block;padding:.5rem .6rem}}

/* ---------- Log in page: floating card on soft background ---------- */
.auth-float{position:relative;min-height:100vh;padding:calc(var(--nav-h) + 2.5rem) 1rem 3rem;display:flex;align-items:center;justify-content:center;
  background:var(--surface)}
.auth-float .auth-form-side{display:block;padding:0;width:100%}
.auth-float .auth-form-side>.section{background:#fff;border-radius:20px;padding:2.2rem 2rem 1.8rem!important;max-width:430px!important;margin:0 auto!important;box-shadow:0 20px 50px rgba(11,18,32,.16),0 4px 14px rgba(11,18,32,.08),0 0 0 1px rgba(11,18,32,.06)}
.auth-float .container{padding:0}
.auth-float .section-head{margin-bottom:1.4rem}
.auth-float .builder-name{max-width:none}
.auth-float .hero-actions .btn{width:100%}
.auth-float #toggleWrap{text-align:center}
.auth-float #forgotWrap{text-align:right}
@media(max-width:480px){.auth-float{padding-left:.75rem;padding-right:.75rem}.auth-float .auth-form-side>.section{padding:1.8rem 1.3rem 1.5rem!important}}

/* ---------- Why start today / How it works (redesign) ---------- */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.why-visual{position:relative}
.why-visual img{width:100%;height:auto;display:block;border-radius:20px;box-shadow:0 24px 50px rgba(11,18,32,.18)}
.why-badge{position:absolute;left:-14px;bottom:26px;background:var(--navy-900);color:#fff;border-radius:14px;padding:.8rem 1.1rem;box-shadow:0 14px 30px rgba(11,18,32,.35);border:1px solid rgba(255,255,255,.12)}
.why-badge strong{display:block;font-size:1.6rem;line-height:1;color:var(--accent)}
.why-badge span{font-size:.8rem;color:#c6d4e3}
.why-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;position:relative}
.why-steps li{display:flex;gap:1rem;align-items:flex-start;position:relative}
.why-steps li:not(:last-child)::after{content:"";position:absolute;left:25px;top:56px;bottom:-1.1rem;width:2px;background:linear-gradient(var(--accent),rgba(56,189,248,.15))}
.why-icon{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent-deep),#0f2038);box-shadow:0 8px 18px rgba(11,127,184,.28)}
.why-steps h3{margin:.1rem 0 .25rem;font-size:1.05rem}
.why-steps h3 em{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);background:rgba(56,189,248,.14);border-radius:999px;padding:.15rem .55rem;margin-left:.4rem;vertical-align:middle}
.why-steps p{margin:0;font-size:.93rem;color:#54657c}
.why-cta{margin:1.6rem 0 0;display:flex;gap:.8rem;flex-wrap:wrap}
.how-section{background:var(--surface)}
.how-steps{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;position:relative}
.how-steps::before{content:"";position:absolute;left:12%;right:12%;top:62px;border-top:2px dashed rgba(11,127,184,.3)}
.how-step{position:relative;text-align:center;background:var(--surface);border:1px solid rgba(15,32,56,.09);border-radius:18px;padding:1.5rem 1.2rem 1.4rem;box-shadow:var(--shadow-sm)}
.how-num{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--navy-900);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center;border:3px solid #fff}
.how-tile{display:grid;place-items:center;width:64px;height:64px;margin:.4rem auto 1rem;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 10px 22px rgba(11,127,184,.3);position:relative}
.how-tile svg{width:30px;height:30px}
.how-step h3{margin:0 0 .4rem;font-size:1.02rem}
.how-step p{margin:0;font-size:.9rem;color:#54657c}
.how-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center;margin-top:3rem;background:linear-gradient(135deg,var(--navy-900),#12305c);color:#fff;border-radius:22px;overflow:hidden}
.how-feature img{width:100%;height:100%;object-fit:cover;display:block;min-height:240px}
.how-feature > div{padding:1.6rem 2rem 1.6rem 0}
.how-feature h3{margin:0 0 .6rem;font-size:1.4rem;color:#fff}
.how-feature p{color:#c6d4e3;margin:0 0 1.1rem}
@media(max-width:900px){
  .why-grid{grid-template-columns:1fr}.why-badge{left:12px}
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.how-steps::before{display:none}
  .how-feature{grid-template-columns:1fr}.how-feature > div{padding:0 1.4rem 1.6rem}
}
@media(max-width:520px){.how-steps{grid-template-columns:1fr}}

/* Explore the academy */
.explore-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem}
.ex-card{grid-column:span 2;display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(15,32,56,.09);border-radius:20px;padding:1.6rem;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.ex-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(11,18,32,.14)}
.ex-card h3{margin:1rem 0 .4rem;font-size:1.15rem}
.ex-card p{margin:0 0 1.1rem;font-size:.92rem;color:#54657c}
.ex-tile{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 8px 18px rgba(11,127,184,.28)}
.ex-tile svg{width:26px;height:26px}
.ex-go{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;color:var(--accent-deep)}
.ex-go svg{transition:transform .2s}
.ex-card:hover .ex-go svg{transform:translateX(4px)}
.ex-courses{grid-column:span 4;flex-direction:row;padding:0;overflow:hidden}
.ex-courses .ex-photo{width:42%;object-fit:cover;flex:none}
.ex-courses .ex-body{padding:1.8rem;display:flex;flex-direction:column}
.ex-courses h3{font-size:1.4rem}
.ex-dark{background:linear-gradient(135deg,var(--navy-900),#12305c);color:#fff;border-color:transparent}
.ex-dark p{color:#c3d2e3}
.ex-dark .ex-go{color:#7fd0ff}
.ex-dark .ex-tile{background:linear-gradient(135deg,#2bb3f0,var(--accent-deep))}
@media (max-width:900px){.ex-card{grid-column:span 3}.ex-courses{grid-column:span 6}.ex-dark{grid-column:span 6}}
@media (max-width:600px){.explore-grid{grid-template-columns:1fr}.ex-card,.ex-courses,.ex-dark{grid-column:auto}.ex-courses{flex-direction:column}.ex-courses .ex-photo{width:100%;height:190px}}
.ex-courses{padding:1.6rem;overflow:visible}.ex-courses .ex-body{padding:0}.ex-courses p{max-width:46ch}
@media (max-width:600px){.ex-courses{flex-direction:column}}

/* Certifications page */
.cert-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.cert-why{grid-column:auto}.cert-why:hover{transform:none}
.cert-why p{margin:0}
.cert-sample{background:linear-gradient(135deg,var(--navy-900),#12305c)}
.cert-sample .eyebrow{color:#7fd0ff}.cert-sample h2{color:#fff}.cert-sample .section-lede,.cert-sample .note{color:#c3d2e3}
.cert-sample .certificate-sheet{max-width:660px;margin:2rem auto 0!important;box-shadow:0 30px 60px rgba(0,0,0,.45);border-radius:6px}
.cert-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.cert-type{grid-column:auto;padding:1.9rem}.cert-type:hover{transform:none}
.cert-list{list-style:none;margin:0 0 1.1rem;padding:0}
.cert-list li{position:relative;padding-left:1.7rem;margin-bottom:.5rem;font-size:.93rem;color:#54657c}
.cert-list li::before{content:"";position:absolute;left:0;top:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:rgba(11,127,184,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7fb8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}
.ex-dark .cert-list li{color:#c3d2e3}
.ex-dark .cert-list li::before{background-color:rgba(127,208,255,.2)}
.cert-best{font-weight:700;font-size:.9rem!important;color:var(--ink)!important;margin-bottom:1.2rem!important}
.ex-dark .cert-best{color:#fff!important}
.cert-type .btn{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.cert-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cert-why-grid,.cert-types{grid-template-columns:1fr}}
.cert-intro .btn-ghost,.cert-type .btn-ghost{color:var(--navy-900);background:#fff;border:1.5px solid rgba(15,32,56,.18)}
.cert-intro .btn-ghost:hover,.cert-type .btn-ghost:hover{border-color:var(--accent-deep);color:var(--accent-deep)}

/* lesson/course page rail — numbers only, sits OUTSIDE the content column */
.book-rail ol{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.book-dot{width:2rem;height:2rem;border-radius:50%;border:1.5px solid #cfd9e6;background:#fff;font:inherit;font-size:.78rem;font-weight:700;color:#475569;cursor:pointer;display:grid;place-items:center;padding:0}
.book-dot.is-quiz,.book-dot.is-practice{border-radius:8px}
.book-dot:hover:not(:disabled){border-color:var(--accent,#0aa6e0);color:#0b6d96}
.book-dot.is-done{background:#22c55e;border-color:#22c55e;color:#fff}
.book-dot.is-current{background:var(--accent,#0aa6e0);border-color:var(--accent,#0aa6e0);color:#fff;box-shadow:0 0 0 3px rgba(10,166,224,.2)}
.book-dot:disabled{opacity:.45;cursor:not-allowed;font-size:.7rem}
/* wide screens: vertical rail pinned in the left margin, so the lesson keeps its full width */
@media (min-width:1300px){
  .book-rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:20;max-height:80vh;overflow:auto;padding:.5rem;background:rgba(255,255,255,.92);border:1px solid #e2e8f0;border-radius:999px;box-shadow:0 4px 16px rgba(15,23,42,.08)}
  .book-rail ol{flex-direction:column;margin:0;flex-wrap:nowrap}
}

.book-rail{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 .9rem}
.book-rail ol{margin:0;flex-wrap:nowrap}
.book-arrow{width:2rem;height:2rem;border-radius:50%;border:1.5px solid #cfd9e6;background:#f8fafc;color:#475569;cursor:pointer;font-size:.7rem;display:grid;place-items:center;padding:0}
.book-arrow:hover:not(:disabled){border-color:var(--accent,#0aa6e0);color:#0b6d96}
.book-arrow:disabled{opacity:.35;cursor:default}
.book-rail-count{font-size:.7rem;font-weight:700;color:#64748b;margin-left:.3rem}
/* narrow screens: the arrows point left/right along the row */
@media (max-width:1299px){.book-arrow{transform:rotate(-90deg)}}
@media (min-width:1300px){.book-rail{margin:0;flex-direction:column;flex-wrap:nowrap;gap:.35rem}.book-rail-count{margin:.1rem 0 0}.book-rail ol{flex-direction:column}}

.book-upnext{margin-top:.8rem;padding:.75rem 1rem;border-radius:12px;background:#fff8e6;border:1px solid #f3dca0;color:#6b4e00;font-size:.9rem;line-height:1.45}
.book-upnext strong{color:#4d3800}

/* certificate validity line */
.cert-valid{margin:.5rem 0 0;text-align:center;font-size:.85rem;font-weight:700;color:#8a6a1b;letter-spacing:.02em}
.cert-valid span{font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:#a67c24;margin-right:.35rem}

/* certification status banner (lesson / course pages) */
.expiry-banner{display:flex;gap:.9rem;align-items:center;padding:.85rem 1.1rem;border-radius:14px;border:1px solid #cfe3f3;background:#f1f8fd;margin:0 0 1rem}
.expiry-banner>div{flex:1;display:flex;flex-direction:column;gap:.15rem}
.expiry-banner strong{font-size:.97rem}
.expiry-banner span:not(.eb-ico){font-size:.85rem;color:#475569}
.eb-ico{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;background:#dcecf8;flex:0 0 auto}
.expiry-banner.is-valid{background:#f0fbf4;border-color:#bfe8cd}.expiry-banner.is-valid .eb-ico{background:#d3f2de;color:#15803d}
.expiry-banner.is-expiring{background:#fff8e6;border-color:#f3dca0}.expiry-banner.is-expiring .eb-ico{background:#fbebbd}
.expiry-banner.is-expired{background:#fef2f2;border-color:#f5c2c2}.expiry-banner.is-expired .eb-ico{background:#fbd5d5;color:#b91c1c}
.expiry-banner.is-renewing{background:#eef2ff;border-color:#c9d3fb}.expiry-banner.is-renewing .eb-ico{background:#dbe2ff}
@media (max-width:640px){.expiry-banner{flex-wrap:wrap}}

/* My Learning: expiring / expired certifications */
.renewal-alert{border:1px solid #f3dca0;background:#fff8e6;border-radius:14px;padding:.9rem 1.1rem;margin:0 0 1.2rem;color:#5c4300}
.renewal-alert.is-expired{border-color:#f5c2c2;background:#fef2f2;color:#7a1f1f}
.renewal-alert ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.9rem}
.learn-card.exp-expiring{box-shadow:0 0 0 2px #f3dca0}
.learn-card.exp-expired{box-shadow:0 0 0 2px #f5b5b5}
.cert-ribbon.exp-ribbon{background:#fff1c9}
.learn-card.exp-expired .cert-ribbon.exp-ribbon{background:#fcd9d9}

/* ---------- Certification renewals (renewals-ui.js) ---------- */
.rn-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin:.2rem 0 1rem}
.rn-kpi{position:relative;border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:.6rem .8rem;display:flex;flex-direction:column;overflow:hidden}
.rn-kpi strong{font-size:1.5rem;line-height:1.1}.rn-kpi span{font-size:.8rem;color:#64748b}
.rn-kpi.rn-expired strong{color:#b91c1c}.rn-kpi.rn-expiring strong{color:#b7791f}.rn-kpi.rn-valid strong{color:#15803d}.rn-kpi.rn-renewing strong{color:#4f46e5}
.rn-kpi.rn-rate i{position:absolute;left:0;bottom:0;height:4px;width:var(--w,0);background:#16a34a}
.rn-tabs{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;border-bottom:1px solid #e2e8f0;margin-bottom:.8rem}
.rn-tab{border:0;background:none;font:inherit;font-weight:600;color:#64748b;padding:.55rem .8rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.rn-tab.is-on{color:var(--ink,#0f172a);border-bottom-color:var(--accent,#0aa6e0)}
.rn-count{display:inline-block;min-width:1.4em;text-align:center;background:#e2e8f0;border-radius:999px;font-size:.72rem;padding:0 .4em;margin-left:.2rem}
.rn-tabs .btn:first-of-type{margin-left:auto}
.rn-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.rn-tools input[type=search]{flex:1 1 220px;min-width:0;margin:0}.rn-tools select{margin:0;max-width:100%}
.rn-bulk{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.rn-check{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-size:.88rem;cursor:pointer}
.rn-check input{width:auto;margin:0}
.rn-people{display:flex;flex-direction:column;gap:.45rem}
.rn-person{border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.rn-person.is-open{border-color:#cbd5e1;box-shadow:var(--shadow-sm)}
.rn-person-head{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem}
.rn-person-main{flex:1;min-width:0;display:flex;gap:.5rem;align-items:center;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit;padding:0}
.rn-person-tags{display:flex;gap:.3rem;flex-wrap:wrap}
.rn-person-items{border-top:1px solid #eef2f7;padding:.3rem .9rem .5rem 2.4rem}
.rn-line{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.35rem 0;font-size:.9rem;border-bottom:1px dashed #eef2f7}
.rn-line:last-child{border-bottom:0}
.rn-badge{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.rn-badge.rn-expired{background:#fee2e2;color:#b91c1c}.rn-badge.rn-expiring{background:#fef3c7;color:#92400e}.rn-badge.rn-valid{background:#dcfce7;color:#166534}.rn-badge.rn-renewing{background:#e0e7ff;color:#3730a3}
.rn-table{width:100%;border-collapse:collapse;font-size:.9rem}
.rn-table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;padding:.4rem .5rem;border-bottom:1px solid #e2e8f0}
.rn-table td{vertical-align:top;padding:.5rem;border-bottom:1px solid #f1f5f9}
.rn-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#e2e8f0;min-width:140px}
.rn-seg.rn-expired{background:#ef4444}.rn-seg.rn-expiring{background:#f59e0b}.rn-seg.rn-renewing{background:#6366f1}.rn-seg.rn-valid{background:#22c55e}
.rn-t-expired{color:#b91c1c}.rn-t-expiring{color:#b7791f}
.rn-empty{text-align:center;padding:1.6rem 1rem;border:1px dashed #cbd5e1;border-radius:12px;display:flex;flex-direction:column;gap:.2rem}
.rn-pager{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-top:.8rem}
.rn-msg{min-height:1.2em;margin:.2rem 0 .5rem}.rn-msg.is-bad{color:#b91c1c}
.rn-settings{border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;padding:.8rem .9rem;margin-bottom:.9rem}
.rn-auto{display:flex;gap:.8rem;align-items:center;margin-bottom:.4rem}
.rn-auto.is-paused{background:#fff7ed;border-radius:10px;padding:.5rem .6rem}
.rn-sched{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.rn-sched label{margin:0;font-weight:600}.rn-sched select{margin:0}
.rn-sched.is-off{opacity:.5}
.rn-switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto;margin:0}
.rn-switch input{opacity:0;width:0;height:0}
.rn-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;cursor:pointer;transition:.2s}
.rn-slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.rn-switch input:checked + .rn-slider{background:#16a34a}.rn-switch input:checked + .rn-slider:before{transform:translateX(20px)}
@media (max-width:600px){.rn-person-head{flex-wrap:wrap}.rn-person-main{flex-basis:calc(100% - 2rem)}.rn-person-tags{margin-left:2rem}.rn-person-items{padding-left:1rem}}

/* ---------- Admin statistics dashboard (admin-stats.js) ---------- */
.as-top{display:flex;justify-content:space-between;align-items:flex-end;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.as-range{display:flex;gap:.4rem}
.as-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin-bottom:1rem}
.as-kpi{border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:.8rem .9rem}
.as-kpi strong{display:block;font-size:1.7rem;line-height:1.1}.as-kpi span{font-size:.82rem;color:#475569}
.as-kpi small{display:block;margin-top:.2rem;font-size:.75rem;color:#64748b}.as-kpi em{font-style:normal}
.as-delta{font-weight:700;color:#64748b}.as-delta.is-up{color:#15803d}.as-delta.is-down{color:#b91c1c}
.as-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-bottom:1.2rem}
@media (min-width:860px){.as-grid{grid-template-columns:repeat(3,1fr)}.as-wide{grid-column:1/-1}}
.as-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:.9rem 1rem;min-width:0}
.as-card h4{margin:0 0 .15rem;font-size:1rem}.as-card .note{margin:0 0 .6rem;font-size:.82rem}
.as-card-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.5rem}.as-card-head h4{margin:0}.as-card-head select{margin:0;width:auto}
.as-bars{display:flex;align-items:flex-end;gap:5px;height:150px;border-bottom:1px solid #e2e8f0}
.as-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;text-align:center}
.as-col i{display:block;background:#0b7fb8;border-radius:3px 3px 0 0}.as-col i.is-zero{background:#e2e8f0}
.as-val{font-size:.65rem;color:#475569;min-height:1em}
.as-axis{display:flex;gap:5px;font-size:.68rem;color:#64748b;margin-top:.25rem}.as-axis span{flex:1;text-align:center;overflow:hidden;white-space:nowrap;min-width:0}
.as-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.as-rank-main{display:flex;justify-content:space-between;gap:.6rem;font-size:.88rem}.as-rank-main b{white-space:nowrap;font-weight:600;color:#475569}
.as-meter{height:5px;background:#eef2f7;border-radius:999px;margin-top:.2rem;overflow:hidden}.as-meter i{display:block;height:100%;background:#0b7fb8;border-radius:999px}
.as-plain{list-style:none;margin:0 0 .6rem;padding:0;font-size:.88rem;display:flex;flex-direction:column;gap:.3rem}
.as-details{margin-top:.4rem}.as-details>summary{cursor:pointer;font-weight:700;padding:.5rem 0}
.as-range .st-chip{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:.3rem .85rem;font:inherit;font-size:.85rem;cursor:pointer;color:inherit}
.as-range .st-chip.is-on{background:#0f172a;color:#fff;border-color:#0f172a}

/* ---------- Admin Activity tab ---------- */
.act-nav{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.act-nav .st-chip{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:.4rem 1rem;font:inherit;font-size:.9rem;cursor:pointer;color:inherit}
.act-nav .st-chip.is-on,.act-chips .st-chip.is-on{background:#0f172a;color:#fff;border-color:#0f172a}
.act-nav .rn-count{background:#ef4444;color:#fff}
.act-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.act-chips .st-chip{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:.25rem .8rem;font:inherit;font-size:.85rem;cursor:pointer;color:inherit}
.act-chips .st-chip.is-on .rn-count{background:#334155;color:#fff}
.act-tools input[type=search]{width:100%;margin:0 0 .7rem}
.act-row{border:1px solid #e2e8f0;border-radius:10px;margin-bottom:.45rem;background:#fff}
.act-row-head{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .8rem;cursor:pointer}
.act-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.act-preview{font-size:.85rem;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-when{white-space:nowrap;margin:0}
.act-dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1;margin-top:.45rem;flex:0 0 auto}.act-dot.is-new{background:#ef4444}
.act-row-body{padding:.1rem .8rem .8rem 1.9rem;border-top:1px solid #f1f5f9}
@media (max-width:600px){.act-row-head{flex-wrap:wrap}.act-when{margin-left:1.6rem}}
.hero-stats .hero-stat-note{display:block;margin-top:.25rem;font-size:.72rem;color:var(--slate-400);opacity:.85;letter-spacing:.02em}

/* admin organisations toolbar */
.org-toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.org-toolbar[hidden]{display:none}

/* =====================================================================
   Certificate — vertical A4 (page view, shrunk sample, print).
   The certificate is one SVG (see certificate.js), so it is always A4-shaped.
   ===================================================================== */
.cert-a4{ width:100%; max-width:560px; margin:0 auto; }
.cert-a4.is-sample{ max-width:330px; }
.cert-a4-sheet{ background:#fdfbf6; border-radius:3px; box-shadow:0 20px 60px rgba(10,22,44,.22); line-height:0; overflow:hidden; }
.cert-a4.is-sample .cert-a4-sheet{ box-shadow:0 14px 40px rgba(10,22,44,.20); }
.cert-a4-sheet svg{ display:block; width:100%; height:auto; }
@media print{
  @page{ size:A4 portrait; margin:0; }
  html, body{ background:#fff !important; }
  .cert-a4, .cert-a4 *{ visibility:visible !important; }
  .cert-a4{ position:absolute; left:0; top:0; width:210mm; max-width:none; margin:0; }
  .cert-a4-sheet{ width:210mm; height:297mm; border-radius:0; box-shadow:none; }
  .cert-a4-sheet svg{ width:210mm; height:297mm; }
}

/* Why-section business panel */
.why-biz{margin-top:1.4rem;padding:1.1rem 1.3rem;border-radius:16px;background:linear-gradient(135deg,#0f2038,#12305c);color:#fff;box-shadow:0 14px 30px rgba(11,18,32,.18)}
.why-biz .audience-tag{display:inline-block;margin-bottom:.4rem}
.why-biz h3{margin:.1rem 0 .3rem;font-size:1.05rem;color:#fff}
.why-biz p{margin:0;font-size:.93rem;color:#c6d4e3}

/* ---------- Our aim ---------- */
.aim-section{background:var(--surface,#fff)}
.aim-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin-top:2.4rem}
.aim-card{background:linear-gradient(180deg,#f6fbff,#fff);border:1px solid rgba(15,32,56,.09);border-radius:18px;padding:1.6rem 1.4rem 1.5rem;box-shadow:0 10px 26px rgba(11,18,32,.06)}
.aim-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--accent-deep),#0f2038);box-shadow:0 8px 18px rgba(11,127,184,.28)}
.aim-figure{margin:1rem 0 .1rem;font-size:2.2rem;font-weight:800;line-height:1;color:var(--accent-deep);font-family:var(--font-mono)}
.aim-card h3{margin:.2rem 0 .5rem;font-size:1.1rem}
.aim-card p:not(.aim-figure){margin:0;font-size:.93rem;color:#54657c;line-height:1.6}
@media(max-width:860px){.aim-grid{grid-template-columns:1fr}}

/* Stripe (card / Apple Pay / Google Pay) button above PayPal */
/* Compact checkout buttons */
.stripe-pay{margin:0 0 .6rem}
.stripe-pay-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.55rem;height:44px;padding:0 1rem;font-size:.95rem;font-weight:700;border-radius:8px;background:#0f172a;color:#fff;border:0;cursor:pointer;transition:background .15s,transform .15s}
.stripe-pay-btn:hover:not(:disabled){background:#1e293b;transform:translateY(-1px)}
.stripe-pay-btn:disabled{opacity:.6;cursor:wait}
.stripe-pay-btn svg{width:20px;height:20px;flex:none}
.pay-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 0}
.pay-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:700;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:.15rem .5rem;line-height:1.4}
.stripe-pay-or{display:flex;align-items:center;gap:.7rem;color:#94a3b8;font-size:.78rem;margin:.9rem 0 .7rem}
.stripe-pay-or::before,.stripe-pay-or::after{content:"";flex:1;border-top:1px solid #e2e8f0}
#pp-unlock{max-width:100%}

/* Save for later */
.save-later{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1rem;padding:.6rem 1rem;border:1.5px dashed #94d6f2;border-radius:8px;background:#f4fbff;color:#0b6d96;font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s}
.save-later:hover{background:#e6f6fe;border-color:#38bdf8}
.save-later svg{width:18px;height:18px;flex:none}
.save-later small{font-weight:500;color:#64748b;margin-left:.2rem}
.save-later.is-saved{border-style:solid;border-color:#86e0a8;background:#effcf4;color:#157347}
.save-later.is-saved:hover{background:#e0f8e9}

/* Cover images on lesson/course cards (see coverHtml in category-theme.js) */
.card-cover.has-img{height:auto;aspect-ratio:16/9;padding:0;position:relative;overflow:hidden;background-color:#e2e8f0}
.card-cover.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-cover .cover-chip{position:absolute;left:8px;bottom:8px;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.85)}

/* ---------- Admin Activity tab — modern refresh ---------- */
.act-nav{display:inline-flex;gap:.25rem;padding:.3rem;background:#f1f5f9;border-radius:999px;margin-bottom:1.2rem;max-width:100%;overflow-x:auto}
.act-nav .st-chip{border:0;background:transparent;border-radius:999px;padding:.5rem 1.15rem;font-weight:650;font-size:.9rem;color:#475569;transition:background .15s,color .15s,box-shadow .15s}
.act-nav .st-chip:hover{color:#0f172a}
.act-nav .st-chip.is-on{background:#fff;color:#0f172a;border:0;box-shadow:0 1px 3px rgba(15,23,42,.14)}
.act-pane.panel{border:0;box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 28px rgba(15,23,42,.06);border-radius:18px;padding:1.5rem}
.act-pane h3{margin:0 0 .2rem;font-size:1.25rem;letter-spacing:-.01em}
.act-tools input[type=search]{width:100%;box-sizing:border-box;height:46px;padding:0 16px 0 44px;border:1.5px solid #e2e8f0;border-radius:999px;background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;font:inherit;font-size:.95rem;margin:.6rem 0 .9rem;transition:border-color .15s,box-shadow .15s,background-color .15s}
.act-tools input[type=search]:focus{outline:none;border-color:#38bdf8;background-color:#fff;box-shadow:0 0 0 4px rgba(56,189,248,.18)}
.act-chips{gap:.5rem;margin:.2rem 0 1rem}
.act-chips .st-chip{border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;padding:.35rem .95rem;font-weight:600;font-size:.86rem;color:#475569;transition:all .15s}
.act-chips .st-chip:hover{border-color:#94a3b8;color:#0f172a}
.act-chips .st-chip.is-on{background:#0f172a;border-color:#0f172a;color:#fff}
.act-bulk{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.55rem .9rem;margin:0 0 .7rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}
.act-bulk .btn{margin-left:auto}
.act-check{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;color:#475569;cursor:pointer;margin:0}
.act-check input{width:17px;height:17px;accent-color:#0b7fb8;cursor:pointer;margin:0}
.act-row{border:1px solid #e8edf3;border-radius:14px;margin-bottom:.6rem;background:#fff;transition:box-shadow .15s,border-color .15s,background .15s;overflow:hidden}
.act-row:hover{border-color:#cbd5e1;box-shadow:0 4px 16px rgba(15,23,42,.07)}
.act-row.is-picked{border-color:#38bdf8;background:#f4fbff}
.act-row-head{display:flex;gap:.8rem;align-items:center;padding:.85rem 1rem;cursor:pointer}
.act-pick{flex:none;padding:.3rem}
.act-avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#0b5f8a;background:linear-gradient(135deg,#e0f2fe,#bae6fd)}
.act-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.act-row-top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.act-row-top strong{font-size:1rem;color:#0f172a}
.act-meta{font-size:.84rem;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-preview{font-size:.88rem;color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-when{white-space:nowrap;margin:0;font-size:.8rem;color:#94a3b8}
.act-badge{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .55rem;border-radius:999px;background:#e2e8f0;color:#475569}
.act-badge.st-new{background:#fee2e2;color:#b91c1c}
.act-badge.st-read{background:#e0f2fe;color:#0369a1}
.act-badge.st-replied{background:#dcfce7;color:#15803d}
.act-badge.st-archived{background:#f1f5f9;color:#64748b}
.act-row-body{padding:1rem 1.1rem 1.1rem;border-top:1px solid #f1f5f9;background:#fbfdff}
.act-msg{white-space:pre-wrap;line-height:1.6;color:#0f172a;background:#fff;border:1px solid #e8edf3;border-radius:12px;padding:.9rem 1rem;margin:0 0 .9rem}
.act-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.act-status{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:#64748b;margin:0}
.act-status select{height:34px;border:1.5px solid #e2e8f0;border-radius:999px;padding:0 .8rem;background:#fff;font:inherit;font-size:.85rem;font-weight:600;color:#0f172a}
.act-del{margin-left:auto}
@media (max-width:600px){.act-row-head{flex-wrap:wrap}.act-when{margin-left:calc(42px + 2.4rem)}.act-del{margin-left:0}.act-avatar{width:36px;height:36px}}

/* ---------- Renewals (admin + business portal) — modern refresh ---------- */
.rn-kpis{gap:.75rem;margin:.4rem 0 1.3rem}
.rn-kpi{border:1px solid #e8edf3;border-radius:16px;padding:.9rem 1.1rem;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:box-shadow .15s,transform .15s;overflow:hidden}
.rn-kpi:hover{box-shadow:0 8px 22px rgba(15,23,42,.08);transform:translateY(-1px)}
.rn-kpi strong{font-size:1.8rem;letter-spacing:-.02em}
.rn-kpi span{font-size:.78rem;font-weight:600;color:#64748b}
.rn-kpi.rn-rate i{height:5px;border-radius:0 99px 99px 0}
.rn-tabs{gap:.2rem;border-bottom:1px solid #e8edf3;margin-bottom:1rem}
.rn-tab{padding:.7rem 1rem;font-weight:650;font-size:.92rem;border-bottom-width:3px;margin-bottom:-1px;transition:color .15s}
.rn-tab:hover{color:#0f172a}
.rn-tab.is-on{color:#0f172a;border-bottom-color:#0b9ad6}
.rn-tabs .btn{border-radius:999px;font-weight:650;font-size:.82rem;padding:.4rem .95rem}
.rn-tools{gap:.6rem;margin-bottom:1rem;align-items:center}
.rn-tools input[type=search]{flex:1 1 260px;height:46px;padding:0 16px 0 44px;border:1.5px solid #e2e8f0;border-radius:999px;background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;font:inherit;font-size:.95rem;box-sizing:border-box;transition:border-color .15s,box-shadow .15s,background-color .15s}
.rn-tools select{height:46px;border:1.5px solid #e2e8f0;border-radius:999px;background-color:#f8fafc;padding:0 1.1rem;font:inherit;font-size:.92rem;font-weight:600;color:#0f172a;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rn-tools input:focus,.rn-tools select:focus{outline:none;border-color:#38bdf8;background-color:#fff;box-shadow:0 0 0 4px rgba(56,189,248,.18)}
.rn-check input{width:17px;height:17px;accent-color:#0b7fb8}
.rn-person{border:1px solid #e8edf3;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:box-shadow .15s,border-color .15s}
.rn-person:hover{border-color:#cbd5e1;box-shadow:0 6px 18px rgba(15,23,42,.07)}
.rn-person-head{padding:.8rem 1rem}
.rn-badge{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;padding:.18rem .65rem}
.rn-table{border-collapse:separate;border-spacing:0}
.rn-table th{background:#f8fafc;color:#94a3b8;font-weight:800;letter-spacing:.08em;padding:.7rem .9rem;border-bottom:1px solid #e8edf3}
.rn-table td{padding:.75rem .9rem;border-bottom:1px solid #eef2f7}
.rn-table tbody tr:hover td{background:#f6fbff}
.rn-empty{border:1.5px dashed #d5dde8;border-radius:18px;background:#fbfdff;padding:2.4rem 1rem}
.rn-pager .btn{border-radius:999px}
.rn-settings{border:1px solid #e8edf3;border-radius:16px;background:#fbfdff;padding:1rem 1.1rem}
.rn-sched select{height:40px;border:1.5px solid #e2e8f0;border-radius:999px;padding:0 1rem;background:#f8fafc;font:inherit;font-weight:600}
.rn-slider{background:#d5dde8}

/* shared modern search / select look for business-portal tools (Progress, Compliance, item stats) */
.bz-tools{gap:.6rem;align-items:center}
.bz-tools input[type=search],.ois-find input{height:46px;padding:0 16px 0 44px;border:1.5px solid #e2e8f0;border-radius:999px;background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;font:inherit;font-size:.95rem;box-sizing:border-box;transition:border-color .15s,box-shadow .15s,background-color .15s}
.bz-tools select{height:46px;border:1.5px solid #e2e8f0;border-radius:999px;background-color:#f8fafc;padding:0 1.1rem;font:inherit;font-size:.92rem;font-weight:600;color:#0f172a;cursor:pointer}
.bz-tools input:focus,.bz-tools select:focus,.ois-find input:focus{outline:none;border-color:#38bdf8;background-color:#fff;box-shadow:0 0 0 4px rgba(56,189,248,.18)}

/* keep search + filters on one line (they wrap only on narrow screens) */
.bz-tools,.rn-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.bz-tools input[type=search],.rn-tools input[type=search]{flex:1 1 240px;width:auto;min-width:0;max-width:420px;margin:0}
.bz-tools select,.rn-tools select{flex:0 0 auto;width:auto;max-width:100%;margin:0}
@media (max-width:640px){.bz-tools input[type=search],.rn-tools input[type=search]{max-width:none;flex-basis:100%}.bz-tools select,.rn-tools select{flex:1 1 140px}}

/* "About this lesson/course" — opens as its own view with a way back */
.about-item{margin:0 0 1rem}
.about-toggle{display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid #e2e8f0;background:#f8fafc;border-radius:999px;padding:.45rem 1rem;font:inherit;font-weight:650;font-size:.88rem;color:#334155;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.about-toggle:hover{border-color:#38bdf8;background:#f4fbff;color:#0f172a}
.about-toggle:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}
/* No inner padding/border: the description text must start at the same left edge as the lesson pages. */
.about-body{margin:.2rem 0 1.2rem;padding:0;border:0;background:none;box-shadow:none}
.about-back{margin:0 0 1rem}
.about-toggle[hidden],.about-body[hidden],.about-back[hidden]{display:none}

/* Yearly access tick box at checkout */
.renew-opt{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .7rem;padding:.7rem .85rem;border:1.5px solid #bfe6f7;background:#f4fbff;border-radius:10px;font-size:.88rem;line-height:1.4;cursor:pointer}
.renew-opt input{margin-top:.2rem;width:18px;height:18px;flex:none;accent-color:#0b7fb8}
.renew-opt small{display:block;margin-top:.25rem;color:#64748b;font-size:.78rem;line-height:1.4}
.renew-paypal-note{text-align:center;color:#94a3b8;font-size:.75rem;margin:.2rem 0 0}
/* Yearly access banner / renewal card */
.acc-bar{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:14px;padding:.8rem 1.1rem;margin:0 0 1rem;border:1px solid #d5dde8;background:#f8fafc;font-size:.92rem}
.acc-bar strong{display:block;font-size:.98rem}
.acc-bar .note{margin:.15rem 0 0}
.acc-bar.is-ok{background:#effcf4;border-color:#86e0a8}
.acc-bar.is-warn{background:#fff7e6;border-color:#f59e0b}
.acc-bar.is-bad{background:#fef2f2;border-color:#fca5a5}
.acc-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.acc-link{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:#0b6d96;text-decoration:underline;cursor:pointer}

/* Certificate tags on lesson/course cards and the buy box */
.cert-line{margin-top:.35rem}
.cert-tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;line-height:1.4;padding:.12rem .55rem;border-radius:999px;border:1px solid transparent}
.cert-tag.is-yes{background:#effcf4;color:#157347;border-color:#bfe9cf}
.cert-tag.is-no{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.cert-info{margin:0 0 1.1rem;padding:.65rem .85rem;border-radius:10px;font-size:.9rem;line-height:1.45}
.cert-info.is-yes{background:#effcf4;border:1px solid #bfe9cf;color:#14532d}
.cert-info.is-no{background:#f8fafc;border:1px solid #e2e8f0;color:#475569}
/* Sign-up: how buying and access work */
.signup-rules{border:1px solid #bfe6f7;background:#f4fbff;border-radius:12px;padding:.9rem 1.1rem;margin:.4rem 0 .9rem;font-size:.88rem;line-height:1.5}
.signup-rules h4{margin:0 0 .4rem;font-size:.98rem}
.signup-rules ul{margin:0;padding-left:1.15rem}
.signup-rules li{margin:.25rem 0}
.signup-accept{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem;margin:0 0 .6rem;cursor:pointer}
.signup-accept input{margin-top:.2rem;width:18px;height:18px;flex:none}

.cert-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#effcf4;color:#157347;cursor:default}
.cert-icon::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);white-space:nowrap;background:#0f172a;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .55rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.cert-icon:hover::after,.cert-icon:focus::after{opacity:1}
.signup-accept a{text-decoration:underline;text-underline-offset:2px;font-weight:600}

.renew-opt .renew-price-link{color:#0b7fb8;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.renew-opt .renew-price-info{color:#0f172a}

.renew-opt .renew-price-info[hidden]{display:none}
.renew-opt .renew-price-info{display:block;margin-top:.6rem;padding:.6rem .75rem;background:#fff;border:1px solid #bfe6f7;border-radius:8px;font-size:.82rem;line-height:1.45;color:#0f172a}
.renew-opt .renew-price-info>span{display:block;margin-top:.2rem}