/* 05 Next steps: one dominant call to action (dark panel, orange button, the closing seal) and a
   plain security card beside it, so the page ends on a clear primary action. */
.closing__cta {
  grid-column: 4 / span 6;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 380px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.closing__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 28px;
}
.closing__title {
  font: 400 var(--fs-card)/1.06 var(--sans);
  letter-spacing: -0.025em;
}
.closing__text {
  max-width: 330px;
  margin: auto 0 28px;
  padding-top: 32px;
  line-height: 1.34;
}

/* The art is drawn to its box (js/art-routes.js), so every route starts and ends inside it. */
.closing__art { position: relative; overflow: hidden; }
.closing__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.closing__card {
  grid-column: 10 / -1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--folio);
}
.closing__card .closing__title { margin: 28px 28px 0; font-size: clamp(24px, 2.2vw, 32px); }
.closing__card .closing__text { margin: 16px 28px 28px; padding-top: 0; color: var(--ink-2); }
.closing__card .cta { margin: auto 28px 28px; }

@media (max-width: 1099px) {
  .closing__cta, .closing__card { grid-column: 4 / -1; grid-row: auto; }
  .closing__card { margin-top: 14px; }
}

@media (max-width: 767px) {
  .closing__cta, .closing__card { grid-column: 1 / -1; }
  .closing__cta { grid-template-columns: 1fr; min-height: 0; }
  .closing__cta .closing__art { order: -1; height: clamp(200px, 58vw, 260px); }
  .closing__copy { min-height: 280px; padding: 24px var(--margin) 28px; }
}