/* How it works page only. The shared system is in /styles.css.
   Three sections: the six steps (in the light top), how I work (dark), the closing panel. */

/* ================================================================
   1. Top: centered head, then the six I do / You do cards
   ================================================================ */

.hiw-hero { padding-bottom: clamp(72px, 8vw, 120px); }
.hiw-hero h1 { max-width: 16ch; }

.hiw-steps {
  max-width: 1120px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: left;
}
.hiw-steps > .step { gap: 14px; }
.hiw-steps .step-top { margin-bottom: 6px; }

/* Each row: the "I do" / "You do" tag, then one line. The tags line up across all six cards. */
.hiw-steps .step-row { grid-template-columns: 82px minmax(0, 1fr); align-items: center; }
.hiw-steps .step-row p { line-height: 1.45; }
.hiw-steps .step-who { justify-self: stretch; text-align: center; }

/* ================================================================
   2. How I work: four short points on the dark band
   ================================================================ */

.work { margin-inline: auto; }
.work > .card { display: flex; flex-direction: column; }
.work h3 { margin-bottom: 8px; font-size: 1.5rem; }
.work p { max-width: 22em; }
/* small computers: two by two, so every heading stays on one line */
@media (min-width: 1000px) and (max-width: 1199px) {
  .work { max-width: 880px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================
   3. Closing call to action: a little less space under it, the footer follows
   ================================================================ */

.band--cta { padding-bottom: clamp(56px, 6vw, 96px); }

/* ================================================================
   Phones: tighter cards, so the six steps and four points take less scrolling
   ================================================================ */

@media (max-width: 719px) {
  .hiw-steps > .step { gap: 12px; padding: 20px 20px 22px; }
  .hiw-steps .step-num { font-size: 2.25rem; }
  .hiw-steps .step-top { margin-bottom: 0; }
  .hiw-steps .step-row { padding-top: 12px; }

  .work > .card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    align-content: start;
  }
  .work > .card > .tile { grid-row: span 2; margin: 0; }
  .work h3 { margin: 10px 0 6px; }
}
@media (max-width: 379px) {
  .hiw-steps .step-row { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .work > .card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .work > .card > .tile { width: 40px; height: 40px; border-radius: 12px; }
  .work h3 { margin-top: 6px; }
}