/* PEER-RETIRE-COMPACT-VISUAL-CARDS-001 — compact step cards + photo thumbnails.
   Classic min/max-width media syntax only (works on older iOS/Android WebViews that ignore range queries). */
.steps .sectionHead{margin-bottom:22px}
.steps .sectionHead>p{margin-top:10px;line-height:1.6}
.stepGrid{gap:10px}
.stepGrid article{min-height:0;padding:0;position:relative;overflow:hidden;border-radius:12px;box-shadow:0 1px 6px rgba(13,48,46,.07);
  display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:0;align-items:start}
.stepGrid .rcThumb{grid-column:1;grid-row:1/4;align-self:stretch;position:relative;display:block;min-height:118px;background:#efe6d6;overflow:hidden}
.stepGrid .rcThumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stepGrid .rcT1 img{object-position:30% 30%}
.stepGrid .rcT2 img{object-position:6% 35%}
.stepGrid .rcT3 img{object-position:24% 30%}
.stepGrid article>span:not(.rcThumb){grid-column:2;grid-row:1;padding:11px 10px 0 12px;font-size:13px;line-height:1.2;color:#a08c63}
.stepGrid .stepIcon{grid-column:1;grid-row:1/4;align-self:end;justify-self:start;z-index:2;margin:0 0 7px 7px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.92);font-size:17px;line-height:1;color:var(--gold,#c99a4b);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.stepGrid h3{grid-column:2;grid-row:2;margin:3px 0 0;padding:0 10px 0 12px;line-height:1.35}
.stepGrid p{grid-column:2;grid-row:3;margin:0;padding:4px 10px 12px 12px;line-height:1.6}
@media (max-width:620px){
  .steps{padding-top:44px;padding-bottom:40px}
  .steps{padding-left:18px;padding-right:18px}
  .steps .sectionHead{margin-bottom:18px}
}
@media (min-width:721px){
  .stepGrid{gap:18px}
  .stepGrid article{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr}
  .stepGrid .rcThumb{grid-column:1;grid-row:1;aspect-ratio:16/9;min-height:0}
  .stepGrid .stepIcon{grid-column:1;grid-row:1;margin:0 0 10px 12px;width:38px;height:38px;font-size:21px}
  .stepGrid article>span:not(.rcThumb){grid-column:1;grid-row:2;padding:16px 24px 0}
  .stepGrid h3{grid-column:1;grid-row:3;padding:0 24px}
  .stepGrid p{grid-column:1;grid-row:4;padding:6px 24px 22px}
  .steps .sectionHead{margin-bottom:34px}
  .stepGrid .rcT2 img,.stepGrid .rcT3 img{object-position:50% 50%}
}