:root{
  --catalyst-blue:#145aa3;
  --catalyst-teal:#2db8b6;
  --ink:#123047;
  --muted:#64748b;
  --bg:#f6f9fc;
  --card:#ffffff;
  --line:#dce6ef;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--catalyst-blue);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:24px}
.nav{background:#fff;border-bottom:1px solid var(--line)}
.nav-inner{max-width:1120px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:22px;font-weight:800;letter-spacing:.4px}
.brand span{color:var(--catalyst-teal)}
.hero{padding:72px 0 48px}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 18px}
.hero p{font-size:19px;max-width:760px;color:var(--muted);line-height:1.6}
.btn{display:inline-block;background:var(--catalyst-blue);color:#fff;padding:13px 20px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.btn.secondary{background:#fff;color:var(--catalyst-blue);border:1px solid var(--catalyst-blue)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 8px 22px rgba(16,52,80,.05)}
.form-card{max-width:560px;margin:48px auto}
label{display:block;font-weight:700;margin:14px 0 7px}
input,select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:9px;font-size:16px}
.alert{padding:12px 14px;border-radius:9px;margin:12px 0;background:#fff4e5;border:1px solid #ffd9a0}
.success{background:#eafaf3;border-color:#bdebd4}
.small{font-size:14px;color:var(--muted)}
.level{border-top:4px solid var(--catalyst-teal)}



/* Phase 12.1 — stronger mobile navigation and overflow fix */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { position:relative; }
.container, .grid, .card, .nav, .nav-inner { max-width:100%; min-width:0; }
.grid > * { min-width:0; }

.mobile-login-link{
  display:none;
  font-weight:700;
  white-space:nowrap;
}

@media(max-width:760px){
  .nav{position:relative;z-index:1000}
  .nav-inner{
    width:100%;
    max-width:100%;
    display:grid !important;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    flex-wrap:nowrap !important;
  }
  .brand{
    font-size:20px !important;
    white-space:nowrap;
    min-width:0;
  }
  .mobile-login-link{display:inline-block}
  .mobile-nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0 !important;
    padding:0 !important;
    font-size:24px;
    flex:0 0 42px;
  }

  .nav-links,
  .dashboard-actions{
    position:absolute !important;
    left:0;
    right:0;
    top:100%;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:8px 14px 14px !important;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 10px 20px rgba(16,52,80,.08);
    z-index:9999;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
  }

  .nav-inner.menu-open .nav-links,
  .nav-inner.menu-open .dashboard-actions{
    display:flex !important;
  }

  .nav-links a,
  .dashboard-actions a,
  .dashboard-actions span{
    width:100% !important;
    max-width:100% !important;
    display:block !important;
    padding:12px 4px !important;
    margin:0 !important;
    border-top:1px solid var(--line);
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  .nav-links a:first-child,
  .dashboard-actions a:first-child{
    border-top:0;
  }

  .nav-links .btn{
    display:block !important;
    width:100% !important;
    margin-top:8px !important;
    text-align:center;
  }

  .dashboard-actions span{
    color:var(--muted);
  }

  .container{width:100%;padding:18px 14px !important;}
  .grid{width:100%;grid-template-columns:minmax(0,1fr) !important;}
  .card{width:100%;max-width:100%;overflow-wrap:anywhere;}
  .booklet-actions{width:100%;}
  .booklet-btn,.cert-btn,.btn{max-width:100%;}
}

@media(max-width:420px){
  .nav-inner{grid-template-columns:auto 1fr auto;}
  .mobile-login-link{display:none}
  .brand{font-size:18px !important}
}



/* Phase 12.3 — emergency native mobile navigation (no JavaScript dependency) */
.desktop-nav{
  display:flex;
  align-items:center;
  gap:16px;
}
.mobile-menu{display:none}

@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  .nav{position:relative;z-index:1000}
  .emergency-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:12px 14px!important;
    width:100%!important;
    max-width:100%!important;
    flex-wrap:nowrap!important;
  }
  .brand{
    font-size:20px!important;
    white-space:nowrap!important;
    flex:0 1 auto;
  }
  .desktop-nav{display:none!important}
  .mobile-menu{
    display:block!important;
    margin-left:auto;
    position:relative;
    flex:0 0 auto;
  }
  .mobile-menu summary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    color:var(--catalyst-blue);
    font-weight:700;
    padding:10px 12px;
    white-space:nowrap;
  }
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu[open] summary{background:#eef6fa}
  .mobile-menu-panel{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    width:min(310px,calc(100vw - 28px));
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(16,52,80,.15);
    padding:8px;
    z-index:99999;
  }
  .mobile-menu-panel a{
    display:block;
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    color:var(--catalyst-blue);
    font-weight:700;
    text-decoration:none;
  }
  .mobile-menu-panel a:last-child{border-bottom:0}
  .container{width:100%!important;max-width:100%!important;padding:18px 14px!important}
  .grid{width:100%!important;grid-template-columns:minmax(0,1fr)!important}
  .card{width:100%!important;max-width:100%!important;min-width:0!important}
}

/* Complete Catalyst Training Center logo and consistent journey navigation */
.brand-logo-link{display:flex!important;align-items:center;flex:0 0 auto;text-decoration:none!important;overflow:visible!important}
.brand-logo{display:block;width:220px;height:96px;max-width:none;object-fit:contain;object-position:left center;transform:none!important}
.journey-nav{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.journey-nav a{font-weight:700;text-decoration:none;color:var(--catalyst-blue)}
@media(max-width:760px){.brand-logo{width:155px;height:68px}.journey-nav{gap:10px}.journey-nav a{font-size:14px}}