/* "Take it offline" option A (see offline-a.js) */
.sec-calm section.offline-sec.oa { background: #fff !important; }
.oa .obj, .oa .spark { display: none !important; }
.oa .wrap { width: var(--colw) !important; max-width: none !important; padding-inline: 0 !important; }
.oa .off-show { display: grid !important; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; max-width: none !important; }
.oa-ph { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.2; }
.oa-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oa .head { text-align: left !important; justify-items: start !important; align-items: flex-start !important; margin: 0 0 30px !important; }
.oa .head h2, .oa .head p { text-align: left !important; margin-left: 0 !important; }
.oa .steps { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(31,42,43,.12); display: block !important; max-width: none !important; }
.oa .steps li { display: grid !important; grid-template-columns: 56px 1fr; gap: 22px; padding: 26px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(31,42,43,.12) !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; counter-increment: none; }
.oa .steps li::before { display: none !important; }
.oa .steps .ico.ill, .oa .steps .ico.ill svg { width: 56px !important; height: 56px !important; margin: 0 !important; }
.oa .steps h3 { font: 400 24px/1.2 p22-mackinac-pro, "Fraunces", Georgia, serif !important; color: var(--teal) !important; margin: 0 0 6px !important; }
.oa .steps p { font-size: 16px !important; line-height: 1.55 !important; color: #4A5656 !important; margin: 0 !important; }
@media (max-width: 900px) { .oa .off-show { grid-template-columns: 1fr; gap: 36px; } }
/* the photo as tall as the words beside it; subhead on one line, descriptions narrower */
@media (min-width: 901px) {
  .oa .off-show { align-items: stretch; }
  .oa-ph { aspect-ratio: auto; height: 100%; min-height: 0; }
  .oa-side { display: flex; flex-direction: column; justify-content: space-between; }
  .oa .head p { max-width: none !important; white-space: nowrap; }
  .oa .steps p { max-width: 30em; }
}
@media (min-width: 901px) { .oa .steps p { max-width: 23em !important; text-wrap: pretty; } }