/* server/public/styles/support.css
 * Per-section composition styles for the /support page.
 */

.support {
  padding-top: var(--s-l);
}

.support__hero {
  padding-top: var(--s-2xl);
  padding-bottom: var(--s-l);
}

.support__title {
  max-width: 14ch;
  margin-top: var(--s-m);
  margin-bottom: var(--s-l);
}

.support__lead {
  max-width: 52ch;
}

/* ── Contact block ── */

.support__contact {
  padding-top: var(--s-2xl);
  padding-bottom: var(--s-2xl);
  border-top: 1px solid var(--ink-faint);
}

.support__block-label {
  display: block;
  margin-bottom: var(--s-m);
  color: var(--ink-muted);
}

.support__email {
  display: inline-block;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  word-break: break-word;
  transition: opacity var(--dur-quick) var(--ease-out-expo);
}
.support__email:hover { opacity: 0.78; }

.support__contact-note {
  margin-top: var(--s-m);
  max-width: 48ch;
}

/* ── Legal block ── */

.support__legal {
  padding-top: var(--s-2xl);
  padding-bottom: var(--s-2xl);
  border-top: 1px solid var(--ink-faint);
}

.support__legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
}

.support__legal-link {
  display: inline-block;
  margin-bottom: var(--s-2xs);
  position: relative;
  transition: opacity var(--dur-quick) var(--ease-out-expo);
}
.support__legal-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-quick) var(--ease-out-expo);
}
.support__legal-link:hover::after { transform: scaleX(1); }

.support__legal-list li p {
  max-width: 52ch;
  margin-top: var(--s-2xs);
}

/* ── Back button ── */

.support__back {
  padding-top: var(--s-xl);
  padding-bottom: var(--s-3xl);
  text-align: center;
}

@media (max-width: 720px) {
  .support__title { font-size: clamp(44px, 12vw, 72px); }
  .support__email { font-size: clamp(28px, 6vw, 48px); }
  .support__contact,
  .support__legal { padding: var(--s-xl) 0; }
}