/* ── Support page ─────────────────────────────────────────────────────── */

.support-search {
  display: flex;
  max-width: 560px;
  margin-top: 1.75rem;
}
.support-search input {
  flex: 1;
  padding: 1rem 1.25rem;
  border: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: 0.95rem;
}
.support-search button {
  width: 56px;
  background: var(--c-red);
  color: var(--c-white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex; align-items: center; justify-content: center;
}
.support-search button:hover { background: var(--c-brick); }

.support-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.support-quicklinks .pillar-icon { color: var(--c-gold); }
@media (max-width: 900px) { .support-quicklinks { grid-template-columns: repeat(2, 1fr); } }

.support-layout { display: grid; grid-template-columns: 240px 1fr 300px; gap: 2.5rem; align-items: start; }
.support-sidebar { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 0.2rem; }

.quickstart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0 3rem; }
.quickstart-card {
  background: var(--c-black);
  color: var(--c-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.quickstart-card .qc-icon { color: var(--c-red); }
.quickstart-card h4 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; }
.quickstart-card p { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.quickstart-card a { font-size: 0.8rem; font-weight: 700; color: var(--c-red); display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 900px) { .quickstart-grid { grid-template-columns: repeat(2, 1fr); } }

.faq-category { margin-bottom: 3rem; scroll-margin-top: 6.5rem; }
.faq-category-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.faq-category-head svg { color: var(--c-red); }

.help-aside {
  position: sticky; top: 6.5rem;
  background: var(--c-sand);
  border-radius: var(--radius-md);
  padding: 1.75rem;
}
.help-aside h3 { font-family: var(--font-body); font-size: 1.05rem; }
.help-aside p { font-size: 0.85rem; color: rgba(1,0,0,.65); margin-block: 0.6rem 1.25rem; }
.help-contact { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; }
.help-contact svg { color: var(--c-red); flex-shrink: 0; margin-top: 2px; }
.help-contact strong { display: block; font-size: 0.9rem; }
.help-contact span { font-size: 0.78rem; color: rgba(1,0,0,.55); }

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.video-card { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.video-card img { width: 100%; height: 100%; object-fit: cover; }
.video-card .play-btn { position: absolute; inset: 0; margin: auto; }
.video-card .video-meta { position: absolute; inset-inline: 0; bottom: 0; padding: 1rem; background: linear-gradient(0deg, rgba(1,0,0,.85), transparent); color: var(--c-white); font-size: 0.85rem; font-weight: 600; }
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } }

@media (max-width: 1000px) {
  .support-layout { grid-template-columns: 1fr; }
  .support-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .help-aside { position: static; }
}