/* ==========================================================================
   How It Works - the four-step band on the front page.
   Four cards in one row on a desktop; a snap-scrolling carousel on a phone.
   ========================================================================== */

.payment-block-copy h3 span { color: #ecc27a; }

/* The three steps in one row on anything wider than a phone. */
#payment .hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

#payment .hiw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 1.05rem 1.05rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(18, 53, 36, 0.06);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
}

/* Light green panel behind each illustration. */
.hiw-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  border-radius: 14px;
  background: #f1f8f3;
}

.hiw-art svg {
  display: block;
  width: 100%;
  max-width: 172px;
  height: auto;
  max-height: 116px;
}

.hiw-card h4 {
  margin: 0.3rem 0 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed #dbe6de;
  color: #123524;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.22;
}

/* The step numbers, so the band reads as a numbered sequence rather than a row
   of paragraphs. Each one sits on the heading it belongs to, in the gold the
   rest of the page uses for its markers. */
.hiw-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0d36b, #d4af37);
  color: #12351e;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: -4px;
  flex: 0 0 auto;
}

.hiw-card p {
  margin: 0;
  color: #5b6b62;
  font-size: 0.82rem;
  line-height: 1.5;
}

.hiw-sub h5 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0.2rem;
  color: #123524;
  font-size: 0.84rem;
  font-weight: 800;
}

.hiw-sub h5 i { color: #1d6b38; }

/* This one reads as a second heading inside the card, so it wears the same
   type and rule as the card's own title - without moving from its place. */
.hiw-sub h5.hiw-sub-title {
  margin: 0.55rem 0 0.35rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed #dbe6de;
  color: #123524;
  font-size: 0.98rem;
  line-height: 1.22;
}

/* The merged step carries two short paragraphs, so they need a gap. */
.hiw-sub p + p { margin-top: 0.4rem; }

.hiw-list {
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hiw-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
  color: #5b6b62;
  font-size: 0.79rem;
  line-height: 1.4;
}

.hiw-list li i { color: #1d6b38; margin-top: 0.18rem; font-size: 0.74rem; }

/* A compact disclosure instead of a table that makes the card very tall. */
.hiw-ipf {
  margin: 0.5rem 0 0;
  border: 1px solid #e2ebe4;
  border-radius: 10px;
  background: #f7fbf8;
  overflow: hidden;
}

.hiw-ipf > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  color: #14532d;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.hiw-ipf > summary::-webkit-details-marker { display: none; }
.hiw-ipf > summary i { margin-left: auto; transition: transform 0.2s ease; }
.hiw-ipf[open] > summary i { transform: rotate(180deg); }
.hiw-ipf > summary:focus-visible { outline: 3px solid rgba(212, 175, 55, 0.45); outline-offset: -3px; }

.hiw-ipf table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  background: #ffffff;
}

.hiw-ipf th,
.hiw-ipf td {
  padding: 0.32rem 0.65rem;
  border-top: 1px solid #e8f0ea;
  text-align: left;
}

.hiw-ipf th { color: #123524; font-weight: 800; }
.hiw-ipf td { color: #5b6b62; }
.hiw-ipf th + th,
.hiw-ipf td + td { text-align: right; }

.hiw-note {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  color: #6b7c72;
  font-size: 0.74rem;
  line-height: 1.4;
}

.hiw-note i { color: #b8860b; margin-top: 0.15rem; }

/* Buttons sit on the card's floor, so all four line up. */
.hiw-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 40px;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hiw-cta-gold {
  background: #D5A72A;
  color: #12351E;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.hiw-cta-gold:hover { background: #B98D1F; transform: translateY(-2px); }

.hiw-cta-green {
  background: #1d6b38;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.hiw-cta-green:hover { background: #14532d; transform: translateY(-2px); }

.hiw-cta:focus-visible { outline: 3px solid rgba(212, 175, 55, 0.5); outline-offset: 2px; }

/* The closing strip across the foot of the band. */
.hiw-strip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
  padding: 0.8rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

.hiw-strip > i { color: #ecc27a; font-size: 1.1rem; }

.hiw-strip p {
  margin: 0;
  color: #dbe9e0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.hiw-strip strong { color: #ffffff; }
.hiw-strip .hiw-gold { color: #ecc27a; }

/* Phone: the steps stack, one under the other. They used to slide sideways in a
   carousel, which left the first and last card sliced off at the screen's edges
   and kept the later steps out of sight until the reader guessed to swipe. */
@media (max-width: 700px) {
  #payment .hiw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    overflow: visible;
    padding: 0;
  }
  #payment .hiw-card {
    width: 100%;
    flex: none;
  }
  .hiw-card h4 { font-size: 0.94rem; }
  .hiw-art svg { max-height: 104px; }
  .hiw-cta { min-height: 46px; font-size: 0.88rem; }
  .hiw-action { min-height: 48px; }
  .hiw-strip { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}