/* QMS Learning shared theme. Source of truth for header, footer, buttons and the pathway page components.
   Colors and type match the homepage. Load Archivo + IBM Plex Mono from Google Fonts before this file. */
:root{--qp:#F4F2EA;--qp2:#FBFAF5;--qp3:#ECE9DE;--qink:#17181C;--qmut:#5C5F67;--qfaint:#8A8D95;--qline:rgba(23,24,28,.16);--qgo:#2E7350;--qgo2:#245C3F;--qgreen:#2F6B4F;--qmint:#7FC7A3;--qred:#C0361F;--qcarbon:#141519;--qcarbonmut:#b5b7bd}

/* Header */
.qh-nav{border:1px solid var(--qink);margin:20px 20px 0;padding:14px 18px;box-shadow:0 4px 0 var(--qink);position:relative;z-index:5;background:var(--qp);font-family:Archivo,Arial,sans-serif;color:var(--qink);display:block}
.qh-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.qh-brand{font-weight:800;font-size:18px;letter-spacing:-.7px;display:flex;align-items:center;gap:9px;color:var(--qink);text-decoration:none}
.qh-symbol{width:30px;height:30px;background:var(--qink);color:var(--qp);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;position:relative;font-style:normal}
.qh-symbol:before{content:'Q'}
.qh-symbol:after{content:'';position:absolute;width:8px;height:8px;right:-3px;bottom:-3px;background:var(--qred)}
.qh-utility{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:12px Archivo,sans-serif}
.qh-main{display:flex;gap:22px;align-items:center;flex-wrap:wrap;border-top:1px solid #c9c9bd;margin-top:15px;padding-top:15px;font:500 12px Archivo,sans-serif}
.qh-main>a,.qh-utility>a:not(.qh-action){padding:5px 0;color:var(--qink);text-decoration:none;font-weight:inherit}
.qh-main>a:hover,.qh-utility>a:not(.qh-action):hover{text-decoration:underline}
.qh-action,.qv .q-action{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:13px 20px;border:1px solid var(--qgo2);border-radius:2px;background:var(--qgo);color:#fff;cursor:pointer;font:500 14px Archivo,sans-serif;text-decoration:none;box-shadow:4px 4px 0 var(--qink)}
.qh-action:hover,.qv .q-action:hover{background:var(--qgo2)}
.qv .q-action.light{border-color:var(--qmint)}
.qv .q-action.ghost{background:transparent;color:var(--qink);border-color:var(--qink);box-shadow:none}
.qv .q-action.ghost.on-dark{color:var(--qp);border-color:var(--qp)}
@media(max-width:700px){.qh-nav{margin:10px 10px 0}}
@media(max-width:650px){.qh-main{gap:12px 18px}.qh-utility{gap:12px}}
@media(max-width:400px){.qh-nav{padding:12px 9px}.qh-brand{font-size:15px}.qh-action{padding:10px;font-size:11px}}

/* Footer */
.qh-footer{padding:26px 5% 30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;border-top:1px solid #c8c9be;font-family:Archivo,Arial,sans-serif;color:var(--qmut);background:var(--qp)}
.qh-footer .qh-brand{font-size:18px}
.qh-footer .qf-line{font-size:11px;color:var(--qmut)}
.qh-footer .qf-links{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 12px Archivo,sans-serif}
.qh-footer .qf-links a{color:var(--qink);text-decoration:none}
.qh-footer .qf-links a:hover{text-decoration:underline}
.qh-footer .qf-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font:11px 'IBM Plex Mono',monospace;color:var(--qmut)}
.qh-footer .qf-meta a{color:var(--qmut);text-decoration:none}
.qh-footer .qf-meta a:hover{text-decoration:underline}

/* Pathway page base (body.qv) */
body.qv{margin:0;padding:0;background:var(--qp);color:var(--qink);font-family:Archivo,Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.qv *{box-sizing:border-box}
.qv h1,.qv h2,.qv h3,.qv h4,.qv p{margin:0;font-weight:400}
.qv a{color:inherit}
.qv .q-eyebrow{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:18px;color:var(--qmut)}
.qv .q-label{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--qmut);text-transform:uppercase;margin-bottom:10px}
.qv h2{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:clamp(29px,4vw,42px);line-height:1.13;letter-spacing:-1.2px;margin-bottom:17px}
.qv .q-intro{max-width:600px;color:var(--qmut);font-size:15px}
.qv .q-section{padding:65px 5%}
.qv .q-fine{font-size:11px;color:var(--qmut);margin-top:17px;max-width:760px}
.qv .q-soft{background:var(--qp3)}
.qv .q-dark{background:var(--qcarbon);color:var(--qp)}
.qv .q-dark .q-eyebrow{color:var(--qmint)}
.qv .q-dark h2 em{font-style:normal;color:var(--qmint)}
.qv .q-dark .q-intro,.qv .q-dark p{color:var(--qcarbonmut)}
@media(max-width:700px){.qv .q-section{padding:45px 5%}}

/* Hero */
.qv .qv-hero{padding:55px 5% 48px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.qv .qv-hero h1{font-family:Archivo,Arial,sans-serif;font-weight:900;font-size:clamp(35px,4.9vw,54px);line-height:1.05;letter-spacing:-1.9px;margin:0 0 22px}
.qv .qv-hero h1 em{font-style:normal;color:var(--qgreen)}
.qv .qv-hero .q-eyebrow{color:var(--qmut);font-size:10px;letter-spacing:1.3px}
.qv .qv-lead{font-size:16px;color:var(--qmut);margin:0 0 25px;line-height:1.65;max-width:560px}
.qv .qv-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.qv .qv-proof{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--qmut);border-top:1px solid #cecdc6;margin-top:24px;padding-top:14px}
.qv .qv-proof span:before{content:'\2713';color:var(--qgreen);margin-right:6px}
.qv .qv-who{background:var(--qp2);border:1px solid var(--qink);box-shadow:7px 7px 0 #dedcd3;padding:24px}
.qv .qv-who h3{font:700 16px/1.3 Archivo,sans-serif;margin-bottom:10px}
.qv .qv-who p{font-size:13px;color:var(--qmut)}
.qv .qv-who ul{margin:14px 0 0;padding-left:18px;font-size:13px;color:var(--qmut)}
.qv .qv-who li{margin:6px 0}
@media(max-width:750px){.qv .qv-hero{grid-template-columns:1fr;gap:28px;padding-top:34px}}

/* Stakes */
.qv .qv-stakes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.qv .qv-stake{background:var(--qp2);border:1px solid var(--qline);border-left:4px solid var(--qred);padding:22px 24px;border-radius:2px}
.qv .qv-stake h3{font:700 16px/1.3 Archivo,sans-serif;margin-bottom:8px}
.qv .qv-stake p{font-size:13px;color:var(--qmut)}
@media(max-width:650px){.qv .qv-stakes{grid-template-columns:1fr}}

/* Outcomes */
.qv .qv-outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;margin-top:28px}
.qv .qv-outcome{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--qline)}
.qv .qv-outcome i{width:24px;height:24px;background:var(--qgo);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700}
.qv .qv-outcome strong{display:block;font:700 15px/1.3 Archivo,sans-serif;margin-bottom:5px}
.qv .qv-outcome span{font-size:13px;color:var(--qmut)}
@media(max-width:650px){.qv .qv-outcomes{grid-template-columns:1fr}}

/* Courses */
.qv .qv-courses{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.qv .qv-course{background:var(--qp2);border:1px solid var(--qline);border-top:3px solid var(--qink);padding:22px 24px;border-radius:2px;display:flex;flex-direction:column}
.qv .qv-course .q-tag{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--qgreen);margin-bottom:10px}
.qv .qv-course .q-tag.dev{color:var(--qmut)}
.qv .qv-course h3{font:800 18px/1.25 Archivo,sans-serif;letter-spacing:-.4px;margin-bottom:8px}
.qv .qv-course p{font-size:13px;color:var(--qmut);flex:1}
.qv .qv-course a{display:inline-block;margin-top:14px;font-size:12px;text-decoration:underline}
@media(max-width:650px){.qv .qv-courses{grid-template-columns:1fr}}

/* Platform (dark) */
.qv .qv-features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
.qv .qv-feature{background:#1d1f24;border:1px solid #414349;padding:22px 24px;border-radius:2px}
.qv .qv-feature .q-tag{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:1.2px;color:var(--qmint);text-transform:uppercase}
.qv .qv-feature h3{font:700 17px/1.3 Archivo,sans-serif;color:var(--qp);margin:10px 0 8px}
.qv .qv-feature p{font-size:13px;color:var(--qcarbonmut)}
.qv .qv-line{font:600 15px Archivo,sans-serif;color:var(--qmint);border-left:3px solid var(--qmint);padding-left:12px;margin-top:26px}
@media(max-width:650px){.qv .qv-features{grid-template-columns:1fr}}

/* Built by auditors */
.qv .qv-trust{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.qv .qv-trust-card{background:var(--qp2);border:1px solid var(--qink);box-shadow:7px 7px 0 #dedcd3;padding:24px}
.qv .qv-trust-card .q-label{margin-bottom:12px}
.qv .qv-trust-card ul{margin:0;padding-left:18px;font-size:13px;color:var(--qmut)}
.qv .qv-trust-card li{margin:7px 0}
@media(max-width:750px){.qv .qv-trust{grid-template-columns:1fr}}

/* FAQ */
.qv details{border-bottom:1px solid var(--qline);padding:18px 0;font-size:14px}
.qv details:first-of-type{border-top:1px solid var(--qline)}
.qv summary{cursor:pointer;font-weight:600}
.qv details p{color:var(--qmut);font-size:13px;margin-top:12px;max-width:680px}

/* Book */
.qv .qv-book{text-align:center;padding:65px 8%}
.qv .qv-book p{max-width:520px;margin:0 auto 25px;font-size:14px}
.qv .qv-book .q-action{margin:0 auto}

/* Overrides for pages that keep their own inline CSS (header/footer swap only) */
.qh-nav{position:relative;top:auto;border-bottom:1px solid var(--qink)}
.qh-footer{margin:0;border-top:1px solid #c8c9be}
body.qh-body{font-family:Archivo,Arial,sans-serif;background:var(--qp);color:var(--qink)}

/* One hero scale sitewide. Pages that keep inline CSS get it via the swap class on their hero h1. */
h1.qh-h1,.qh-hero-scale h1{font-family:Archivo,Arial,sans-serif!important;font-weight:900!important;font-size:clamp(35px,4.9vw,54px)!important;line-height:1.05!important;letter-spacing:-1.9px!important;max-width:18ch}