/* "Why it works" page — builds on about.css */

.block { padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(1.25rem, 3vw, 2rem); }
.intro .lede { max-width: 40rem; }

/* ---------- Steps ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  border-top: 1.5px solid var(--ink);
}
.steps li { position: relative; padding-top: 1.4rem; }
.steps li::before {            /* dot on the rule */
  content: ""; position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
}
.num {
  display: block; margin-bottom: .35rem;
  font-family: var(--serif-display); font-weight: 900; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
}
.steps h3 {
  margin: 0 0 .5rem;
  font-family: var(--serif-display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.steps p { margin: 0 0 .75rem; font-size: .95rem; line-height: 1.55; }
.action {
  display: block;
  font-family: var(--sans); font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  padding-top: .6rem; border-top: 1px solid rgba(17,17,17,.3);
}

/* ---------- Trust cards (3 across) ---------- */
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.three li:nth-child(1) { margin-top: 0; }
.cards.three li:nth-child(2) { margin-top: 2.25rem; }
.cards.three li:nth-child(3) { margin-top: .75rem; }

/* ---------- Six actions ---------- */
.actions {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1.5px solid var(--ink);
}
.actions > div {
  display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid rgba(17,17,17,.3);
}
.actions dt {
  font-family: var(--serif-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25;
}
.actions dt span {
  display: block; margin-bottom: .2rem; color: var(--red);
  font-family: var(--sans); font-size: .62rem; font-weight: 500; letter-spacing: .2em;
}
.actions dd { margin: 0; font-size: .95rem; line-height: 1.5; }
.actions em { display: block; margin-top: .3rem; color: var(--muted); font-size: .9rem; }

/* ---------- Day in the life ---------- */
.note {
  margin: -.75rem 0 1.25rem;
  font-family: var(--sans); font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.panel { padding: clamp(1.1rem, 2.4vw, 1.75rem); }
.panel h3 {
  margin: 0 0 .5rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
}
.panel .who {
  margin: 0 0 .9rem;
  font-family: var(--serif-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2;
}
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li { position: relative; padding: .4rem 0 .4rem 1.4rem; line-height: 1.5; }
.panel li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.before { border: 1px solid var(--ink); }
.after { background: var(--ink); color: var(--paper); margin-top: 1.5rem; }
.after li::before { background: var(--red); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.three li:nth-child(1), .cards.three li:nth-child(3) { margin-top: 0; }
  .cards.three li:nth-child(2) { margin-top: 2.25rem; }
  .actions { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; border-top: 0; border-left: 1.5px solid var(--ink); padding-left: 1.25rem; row-gap: 1.5rem; }
  .steps li { padding-top: 0; }
  .steps li::before { top: .55rem; left: calc(-1.25rem - 6px); }
  .cards.three { grid-template-columns: 1fr; }
  .cards.three li:nth-child(n) { margin-top: 0; }
  .cards.three li:nth-child(even) { margin-left: 1.5rem; }
  .cards.three li:nth-child(odd) { margin-right: 1.5rem; }
  .actions > div { grid-template-columns: 1fr; gap: .4rem; }
  .story { grid-template-columns: 1fr; }
  .after { margin-top: 0; }
}