/* ---------------------------------------------------------------------------
 * Vanday — Help & Support page. Relies on tokens.css + landing.css (shared
 * .v-header nav, .section, .btn, .footer). Everything here is `sup-` scoped.
 * --------------------------------------------------------------------------- */

/* ===== Hero ============================================================== */
.sup-hero { padding-top: 64px; padding-bottom: 8px; max-width: 820px; }
.sup-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--accent-hover);
  background: var(--accent-soft); border-radius: 999px; padding: 6px 14px; margin-bottom: 20px;
}
.sup-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sup-h1 {
  font-size: clamp(32px, 5vw, 48px); font-weight: 500; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0;
}
.sup-lead {
  margin: 18px 0 0; max-width: 620px; font-size: clamp(16px, 2.2vw, 18.5px);
  line-height: 1.55; color: var(--text-muted);
}

/* ===== Featured guide (video + meta) ==================================== */
.sup-guides { padding-top: 40px; padding-bottom: 8px; }
.sup-guide {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: center;
}
.sup-guide + .sup-guide { margin-top: 48px; }
.sup-video {
  position: relative; padding-bottom: 56.25%; height: 0; /* 16:9 */
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-md); background: #000;
}
.sup-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.sup-eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-hover); margin-bottom: 10px;
}
.sup-guide-meta h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.sup-guide-meta p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.sup-covers { list-style: none; margin: 18px 0 0; padding: 0; }
.sup-covers li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--text); margin: 0 0 9px; }
.sup-tick { color: var(--accent); font-weight: 700; }

/* ===== More guides coming ============================================== */
.sup-soon { padding-top: 48px; padding-bottom: 8px; max-width: 820px; }
.sup-soon h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.sup-soon p { margin: 0 0 16px; color: var(--text-muted); font-size: 14.5px; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.sup-chip {
  font-size: 13px; color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
}

/* ===== FAQ ============================================================== */
.sup-faq { padding-top: 48px; padding-bottom: 8px; max-width: 820px; }
.sup-faq h3 { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.sup-faq-list { display: flex; flex-direction: column; gap: 10px; }
.sup-faq-item {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 4px 18px; transition: border-color 120ms;
}
.sup-faq-item[open] { border-color: var(--border-strong); }
.sup-faq-item summary {
  cursor: pointer; list-style: none; padding: 14px 0; font-size: 15px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sup-faq-item summary::-webkit-details-marker { display: none; }
.sup-faq-item summary::after {
  content: "+"; color: var(--accent); font-size: 20px; font-weight: 400; line-height: 1;
  transition: transform 160ms;
}
.sup-faq-item[open] summary::after { content: "−"; }
.sup-faq-item p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* Settings how-tos: step lists inside the accordion */
.sup-howto-body { padding: 0 0 16px; }
.sup-howto-body p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.sup-howto-body ol { margin: 4px 0 0; padding-left: 20px; }
.sup-howto-body li { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 8px; }
.sup-howto-body b { color: var(--text); font-weight: 600; }
.sup-howto-note { font-size: 12.5px !important; color: var(--accent-hover) !important; margin: 0 0 10px !important; }
.sup-howto-roles {
  margin-top: 14px !important; padding: 12px 14px; background: var(--surface-soft);
  border-radius: 10px; font-size: 13px !important; line-height: 1.55 !important;
}
.sup-howto-body ul { margin: 4px 0 0; padding-left: 20px; }

/* Shopify setup: section intro paragraph (matches how-to body copy). */
.sup-intro-p { max-width: 640px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* ===== Still stuck? ==================================================== */
.sup-contact-wrap { padding-top: 56px; padding-bottom: 72px; }
.sup-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: oklch(0.22 0.012 80); color: oklch(0.95 0.005 80);
  border-radius: 18px; padding: 34px 40px;
}
.sup-contact h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.sup-contact p { margin: 8px 0 0; color: oklch(0.78 0.006 80); font-size: 15px; }
.sup-contact .btn.primary { flex-shrink: 0; }

/* ===== Responsive ====================================================== */
@media (max-width: 820px) {
  .sup-guide { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .sup-contact { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px; }
  .sup-contact .btn.primary { width: 100%; justify-content: center; }
}