/* legacy-content.css — filtered live content styles for redesign pages (no header/footer/nav/hero). Prep only. */


/* ---- from style.css ---- */

*{box-sizing:border-box}
:root{--navy:#0B2A5B;--navy2:#071C3F;--blue:#1E88E5;--blue2:#0B6BC2;--green:#43A047;--green2:#2E7D32;--ink:#14213D;--soft:#EEF5FD;--soft2:#E6F3E8;--line:#C9D8EC;--shadow:0 10px 30px rgba(11,42,91,.12);--shadow2:0 18px 40px rgba(11,42,91,.22);--site-header-h:109px}
a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--navy)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
h1,h2,h3{color:var(--navy);line-height:1.2;margin:0 0 16px;font-weight:800}
h1{font-size:54px}
h2{font-size:40px}
h3{font-size:25px}
p{margin:0 0 18px}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
nav a{display:block;white-space:nowrap;padding:12px 12px;font-size:20px;font-weight:700;color:var(--navy);text-decoration:none;border-radius:8px;transition:background .2s,color .2s}
nav a:hover{background:var(--soft);color:var(--blue2)}
nav a[aria-current="page"]{color:#fff;background:var(--navy)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;font-size:20px;font-weight:800;border-radius:10px;text-decoration:none;border:3px solid var(--navy);text-align:center;cursor:pointer;font-family:inherit;line-height:1.2;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(11,42,91,.25)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--blue2);border-color:var(--blue2);color:#fff}
.btn.secondary{background:#fff;color:var(--navy)}
.btn.secondary:hover{background:var(--soft);color:var(--navy)}
.btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.eyebrow{display:inline-block;background:var(--green2);color:#fff;font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:22px}
.wave{position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:1;pointer-events:none}
.wave svg{display:block;width:100%;height:100%}
/* page heads */
.pagehead{position:relative;overflow:hidden;color:#fff;background:linear-gradient(115deg,#071C3F 0%,#0B2A5B 55%,#0B6BC2 100%)}
.pagehead::before{content:"";position:absolute;right:-140px;top:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(67,160,71,.55),rgba(67,160,71,0) 68%)}
.pagehead::after{content:"";position:absolute;left:38%;bottom:-260px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(30,136,229,.5),rgba(30,136,229,0) 68%)}
.pagehead .wrap{position:relative;z-index:2;padding-top:66px;padding-bottom:96px}
.pagehead h1{color:#fff;font-size:50px;margin-bottom:14px}
.pagehead h1::after{content:"";display:block;width:90px;height:6px;border-radius:3px;background:var(--green);margin-top:16px}
.pagehead p.lead{font-size:24px;line-height:1.55;max-width:880px;margin:0;color:#E3EEFB}
.pagehead .wave{height:56px}
.soon{display:inline-block;background:#fff;color:var(--green2);font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:999px;margin-bottom:16px}
/* sections */
section{padding:80px 0}
section.tight{padding:60px 0}
section.alt{background:var(--soft)}
section.tint{background:var(--soft2)}
section h2{position:relative;padding-bottom:18px;margin-bottom:26px}
section h2::after{content:"";position:absolute;left:0;bottom:0;width:80px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--blue))}
.lede{font-size:23px;max-width:880px}
.center{text-align:center}
.center>h2::after,.center .wrap>h2::after{left:50%;margin-left:-40px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.top{align-items:start}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{position:relative;border-radius:16px;padding:34px 30px 30px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--blue)}
.card.g::before{background:var(--green)}
.card.n::before{background:var(--navy)}
section.alt .card{box-shadow:0 8px 24px rgba(11,42,91,.10)}
.card h3{font-size:25px}
.card ul{margin:0 0 18px;padding-left:24px}
.card li{margin-bottom:8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.icard{display:flex;flex-direction:column}
.icard .btn{margin-top:auto;align-self:flex-start}
.icard p.push{margin-top:auto;margin-bottom:0}
.ico{width:68px;height:68px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;margin-bottom:20px;background:linear-gradient(135deg,var(--blue),var(--navy));box-shadow:0 8px 18px rgba(11,42,91,.25)}
.card.g .ico{background:linear-gradient(135deg,#66BB6A,var(--green2))}
.card.n .ico{background:linear-gradient(135deg,var(--navy),var(--blue2))}
.tag{display:inline-block;background:var(--soft2);border:2px solid #BFE0C2;color:#1B5E20;font-weight:800;font-size:17px;padding:4px 14px;border-radius:999px;margin-bottom:12px}
/* stats */
.stats{position:relative;z-index:5;margin-top:-92px;padding:0 0 12px;background:none}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:20px;box-shadow:0 22px 50px rgba(7,28,63,.28);overflow:hidden;border-bottom:8px solid var(--green)}
.stat{padding:30px 22px;border-right:1px solid var(--line);text-align:center}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:42px;line-height:1.1;color:var(--navy);font-weight:800;margin-bottom:8px}
.stat:nth-child(even) b{color:var(--blue2)}
.stat:nth-child(3) b{color:var(--green2)}
.stat span{display:block;font-size:19px;line-height:1.45}
/* flat class list */
.tgrid{column-count:3;column-gap:22px;margin-top:6px}
.tg{break-inside:avoid;-webkit-column-break-inside:avoid;display:block;background:#fff;border-radius:14px;border-left:8px solid var(--blue);box-shadow:0 6px 18px rgba(11,42,91,.10);padding:14px 18px 16px;margin:0 0 18px}
.tg.g{border-left-color:var(--green)}
.tg.n{border-left-color:var(--navy)}
.tg h3{font-size:22px;line-height:1.25;margin:0}
ul.inl{list-style:none;margin:8px 0 0;padding:0;font-size:19px;line-height:1.6}
ul.inl li{display:inline}
ul.inl li::after{content:"\00a0\2022\200B";color:var(--blue2);font-weight:800;margin-right:.35em}
ul.inl li:last-child::after{content:""}
.note{font-size:20px;margin-top:16px}
/* figures */
figure{margin:0}
figure img{display:block;width:100%;border:0;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
figcaption{font-size:19px;margin-top:12px;line-height:1.5}
.figwrap{margin-top:30px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pages6{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.pages6 figure a{display:block}
.pages6 figcaption{font-weight:700;color:var(--navy)}
.pages6 figcaption span{display:block;font-weight:400;color:var(--ink)}
/* steps */
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;counter-reset:s}
.steps li{position:relative;background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(11,42,91,.10);padding:20px 22px 20px 82px;counter-increment:s;min-height:96px}
.steps li::before{content:counter(s);position:absolute;left:20px;top:20px;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center}
.steps li b{display:block;color:var(--navy);font-size:22px;line-height:1.3;margin-bottom:2px}
.feat{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat li{background:#fff;border-radius:14px;border-left:8px solid var(--green);box-shadow:0 8px 24px rgba(11,42,91,.10);padding:18px 22px}
.feat li:nth-child(even){border-left-color:var(--blue)}
.feat li b{display:block;color:var(--navy);font-size:22px;line-height:1.3;margin-bottom:4px}
.manualtie{margin:26px 0 0;font-size:22px;max-width:960px;line-height:1.6}
/* band that links to the consulting site */
.consult{position:relative;overflow:hidden;background:linear-gradient(120deg,#1B5E20,#2E7D32 55%,#43A047);color:#fff;padding:64px 0}
.consult::after{content:"";position:absolute;right:-100px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 66%)}
.consult .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px}
.consult h2{color:#fff;margin-bottom:10px;padding-bottom:0}
.consult h2::after{display:none}
.consult p{font-size:23px;margin:0;max-width:720px}
.consult .btn{background:#fff;color:var(--green2);border-color:#fff;white-space:nowrap}
.consult .btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* cta */
.cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#071C3F,#0B2A5B 55%,#0B6BC2);color:#fff;text-align:center;padding:76px 0}
.cta::before{content:"";position:absolute;left:-120px;top:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(67,160,71,.5),rgba(67,160,71,0) 68%)}
.cta .wrap{position:relative}
.cta h2{color:#fff;font-size:42px;padding-bottom:0;margin-bottom:14px}
.cta h2::after{display:none}
.cta p{font-size:23px}
.cta a{color:#fff;font-weight:700}
.cta .btns{justify-content:center}
.cta .btn.primary{background:var(--green2);border-color:var(--green2);color:#fff}
.cta .btn.primary:hover{background:#fff;color:var(--navy);border-color:#fff}
.cta .btn.secondary{background:transparent;color:#fff;border-color:#fff}
.cta .btn.secondary:hover{background:#fff;color:var(--navy)}
/* instructor */
.biogrid{display:grid;grid-template-columns:.8fr 1.6fr;gap:44px;align-items:start;margin-top:18px}
.plate{background:linear-gradient(150deg,var(--navy2),var(--navy) 60%,var(--blue2));color:#fff;border-radius:20px;padding:36px 30px;box-shadow:var(--shadow2);position:sticky;top:150px}
.plate h3{color:#fff;font-size:30px;margin-bottom:6px}
.plate .role{color:#9ED0FF;font-weight:700;font-size:21px;margin-bottom:0}
.plate ul{list-style:none;padding:0;margin:20px 0 26px}
.plate li{padding:10px 0;border-top:1px solid rgba(255,255,255,.25);font-size:19px;line-height:1.45}
.plate .btn.primary{background:var(--green2);border-color:var(--green2);width:100%}
.plate .btn.primary:hover{background:#fff;color:var(--navy);border-color:#fff}
.plate .headshot{display:block;width:100%;max-width:340px;height:auto;margin:0 auto 22px;border-radius:16px;border:4px solid rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.biotext p{font-size:21px;line-height:1.75}
.creds{list-style:none;margin:0;padding:0}
.creds li{padding:12px 0;border-bottom:1px solid var(--line);font-size:21px}
.creds li:last-child{border-bottom:0}
/* contact + forms */
.contact .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.details{background:linear-gradient(150deg,var(--navy2),var(--navy) 60%,var(--blue2));color:#fff;border-radius:20px;padding:40px 36px;box-shadow:var(--shadow2)}
.details h2{color:#fff}
.details p{font-size:22px;margin-bottom:16px}
.details strong{color:#9ED0FF}
.details a{color:#fff;font-weight:700}
.details address{font-size:22px;line-height:1.7;margin-bottom:20px}
.details .btn.primary{background:var(--green2);border-color:var(--green2)}
.details .btn.primary:hover{background:#fff;color:var(--navy);border-color:#fff}
address{font-style:normal}
form{background:#fff;border-radius:20px;padding:36px;box-shadow:var(--shadow);border-top:8px solid var(--green)}
form h2{padding-bottom:16px;font-size:32px}
label{display:block;font-weight:700;color:var(--navy);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;border:2px solid #5C6F8F;border-radius:10px;padding:12px 14px;margin-bottom:20px;background:#fff;min-height:56px;font-size:20px;font-family:inherit;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--blue2)}
textarea{min-height:170px;resize:vertical}
form .note{font-size:19px;margin-top:16px;margin-bottom:0}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formerr{display:none;margin:0 0 22px;padding:16px 18px;border-radius:12px;background:#FFF4E5;border-left:8px solid #B45309;color:#5A2A00;font-size:20px;line-height:1.5}
.formerr a{color:#5A2A00;font-weight:800}
.formerr:target,.formerr.show{display:block}
.thanks h2{margin-top:0}
.notify{max-width:760px}
.btn.foot{background:var(--green2);color:#fff;border-color:var(--green2);font-size:19px;padding:14px 22px}
.btn.foot:hover{background:#fff;color:var(--navy);border-color:#fff;text-decoration:none}
/* 404 and thanks */
.nf .btns{margin-top:20px}
/* tablets */
@media(max-width:1000px){
 .tgrid{column-count:2}
 .cards{grid-template-columns:1fr 1fr}
 .stats .grid{grid-template-columns:1fr 1fr}
 .stat:nth-child(2){border-right:0}
 .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .pages6{grid-template-columns:1fr 1fr}
 .feat{grid-template-columns:1fr 1fr}
 footer.site .cols{grid-template-columns:1fr 1fr}
 .biogrid{grid-template-columns:1fr}
 .plate{position:static}
}
@media(max-width:1100px){
nav ul{flex-direction:column;align-items:stretch;gap:4px;padding:10px 0 14px}
nav a{font-size:21px;padding:14px 16px;white-space:normal}
}

@media(max-width:900px){
.split,.contact .wrap,.grid2{grid-template-columns:1fr}
.consult .wrap{flex-direction:column;align-items:flex-start}
.steps{grid-template-columns:1fr}
}

@media(max-width:640px){
:root{--site-header-h:77px}
.wrap{padding:0 20px}
h1,.pagehead h1{font-size:36px}
h2,.cta h2{font-size:30px}
h3{font-size:23px}
section,.cta,.consult{padding:52px 0}
section.tight{padding:44px 0}
.tgrid{column-count:1}
.stats{margin-top:-70px}
.stat b{font-size:34px}
.stat span{font-size:18px}
.stat{padding:22px 12px}
.btn{width:100%}
.btns{flex-direction:column}
form,.details{padding:26px 20px}
.steps li{padding-left:74px}
}

@media(prefers-reduced-motion:reduce){
.btn,nav a{transition:none}
.btn:hover{transform:none}
}

@media print{
a{color:#000}
}

/* v2: online class pages, register area, draft notes */
.buybox{display:flex;align-items:center;justify-content:space-between;gap:40px;background:#fff;border-radius:20px;padding:36px;box-shadow:var(--shadow);border-top:8px solid var(--green)}
.buybox h2{margin-bottom:10px}
.buybox p{margin:0;font-size:22px}
.btn[disabled],.btn[disabled]:hover{background:#5C6F8F;border-color:#5C6F8F;color:#fff;cursor:not-allowed;transform:none;box-shadow:none;white-space:nowrap}
@media(max-width:900px){
.buybox{flex-direction:column;align-items:flex-start}
.buybox .btn{width:100%}
}

.icard .tag{display:inline-block;align-self:flex-start;width:auto;margin-bottom:12px}
.prose{max-width:860px}
.prose h2{margin-top:30px}
.prose p,.prose li{font-size:21px}
/* class diagrams */
.figs{display:grid;gap:40px;max-width:980px;margin:24px auto 0}
.figs figure a{display:block}
.figs figcaption{font-size:20px}
.figs figcaption a{white-space:nowrap}
/* quiz */
.quiz form{margin-top:20px;display:grid;gap:22px}
.quiz fieldset.qq{border:2px solid #C9D6EA;border-radius:14px;padding:18px 22px;background:#fff;margin:0}
.quiz fieldset.qq legend{font-weight:800;color:var(--navy);font-size:22px;padding:0 8px;line-height:1.4}
.quiz fieldset.qq.miss{border-color:#B45309}
.quiz fieldset.qq.good{border-color:var(--green);background:#F0FAF4}
.quiz fieldset.qq.bad{border-color:#B42318;background:#FFF5F4}
.quiz label.opt{display:flex;gap:12px;align-items:flex-start;padding:10px 6px;font-size:21px;line-height:1.45;cursor:pointer}
.quiz label.opt input{width:24px;height:24px;margin-top:3px;flex:none}
.quiz .fb p{margin:12px 0 0;font-size:20px}
#quizresult.pass,#quizresult.fail,#quizresult.warn{border-radius:14px;padding:18px 24px;margin:18px 0;font-size:21px}
#quizresult.pass{background:#E6F6EC;border:3px solid var(--green)}
#quizresult.fail{background:#FFF1EF;border:3px solid #B42318}
#quizresult.warn{background:#FFF4E5;border:3px solid #B45309}
#quizresult h2{margin:0 0 6px}
#quizresult .btns{margin-top:14px}
/* in-house pitch band */
.inhouse{background:linear-gradient(115deg,#071C3F 0%,#0B2A5B 55%,#0B6BC2 100%);color:#fff;padding:56px 0;border-top:6px solid var(--green);border-bottom:6px solid var(--green)}
.inhouse h2{color:#fff;font-size:40px;margin-bottom:12px}
.inhouse h2::after{display:none}
.inhouse .lede{color:#E3EEFB;font-size:24px;max-width:980px}
.inhouse .badge{display:inline-block;background:var(--green2);color:#fff;font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:18px}
.inhouse .perks{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0}
.inhouse .perk{background:#fff;color:var(--ink);border-radius:14px;padding:20px 22px;border-top:8px solid var(--green);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.inhouse .perk:nth-child(2){border-top-color:var(--blue)}
.inhouse .perk:nth-child(3){border-top-color:#F2B134}
.inhouse .perk h3{font-size:23px;margin-bottom:8px;color:var(--navy)}
.inhouse .perk p{margin:0;font-size:20px;line-height:1.5}
.inhouse .btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.inhouse .btn.go{background:var(--green2);border-color:#fff;color:#fff}
.inhouse .btn.go:hover{background:#fff;color:var(--navy)}
.inhouse .btn.sec{background:transparent;border-color:#fff;color:#fff}
.inhouse .btn.sec:hover{background:#fff;color:var(--navy)}
.inhouse .fine{color:#CFE0F5;font-size:19px;margin:18px 0 0}
.inhouse .fine a{color:#fff}
.inhouse.compact{padding:40px 0}
.inhouse.compact h2{font-size:34px}
.inhouse.compact .perks{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){
.inhouse .perks{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
.inhouse h2{font-size:30px}
.inhouse .lede{font-size:21px}
.inhouse .perks,.inhouse.compact .perks{grid-template-columns:1fr}
.inhouse .btn{width:100%}
}


/* ---- from v4.css ---- */

/* v4 additions: operator tools, White River plant page, learning paths, module blocks */
.modgrid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;counter-reset:mod}
.modgrid li{counter-increment:mod;background:#fff;border:1px solid var(--line);border-top:5px solid var(--blue);border-radius:14px;padding:18px 20px 16px;box-shadow:0 4px 14px rgba(11,42,91,.07);font-size:18px;line-height:1.55}
.modgrid li:nth-child(3n+2){border-top-color:var(--green)}
.modgrid li:nth-child(3n){border-top-color:var(--navy)}
.modgrid li::before{content:"Module " counter(mod);display:block;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);margin-bottom:6px}
.modgrid li b{display:block;color:var(--navy);font-size:20px;line-height:1.3;margin-bottom:6px}
.callout{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--soft2);border:2px solid var(--green);border-radius:14px;padding:18px 22px;margin:22px 0 0}
.callout p{margin:0;max-width:720px}
.callout .btn{padding:12px 22px;font-size:18px}
.ovcdr{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:ov}
.ovcdr li{counter-increment:ov;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;font-size:17px;line-height:1.5;position:relative}
.ovcdr li b{display:block;font-size:21px;color:var(--navy);margin-bottom:4px}
.ovcdr li b::before{content:counter(ov);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--green2);color:#fff;font-size:16px;margin-right:8px;vertical-align:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:8px 0 0}
.kpi{background:#fff;border:1px solid var(--line);border-left:6px solid var(--blue);border-radius:12px;padding:12px 16px;line-height:1.3}
.kpi b{display:block;font-size:28px;color:var(--navy)}
.kpi span{font-size:16px;color:#3b4a66}
.fictional{display:inline-block;background:#FEF3C7;border:2px solid #B45309;color:#7C2D12;border-radius:999px;padding:4px 14px;font-size:16px;font-weight:800;margin:0 0 10px}
.dtable{width:100%;border-collapse:collapse;font-size:17px;line-height:1.4;background:#fff}
.dtable th,.dtable td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.dtable thead th{background:var(--navy);color:#fff}
.dtable tbody th{background:var(--soft);color:var(--navy)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 18px}
.unitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.unitgrid .card h3{font-size:22px}
.unitgrid .card ul{font-size:17px;line-height:1.5;padding-left:20px;margin:0}
.event{border-left:5px solid #B45309;background:#FFFBEB;padding:12px 16px;border-radius:8px;margin:0 0 12px;font-size:17px;line-height:1.5}
.event b{color:#7C2D12}
/* figures with gifs */
.figs.two{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.fig1{margin:14px 0 0}
.fig1 img{border:1px solid var(--line);border-radius:12px;background:#fff}
.fig1 figcaption{font-size:16px;line-height:1.5;color:#3b4a66;margin-top:6px}
/* learning paths */
.paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.path{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.path .who{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green2);margin:0 0 6px}
.path h3{margin-bottom:8px}
.path ol{margin:6px 0 12px;padding-left:26px;font-size:18px;line-height:1.5}
.path ol li{margin-bottom:6px}
.path .tot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;font-size:17px;color:#3b4a66}
/* tools */
.toolnav{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.toolnav a{background:#fff;border:2px solid var(--blue);border-radius:999px;padding:8px 18px;font-weight:700;text-decoration:none;font-size:18px}
.toolnav a:hover{background:var(--soft)}
.tool{background:#fff;border:1px solid var(--line);border-top:6px solid var(--blue);border-radius:16px;padding:24px;box-shadow:var(--shadow);margin:0 0 30px}
.tool.g{border-top-color:var(--green)}
.tool h2{font-size:32px}
.tool h3{font-size:22px;margin-top:18px}
form.calc fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px 6px;margin:0 0 16px;min-width:0}
form.calc legend{font-weight:800;color:var(--navy);padding:0 6px;font-size:18px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 16px}
form.calc label{display:block;font-size:16px;font-weight:700;color:var(--navy);line-height:1.3;margin:0 0 10px}
form.calc label small{display:block;font-weight:400;color:#3b4a66;font-size:14px}
form.calc input,form.calc select{width:100%;margin-top:4px;padding:8px 10px;font-size:18px;border:2px solid var(--line);border-radius:8px;font-family:inherit;background:#FFFDF2}
form.calc select{background:#fff}
.ctable{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
.ctable th,.ctable td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.ctable thead th{background:var(--soft);color:var(--navy)}
.ctable input{margin:0!important;min-width:70px}
.ctable td.out{background:#F4F7FB;font-weight:700}
.exbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 16px}
.exbtns .lbl{font-weight:800;color:var(--green2);font-size:17px}
.exbtns button{font:inherit;font-size:16px;font-weight:700;background:var(--soft2);border:2px solid var(--green);color:var(--navy);border-radius:999px;padding:6px 14px;cursor:pointer}
.exbtns button:hover{background:#fff}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:8px 0 14px}
.results div{background:var(--soft);border-radius:10px;padding:10px 12px;line-height:1.3}
.results span{display:block;font-size:14px;color:#3b4a66;font-weight:700}
.results output,.results b{display:block;font-size:24px;font-weight:800;color:var(--navy)}
.results small{font-size:13px;color:#3b4a66}
.stale{opacity:.45}
.status{border-radius:10px;padding:12px 16px;margin:10px 0;font-size:18px;line-height:1.5;border:2px solid}
.status.small{font-size:16px;padding:8px 12px}
.status.ok{background:#E8F5E9;border-color:#2E7D32;color:#1B5E20}
.status.warn{background:#FFF7E0;border-color:#B45309;color:#78350F}
.status.bad{background:#FDECEC;border-color:#B91C1C;color:#7F1D1D}
td.ok{background:#E8F5E9;color:#1B5E20;font-weight:700}
td.warn{background:#FFF7E0;color:#78350F;font-weight:700}
td.bad{background:#FDECEC;color:#7F1D1D;font-weight:700}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:0}
.errbox{background:#FDECEC;border:2px solid #B91C1C;color:#7F1D1D;border-radius:10px;padding:10px 14px;font-weight:700;font-size:17px}
.plotwrap{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px;margin:6px 0}
.plotwrap canvas{display:block;max-width:100%}
.legend{font-size:15px;color:#3b4a66;line-height:1.5}
pre.summary{white-space:pre-wrap;background:#F4F7FB;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;line-height:1.5}
.cite{font-size:16px;line-height:1.55;color:#3b4a66}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:900px){
.ovcdr{grid-template-columns:1fr 1fr}
.figs.two{grid-template-columns:1fr}
}

@media(max-width:640px){
.ovcdr{grid-template-columns:1fr}
.tool{padding:16px 14px}
.tool h2{font-size:26px}
.modgrid,.paths,.unitgrid{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr 1fr}
.results{grid-template-columns:1fr 1fr}
.results output,.results b{font-size:20px}
.kpis{grid-template-columns:1fr 1fr}
.kpi b{font-size:22px}
.callout .btn{width:100%}
}

@media(max-width:380px){
.fgrid,.results{grid-template-columns:1fr}
}

@media print{
.tool{box-shadow:none;border:1px solid #999;break-inside:avoid}
}

/* v4b: eight menu items. Wide screens keep one row; mid-size desktops put the menu on its own single line under the brand. */
@media(min-width:1101px) and (max-width:1719px){
 header.site .wrap{flex-wrap:wrap;row-gap:0;padding-top:6px;padding-bottom:2px}
 header.site .brand img{width:60px}
 header.site .brand .nm{font-size:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
 header.site .brand .nm small{font-size:16px;margin-top:0}
 nav#primary-nav{flex-basis:100%}
 nav ul{justify-content:space-between}
 nav a{padding:9px 12px}
}
@media(min-width:1101px) and (max-width:1239px){
nav a{font-size:18px;padding:9px 8px}
}

/* standout (Oct 27, Brad): Online training is the big button in the menu; CEU callouts in red; Academy tagline */
nav a.nav-cta{background:var(--green2);color:#fff;border:2px solid var(--green2);border-radius:999px;padding:11px 26px;font-size:22px;font-weight:800;letter-spacing:.01em;box-shadow:0 4px 14px rgba(46,125,50,.38)}
nav a.nav-cta:hover{background:var(--blue2);border-color:var(--blue2);color:#fff}
nav a.nav-cta[aria-current="page"]{background:var(--green2);color:#fff;border-color:#fff;box-shadow:0 0 0 3px var(--navy),0 4px 14px rgba(46,125,50,.38)}
nav a.nav-cta:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.ceu-red{color:#C8102E;font-weight:800}
.tagline{display:block;color:#fff;font-size:30px;font-weight:800;line-height:1.35;margin:0 0 10px;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.tagline .ceu-red{text-shadow:none}
.tagline-q{display:block;font-size:18px;line-height:1.4;margin:0 0 22px}
.tagline-q .ceu-red{font-size:18px;padding:2px 10px}
.pagehead .tagline{margin-top:4px}
.pagehead .tagline-q{margin-bottom:14px}
@media(min-width:1101px) and (max-width:1719px){
nav a.nav-cta{font-size:21px;padding:8px 22px}
}

@media(min-width:1101px) and (max-width:1239px){
nav a.nav-cta{font-size:19px;padding:8px 14px}
}

@media(max-width:1100px){
nav a.nav-cta{text-align:center;font-size:23px;padding:14px 20px;margin:4px 0}
}

@media(max-width:640px){
.tagline{font-size:24px}
.tagline-q,.tagline-q .ceu-red{font-size:17px}
}

@media print{
nav a.nav-cta{box-shadow:none}
.tagline{color:#000;text-shadow:none}
}

.ceubox{background:#fff;border:2px solid var(--line);border-left:8px solid #C8102E;border-radius:14px;padding:22px 24px;box-shadow:var(--shadow);max-width:900px}
.ceubox label{display:block;font-weight:800;color:var(--navy);font-size:20px;margin:0 0 8px}
.ceubox select{width:100%;max-width:460px;font:inherit;font-size:20px;padding:12px 14px;border:2px solid var(--navy);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.ceu-result:empty{display:none}
.ceu-result{margin-top:18px}
.ceu-result .ceu-none,.ceu-result .ceu-more{font-size:20px;line-height:1.55;margin:0 0 16px}
.ceu-result h3.ceu-red{font-size:23px;margin:0 0 10px}
.ceu-list{list-style:none;margin:0 0 16px;padding:0}
.ceu-list li{border-left:5px solid #C8102E;background:#FDF2F4;border-radius:8px;padding:10px 14px;margin:0 0 10px;line-height:1.45}
.ceu-list li a{font-weight:800;display:block}
.ceu-list li span{display:block;font-size:18px;color:var(--ink)}
@media(max-width:640px){
.ceubox{padding:18px 16px}
.ceubox select{max-width:none}
.ceu-result .btn{width:100%}
}

/* manuals (Oct 27): technical manuals page cards */
.tmcard{display:flex;flex-direction:column}
.tmcard .tag{align-self:flex-start}
.tmcard .rel{font-size:18px;margin:0 0 10px}
.tmcard p.push{margin-top:auto;margin-bottom:0}
.tmcard .tmnotify{font-weight:700}
/* manuals (Oct 27): nine menu items. On every desktop width the Online training button sits on the brand row (top right),
   and the other eight items share one row under the brand. The mobile menu (1100 px and below) is unchanged. */
@media(min-width:1101px){
 header.site .wrap{position:relative;flex-wrap:wrap;row-gap:0;padding-top:6px;padding-bottom:2px}
 header.site .brand img{width:60px}
 header.site .brand .nm{font-size:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
 header.site .brand .nm small{font-size:16px;margin-top:0}
 nav#primary-nav{flex-basis:100%}
 nav ul{justify-content:space-between}
 nav a{padding:9px 12px}
 nav li.nav-cta-li{position:absolute;top:4px;right:32px}
 nav a.nav-cta{font-size:22px;padding:11px 26px}
}
@media(min-width:1101px) and (max-width:1239px){
nav a{font-size:18px;padding:9px 7px}
nav a.nav-cta{font-size:22px;padding:11px 26px}
}

@media(min-width:1240px) and (max-width:1719px){
nav a{padding:9px 10px}
nav a.nav-cta{font-size:22px;padding:11px 26px}
}

/* nosub (Oct 27, Brad): no brand subtitle in the header. The title is a little larger on desktop so the logo row balances the Online training button. */
@media(min-width:1101px){header.site .brand{min-height:63px}header.site .brand .nm{font-size:30px;align-items:center}}
/* testimonials (Oct 27, Brad): request box on welcome/certificate.php, never printed */
.tmbox{margin-top:30px;max-width:900px;background:#F0FAF4;border:2px solid #BFE0C2;border-left:8px solid var(--green2);border-radius:14px;padding:24px 26px}
.tmbox h2{margin-top:0;font-size:28px}
.tmbox form{background:none;box-shadow:none;border-top:0;padding:0;margin-top:10px}
.tmbox textarea{min-height:150px}
.tmbox .tmhint{font-size:17px;color:#33415C;margin:-12px 0 18px}
.tmbox .tmrow{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.tmbox fieldset.tmshow{border:2px solid #C9D6EA;border-radius:12px;padding:12px 18px;margin:0 0 18px;background:#fff}
.tmbox fieldset.tmshow legend{font-weight:800;color:var(--navy);padding:0 6px}
.tmbox label.opt{display:flex;gap:10px;align-items:flex-start;font-weight:600;margin:6px 0}
.tmbox label.opt input{width:22px;height:22px;margin-top:3px;flex:none}
.tmbox label.tmperm{font-weight:800;margin:4px 0 16px}
@media(max-width:700px){
.tmbox{padding:18px 16px}
.tmbox .tmrow{grid-template-columns:1fr}
.tmbox h2{font-size:24px}
}

@media print{
.tmbox,#testimonial{display:none!important}
}

/* teams (Oct 27, Brad): live virtual training over Microsoft Teams */
.teams .tag{margin-bottom:10px}
.teams h2{max-width:980px}
.teamslist{list-style:none;margin:20px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.teamslist li{background:#fff;border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);border-top:6px solid var(--blue)}
.teamslist li b{display:block;color:var(--navy);font-size:21px;margin-bottom:6px}
.teamsstrip{padding:18px 0;background:var(--soft);border-bottom:1px solid #D6E2F2}
.teamsstrip p{margin:0;font-size:19px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.teamsstrip .btn{padding:10px 20px;font-size:18px}
@media(max-width:900px){
.teamslist{grid-template-columns:1fr}
}

/* Oct 29 2026: approved header menu (My classes, About, Contact). Slightly tighter gaps between menu links (not the Online training button) so the menu stays on one line at 1101-1359px. */
@media(min-width:1101px) and (max-width:1239px){header.site nav#primary-nav a:not(.nav-cta){padding:9px 5px}}

/* ---- from p1.css ---- */

/* nav: seven items plus the Online training button; items wrap instead of overflowing */
@media(min-width:1101px){nav#primary-nav ul{flex-wrap:wrap;justify-content:flex-start;gap:2px 6px}nav a{padding:9px 14px}}
@media(min-width:1101px) and (max-width:1239px){
nav a{font-size:18px;padding:9px 9px}
}

/* path cards (home and learning paths) */
.pathgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.pathcard{display:flex;flex-direction:column;background:#fff;border-radius:16px;border-top:8px solid var(--blue);box-shadow:var(--shadow);padding:22px 24px;text-decoration:none;color:var(--ink)}
.pathcard:nth-child(3n+2){border-top-color:var(--green)}
.pathcard:nth-child(3n){border-top-color:var(--navy)}
a.pathcard:hover{box-shadow:var(--shadow2);color:var(--ink)}
.pathcard h3{font-size:23px;margin:0 0 8px}
.pathcard p{font-size:18px;line-height:1.5;margin:0 0 12px}
.pathcard .count{margin-top:auto;font-weight:800;color:var(--green2);font-size:17px}
.pathcard .count.later{color:#5C6F8F}
@media(max-width:1000px){
.pathgrid{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
.pathgrid{grid-template-columns:1fr}
}

/* instructor credibility block */
.cred{font-size:26px;line-height:1.4;font-weight:800;color:var(--navy);border-left:8px solid var(--green);padding:4px 0 4px 18px;margin:0 0 20px}
.voice{font-size:21px;font-style:italic;color:#33415C}
@media(max-width:640px){
.cred{font-size:21px}
}

/* catalog by learning path */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px;padding:0;list-style:none}
.jump a{display:inline-block;border:2px solid var(--navy);border-radius:999px;padding:6px 16px;font-size:17px;font-weight:700;text-decoration:none;color:var(--navy);background:#fff}
.jump a:hover{background:var(--navy);color:#fff}
.pathsec{margin-top:44px;padding:6px 0 0}
.pathsec>h2{font-size:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pathsec>h2 .n{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border-radius:50%;background:var(--green2);color:#fff;font-size:22px}
.pathsec .also{font-size:19px}
.coming{background:var(--soft);border:2px dashed var(--line);border-radius:14px;padding:14px 18px;margin:14px 0 0}
.coming h3{font-size:19px;margin:0 0 6px;color:#33415C;text-transform:uppercase;letter-spacing:.05em}
.coming ul{margin:0}
.coming p{margin:0;font-size:18px}
.comingpaths{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
.comingpaths .coming{margin:0}
.comingpaths .coming h2{font-size:26px;margin:0 0 8px}
@media(max-width:900px){
.comingpaths{grid-template-columns:1fr}
}

.pill{display:inline-block;font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 12px;vertical-align:middle}
.pill.live{background:var(--green2);color:#fff}
.pill.soon{background:#E3E8F0;color:#33415C}
/* certification prep */
.states{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:22px 0 0;padding:0;list-style:none}
.states li{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;border-top:6px solid #B8C4D6}
.states li.live{border-top-color:var(--green2)}
.states li h3{font-size:23px;margin:0 0 6px}
.states li p{font-size:17px;line-height:1.45;margin:6px 0 0}
@media(max-width:1000px){
.states{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:640px){
.states{grid-template-columns:1fr 1fr}
}

.prep{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:24px 26px;margin-top:22px;border-left:8px solid var(--green2)}
/* toolbox index */
.tbx-cat{margin-top:38px}
.tbx-cat h2{font-size:32px}
.tgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-link{display:block;background:#fff;border:1px solid var(--line);border-left:6px solid var(--blue);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:0 4px 14px rgba(11,42,91,.08)}
.tool-link:hover{border-color:var(--blue);color:var(--ink);box-shadow:0 8px 20px rgba(11,42,91,.16)}
.tool-link b{display:block;color:var(--navy);font-size:20px;line-height:1.3;margin-bottom:4px}
.tool-link span{display:block;font-size:16px;line-height:1.45;color:#33415C}
.tbx-cat:nth-of-type(even) .tool-link{border-left-color:var(--green)}
@media(max-width:1000px){
.tgrid3{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
.tgrid3{grid-template-columns:1fr}
.tbx-cat h2{font-size:26px}
}

.filterbox{max-width:620px;margin:18px 0 0}
.filterbox label{display:block;font-weight:700;font-size:18px}
.filterbox input{width:100%;font:inherit;font-size:19px;padding:10px 14px;border:2px solid var(--line);border-radius:10px}
.hidden{display:none!important}
.srcnote{font-size:17px;color:#33415C}
.crumbs{font-size:17px;color:#CFE0F5;margin:0 0 10px}
.crumbs a{color:#fff}
/* breadcrumbs on toolbox pages: plain inline links, not nav buttons */
.pagehead nav.crumbs a{display:inline;padding:0;font-size:17px;font-weight:600;color:#fff;text-decoration:underline;border-radius:0;background:none;white-space:normal}
.pagehead nav.crumbs a:hover{background:none;color:#CFE0F5}
/* home stats: three equal boxes */
.stats.three .grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){
.stats.three .grid{grid-template-columns:repeat(3,1fr)}
.stats.three .stat{border-right:1px solid var(--line);border-bottom:0}
.stats.three .stat:last-child{border-right:0}
}

@media(max-width:640px){
.stats.three .grid{grid-template-columns:1fr}
.stats.three .stat{border-right:0;border-bottom:1px solid var(--line)}
.stats.three .stat:last-child{border-bottom:0}
}

/* classes: Wastewater / Drinking Water switch */
.viewswitch{display:inline-flex;margin:18px 0 6px;border:2px solid var(--navy);border-radius:999px;overflow:hidden;background:#fff}
.viewswitch[hidden]{display:none}
.viewswitch button{font:inherit;font-size:20px;font-weight:700;padding:12px 26px;border:0;background:#fff;color:var(--navy);cursor:pointer;min-height:48px}
.viewswitch button+button{border-left:2px solid var(--navy)}
.viewswitch button[aria-pressed="true"]{background:var(--navy);color:#fff}
.viewswitch button:focus-visible{outline:3px solid var(--green);outline-offset:-5px}
.viewgroup[hidden]{display:none}
.viewhead{margin-top:26px}
.js-views .viewhead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dwboth{margin-top:22px}
.dwboth h3{margin-bottom:6px}
@media(max-width:640px){
.viewswitch{display:flex;width:100%}
.viewswitch[hidden]{display:none}
.viewswitch button{flex:1;font-size:18px;padding:12px 10px}
}

.herocta{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--green2);color:#fff;border:3px solid #fff;border-radius:22px;padding:20px 38px;margin:6px 0 22px;text-decoration:none;box-shadow:0 14px 34px rgba(4,18,43,.55),0 0 0 6px rgba(46,125,50,.28);transition:transform .15s,background .15s}
.herocta .big{font-size:36px;font-weight:800;line-height:1.1;letter-spacing:.01em;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.herocta .small{font-size:18px;font-weight:600;line-height:1.35;margin-top:6px;color:#E6F3E8}
.herocta:hover,.herocta:focus{background:#256B29;color:#fff;text-decoration:none;transform:translateY(-2px)}
.herocta:focus-visible{outline:4px solid #9ED0FF;outline-offset:4px}
@media(min-width:1200px){
.herocta{position:absolute;top:22px;right:32px;margin:0;padding:22px 34px;max-width:420px;white-space:normal}
.herocta .big{font-size:42px}
.herocta .small{white-space:normal}
}

@media(max-width:640px){
.herocta{display:flex;width:100%;box-sizing:border-box;padding:16px 16px;margin:4px 0 18px;border-radius:18px}
.herocta .big{font-size:30px}
.herocta .small{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
.herocta{transition:none}
.herocta:hover{transform:none}
}


/* ---- from paths.css ---- */

/* Learning paths, state cert-prep and math drills. Uses the site color variables from style.css. */
.lp-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start}
.lp-side{position:sticky;top:110px}
.lp-side .prep{margin-top:0}
.lp-side h2{font-size:24px;margin:0 0 10px}
.lp-glance{list-style:none;padding:0;margin:0 0 12px}
.lp-glance li{padding:6px 0;border-bottom:1px solid var(--line);font-size:17px}
.lp-glance b{color:var(--navy);font-size:22px;margin-right:4px}
.lp-steps{list-style:none;padding:0;margin:18px 0 0;counter-reset:none}
.lp-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;position:relative;padding:0 0 18px}
.lp-step:before{content:"";position:absolute;left:23px;top:46px;bottom:0;width:2px;background:var(--line)}
.lp-step:last-child:before{display:none}
.lp-n{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;background:var(--navy);color:#fff}
.lp-step.tool .lp-n{background:var(--blue2)}
.lp-step.practice .lp-n{background:var(--green2)}
.lp-step>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:0 4px 14px rgba(11,42,91,.06)}
.lp-step h3{font-size:21px;margin:4px 0 4px}
.lp-step p{margin:0;font-size:17px;line-height:1.5}
.lp-step .lp-meta{color:#33415C;font-size:15px;margin-top:4px}
.lp-badge{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);background:var(--soft);border-radius:999px;padding:2px 10px;margin:0}
.lp-step.tool .lp-badge{color:var(--blue2)}
.lp-step.practice .lp-badge{color:var(--green2);background:var(--soft2)}
.sp-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.sp-tier{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;border-top:6px solid var(--blue)}
.sp-tier:nth-child(2){border-top-color:var(--green)}
.sp-tier:nth-child(3){border-top-color:var(--navy)}
.sp-tier h3{font-size:22px;margin:0 0 10px}
.sp-tier ul{margin:6px 0 12px;padding-left:20px}
.sp-tier li{font-size:17px;line-height:1.45;margin:3px 0}
.sp-tier small{color:#33415C}
.dr-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:22px 24px;border-top:8px solid var(--blue)}
.dr-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.dr-top label{font-weight:800}
.dr-top select{font:inherit;font-size:17px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;max-width:100%}
.dr-score{margin-left:auto;font-weight:800;color:var(--green2)}
.dr-q{font-size:21px;line-height:1.5;margin:10px 0 14px;color:var(--ink)}
.dr-form input{font:inherit;font-size:20px;padding:8px 12px;width:200px;max-width:60%;border:2px solid var(--line);border-radius:10px}
.dr-unit{font-weight:700;color:#33415C}
.dr-form .btns{margin-top:14px}
.dr-fb{margin-top:16px}
.dr-fb.good,.dr-fb.bad,.dr-fb.warn{border-radius:12px;padding:12px 16px}
.dr-fb.good{background:var(--soft2);border-left:6px solid var(--green2)}
.dr-fb.bad{background:#FFF4E5;border-left:6px solid #B26A00}
.dr-fb.warn{background:var(--soft);border-left:6px solid var(--blue)}
.dr-res{font-weight:800;margin:0 0 6px}
.dr-steps{margin:0 0 8px;padding-left:22px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15.5px;overflow-wrap:anywhere}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:980px){
.lp-wrap{grid-template-columns:1fr}
.lp-side{position:static}
.sp-tiers{grid-template-columns:1fr}
}

@media (max-width:560px){
.lp-step{grid-template-columns:38px minmax(0,1fr);gap:10px}
.lp-n{width:36px;height:36px;font-size:16px}
.lp-step:before{left:18px;top:36px}
.dr-score{margin-left:0;width:100%}
}


/* ---- from preview.css ---- */

/* Wastewater Academy: "Look inside" sample pages on class pages (Oct 28, 2026) */
section.look-inside{background:#F4FAF5;border-top:1px solid #C9D8EC;border-bottom:1px solid #C9D8EC}
.look-inside .li-intro{margin:0 0 24px;max-width:880px}
.li-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px;margin:0;padding:0}
.li-page{margin:0;background:#fff;border:1px solid #C9D8EC;border-radius:12px;padding:12px;box-shadow:0 8px 24px rgba(11,42,91,.10);display:flex;flex-direction:column}
.li-page a{display:block;line-height:0;border-radius:6px;overflow:hidden;border:1px solid #E1E8F2}
.li-page img{display:block;width:100%;height:auto;transition:transform .2s ease}
.li-page a:hover img,.li-page a:focus-visible img{transform:scale(1.03)}
.li-page figcaption{font-size:17px;line-height:1.45;margin-top:10px;color:#14213D}
.li-page figcaption a{display:inline;line-height:inherit;border:0;overflow:visible;font-weight:700}
.look-inside .li-note{font-size:17px;margin:22px 0 0;color:#14213D}
@media (max-width:640px){
.li-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.li-page{padding:8px;border-radius:10px}
.li-page figcaption{font-size:15px}
}

@media (max-width:360px){
.li-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
.li-page img{transition:none}
}

.pagehead .wave{display:none!important;height:0;overflow:hidden}