/* sofast — global stylesheet for the static build.
   Union of the per-page style blocks from the source components, plus the
   rules that inline styles cannot express (hover, :open, keyframes). */

/* ---------- resets ---------- */
body { margin: 0; background: #FFFFFF; }
table { border-collapse: collapse; width: 100%; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
img { max-width: 100%; }

/* ---------- links ---------- */
a { color: #3654FF; text-decoration: none; }
a:hover { color: #2743D1; }

a.sf-card { color: inherit; transition: border-color 140ms ease-out; }
a.sf-card:hover { color: inherit; border-color: #3654FF; }
a.sf-card:hover .sf-card-title { color: #3654FF; }
.sf-card-title { transition: color 140ms ease-out; }

a.sf-post { color: inherit; transition: border-color 140ms ease-out; }
a.sf-post:hover { color: inherit; border-color: #3654FF; }
a.sf-post:hover .sf-post-title { color: #3654FF; }
.sf-post-title { transition: color 140ms ease-out; }

a.sf-ghost { transition: background 140ms ease-out; }
a.sf-ghost:hover { background: #E2EAF7; }

a.sf-dark { transition: border-color 140ms ease-out; }
a.sf-dark:hover { border-color: #FAF7F2; }

a.sf-tab { transition: background 140ms ease-out, border-color 140ms ease-out; }
a.sf-tab:hover { background: #F7F7F4; border-color: #C8C8C2; }

a.sf-page { transition: background 140ms ease-out, border-color 140ms ease-out; }
a.sf-page:hover { background: #F7F7F4; border-color: #C8C8C2; }

/* ---------- footer ---------- */
footer a { transition: color 140ms ease-out; }
footer a:hover { color: #FFFFFF; }
.sf-foot a { color: #B9C2D9; text-decoration: none; transition: color 140ms ease-out; }
.sf-foot a:hover { color: #FFFFFF; }

/* ---------- language picker ---------- */
.sf-lang { position: relative; }
.sf-lang-menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 150px;
  background: #182552; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px;
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 20;
}
.sf-lang:hover .sf-lang-menu, .sf-lang:focus-within .sf-lang-menu { display: flex; }
.sf-lang-menu a {
  display: block; padding: 8px 10px; border-radius: 4px; font-size: 0.875rem;
  color: #B9C2D9; text-decoration: none;
  transition: background 140ms ease-out, color 140ms ease-out;
}
.sf-lang-menu a:hover { background: rgba(255,255,255,0.09); color: #FFFFFF; }
.sf-lang-btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; padding: 8px 12px;
  font-size: 0.875rem; color: #B9C2D9; cursor: default;
  transition: border-color 140ms ease-out;
}
.sf-lang:hover .sf-lang-btn, .sf-lang:focus-within .sf-lang-btn {
  border-color: rgba(255,255,255,0.5); color: #FFFFFF;
}

/* ---------- design-system component hovers ---------- */
/* Inline styles carry the resting state; only hover needs a rule. */
.ds-btn { font: inherit; }
.ds-btn--primary:hover { background: var(--brand-dark); }
.ds-btn--secondary:hover, .ds-btn--ghost:hover { background: var(--surface-sunken); }
.ds-btn[disabled] { cursor: not-allowed; opacity: 0.45; }

/* ---------- FAQ accordions ---------- */
/* Native <details>: open/close works with JavaScript disabled. */
.sf-faq { }
.sf-faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none;
}
.sf-faq__q::-webkit-details-marker { display: none; }
.sf-faq__label { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.sf-faq__icon { font-size: 12px; color: #C4661F; margin-top: 5px; flex-shrink: 0; }
.sf-faq[open] .sf-faq__icon::before { content: "\f068"; } /* fa-minus */
.sf-faq__a { overflow: hidden; }
.sf-faq__q:focus-visible { outline: 2px solid #3654FF; outline-offset: 3px; border-radius: 4px; }

/* ---------- copy-to-clipboard button ---------- */
.sf-copy:hover { color: #3654FF; }
.sf-copy:focus-visible { outline: 2px solid #3654FF; outline-offset: 2px; border-radius: 4px; }

/* ---------- billing switch (pricing) ---------- */
.sf-bill { cursor: pointer; }

/* ---------- keyframes used by the home page illustrations ---------- */
@keyframes fill { 0% { transform: scaleX(0); } 89% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes swapA { 0%,42% { opacity: 1; } 52%,92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swapB { 0%,42% { opacity: 0; } 52%,92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rowFade { 0%,100% { opacity: .25; } 30%,70% { opacity: 1; } }
@keyframes popBadge {
  0% { opacity: 0; transform: scale(.86); }
  14% { opacity: 1; transform: scale(1); }
  62% { opacity: 1; transform: scale(1); }
  80%,100% { opacity: 0; transform: scale(.96); }
}
@keyframes sf-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}