.certification {padding-block:clamp(32px,6vw,72px)}
.cert-intro {max-width:70ch;margin-bottom:20px}
.cert-intro h1 {font-size:clamp(2.5rem,7vw,5rem);margin-block:.2em}
.cert-gate {max-width:560px;margin-top:12px}
.cert-study {display:grid;grid-template-columns:minmax(215px,285px) minmax(0,1fr);gap:16px;align-items:start}
.cert-panel {padding:clamp(18px,3vw,32px);border-radius:12px}
.cert-panel h2 {font-size:clamp(1.65rem,3.7vw,2.95rem);margin-bottom:12px}
.cert-panel h3 {font-size:1.25rem;margin:18px 0 8px}
.cert-essentials {border-inline-start:3px solid #a1bfaa;padding:12px 16px;margin:22px 0 6px;background:#1c2923;border-radius:4px}
.cert-essentials h3,.cert-essentials ul {margin-block:0 6px}
.cert-essentials ul {padding-inline-start:20px}
.cert-essentials li + li {margin-top:6px}
.cert-panel p {margin-bottom:10px}
.cert-panel .button {margin-top:12px}
.cert-list {list-style:none;padding-inline-start:0}
.cert-list button {
  display:grid;grid-template-columns:2.25ch minmax(0,1fr);align-items:start;
  column-gap:.6em;width:100%;border:0;background:none;color:inherit;
  text-align:left;padding:6px;font:inherit;
}
.cert-lesson-number {text-align:right;font-variant-numeric:tabular-nums}
.cert-lesson-title {overflow-wrap:anywhere}
.cert-list button[aria-current=step] {color:#e5f4e9;text-decoration:underline;text-underline-offset:4px}
.cert-form {display:grid;gap:8px;margin:14px 0}
.cert-form label {font-weight:650}
.cert-form input,.cert-form textarea {width:100%;background:#151e19;color:inherit;border:1px solid #a8bbad69;border-radius:4px;padding:10px;font:inherit}
.cert-form textarea {display:block;resize:vertical;margin-bottom:9px}
.cert-form .button {justify-self:start}
.cert-question {border-top:1px solid var(--line);padding-block:15px;display:grid;gap:8px}
.cert-question label.cert-question-label {display:flex;align-items:baseline;gap:.55em}
.cert-question-number {flex:none;font-variant-numeric:tabular-nums}
.cert-question-text {min-width:0;overflow-wrap:anywhere}
.cert-content .text-link {text-decoration:underline;text-underline-offset:4px}
.cert-document {
  display:grid;grid-template-columns:clamp(48px,22%,172px) minmax(0,1fr);
  gap:clamp(12px,3vw,36px);align-items:start;
  background:#f4f2e7;color:#243a30;border:6px double #667b70;
  text-align:left;padding:clamp(12px,3vw,42px);margin:18px 0;
}
.cert-mark {display:block;width:100%;height:auto;border-radius:2px}
.cert-document-details {min-width:0;overflow-wrap:anywhere}
.cert-document p,.cert-document .eyebrow {color:#33493e}
.cert-document h3 {font-family:Georgia,serif;font-size:clamp(1.4rem,3.5vw,3.5rem);margin-block:8px 14px}
#award-name {font-size:clamp(1.2rem,3.2vw,2.5rem);line-height:1.2;font-weight:650;overflow-wrap:anywhere}
.cert-document dl {display:flex;flex-wrap:wrap;gap:10px 24px}
.cert-document dl > div {display:flex;flex-direction:column;min-width:0}
.cert-document dt {font-size:.85rem}
.cert-document dd {display:flex;flex:1;align-items:center;margin:0;font-weight:650;overflow-wrap:anywhere}
.cert-id-and-verify {gap:clamp(6px,1.5vw,12px)}
.cert-id-and-verify > span {min-width:0}
.cert-verify-code {display:block;flex:none;width:clamp(54px,13vw,76px)}
.cert-verify-code img {width:100%;height:auto;image-rendering:pixelated}
.cert-delivery {margin-top:8px}
#email-delivery-status:empty {display:none}
#email-certificate.button:disabled {
  background:#393b3a;border-color:#646866;color:#d1d3d2;
  cursor:progress;box-shadow:none;transform:none;transition:none;
}
#study-status {grid-column:1/-1}
#study-status:empty {display:none}
@media(max-width:720px) {.cert-study{grid-template-columns:minmax(0,1fr)} .cert-list{max-height:11rem;overflow:auto}}
@media print {
  body:has(#award:not([hidden])) {background:white!important}
  body:has(#award:not([hidden])) > :not(main),
  body:has(#award:not([hidden])) main > :not(#study),
  body:has(#award:not([hidden])) #study > :not(#assessment),
  body:has(#award:not([hidden])) #assessment > :not(#award),
  body:has(#award:not([hidden])) #print,
  body:has(#award:not([hidden])) .cert-delivery {display:none!important}
  body:has(#award:not([hidden])) main {width:100%;margin:0;padding:0}
  body:has(#award:not([hidden])) .course,
  body:has(#award:not([hidden])) #study,
  body:has(#award:not([hidden])) #assessment {display:block;background:none;border:0;box-shadow:none;padding:0}
  body:has(#award:not([hidden])) #assessment::after {display:none}
  .cert-document {
    grid-template-columns:1.35in minmax(0,1fr);gap:.3in;
    padding:.35in;margin:0;break-inside:avoid;print-color-adjust:exact;
  }
  .cert-verify-code {width:.8in}
}

#answer-feedback {display:grid;gap:8px;margin-top:14px}
.cert-answer {border:1px solid var(--line);border-radius:4px;padding:10px 13px}
.cert-answer summary {font-weight:650;cursor:pointer}
.cert-answer summary + p {margin-top:8px}
.cert-answer h4 {font-size:.95rem;margin-block:8px 5px}
.cert-answer blockquote {margin:0 0 10px;padding:8px 12px;border-inline-start:2px solid #a1bfaa;white-space:pre-wrap;overflow-wrap:anywhere}