/* VertixaTrade — Help Center layout. Pairs with /legal/legal.css (tokens, header, footer, .legal-content typography). */
.help-shell { max-width: 1080px; margin: 0 auto; padding: 34px 22px 90px; display: grid; grid-template-columns: 246px 1fr; gap: 42px; align-items: start; }
.help-side { position: sticky; top: 74px; }
.help-side h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); font-weight: 800; }
.help-nav { display: flex; flex-direction: column; gap: 2px; }
.help-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--body); font-weight: 600; font-size: 14px; }
.help-nav a:hover { background: rgba(255,255,255,.05); text-decoration: none; color: #fff; }
.help-nav a.is-active { background: rgba(42,148,243,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(42,148,243,.28); }
.help-nav a .ic { width: 18px; text-align: center; flex: none; opacity: .95; }

.help-main { min-width: 0; }
.help-main .legal-head h1 { font-size: 28px; }
.help-main .legal-content section:first-child { border-top: 0; padding-top: 6px; }

/* trust chips */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.trust-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.trust-card .tc-ic { font-size: 20px; line-height: 1; }
.trust-card h3 { margin: 9px 0 5px; font-size: 15px; color: #fff; font-weight: 800; }
.trust-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* topic cards (hub) */
.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 14px; margin-top: 22px; }
a.hcard { display:block; background: var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; color:var(--body); transition:.15s; }
a.hcard:hover { border-color: rgba(42,148,243,.42); text-decoration:none; transform: translateY(-2px); }
a.hcard .hc-ic { font-size:22px; }
a.hcard h3 { margin:8px 0 6px; color:#fff; font-size:16px; font-weight:800; }
a.hcard p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; }

/* FAQ accordions */
.faq-q { border:1px solid var(--line); border-radius:12px; margin:0 0 10px; background: var(--card); overflow:hidden; }
.faq-q summary { cursor:pointer; padding:15px 18px; font-weight:700; color:#fff; list-style:none; font-size:15px; position:relative; }
.faq-q summary::-webkit-details-marker { display:none; }
.faq-q summary::after { content:'+'; position:absolute; right:18px; top:13px; color:var(--muted); font-weight:700; font-size:19px; }
.faq-q[open] summary::after { content:'\2013'; }
.faq-q[open] summary { border-bottom:1px solid var(--line2); }
.faq-q .faq-a { padding:14px 18px; color:var(--body); font-size:14.5px; line-height:1.7; }
.faq-q .faq-a p:last-child { margin-bottom:0; }

.pill18 { display:inline-block; border:1.5px solid #ff6b6b; color:#ff6b6b; font-weight:800; border-radius:999px; padding:1px 9px; font-size:13px; vertical-align:middle; }
.help-help { margin-top:28px; padding:16px 18px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:13.5px; }
.help-help a { font-weight:700; }
.rg-logos { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:14px 0 4px; }
.rg-logos a { color:var(--body); font-weight:700; font-size:13.5px; border:1px solid var(--line); border-radius:10px; padding:8px 13px; }
.rg-logos a:hover { border-color: rgba(42,148,243,.4); text-decoration:none; }

@media (max-width: 820px) {
  .help-shell { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; }
  .help-side { position: static; }
  .help-side h4 { display:none; }
  .help-nav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .help-nav a { white-space: nowrap; padding: 8px 13px; }
}

/* USDT how-to guide: steps, CTAs, notes */
.help-steps{display:grid;gap:14px;margin:22px 0 10px}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.step__n{width:34px;height:34px;border-radius:50%;background:rgba(42,148,243,.16);color:#5cb4ff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(42,148,243,.32);font-size:15px}
.step h3{margin:3px 0 8px;color:#fff;font-size:16px;font-weight:800}
.step p{margin:0 0 9px;color:var(--muted);font-size:14px;line-height:1.65}
.step p:last-child{margin-bottom:0}
.step b{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 2px}
.help-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#3ba2f5,#2b8fe6);color:#fff;font-weight:800;padding:12px 22px;border-radius:12px;font-size:14.5px;box-shadow:0 6px 18px rgba(42,148,243,.28)}
.help-cta:hover{filter:brightness(1.07);text-decoration:none;color:#fff}
.help-cta--ghost{background:transparent;color:#bfe0ff;box-shadow:inset 0 0 0 1.5px rgba(42,148,243,.55)}
.help-cta--ghost:hover{background:rgba(42,148,243,.1);color:#fff}
.help-note{background:rgba(42,148,243,.09);border:1px solid rgba(42,148,243,.26);border-radius:12px;padding:14px 16px;margin:16px 0;color:var(--body);font-size:14px;line-height:1.6}
.help-note b{color:#fff}
.help-note.help-warn{background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.32)}