/* Support uses each app's established palette. Keep FAQs aligned with app behavior and legal pages. */
.support-page {
  --contact-ink: #fff;
  --support-title: clamp(44px, 6vw, 72px);
  --support-heading: clamp(28px, 3vw, 38px);
}
.photoarchie-support { --blue: var(--purple); --blue-soft: var(--purple-soft); }
/* Sabja's navy and mint palette matches its existing sabja.app website. */
.sabja-support {
  color-scheme: dark;
  --background: #071626;
  --surface: #0d2536;
  --ink: #eaf7f5;
  --muted: #a9c3c2;
  --line: #294651;
  --blue: #2ed9c3;
  --blue-soft: #0f2e3b;
  --contact-ink: #071626;
}
.support-page h2 { font-size: var(--support-heading); }
.support-page .site-header { flex-wrap: wrap; }
.support-page .brand img { border-radius: 13px; }
.support-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--space-6); padding-block: var(--space-4); }
.support-intro h1 { font-size: var(--support-title); margin-block: var(--space-2) var(--space-3); }
.support-intro .intro-copy { max-width: 520px; }
.support-shortcuts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-small); }
.support-shortcuts a { padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--card-radius); text-decoration: none; transition: border-color var(--motion); }
.support-shortcuts a:hover { border-color: var(--blue); }
.support-contact { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-soft); }
.contact-symbol { display: grid; place-items: center; width: 48px; height: 48px; background: var(--surface); color: var(--blue); border-radius: var(--card-radius); font-size: var(--text-card); margin-bottom: var(--space-2); }
.support-contact h2 { margin-block: var(--space-2) var(--space-2); }
.support-contact .primary-link { margin-top: var(--space-3); gap: var(--space-2); color: var(--contact-ink); padding-inline: var(--space-3); }
.support-email { display: block; color: var(--blue); margin-top: var(--space-2); overflow-wrap: anywhere; font-size: 15px; }
.support-contact .contact-owner { margin-top: var(--space-2); font-size: var(--text-small); }
.support-report { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: var(--space-6); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.support-report h2 { margin-block: var(--space-2); font-size: var(--text-card); }
.support-report p, .support-report li { font-size: 15px; }
.support-report ul { padding-left: var(--space-3); margin: 0; }
.support-report li + li { margin-top: var(--space-1); }
.support-report .support-note { grid-column: 1 / -1; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-small); }
.support-section-copy { margin-top: var(--space-2); max-width: 300px; font-size: 15px; }
.support-page details p a { color: var(--blue); }
.support-closing { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--blue-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.support-closing h2 { font-size: var(--text-card); margin-bottom: var(--space-1); }
.support-closing p { font-size: 15px; }
@media (prefers-color-scheme: dark) {
  .zipcam-support { color-scheme: dark; --background: #101c2c; --surface: #17263c; --ink: #eef4ff; --muted: #b5c1d5; --line: #31445f; --blue: #91baff; --blue-soft: #1c3050; --contact-ink: #101c2c; }
  .photoarchie-support { color-scheme: dark; --background: #17151e; --surface: #211e2b; --ink: #f2eff9; --muted: #b8b3c8; --line: #3f394f; --blue: #b59aef; --blue-soft: #2c2342; --contact-ink: #17151e; }
}
@media (max-width: 700px) {
  .support-hero, .support-report { grid-template-columns: 1fr; gap: var(--space-3); }
  .support-hero { padding-block: var(--space-4); }
  .support-contact, .support-report, .support-closing { padding: var(--space-3); }
  .support-report { margin-bottom: var(--space-3); }
  .support-report .support-note { margin-top: 0; }
  .support-contact .primary-link { width: 100%; }
}