/* /click-ads/ only: the 11-step overview. Uses the shared tokens (flagship.css)
   and the shared screenshot frame (shots.css). 4 columns, the optional last
   step spans two, so 11 cards fill three full rows (and five rows at 2 columns). */
.ca-steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ca-step { display: flex; min-width: 0; flex-direction: column; gap: 16px; padding: 14px 14px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.ca-step .shot-frame { border-radius: var(--radius-sm); }
.ca-step .shot-chrome { height: 20px; padding: 0 9px; gap: 5px; }
.ca-step .shot-chrome i { width: 6px; height: 6px; }
.ca-step-copy { display: grid; gap: 6px; padding: 0 6px; }
.ca-step-num { color: var(--muted); font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ca-step-num b { color: #b3127f; font-weight: 600; }
.ca-step h3 { margin: 0; font-size: 19px; letter-spacing: -0.015em; line-height: 1.2; }
.ca-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ca-step--wide { grid-column: span 2; display: grid; align-items: center; gap: 22px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ca-step--wide h3 { font-size: 23px; }
@media (max-width: 1099px) { .ca-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .ca-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ca-step--wide { grid-column: auto; display: flex; }
}