:root{
  --navy:#12365a;
  --navy-dark:#0b2744;
  --blue:#1e5f94;
  --blue-soft:#eaf2f8;
  --gold:#c8a24a;
  --gold-soft:#f7f0df;
  --ink:#1d2733;
  --muted:#617083;
  --line:#d7e0e8;
  --bg:#f4f6f8;
  --white:#fff;
  --green:#2d6a4f;
  --red:#a33a3a;
  --radius:14px;
  --shadow:0 18px 48px rgba(17,45,73,.10);
  --shell:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:var(--blue);text-decoration-thickness:.08em;text-underline-offset:.18em}a:hover{color:var(--navy-dark)}
img,video,iframe{max-width:100%;height:auto}
.shell{width:min(var(--shell),calc(100% - 2rem));margin-inline:auto}.narrow{max-width:640px}.narrow-wide{max-width:880px}.section-pad{padding-block:2.75rem 4rem}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:.75rem 1rem;z-index:99}.skip-link:focus{left:1rem;top:1rem}
.site-header{background:var(--white);box-shadow:0 1px 0 rgba(0,0,0,.08)}.topbar{background:var(--navy-dark);color:white}.topbar-inner,.sectionbar-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:flex;align-items:center;gap:.9rem;color:white;text-decoration:none}.brand:hover{color:white}.brand-seal{width:48px;height:48px;border:2px solid rgba(255,255,255,.65);display:grid;place-items:center;border-radius:50%;font-family:Georgia,serif;font-weight:700;letter-spacing:.05em}.brand strong,.brand small{display:block}.brand strong{font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}.brand small{opacity:.78;font-size:.83rem}.utility-nav{display:flex;align-items:center;gap:1rem}.utility-nav a{color:white}.user-name{color:#dce7f2;font-size:.9rem}.sectionbar{border-bottom:4px solid var(--gold)}.sectionbar-inner{min-height:52px}.sectionbar-title{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:var(--navy)}.sectionbar a{font-size:.9rem}
.hero-band{background:linear-gradient(130deg,var(--navy-dark),var(--navy));color:white;padding:4.25rem 0;position:relative;overflow:hidden}.hero-band:after{content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(255,255,255,.1);border-radius:50%;right:-140px;top:-180px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:3.25rem;align-items:center}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.76rem;color:var(--gold);margin-bottom:.6rem}.hero-band h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.35rem,5vw,4.6rem);line-height:1.02;margin:.25rem 0 1rem;max-width:850px}.hero-lead{font-size:1.2rem;max-width:720px;color:#e1eaf3}.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.7rem}.hero-note{font-size:.9rem;color:#cbd9e7;margin-top:1.2rem}.hero-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:1.5rem;backdrop-filter:blur(4px)}.hero-card-kicker{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:#f7e1a8}.hero-list{list-style:none;padding:0;margin:1rem 0 0}.hero-list li{display:flex;gap:.8rem;padding:.9rem 0;border-top:1px solid rgba(255,255,255,.13);font-weight:700}.hero-list span{color:#e8c878;font-variant-numeric:tabular-nums}
.button{appearance:none;border:0;border-radius:7px;background:var(--blue);color:white!important;padding:.78rem 1.15rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:800;text-decoration:none;cursor:pointer;line-height:1.2}.button:hover{background:var(--navy);color:white}.button-outline{background:transparent;color:var(--blue)!important;border:2px solid var(--blue)}.hero-band .button-outline{color:white!important;border-color:rgba(255,255,255,.72)}.hero-band .button-outline:hover{background:white;color:var(--navy)!important}.button-light{background:white;color:var(--navy)!important}.button-small{padding:.58rem .86rem;font-size:.88rem}.button-block{width:100%}.button-danger{background:var(--red)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.feature-card,.content-card,.auth-card,.module-card,.certificate-panel{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px rgba(17,45,73,.05)}.feature-card{padding:1.5rem}.feature-card h2{font-family:Georgia,serif;color:var(--navy);font-size:1.25rem;margin:.1rem 0 .5rem}.feature-card p{margin:0;color:var(--muted)}
.auth-card{padding:2rem 2.1rem}.auth-card h1,.page-heading h1,.dashboard-header h1{font-family:Georgia,"Times New Roman",serif;color:var(--navy);line-height:1.15}.auth-card h1{font-size:2.15rem;margin:.15rem 0 .7rem}.stack-form{display:grid;gap:1.1rem;margin-top:1.5rem}.stack-form label{display:block;font-weight:800;margin-bottom:.35rem}.stack-form input{width:100%;padding:.78rem .85rem;border:1px solid #b9c6d2;border-radius:7px;font:inherit;background:white}.stack-form input:focus{outline:3px solid rgba(30,95,148,.18);border-color:var(--blue)}.fineprint{font-size:.87rem;color:var(--muted)}.alert{padding:.85rem 1rem;border-radius:8px;margin:1rem 0}.alert-error{background:#fbeaea;border:1px solid #efc2c2;color:#7d2525}
.dashboard-header{display:flex;align-items:end;justify-content:space-between;gap:2rem}.dashboard-header h1{font-size:2.6rem;margin:.1rem 0 .45rem}.dashboard-header p{margin:0;color:var(--muted)}.progress-summary{text-align:center;background:var(--navy);color:white;border-radius:12px;padding:1rem 1.5rem;min-width:160px}.progress-summary strong,.progress-summary span{display:block}.progress-summary strong{font-size:2rem;line-height:1}.progress-summary span{font-size:.78rem;margin-top:.35rem}.progress-track,.mini-progress{background:#dfe6ec;border-radius:999px;overflow:hidden}.progress-track{height:9px;margin:1.5rem 0 2rem}.progress-track span,.mini-progress span{display:block;height:100%;background:var(--gold)}.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.module-card{display:flex;padding:1.4rem;gap:1.2rem}.module-card.is-complete{border-color:#b9d7c7}.module-card.is-locked{background:#f7f8f9;box-shadow:none}.module-number{font-family:Georgia,serif;font-size:2rem;color:#9ba9b7;line-height:1}.module-body h2{font-family:Georgia,serif;color:var(--navy);margin:.45rem 0 .35rem}.module-body p{color:var(--muted);margin:.2rem 0 .75rem}.status-chip{display:inline-block;padding:.2rem .55rem;border-radius:999px;background:var(--blue-soft);color:var(--navy);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.is-complete .status-chip{background:#e6f2eb;color:var(--green)}.is-locked .status-chip{background:#e8ebee;color:#687583}.text-link{font-weight:800}.muted{color:#7b8793;font-size:.9rem}.certificate-panel{margin-top:1.5rem;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}.certificate-panel.ready{border-left:5px solid var(--gold)}.certificate-panel h2{font-family:Georgia,serif;color:var(--navy);margin:.2rem 0}.certificate-panel p{margin:.2rem 0;color:var(--muted)}.reset-box{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1rem;color:var(--muted)}.reset-box summary{font-weight:800;color:var(--navy);cursor:pointer}
.learning-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.5rem;align-items:start}.module-sidebar{position:sticky;top:1rem}.back-link{font-weight:800}.sidebar-label{margin-top:1.7rem;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted);font-weight:800}.module-sidebar h2{font-family:Georgia,serif;color:var(--navy);font-size:1.5rem;line-height:1.15;margin:.5rem 0 1rem}.mini-progress{height:7px}.module-sidebar p{font-size:.85rem;color:var(--muted)}.screen-nav{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}.screen-nav a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:white;text-decoration:none;font-weight:700}.screen-nav a.current{background:var(--navy);color:white;border-color:var(--navy)}.content-card{padding:2rem}.page-heading{border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.5rem}.page-heading h1{font-size:2.25rem;margin:.1rem 0 .35rem}.page-heading p{color:var(--muted);margin:.3rem 0}.legacy-content{font-family:Georgia,"Times New Roman",serif;font-size:1.05rem}.legacy-content p{margin:0 0 1.1rem}.legacy-content b,.legacy-content strong{color:#162f49}.legacy-content blockquote{margin:1.4rem 0;padding:1rem 1.25rem;background:#f7f9fb;border-left:4px solid var(--gold)}.legacy-content ul,.legacy-content ol{padding-left:1.4rem}.legacy-content li{margin:.45rem 0}.legacy-content table{width:100%!important;max-width:100%;border-collapse:collapse;display:block;overflow-x:auto}.legacy-content td,.legacy-content th{padding:.55rem;border:1px solid #cbd4dd}.legacy-content img{display:block;margin:1rem auto;border-radius:8px}.legacy-content iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px}.media-placeholder{font-family:system-ui,sans-serif;background:var(--blue-soft);border:1px dashed #8cb1d0;border-radius:10px;padding:1.2rem;margin:1.25rem 0}.media-placeholder strong,.media-placeholder span{display:block}.media-placeholder span{color:var(--muted);font-size:.9rem;margin-top:.25rem}.page-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--line);margin-top:2rem;padding-top:1.35rem}
.evaluation-card{padding:2rem}.evaluation-form{display:grid;gap:1.1rem}.question-card{border:1px solid var(--line);border-radius:10px;padding:1.25rem;margin:0}.question-card legend{font-family:Georgia,serif;color:var(--navy);font-weight:700;font-size:1.1rem;padding:0 .4rem}.question-card legend span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold-soft);margin-right:.55rem;font-family:system-ui,sans-serif;font-size:.8rem}.answer-list{display:grid;gap:.55rem;margin-top:.65rem}.answer-option{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .8rem;border:1px solid #dbe3ea;border-radius:8px;cursor:pointer}.answer-option:hover{background:#f7fafc}.answer-option input{margin-top:.3rem}.result-panel{border-radius:10px;padding:1rem 1.1rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.result-panel strong{font-size:1.15rem}.result-panel .button{margin-left:auto}.result-panel.pass{background:#e9f4ee;border:1px solid #b9d7c7;color:#24523d}.result-panel.fail{background:#fbefef;border:1px solid #e7c4c4;color:#7d2c2c}
.certificate-toolbar{display:flex;justify-content:space-between;margin-bottom:1rem}.certificate{background:#fffdf6;border:9px double var(--navy);padding:3.8rem 3rem;text-align:center;box-shadow:var(--shadow);position:relative;max-width:1000px;margin:auto}.certificate-rule{height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin-bottom:1.6rem}.certificate-mark{width:64px;height:64px;border:2px solid var(--navy);border-radius:50%;display:grid;place-items:center;margin:auto;font-family:Georgia,serif;font-weight:700;color:var(--navy);font-size:1.25rem}.certificate-agency{text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:var(--navy);font-size:.8rem;margin-top:1rem}.certificate h1{font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-size:2.6rem;margin:1rem 0 .35rem}.certificate h2{font-family:Georgia,serif;color:#4b5866;font-size:1.15rem;margin:0 0 2rem}.certificate-copy{font-family:Georgia,serif;font-size:1.05rem}.certificate-name{font-family:Georgia,serif;font-size:2.5rem;font-style:italic;color:var(--navy);margin:1.2rem 0;border-bottom:1px solid #b6a979;padding-bottom:.45rem}.certificate-meta{display:flex;justify-content:center;gap:5rem;margin:2rem 0}.certificate-meta strong,.certificate-meta span{display:block}.certificate-meta strong{font-family:Georgia,serif;color:var(--navy);font-size:1.4rem}.certificate-meta span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.certificate-number{font-weight:800;color:#485668;font-size:.85rem}.certificate-rule.bottom{margin:2rem 0 0}
.site-footer{background:var(--navy-dark);color:#dbe5ef;padding:2.6rem 0 1.5rem;margin-top:2rem}.site-footer p{margin:.25rem 0}.footer-grid{display:flex;justify-content:space-between;gap:2rem}.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap}.footer-links a{color:white}.footer-fineprint{border-top:1px solid rgba(255,255,255,.16);padding-top:1rem;margin-top:1.7rem;font-size:.82rem;color:#aebfd0}
@media(max-width:900px){.hero-grid,.learning-layout{grid-template-columns:1fr}.module-sidebar{position:static;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:1rem}.feature-grid{grid-template-columns:1fr}.module-grid{grid-template-columns:1fr}.hero-card{max-width:650px}.dashboard-header{align-items:start}.certificate-meta{gap:2rem}}
@media(max-width:640px){.shell{width:min(100% - 1.2rem,var(--shell))}.topbar-inner{align-items:flex-start;padding-block:.8rem}.brand strong{font-size:1rem}.brand small,.user-name{display:none}.utility-nav{gap:.6rem}.sectionbar-title{font-size:.9rem}.sectionbar-inner{gap:.6rem}.hero-band{padding:3rem 0}.hero-band h1{font-size:2.55rem}.section-pad{padding-block:1.5rem 2.5rem}.content-card,.evaluation-card,.auth-card{padding:1.25rem}.dashboard-header,.certificate-panel,.footer-grid{display:block}.progress-summary{margin-top:1rem;text-align:left}.page-actions{align-items:stretch}.page-actions>div{flex:1}.page-actions .button{width:100%}.certificate{padding:2rem 1rem}.certificate h1{font-size:1.9rem}.certificate-name{font-size:2rem}.certificate-meta{display:grid;gap:1rem}.certificate-toolbar{gap:.6rem}.certificate-toolbar .button{flex:1}}
@media print{body{background:white}.site-header,.site-footer,.no-print{display:none!important}.section-pad{padding:0}.certificate-wrap{width:100%;max-width:none}.certificate{box-shadow:none;border-color:#000;margin:0;min-height:95vh;display:flex;flex-direction:column;justify-content:center}.certificate h1,.certificate-mark,.certificate-agency,.certificate-meta strong{color:#000}}

/* Instructional video player */
.module-video {
    margin: 2rem 0;
    padding: 1rem;
    background: #101828;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}

.module-video video {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
}

/* =========================================================
   Official VDOE branding
   ========================================================= */

/* White VDOE identity band */
.site-header .topbar {
    background: #ffffff;
    color: var(--navy);
}

.site-header .topbar-inner {
    min-height: 104px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: .65rem 0;
}

.brand:hover {
    text-decoration: none;
}

.vdoe-logo {
    display: block;
    width: min(430px, 48vw);
    max-height: 88px;
    height: auto;
    object-fit: contain;
}

/* Account controls on white background */
.site-header .utility-nav {
    color: var(--navy);
}

.site-header .utility-nav a {
    color: var(--navy);
    font-weight: 700;
}

.site-header .utility-nav .user-name {
    color: #536779;
}

/* Login/sign-in button remains visually distinct */
.site-header .utility-nav .button-light {
    background: var(--navy);
    color: #ffffff !important;
}

.site-header .utility-nav .button-light:hover {
    background: var(--navy-dark);
    color: #ffffff !important;
}

/* Module title band */
.site-header .sectionbar {
    background: var(--navy);
    border-bottom: 4px solid var(--gold);
}

.site-header .sectionbar-inner {
    min-height: 54px;
}

.site-header .sectionbar-title {
    color: #ffffff;
}

.site-header .sectionbar a {
    color: #ffffff;
}

/* Certificate logo */
.certificate-logo {
    display: block;
    width: min(440px, 78%);
    height: auto;
    margin: 0 auto 1.65rem;
    object-fit: contain;
}

/* No need for the old VA seal when official identity is used */
.certificate-mark,
.certificate-agency {
    display: none;
}

@media (max-width: 640px) {
    .site-header .topbar-inner {
        min-height: 82px;
    }

    .vdoe-logo {
        width: min(300px, 62vw);
        max-height: 68px;
    }

    .certificate-logo {
        width: min(360px, 90%);
    }
}

/* Preserve the official mark when printing certificates */
@media print {
    .certificate-logo {
        display: block !important;
        width: 420px;
        max-width: 72%;
        margin-left: auto;
        margin-right: auto;
    }
}