/* Page-specific layout hooks (extend later as needed) */
.header-spacer{height:64px}
.hero-badge{display:inline-block;padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;color:var(--sub)}
.card h3{margin-bottom:.35rem}
.card p{color:var(--sub)}
.lead{font-size:1.05rem; color:var(--sub); max-width:60ch}

/* Trust bar */
.trustbar{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.trustbar span{color:var(--sub)}
.trustbar ul{display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.trustbar li{padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;color:var(--sub);background:var(--muted)}

/* Steps */
.steps .card{min-height:160px}

/* Quote */
.quote{border-left:4px solid var(--accent); padding-left:1rem}
.quote-text{font-size:1.05rem}
.quote-attrib{color:var(--sub);margin-top:.4rem}

/* CTA banner */
.cta-banner{margin:2rem auto 3rem}
.cta-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;background:
  linear-gradient(90deg, rgba(91,108,255,.2), rgba(139,92,246,.2));
  border:1px solid var(--border); border-radius:16px; padding:1.25rem 1.5rem}
.cta-content p{color:var(--sub);margin:0}
/* Remove default numbers from the ordered list in "How it works" */
.steps{ list-style: none; padding-left: 0; }
.section-intro{color:var(--sub);max-width:60ch}
.note p{margin:.3rem 0 0}
.meta{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 900px){
  .grid.cols-4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid.cols-2,.grid.cols-4{grid-template-columns:1fr}
}
/* Remove default numbers for ordered step lists (we number inside cards) */
.steps{list-style:none;padding-left:0}
/* Center a single card across the grid */
.center-row {
  grid-column: 1 / -1;      /* span all columns */
  justify-self: center;     /* center horizontally */
  width: min(720px, 100%);  /* nice readable width */
}
/* Center a block (card + note) and keep a readable width */
.center-wrap { max-width: 720px; margin: 1rem auto 0; }
.center-note { text-align: center; margin-top: .6rem; color: var(--sub); }