/* ===== FAQ & Support — page-specific styles ================================
   Built ON the ApexQuant design system: colors_and_type.css + components.css +
   shell.css supply tokens, nav+sticky, footer, ambient background, the FAQ
   accordion and the overlay widgets. This is an APEX (blue) page — default
   accent. Only the hero copy block and the support-contact block live here. */

/* ---- Hero copy (centered, same scale as the home hero) ---- */
.support-hero .t-hero { max-width: 22ch; }
.support-hero .t-hero .t-key { color: var(--accent-hi, var(--apex-blue-hi)); }
.hero-sub { margin-top: 24px; max-width: 600px; font-family: var(--font); font-size: 18px; line-height: 1.55; color: var(--soft-grey); text-wrap: pretty; }
.hero-cta-row { margin-top: 30px; display: flex; justify-content: center; }
/* the scroll-to-FAQ CTA carries a down chevron that nudges down on hover */
.aq-btn .cta-chevron { width: 16px; height: 16px; flex: none; transition: transform .26s var(--ease); }
.aq-btn:hover .cta-chevron { transform: translateY(3px); }

/* keep the FAQ comfortably below the hero on this page */
#faq { scroll-margin-top: 90px; padding-top: 8px; }

/* ===== Support-contact block ("still need help?") ========================= */
.support-sec { padding: 8px 0 var(--apx-section-y, 96px); position: relative; z-index: 2; }
.support-card {
  width: min(1080px, calc(100% - 48px)); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 420px); gap: 40px; align-items: stretch;
  padding: 34px; border-radius: 28px;
  background: linear-gradient(168deg, #16213C 0%, #121B33 60%, #0F1830 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 34px 90px -56px rgba(0,0,0,0.75);
}
.support-copy { align-self: center; max-width: 610px; }
.support-copy .t-eyebrow { display: inline-block; margin-bottom: 16px; }
.support-copy h2 { margin: 0; color: var(--bone); font-family: var(--font); font-size: clamp(28px, 4vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.support-copy p { margin: 18px 0 0; max-width: 56ch; color: var(--soft-grey); font-size: 17px; line-height: 1.6; text-wrap: pretty; }

.support-actions { display: grid; align-content: start; gap: 12px; padding: 8px; border: 1px solid var(--hair); border-radius: 16px; background: rgba(12,20,40,0.55); }
.support-action {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
  color: var(--bone); text-decoration: none; background: rgba(255,255,255,0.035);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.support-action:hover { border-color: var(--accent-ring, rgba(30,91,255,0.55)); background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.support-action.primary { background: var(--accent, var(--apex-blue)); border-color: transparent; color: var(--accent-ink, #fff); }
.support-action.primary:hover { background: var(--accent-hover, var(--apex-blue-hover)); }
.support-action-icon { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,0.10); color: #fff; }
.support-action-icon svg { width: 22px; height: 22px; }
.support-action .sa-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.support-action strong { font-size: 15px; font-weight: 600; line-height: 1.25; }
.support-action em { font-style: normal; color: rgba(242,244,248,0.74); font-size: 13px; line-height: 1.45; }
.support-action.primary em { color: rgba(255,255,255,0.82); }
.support-note { margin: 6px 8px 2px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

@media (max-width: 860px){
  .support-card { grid-template-columns: 1fr; padding: 26px; gap: 26px; }
}
@media (max-width: 540px){
  .support-card { padding: 18px; border-radius: 22px; }
  .support-action { grid-template-columns: 40px minmax(0,1fr); padding: 14px; }
  .support-action-icon { width: 40px; height: 40px; }
}