/* REGISTER / FEATURE PAGES PACK */
.features, .plans, .card, .faq, #packages-faq {
  content-visibility: auto;
  contain-intrinsic-size: 800px; /* placeholder height so no jump */
}
/* Feature grid + Plans */
.features{max-width:980px;margin:1.5rem auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.card{
  background: #EEF2FF;         /* light indigo */
  border: 1px solid #CFD8FF;    /* soft edge */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  color: #111827;               /* keep text dark for contrast */
}
.plan{
  background:#fff7d1;
  border:1px solid #f5d977;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  border-radius:12px;
  padding:1rem 1.1rem;
}
.plans{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.plan .price{font-weight:600;margin-bottom:.65rem}

/* Quote */
.quote{grid-column:1/-1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem 1.1rem}

/* Metrics + Quick links block */
.metrics-block{max-width:980px;margin:1.5rem auto 0;padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px}
.metrics{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;text-align:center;margin-bottom:1rem}
.kpi{background:#eef2ff;border:1px solid #e5e7eb;box-shadow: 0 1px 2px rgba(0,0,0,.03);border-radius:12px;padding:.8rem 1rem;min-width:170px}
.kpi strong{display:block;margin-bottom:.25rem;color:#111827}
.kpi span{font-size:.85rem;color:#4b5563}

/* Proof block (quote + metrics + quick links unified) */
.proof-block{max-width:980px;margin:1.5rem auto 0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:1.1rem 1.1rem 1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.proof-top{text-align:center;margin-bottom:1rem}
.proof-top p{margin:0 0 .75rem;font-size:1rem}
.proof-top .cta{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}

/* Quick links block */
.quick-links{border:1px solid #e5e7eb;border-radius:12px;background:#fff;text-align:center;padding:1rem}
.quick-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;           /* nice spacing between pills */
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  background: #eaf2ff;          /* light indigo/blue */
  color: #1f3a5f;                /* readable on light blue */
  border: 1px solid #cdddff;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease;
}
.pill:hover { background: #dbe9ff; border-color: #bfd0ff; }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: 3px solid #99b8ff; outline-offset: 2px; }

/* Primary pill — strong brand contrast */
.pill--primary {
  background: #35424a;          /* your brand slate */
  color: #fff;
  border-color: #2a353b;
}
.pill--primary:hover { background: #2f3a41; }
.pill--primary:focus-visible { outline: 3px solid #99b8ff; outline-offset: 2px; }

/* Optional: ensure pills don’t look like the plan/card background */
.plan .pill, .card .pill { box-shadow: none; }

/* --- Spacing for CTA after proof block --- */
/* If the CTA is the immediate next element after .proof-block */
.proof-block + .cta,
.proof-block + .cta-wrap,
.proof-block + .cta-button,
.proof-block + .btn,
.proof-block + a.cta {
  margin-top: .85rem;            /* “slightly spaced” */
}

/* If your CTA lives inside a container just after .proof-block */
.proof-block + * .cta,
.proof-block + * .btn {
  margin-top: .85rem;
}

/* Visually hidden utility (register page only) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile tweaks */
@media (max-width:640px){
  .proof-block{padding:.9rem .6rem 1rem}
  .proof-top .cta{flex-direction:row}
  .features{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .metrics-block{padding:.8rem}
  .kpi{min-width:150px}
  .proof-block + .cta,
  .proof-block + .cta-wrap,
  .proof-block + .cta-button,
  .proof-block + .btn,
  .proof-block + a.cta {
    margin-top: 1rem;
}
}
/* Small screens can use a touch more spacing */
@media (max-width: 480px) {
  .proof-block + .cta,
  .proof-block + .cta-wrap,
  .proof-block + .cta-button,
  .proof-block + .btn,
  .proof-block + a.cta {
    margin-top: 1rem;
  }
}