/* ==========================================================================
   How It Works - the five-step band on the front page, in four cards: quotes
   and compare share the first, then paying, then proof and documents, then the
   closing "Get Covered" card.
   Four cards in one row on a desktop; two to a row on a phone.
   ========================================================================== */

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

/* The band carries four cards - quotes and compare, pay, share proof, and the
   closing "Get Covered" card - so a desktop reads them in one row of four and
   a phone pairs them two to a row. */
#payment .hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, 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(1,57,71, 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: #f1f8f8;
}

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

/* The closing card carries a photograph rather than a drawing, so it fills the
   same panel edge to edge. */
.hiw-art-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.hiw-art-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 108px;
  object-fit: cover;
  object-position: center 28%;
}

/* The one image on the band that is not a drawing says so, quietly, on itself
   - so every card in the row still starts its heading at the same height. */
.hiw-art-credit {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(1,57,71, 0.62);
  color: #eef5f5;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.hiw-card h4 {
  margin: 0.3rem 0 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed #dbe5e6;
  color: #013947;
  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: #013947;
  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: #013947;
  font-size: 0.84rem;
  font-weight: 800;
}

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

/* 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 #dbe5e6;
  color: #013947;
  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: #1d676b; 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 #e2ebeb;
  border-radius: 10px;
  background: #f5fbfb;
  overflow: hidden;
}

.hiw-ipf > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  color: #014a52;
  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 #e8f0f0;
  text-align: left;
  /* A band and its interest stay on one line: the fit script eases the type
     down (and shortens the figures) rather than letting a row wrap. */
  white-space: nowrap;
}

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

/* A phone leaves this card narrow, and the fit script needs the room the side
   padding was taking to keep every band on one line. */
@media (max-width: 480px) {
  .hiw-ipf th,
  .hiw-ipf td { padding: 0.28rem 0.15rem; }
  .hiw-ipf th { padding: 0.28rem 0.15rem; }
}

.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: #013947;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

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

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

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

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

/* Phone: the steps pair up, two to a row. 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: 1024px) {
  #payment .hiw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    overflow: visible;
    padding: 0;
  }
  #payment .hiw-card {
    width: 100%;
    flex: none;
    padding: 0.7rem 0.7rem 0.8rem;
    gap: 0.35rem;
    border-radius: 14px;
  }
  /* Two cards side by side halve the column, so the copy steps down with it. */
  .hiw-card h4 { font-size: 0.82rem; line-height: 1.18; }
  .hiw-step-number { width: 19px; height: 19px; font-size: 0.64rem; margin-right: 0.32rem; vertical-align: -3px; }
  .hiw-card p, .hiw-list li { font-size: 0.72rem; line-height: 1.42; }
  .hiw-sub h5 { font-size: 0.74rem; margin-top: 0.4rem; }
  .hiw-sub h5.hiw-sub-title { font-size: 0.82rem; }
  .hiw-art { padding: 0.35rem 0.4rem; border-radius: 11px; }
  .hiw-art svg { max-height: 92px; }
  .hiw-art-photo { padding: 0; }
  .hiw-art-photo img { min-height: 88px; }
  .hiw-art-credit { font-size: 0.5rem; left: 4px; bottom: 4px; padding: 0 4px; }
  .hiw-ipf > summary { padding: 0.42rem 0.5rem; font-size: 0.68rem; }
  .hiw-ipf table { font-size: 0.62rem; }
  .hiw-ipf th, .hiw-ipf td { padding: 0.26rem 0.42rem; }
  .hiw-cta { min-height: 40px; font-size: 0.74rem; padding: 0.55rem 0.6rem; gap: 0.34rem; }
  .hiw-action { min-height: 48px; }
}