:root {
  --navy:#0e3048;
  --green:#326b39;
  --green-dark:#24532b;
  --orange:#c55324;
  --blue:#eaf3f8;
  --ink:#143248;
  --muted:#566772;
  --line:#dce5e8;
  --soft:#f5f8f8
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  background:#fff
}
h1,h2,h3,h4 {
  font-family:Montserrat,Arial,sans-serif;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.035em
}
h1 {
  font-size:clamp(2.5rem,4.2vw,4.5rem)
}
h2 {
  font-size:clamp(1.9rem,3vw,2.65rem)
}
h3 {
  font-size:1.15rem
}
a {
  color:var(--green);
  text-decoration:none
}
a:hover {
  color:var(--green-dark);
  text-decoration:underline
}
p {
  color:var(--muted)
}
button,input,select,textarea {
  font:inherit
}
button,a,input,textarea,select {
  touch-action:manipulation
}
:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:4px
}
.container {
  width:min(1200px,calc(100% - 64px));
  max-width:1200px;
  padding:0;
  margin:auto
}
.announcement {
  background:var(--navy);
  color:white;
  text-align:center;
  font-size:.83rem;
  padding:9px 16px
}
.announcement a {
  color:#fff;
  margin-left:20px;
  font-weight:600
}
.site-header {
  background:#fff;
  border-bottom:1px solid #eff2f2
}
.nav-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:110px;
  gap:24px
}
.brand {
  display:block;
  width:220px;
  flex-shrink:0;
  height:96px;
  overflow:hidden
}
.brand img {
  width:220px;
  height:165px;
  object-fit:contain;
  transform:translateY(-35px)
}
nav {
  display:flex;
  align-items:center;
  gap:27px
}
nav a,.text-button {
  font-size:.88rem;
  color:var(--navy);
  font-weight:600
}
.nav-divider {
  height:24px;
  border-left:1px solid var(--line)
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  padding:14px 23px;
  border-radius:8px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  line-height:1.4;
  white-space:normal
}
.btn-primary {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.btn-primary:hover {
  background:var(--green-dark);
  border-color:var(--green-dark);
  color:#fff;
  text-decoration:none
}
.btn-outline {
  border-color:#b5c4cb;
  background:white;
  color:var(--navy)
}
.btn-light {
  background:#fff;
  color:var(--navy)
}
.btn:disabled {
  opacity:.55;
  cursor:not-allowed
}
.nav-toggle {
  display:none
}
.hero {
  background:linear-gradient(110deg,#f1f7fa,#fff 85%);
  padding:62px 0 54px
}
.hero-grid {
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:54px;
  align-items:center
}
.eyebrow {
  display:block;
  font-size:.75rem;
  letter-spacing:.13em;
  font-weight:700;
  color:var(--green);
  text-transform:uppercase;
  margin-bottom:19px
}
.hero h1 {
  margin:0 0 24px;
  font-weight:800;
  line-height:1.1
}
.hero h1 em {
  font-style:normal;
  color:var(--green)
}
.hero .lead {
  font-size:1.08rem;
  max-width:450px;
  line-height:1.8;
  margin-bottom:24px
}
.hero-actions {
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap
}
.hero-note {
  font-size:.82rem;
  margin-top:16px
}
.hero-visual {
  position:relative;
  padding-bottom:22px
}
.hero-image {
  width:100%;
  height:465px;
  object-fit:cover;
  object-position:53% center;
  border-radius:22px 22px 80px 22px
}
.price-float {
  position:absolute;
  bottom:0;
  left:-22px;
  display:flex;
  align-items:center;
  gap:22px;
  background:white;
  border:1px solid var(--line);
  box-shadow:0 12px 40px #12324914;
  border-radius:14px;
  padding:22px 28px
}
.price-float strong {
  display:block;
  font-family:Montserrat;
  font-size:2.3rem;
  line-height:1
}
.price-float small {
  display:block;
  font-size:.73rem;
  color:var(--muted)
}
.price-float .price-caption {
  padding-left:20px;
  border-left:1px solid var(--line);
  font-size:.85rem;
  line-height:1.7
}
.hero-badge {
  position:absolute;
  right:-12px;
  top:26px;
  background:white;
  border:1px solid var(--line);
  border-radius:100px;
  padding:10px 18px;
  font-weight:600;
  font-size:.8rem;
  box-shadow:0 6px 20px #12324910
}
.value-strip {
  border-bottom:1px solid var(--line);
  padding:25px 0
}
.values {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
.values span {
  font-size:.86rem;
  font-weight:600
}
.values b {
  color:var(--green);
  margin-right:12px
}
.section {
  padding:78px 0
}
.section-heading {
  text-align:center;
  max-width:650px;
  margin:0 auto 40px
}
.section-heading p {
  margin:15px 0 0
}
.steps,.cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:23px
}
.step-number {
  width:44px;
  height:44px;
  background:var(--blue);
  border-radius:12px;
  color:var(--navy);
  display:grid;
  place-items:center;
  font-weight:700;
  margin-bottom:22px
}
.step p,.card p {
  font-size:.91rem
}
.step h3 {
  margin-bottom:12px
}
.soft {
  background:var(--soft)
}
.panel,.card {
  border:1px solid var(--line);
  border-radius:16px;
  padding:30px;
  background:#fff;
  box-shadow:none
}
.card {
  position:relative
}
.card .eyebrow {
  margin-bottom:35px
}
.card h3 {
  line-height:1.5;
  min-height:70px
}
.card .minutes {
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:.8rem;
  font-weight:600;
  color:var(--muted)
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}
.split img {
  width:100%;
  border-radius:20px
}
.checklist {
  list-style:none;
  padding:0;
  margin:24px 0
}
.checklist li {
  padding:9px 0
}
.checklist li:before {
  content:'✓';
  color:var(--green);
  font-weight:700;
  margin-right:12px
}
.pricing-card {
  max-width:480px;
  border:2px solid var(--green);
  border-radius:20px;
  padding:35px;
  background:#fff
}
.price {
  font-family:Montserrat;
  font-weight:800;
  font-size:3.8rem;
  letter-spacing:-.06em
}
.price span {
  font-family:Inter;
  font-size:.9rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted)
}
.price-line {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
  border-bottom:1px solid var(--line)
}
.price-line.total {
  font-weight:700;
  border-bottom:0
}
.notice {
  border-radius:10px;
  padding:17px 22px;
  background:#edf4ed;
  color:#244f2b;
  font-size:.9rem;
  margin:20px 0
}
.notice.warning {
  background:#fff4e7;
  color:#7a4118
}
.faq {
  max-width:800px;
  margin:auto
}
details {
  border-bottom:1px solid var(--line);
  padding:19px 0
}
summary {
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px
}
summary:after {
  content:'+';
  font-size:1.3rem;
  color:var(--green)
}
details[open] summary:after {
  content:'−'
}
details p {
  margin:16px 0 0;
  font-size:.94rem
}
.cta {
  background:var(--navy);
  border-radius:20px;
  padding:48px 55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  color:#fff
}
.cta h2 {
  font-size:2rem;
  margin-bottom:12px
}
.cta p {
  color:#c9d8e2;
  margin:0
}
.site-footer {
  padding:55px 0 22px;
  background:#f7f9fa;
  border-top:1px solid var(--line)
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px
}
.footer-grid h2 {
  font:600 .9rem Inter;
  letter-spacing:0;
  margin:24px 0 20px
}
.footer-grid a {
  display:block;
  color:var(--muted);
  font-size:.85rem;
  margin:10px 0
}
.footer-grid p {
  font-size:.84rem
}
.footer-logo {
  width:195px;
  height:100px;
  object-fit:cover
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:23px;
  margin-top:38px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.75rem;
  color:var(--muted)
}
.footer-bottom a {
  margin-left:20px;
  color:var(--muted)
}
.fine {
  font-size:.75rem;
  margin-top:20px
}
.narrow {
  max-width:760px
}
.page-heading {
  padding:45px 0;
  background:var(--blue)
}
.page-heading h1 {
  font-size:2.6rem;
  margin:0
}
.form-group {
  margin-bottom:20px
}
label {
  display:block;
  font-size:.88rem;
  font-weight:600;
  margin-bottom:7px
}
.form-control {
  display:block;
  width:100%;
  border:2px solid #768b96;
  border-radius:7px;
  padding:12px 14px;
  height:auto;
  color:var(--ink);
  background:white;
  min-height:47px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px
}
textarea.form-control {
  min-height:130px
}
.error {
  background:#fff0ed;
  color:#942d19;
  padding:16px;
  border-radius:8px;
  margin-bottom:20px
}
.inline {
  display:inline
}
.text-button {
  background:none;
  border:0;
  padding:0;
  cursor:pointer
}
.skip {
  position:absolute;
  left:20px;
  top:-100px;
  background:white;
  padding:12px;
  z-index:99
}
.skip:focus {
  top:10px
}
.honeypot {
  position:absolute;
  left:-9999px
}
.dashboard-grid {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:25px
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:25px 0
}
.stat {
  background:var(--soft);
  padding:22px;
  border:1px solid var(--line);
  border-radius:12px
}
.stat strong {
  display:block;
  font:700 1.7rem Montserrat
}
.stat span {
  font-size:.8rem;
  color:var(--muted)
}
.progress-track {
  height:10px;
  background:#e2e9e7;
  border-radius:30px;
  overflow:hidden;
  margin:18px 0
}
.progress-fill {
  height:100%;
  background:var(--green)
}
.error:focus {
  outline:3px solid var(--orange);
  outline-offset:3px
}
.price-supplement {
  display:block;
  max-width:290px;
  margin-top:7px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:0
}
.training-timer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  margin:0 0 28px;
  border:1px solid #b8d3bd;
  border-radius:12px;
  background:#f1f7f1
}
.training-timer strong,.training-timer span,.training-timer small {
  display:block
}
.training-timer span {
  color:var(--navy);
  font:700 1.45rem Montserrat
}
.training-timer small {
  color:var(--muted);
  font-size:.76rem
}
.training-modal {
  position:fixed;
  inset:0;
  z-index:1050;
  padding:20px;
  background:#0e3048b8
}
.training-modal[hidden] {
  display:none
}
.training-modal-card {
  max-width:540px;
  margin:15vh auto 0;
  padding:30px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 20px 60px #0003
}
.training-modal-card h2 {
  margin-top:0
}
.course-layout {
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:35px
}
.course-sidebar {
  background:var(--soft);
  padding:24px;
  border-radius:12px;
  align-self:start
}
.course-sidebar a {
  display:block;
  padding:10px 0;
  font-size:.85rem
}
.course-section-title {
  display:block;
  font-size:.9rem;
  line-height:1.5;
  margin-top:20px
}
.lesson-body {
  font-size:1.05rem;
  line-height:1.9
}
.lesson-body h1 {
  font-size:2.2rem
}
.lesson-body table {
  width:100%;
  display:block;
  overflow:auto;
  margin:22px 0
}
.lesson-body td,.lesson-body th {
  padding:12px;
  border:1px solid var(--line)
}
.lesson-body strong {
  color:var(--navy)
}
.lesson-audio {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  align-items:center;
  gap:24px;
  margin:24px 0 30px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--soft)
}
.lesson-audio h2 {
  margin:0 0 2px;
  font-size:1.15rem
}
.lesson-audio p {
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5
}
.lesson-audio audio {
  width:100%
}
.activity {
  background:var(--blue);
  border-left:4px solid #75aacc;
  padding:25px;
  border-radius:8px;
  margin:30px 0
}
.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  margin:25px 0
}
.choices label {
  font-weight:400;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  margin-bottom:10px
}
.choices input {
  margin-top:6px;
  accent-color:var(--green)
}
fieldset {
  border:0;
  padding:0;
  margin:0 0 32px
}
legend {
  font-weight:600;
  font-size:1.1rem;
  margin-bottom:15px
}
.choices label:has(input:focus-visible) {
  outline:3px solid var(--orange);
  outline-offset:2px
}
.accessibility-assistance {
  max-width:900px;
  padding:18px 20px;
  margin:32px 0 0;
  border-left:4px solid var(--green);
  background:#fff
}
.answer-review {
  margin:24px 0
}
.answer-review-item {
  background:var(--soft);
  border-left:4px solid var(--orange);
  border-radius:8px;
  padding:18px 20px;
  margin-bottom:14px
}
.answer-review-item p {
  margin:0
}
.answer-review-item p + p {
  margin-top:8px
}
.admin-nav {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:22px 0
}
.admin-nav a {
  font-size:.82rem;
  background:var(--soft);
  padding:8px 12px;
  border-radius:6px
}
.table-wrap {
  overflow-x:auto
}
.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:.85rem
}
.data-table td,.data-table th {
  text-align:left;
  vertical-align:top;
  padding:13px;
  border-bottom:1px solid var(--line);
  max-width:400px;
  overflow-wrap:anywhere
}
.data-table th {
  background:var(--soft)
}
.tag {
  display:inline-block;
  background:var(--blue);
  padding:3px 9px;
  font-size:.75rem;
  border-radius:5px
}
.certificate {
  border:8px double var(--navy);
  padding:50px;
  text-align:center;
  background:#fff
}
.certificate img {
  width:110px
}
.certificate h1 {
  font-size:2.3rem
}
.certificate .recipient {
  font-size:2rem;
  color:var(--green)
}
.muted {
  color:var(--muted)
}
.empty {
  padding:35px;
  text-align:center;
  background:var(--soft);
  border-radius:12px
}
.full {
  width:100%
}
@media(max-width:1000px) {
  nav {
    gap:15px
  }
  .brand {
    width:175px
  }
  .brand img {
    width:175px
  }
  .hero-grid {
    gap:30px
  }
  .hero-image {
    height:410px
  }
  .hero-badge {
    right:0
  }
  .steps,.cards {
    grid-template-columns:repeat(2,1fr)
  }
  .split {
    gap:35px
  }
  .nav-wrap {
    flex-wrap:wrap
  }
  .nav-toggle {
    display:block;
    background:white;
    border:1px solid var(--line);
    border-radius:6px;
    padding:8px 14px
  }
  nav {
    display:none;
    width:100%;
    padding-bottom:20px;
    flex-wrap:wrap
  }
  nav.open {
    display:flex
  }
  .nav-divider {
    display:none
  }
}
@media(max-width:680px) {
  .lesson-audio {
    grid-template-columns:1fr
  }
  nav a,.text-button {
    min-height:44px;
    padding:10px 4px;
    display:inline-flex;
    align-items:center
  }
  .container {
    width:calc(100% - 36px)
  }
  .announcement {
    font-size:.7rem
  }
  .announcement a {
    display:none
  }
  .nav-wrap {
    min-height:90px
  }
  .brand {
    height:82px
  }
  .hero {
    padding:35px 0
  }
  .hero-grid,.split,.dashboard-grid,.course-layout {
    grid-template-columns:1fr
  }
  .hero h1 {
    font-size:2.65rem
  }
  .hero-visual {
    margin:15px 0 0 10px
  }
  .hero-image {
    height:340px
  }
  .price-float {
    left:-10px;
    right:-8px;
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:17px
  }
  .price-float .price-caption {
    width:100%;
    padding:9px 0 0;
    border-top:1px solid var(--line);
    border-left:0;
    line-height:1.45
  }
  .price-supplement {
    max-width:100%
  }
  .pricing-card {
    padding:26px
  }
  .hero-badge {
    font-size:.7rem
  }
  .values {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .values span {
    font-size:.74rem
  }
  .section {
    padding:45px 0
  }
  .steps,.cards {
    gap:16px
  }
  .card {
    padding:20px
  }
  .card h3 {
    font-size:1rem;
    min-height:100px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .footer-bottom {
    display:block
  }
  .footer-bottom a {
    margin:0 15px 0 0
  }
  .cta {
    display:block;
    padding:30px
  }
  .cta .btn {
    margin-top:25px
  }
  .stats {
    grid-template-columns:1fr 1fr
  }
  .training-timer {
    align-items:stretch;
    flex-direction:column
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .panel {
    padding:22px
  }
  .page-heading h1 {
    font-size:2rem
  }
  .course-sidebar {
    max-height:300px;
    overflow:auto
  }
  .certificate {
    padding:20px
  }
  .certificate h1 {
    font-size:1.6rem
  }
}
@media(prefers-reduced-motion:no-preference) {
  .btn {
    transition:background .15s,transform .15s
  }
  .btn:hover {
    transform:translateY(-1px)
  }
}
@media print {
  .site-header,.site-footer,.announcement,.toolbar,.skip {
    display:none
  }
  .certificate {
    break-inside:avoid
  }
  body {
    background:white
  }
  .container {
    width:100%
  }
}
.certificate .url {
  overflow-wrap:anywhere;
  font-size:.7rem
}
.certificate .qr {
  width:90px;
  height:90px
}
.certificate .sample {
  font-weight:700;
  color:#ae3f1e
}
.certificate .name {
  font-size:2rem;
  color:var(--green)
}
.course-menu-toggle {
  display:none
}
@media(max-width:680px) {
  .course-sidebar {
    max-height:none;
    padding:16px 20px
  }
  .course-menu-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    border:0;
    background:none;
    color:var(--navy);
    font-weight:600;
    min-height:44px;
    padding:8px 0;
    text-align:left
  }
  #course-outline {
    display:none
  }
  #course-outline.open {
    display:block;
    max-height:380px;
    overflow:auto;
    padding-top:20px
  }
}