/* Four ordered steps; connectors are decorative and carry no state. */
.page-offers #offer-how { padding: 56px 0 52px; color: #123453; background: #f5f9fe; }
.page-offers #offer-how .detail-heading { margin-bottom: 30px; }
.page-offers #offer-how h2 { font-size: 34px; line-height: 1.35; letter-spacing: 0; }
.page-offers #offer-how h2::after { content: none; }
.page-offers #offer-how .step-grid { --step-gap: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--step-gap); margin: 0; padding: 0; list-style: none; }
.page-offers #offer-how .step-grid > li { position: relative; display: grid; grid-template-rows: 44px 1fr; gap: 16px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.page-offers #offer-how .step-grid > li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 44px; width: calc(100% + var(--step-gap) - 44px); height: 2px; background: #c7daf3; pointer-events: none; }
.page-offers #offer-how .step-number { position: relative; top: auto; left: auto; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 1px solid #aac9f2; border-radius: 50%; background: #e9f2ff; color: #155bb0; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.page-offers #offer-how .step-copy { min-width: 0; padding: 22px; border: 1px solid #d3e3f1; border-radius: 12px; background: #fff; }
.page-offers #offer-how h3 { margin: 0 0 10px; color: #123453; font-size: 20px; font-weight: 650; line-height: 1.5; }
.page-offers #offer-how .step-copy p { margin: 0; color: #4d657c; font-size: 16px; line-height: 1.8; }
.page-offers #offer-how .step-copy strong { color: #123453; font-weight: 650; }
.page-offers #offer-how .step-pending { display: block; margin-top: 6px; color: #735818; font-size: 14px; }
.page-offers #offer-how .how-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 26px; }
.page-offers #offer-how .how-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; color: #0864b8; font-size: 15px; line-height: 1.5; }
.page-offers #offer-how .how-app-link { padding: 10px 22px; border: 1px solid #8db7ea; border-radius: 30px; background: #fff; text-decoration: none; }
.page-offers #offer-how .how-terms-link { padding: 10px 0; text-decoration: underline; text-underline-offset: 5px; }
.page-offers #offer-how .how-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.page-offers #offer-how .how-actions a:focus-visible { outline: 3px solid #0864b8; outline-offset: 4px; }
@media (hover: hover) { .page-offers #offer-how .how-actions a:hover { color: #064680; } }
@media (min-width: 781px) and (max-width: 1100px) {
  .page-offers #offer-how .step-grid { --step-gap: 14px; }
  .page-offers #offer-how .step-copy { padding: 18px 16px; }
}
@media (max-width: 780px) {
  .page-offers #offer-how { padding: 36px 0 36px; }
  .page-offers #offer-how .detail-heading { margin-bottom: 24px; }
  .page-offers #offer-how h2 { font-size: 28px; }
  .page-offers #offer-how .step-grid { --step-gap: 12px; grid-template-columns: 1fr; }
  .page-offers #offer-how .step-grid > li { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto; gap: 12px; }
  .page-offers #offer-how .step-number { width: 40px; height: 40px; margin-top: 16px; font-size: 16px; }
  .page-offers #offer-how .step-grid > li:not(:last-child)::after { top: 56px; left: 19px; width: 2px; height: calc(100% + var(--step-gap) - 40px); }
  .page-offers #offer-how .step-copy { padding: 16px; border-radius: 10px; }
  .page-offers #offer-how h3 { margin-bottom: 6px; font-size: 18px; }
  .page-offers #offer-how .step-copy p { line-height: 1.75; }
  .page-offers #offer-how .how-actions { margin-top: 22px; gap: 10px 20px; }
  .page-offers #offer-how .how-app-link { padding: 10px 18px; }
}
@media (max-width: 359px) {
  .page-offers #offer-how .step-grid > li { gap: 10px; }
  .page-offers #offer-how .step-copy { padding: 14px; }
  .page-offers #offer-how .how-actions { align-items: flex-start; flex-direction: column; gap: 6px; }
}