/* what-to-expect.css — styles used ONLY on what-to-expect.html (5-step timeline + warranty block).
   Colors, fonts and buttons come from styles.css. */

.wte-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; position: relative; }
/* thin gold line running down behind the step numbers */
.wte-timeline::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(201,162,39,0.15));
}
.wte-step {
  position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 28px;
  padding-bottom: 56px;
}
.wte-step:last-child { padding-bottom: 0; }
.wte-step.has-photo { grid-template-columns: 56px 1fr 300px; align-items: start; }
.wte-num {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 2px solid var(--gold);
  font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--gold-light); line-height: 1;
}
.wte-label {
  display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light); margin: 4px 0 6px;
}
.wte-body h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 10px; }
.wte-body p { margin: 0; font-size: 1.06rem; }
.wte-photo { margin-top: 6px; }
.wte-photo img { aspect-ratio: 4 / 5; }
.wte-photo.wide img { aspect-ratio: 4 / 3; }

.wte-warranty {
  max-width: 920px; margin: 64px auto 0; display: grid; grid-template-columns: 56px 1fr; gap: 28px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px;
}
.wte-shield {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--gold); color: var(--gold-light);
}
.wte-shield svg { width: 26px; height: 26px; }
.wte-warranty h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 8px; }
.wte-warranty p { margin: 0; font-size: 1.06rem; }

@media (max-width: 760px) {
  .wte-step, .wte-step.has-photo { grid-template-columns: 44px 1fr; column-gap: 18px; padding-bottom: 44px; }
  .wte-timeline::before { left: 21px; top: 22px; bottom: 22px; }
  .wte-num { width: 44px; height: 44px; font-size: 1.5rem; }
  .wte-photo { grid-column: 2; margin-top: 18px; max-width: 420px; }
  .wte-warranty { grid-template-columns: 1fr; gap: 16px; padding: 26px; margin-top: 48px; }
  .wte-shield { width: 48px; height: 48px; }
}