/* Support page (/support/). Every value comes from tokens.css; the page itself uses the .tlg-body base from site.css. */
.sup-hero { padding: var(--tlg-space-12) var(--tlg-space-8) var(--tlg-space-10); border-bottom: var(--tlg-border-width) solid var(--tlg-border); background: var(--tlg-surface); text-align: center; }
.sup-hero-icon { margin-bottom: var(--tlg-space-2); font-size: var(--tlg-text-3xl); line-height: var(--tlg-leading-tight); }
.sup-hero h1 { margin-bottom: var(--tlg-space-3) !important; font-size: var(--tlg-text-3xl); }
.sup-hero h1 span { color: var(--tlg-biology-fg); }
.sup-hero p { max-width: 640px; margin: 0 auto !important; color: var(--tlg-text-muted); font-size: var(--tlg-text-lg); }

.sup-body { max-width: 820px; margin: 0 auto; padding: var(--tlg-space-8) var(--tlg-space-8) var(--tlg-space-16); }
.sup-intro { max-width: none; margin-bottom: var(--tlg-space-6) !important; color: var(--tlg-text-muted); text-align: center; }

.sup-promise { padding: var(--tlg-space-8); border: var(--tlg-border-width-strong) solid var(--tlg-biology-solid); border-radius: var(--tlg-radius-lg); background: var(--tlg-biology-tint); text-align: center; }
.sup-promise-icon { margin-bottom: var(--tlg-space-2); font-size: var(--tlg-text-2xl); line-height: var(--tlg-leading-tight); }
.sup-promise h2 { margin-bottom: var(--tlg-space-2) !important; color: var(--tlg-biology-fg); font-size: var(--tlg-text-xl); }
.sup-promise p { margin: 0 auto !important; color: var(--tlg-text-muted); }
.sup-about { max-width: none; margin-top: var(--tlg-space-8) !important; color: var(--tlg-text-muted); text-align: center; }

@media (max-width: 640px) {
  .sup-hero { padding: var(--tlg-space-8) var(--tlg-space-4); }
  .sup-hero h1 { font-size: var(--tlg-text-2xl); }
  .sup-body { padding: var(--tlg-space-6) var(--tlg-space-4) var(--tlg-space-12); }
  .sup-promise { padding: var(--tlg-space-6); }
}