/* 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; }
.new-version { position: fixed; z-index: 1080; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); }

/* Secondary buttons. Bootstrap's outline-secondary is grey text on a grey
   border, which reads as disabled (in dark mode especially). These keep
   full-strength text, a filled surface and a clear border, and take the
   accent colour on hover; disabled ones still fade. */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-emphasis-color);
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-border-color: rgba(var(--bs-emphasis-color-rgb), .28);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cs-accent);
  --bs-btn-hover-border-color: var(--cs-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3249b8;
  --bs-btn-active-border-color: #3249b8;
  --bs-btn-focus-shadow-rgb: 59, 91, 219;
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-border-color);
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}
[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-bg: rgba(255, 255, 255, .05);
  --bs-btn-border-color: rgba(255, 255, 255, .22);
  --bs-btn-hover-bg: #4c6ef5;
  --bs-btn-hover-border-color: #4c6ef5;
  box-shadow: none;
}
.btn-outline-secondary .icon { opacity: .9; }
.btn-outline-secondary:hover .icon { opacity: 1; }
.btn-check:checked + .btn-outline-secondary { --bs-btn-active-bg: var(--cs-accent); --bs-btn-active-border-color: var(--cs-accent); }

/* Developer pages: the table of contents stays below the menu. */
.dev-toc { top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }

/* The signed-in name in the menu bar, and its menu. */
.session-menu { position: relative; }
.session-menu .session-name { max-width: 14rem; }
.session-menu .dropdown-menu { right: 0; left: auto; margin-top: .25rem; }
.mention-menu { min-width: 16rem; }