/* Contextual invitations to the program's recovery explanation. */
.recovery-explainer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin: 32px 0 42px; padding: 34px 38px; border: 1px solid #d1e2db; border-radius: 22px; background: #eff6f2; scroll-margin-top: 28px; }
.recovery-explainer .eyebrow { margin: 0 0 14px; }
.recovery-explainer h2 { margin: 0 0 16px; font-size: clamp(27px, 2.6vw, 34px); line-height: 1.22; text-wrap: balance; }
.recovery-explainer p:not(.eyebrow) { margin: 0; font-size: 16px; line-height: 1.75; }
.recovery-explainer > .btn { text-align: center; }
.recovery-explainer--featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 50px; padding: 40px; background: #183244; border: 0; border-top: 4px solid #60ad99; }
.recovery-explainer--featured h2 { color: #fff; font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 0; }
.recovery-explainer--featured .eyebrow { color: #b9dfd3; }
.recovery-explainer--featured p:not(.eyebrow) { color: #e2ebef; }
.recovery-explainer--featured .btn { margin-top: 22px; color: #183244; background: #fff; border-color: #fff; }
.recovery-explainer--featured .btn:hover { background: #e6f3ed; border-color: #e6f3ed; }
.recovery-explainer--featured a:focus-visible { outline-color: #e4c47d; }
.recovery-resource-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-top: 26px; padding: 26px 28px; border-left: 3px solid #2c6e62; border-radius: 0 16px 16px 0; background: #eff6f2; }
.recovery-resource-note h3 { font-size: 25px; margin: 0 0 12px; }
.recovery-resource-note p { margin: 0; font-size: 15px; }
.recovery-resource-note .arrow { white-space: nowrap; }
.recovery-context-link { margin: 18px 0 22px; }
.recovery-context-link a { color: #2c6e62; font-size: 16px; font-weight: 600; text-underline-offset: 5px; }
@media (max-width: 800px) {
  .recovery-explainer, .recovery-resource-note { grid-template-columns: 1fr; gap: 24px; }
  .recovery-explainer > .btn, .recovery-resource-note > .arrow { justify-self: start; }
  .recovery-explainer--featured { gap: 26px; }
}
@media (max-width: 520px) {
  .recovery-explainer { padding: 28px 24px; margin-top: 24px; border-radius: 18px; }
  .recovery-explainer--featured h2 { font-size: 32px; }
  .recovery-explainer .btn { max-width: 100%; white-space: normal; }
  .recovery-resource-note { padding: 24px 20px; }
}