/* Zappocity homepage styles on top of Bootstrap 5.3. */
:root {
  --cs-accent: #3b5bdb;
  --cs-accent-2: #7048e8;
}
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }
.icon-lg { width: 2rem; height: 2rem; }
.hero {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(112, 72, 232, .12), transparent 60%),
    radial-gradient(50rem 25rem at -10% 10%, rgba(59, 91, 219, .12), transparent 60%);
}
.mock .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--bs-secondary-bg); display: inline-block; }
.mock-row { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color); }
.mock-row:last-child { border-bottom: 0; }
.feature, .step { border: 1px solid var(--bs-border-color); transition: transform .15s ease, box-shadow .15s ease; }
.feature:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); }
.feature .badge { font-size: .65rem; vertical-align: middle; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--cs-accent); color: #fff; font-weight: 700;
}
.code { font-size: .85rem; background: var(--bs-tertiary-bg); white-space: pre-wrap; }
.narrow { max-width: 48rem; }
.faq { border-bottom: 1px solid var(--bs-border-color); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: .75rem 0 0; }
.cta { background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-2)); }
@media (prefers-reduced-motion: reduce) { .feature { transition: none; } }
.plan-card { cursor: pointer; border-width: 2px; transition: border-color .15s ease; }
.btn-check:checked + .plan-card { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.btn-check:focus-visible + .plan-card { outline: 2px solid var(--bs-primary); outline-offset: 2px; }