
:root{
  --navy:#0b2f69;
  --navy2:#123f82;
  --red:#1f5fc4;
  --teal:#0f9f9d;
  --teal-dark:#0b7775;
  --purple:#5b2ca3;
  --purple-dark:#43207c;
  --blue2:#1e63d6;
  --orange:#f1761a;
  --ink:#172033;
  --muted:#667085;
  --line:#dce3ec;
  --soft:#f5f8fc;
  --soft2:#edf3fa;
  --sidebar:285px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
}
a{color:inherit}
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);min-width:var(--sidebar);
  border-right:1px solid var(--line);
  background:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{
  display:flex;align-items:center;gap:12px;
  padding:25px 22px 20px;border-bottom:1px solid #eef2f6;
}
.brandmark{width:44px;height:44px;flex:none}
.brand-title{
  color:var(--navy);font-weight:850;font-size:25px;line-height:1;
  letter-spacing:-.7px
}
.brand-sub{
  margin-top:5px;text-transform:uppercase;font-size:9px;
  letter-spacing:.6px;color:#4e5d74
}
.nav{padding:17px 16px;overflow:auto;flex:1}
.nav-group{margin-bottom:18px}
.nav-group+.nav-group{padding-top:18px;border-top:1px solid var(--line)}
.nav-heading{
  font-size:10px;text-transform:uppercase;letter-spacing:.7px;
  color:#53617a;font-weight:800;margin:0 0 8px 8px
}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 11px;border-radius:7px;text-decoration:none;
  font-size:13px;position:relative;color:#253146
}
.nav a:hover{background:#f6f8fb}
.nav a.active{background:#edf3fa;color:var(--navy);font-weight:700}
.nav a.active:before{
  content:"";position:absolute;left:-6px;top:0;bottom:0;
  width:3px;background:#1759ad;border-radius:3px
}
.nav svg{width:17px;height:17px;stroke:currentColor;flex:none}
.help{
  border-top:1px solid var(--line);padding:15px 4px 0;
  display:flex;gap:10px;align-items:center
}
.help-icon{
  width:38px;height:38px;border-radius:50%;background:#eef4fb;
  display:grid;place-items:center;color:var(--navy);font-weight:900
}
.help strong{display:block;color:var(--navy);font-size:13px}
.help span{display:block;color:#667085;font-size:10px;margin-top:2px}
.trust{
  padding:16px 22px;color:#fff;font-size:11px;
  background:linear-gradient(90deg,#08285a,#0b3976)
}
.main{flex:1;min-width:0}
.hero{
  padding:50px 52px 20px;position:relative;overflow:hidden
}
.hero:after{
  content:"";position:absolute;right:-75px;top:-125px;
  width:330px;height:330px;border:32px solid rgba(20,80,160,.035);
  border-radius:50%
}
.eyebrow{
  color:var(--red);font-size:11px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase
}
h1{
  margin:10px 0 9px;color:var(--navy);font-size:39px;
  line-height:1.08;letter-spacing:-1.25px;max-width:1000px
}
.subtitle{margin:0;color:#667085;font-size:13px;line-height:1.6}
.rule{width:52px;height:4px;border-radius:3px;background:var(--red);margin-top:18px}
.content{padding:20px 52px 50px;max-width:1120px}
.card{
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:21px;box-shadow:0 2px 8px rgba(16,38,72,.03)
}
.card.soft{background:linear-gradient(90deg,#f7f9fd,#eef4fb)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
h2{margin:0 0 12px;color:var(--navy);font-size:22px;letter-spacing:-.4px}
h3{margin:0 0 8px;color:var(--navy);font-size:15px}
p{margin:0;font-size:13px;line-height:1.65;color:#2b374b}
.small{font-size:11px;color:#6b778d}
.iconbox{
  width:44px;height:44px;border-radius:10px;
  background:#edf3fa;color:var(--navy);
  display:grid;place-items:center;margin-bottom:13px;font-weight:850
}
.banner{
  margin-top:17px;padding:17px 19px;border:1px solid #d9e5f3;
  border-radius:9px;background:linear-gradient(90deg,#f4f8fd,#ebf2fa);
  display:flex;gap:20px;align-items:center;justify-content:space-between
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:7px;background:var(--navy);color:#fff;
  text-decoration:none;padding:10px 15px;font-size:12px;font-weight:750;cursor:pointer
}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid #b9c8dc}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{border:1px solid var(--line);border-radius:9px;padding:17px}
.stepnum{
  width:27px;height:27px;border-radius:50%;background:var(--navy);
  color:#fff;display:grid;place-items:center;font-size:11px;font-weight:850;margin-bottom:10px
}
.tabs{
  display:flex;gap:8px;border-bottom:1px solid var(--line);
  margin-bottom:18px;overflow:auto
}
.tab{
  padding:10px 14px;font-size:11px;font-weight:800;
  color:#667085;white-space:nowrap
}
.tab.active{color:var(--navy);border-bottom:3px solid var(--navy)}
.checklist{list-style:none;padding:0;margin:11px 0 0}
.checklist li{
  position:relative;padding:6px 0 6px 23px;
  font-size:13px;line-height:1.45;color:#2b374b
}
.checklist li:before{
  content:"✓";position:absolute;left:0;color:var(--navy);font-weight:900
}
.note{
  border-left:4px solid #185aac;background:#f5f8fc;
  border-radius:5px;padding:11px 13px;font-size:11px;color:#506078
}
label{display:block;margin-bottom:6px;font-size:11px;font-weight:750;color:#4c5870}
input,select,textarea{
  width:100%;padding:10px 11px;border:1px solid #ccd6e4;
  border-radius:6px;background:#fff;font:inherit;color:#233047
}
textarea{min-height:118px;resize:vertical}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.mockmap{
  min-height:230px;border:1px solid var(--line);border-radius:8px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 19% 34%,#1759ad 0 6px,transparent 7px),
    radial-gradient(circle at 50% 55%,#1759ad 0 6px,transparent 7px),
    radial-gradient(circle at 77% 30%,#1759ad 0 6px,transparent 7px),
    linear-gradient(135deg,#e6edf5 25%,#f4f0de 25% 50%,#dce9ef 50% 75%,#f7f4e4 75%)
}
.mockmap:after{
  content:"Testing locations";position:absolute;bottom:10px;right:10px;
  background:#fff;border:1px solid #dce4ee;border-radius:5px;
  padding:6px 9px;font-size:10px;color:#5d6b81
}
.cert-card{
  aspect-ratio:1.62/1;border:1px solid #cbd5e2;border-radius:9px;
  background:linear-gradient(135deg,#fff,#f1f4f7);padding:19px;
  position:relative;box-shadow:0 10px 24px rgba(20,44,80,.08)
}
.cert-card:after{
  content:"EPA";position:absolute;right:20px;bottom:12px;
  font-size:46px;font-weight:900;color:rgba(12,47,105,.06)
}
.footer{
  margin-top:28px;background:linear-gradient(90deg,#08285a,#0b3976);
  color:#fff;padding:33px 52px
}
.footer-grid{
  max-width:1100px;display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);gap:26px
}
.footer h4{font-size:11px;margin:0 0 9px}
.footer p,.footer a{
  display:block;color:#dbe5f2;text-decoration:none;
  font-size:10px;line-height:1.8;margin:0
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:25px;padding-top:13px;font-size:9px;color:#cbd7e7;
  display:flex;justify-content:space-between;gap:15px
}
.notice{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:9px;background:var(--soft);margin-bottom:6px;font-size:13px}
.notice-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--teal);color:var(--teal-dark);font-weight:800;flex:none;font-size:12px}
.notice a{color:var(--navy);font-weight:800}
.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.lang-card{border:1px solid var(--line);border-radius:10px;padding:18px 19px;background:#fff;box-shadow:0 2px 8px rgba(16,38,72,.03)}
.lang-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lang-badge{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:none}
.lang-badge.en{background:linear-gradient(145deg,var(--teal),var(--teal-dark))}
.lang-badge.es{background:linear-gradient(145deg,var(--purple),var(--purple-dark))}
.lang-title{font-size:16px;font-weight:800;color:var(--navy)}
.lang-sub{font-size:12px;color:var(--muted);margin-top:2px}
.btn-lang{width:100%;min-height:46px;border-radius:7px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#fff;text-decoration:none;font-weight:800;font-size:13px}
.btn-lang.en{background:linear-gradient(90deg,#087b79,var(--teal))}
.btn-lang.es{background:linear-gradient(90deg,var(--purple-dark),#6c36ba)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 12px}
.section-heading-left{display:flex;align-items:flex-start;gap:10px}
.section-heading-left strong{display:block;font-size:15px;color:var(--navy)}
.section-heading-left span{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.stack-icon{color:var(--teal);margin-top:2px}
.details-btn{border:1px solid #d5deea;background:#fff;color:var(--navy);border-radius:7px;padding:8px 12px;font-weight:700;font-size:12px;cursor:pointer}
.exam-section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.section-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.card-head{padding:11px 16px;display:flex;align-items:center;gap:9px;font-weight:800;font-size:13px;background:var(--soft2);color:var(--navy)}
.card-head.en{background:linear-gradient(90deg,#eff9f9,#f8fbfb);color:var(--teal-dark)}
.card-head.es{background:linear-gradient(90deg,#f5f1fb,#faf8fd);color:var(--purple-dark)}
.small-badge{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800;flex:none}
.small-badge.en{background:var(--teal)}
.small-badge.es{background:var(--purple)}
.exam-list{padding:6px 16px 8px}
.exam-link{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #e7ebf0;color:var(--ink);text-decoration:none;font-size:13px}
.exam-link:last-child{border-bottom:none}
.exam-left{display:flex;align-items:center;gap:10px}
.doc-icon{color:var(--muted);font-size:13px}
.section-card.en-list .arrow{color:var(--teal-dark)}
.section-card.es-list .arrow{color:var(--purple)}
.more-btn{width:100%;min-height:40px;border:0;border-top:1px solid #e7ebf0;background:#fff;font-weight:700;cursor:pointer;font-size:12px}
.section-card.en-list .more-btn{color:var(--teal-dark)}
.section-card.es-list .more-btn{color:var(--purple)}
.hidden{display:none}
.pt-card{margin-top:16px;border:1px solid var(--line);border-radius:10px;padding:16px 19px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pt-left{display:flex;align-items:center;gap:14px;max-width:640px}
.pt-icon{width:44px;height:44px;border-radius:50%;background:var(--soft2);display:grid;place-items:center;color:var(--navy);flex:none}
.pt-text{font-size:13px;line-height:1.5;color:var(--ink)}
.pt-btn{min-width:260px;min-height:44px;border:1px solid #b9c8dc;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--navy);text-decoration:none;font-weight:800;font-size:12.5px}
.lang-toggle{position:absolute;top:24px;right:0;display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;z-index:2;background:#fff}
.lang-toggle button{border:none;background:#fff;color:var(--muted);font-weight:800;font-size:12px;padding:8px 16px;cursor:pointer}
.lang-toggle button.active{background:var(--navy);color:#fff}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
.mode-card{border:1px solid var(--line);border-radius:12px;padding:22px;min-height:220px;position:relative;box-shadow:0 4px 14px rgba(20,38,70,.03)}
.mode-card.universal{background:linear-gradient(135deg,#f4fbfb,#fff)}
.mode-card.builder{background:linear-gradient(135deg,#fff,#fafbff)}
.recommended{display:inline-block;border:1px solid #9fd5d3;color:var(--teal-dark);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;margin-bottom:12px}
.mode-icon{position:absolute;right:22px;top:22px;width:58px;height:58px}
.mode-card h2{margin:0 0 6px;color:var(--navy);font-size:21px}
.mode-card.universal h2{color:#0b7070}
.mode-card p.mode-tag{color:#33435c;font-size:13.5px;margin:0}
.mode-card .divider{height:1px;background:#d9e5ea;margin:16px 0}
.mode-card .support{color:#3f4d62;font-size:13px;line-height:1.55;margin-bottom:18px}
.cta{width:100%;min-height:48px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px;font-weight:800;text-decoration:none;cursor:pointer;border:none}
.cta.primary{color:#fff;background:linear-gradient(90deg,#0a8b89,#0aa39f)}
.cta.outline{color:var(--blue2);background:#fff;border:1.5px solid var(--blue2)}
.builder-section{margin-top:8px}
.section-title{text-align:center;margin-bottom:16px}
.section-title h3{margin:0;color:var(--navy);font-size:22px}
.section-title p{margin:6px 0 0;color:var(--muted);font-size:13px}
.section-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.section-option{border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center;cursor:pointer;position:relative;min-height:220px;background:#fff;transition:.2s ease}
.section-option:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,43,74,.07)}
.section-option.selected{border-color:#1ba3a1;box-shadow:0 0 0 2px rgba(27,163,161,.10);background:#f8fefe}
.check{position:absolute;top:13px;right:13px;width:20px;height:20px;border-radius:4px;border:1.5px solid #aeb9c7;background:#fff}
.section-option.selected .check{background:var(--teal);border-color:var(--teal)}
.section-option.selected .check::after{content:"✓";display:block;color:#fff;font-size:13px;line-height:19px;font-weight:900}
.round-icon{width:56px;height:56px;border-radius:50%;margin:2px auto 12px;display:grid;place-items:center}
.core .round-icon{background:#e8f7f6;color:var(--teal-dark)}
.type1 .round-icon{background:#edf4ff;color:var(--blue2)}
.type2 .round-icon{background:#f1ecfb;color:var(--purple)}
.type3 .round-icon{background:#fff0e4;color:var(--orange)}
.round-icon svg{width:28px;height:28px}
.section-option h4{margin:0;font-size:15px}
.core h4{color:var(--teal-dark)}
.type1 h4{color:var(--blue2)}
.type2 h4{color:var(--purple)}
.type3 h4{color:var(--orange)}
.section-option .desc{margin-top:6px;color:#526079;font-size:12px;line-height:1.4}
.section-option .mini-divider{height:1px;background:#e4e8ee;margin:14px 0}
.section-option .detail{color:var(--muted);font-size:11.5px;line-height:1.4}
.exam-summary{margin-top:20px;border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;background:linear-gradient(90deg,#fafdff,#fff)}
.summary-left{display:flex;align-items:center;gap:14px}
.summary-icon{width:48px;height:48px;border-radius:50%;background:#eaf7f7;color:var(--teal-dark);display:grid;place-items:center;flex:none}
.summary-left strong{display:block;color:#0c6f6e;font-size:14px;margin-bottom:3px;letter-spacing:.3px}
.summary-left span{color:var(--muted);font-size:12.5px}
.count-wrap{display:flex;align-items:center;gap:12px;padding-left:20px;border-left:1px solid #dce3ec}
.count{width:46px;height:46px;border-radius:50%;border:2px dashed var(--teal);display:grid;place-items:center;color:var(--teal-dark);font-size:19px;font-weight:800;flex:none}
.count-copy strong{display:block;color:#1f2c43;font-size:13px}
.count-copy span{font-size:11.5px;color:var(--muted)}
.continue{min-width:140px;min-height:44px;border:none;border-radius:7px;font-size:13.5px;font-weight:800;cursor:pointer;background:#d9dee6;color:#fff}
.continue.enabled{background:linear-gradient(90deg,#0a8b89,#0aa39f);cursor:pointer}
.quick{margin-top:18px;border:1px solid var(--line);border-radius:10px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.quick-left{display:flex;align-items:center;gap:12px}
.quick strong{display:block;color:#172844;margin-bottom:2px;font-size:13px}
.quick span{color:var(--muted);font-size:12px}
@media(max-width:1150px){
  .section-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .layout{display:block}
  .sidebar{position:relative;width:100%;height:auto}
  .nav{display:none}.trust{display:none}
  .hero,.content,.footer{padding-left:22px;padding-right:22px}
  h1{font-size:32px}
  .lang-toggle{position:static;margin-bottom:14px;width:fit-content}
  .grid2,.grid3,.grid4,.steps,.formrow,.footer-grid,.lang-grid,.exam-section-grid,.mode-grid{grid-template-columns:1fr}
  .pt-card{flex-direction:column;align-items:stretch}
  .pt-btn{min-width:0}
  .exam-summary{grid-template-columns:1fr}
  .count-wrap{border-left:0;padding-left:0}
  .continue{width:100%}
}
@media(max-width:620px){
  .section-grid{grid-template-columns:1fr}
}
