/* Support page (/support/) - download cards and the jackpot table scroll
   wrapper. Everything else reuses .faq, .proof and .contact-grid from
   site.css unchanged. */

.dl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-8); }
.dl-card {
  display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-raised); text-decoration: none; color: var(--text-primary);
  transition: border-color var(--dur-2) var(--ease-out);
}
.dl-card:hover { border-color: var(--text-brand); }
.dl-card b { font: var(--text-h4); }
/* not the icon tile, which is a span too and keeps its white icon */
.dl-card span:not(.icon-tile) { font: var(--text-body-sm); color: var(--text-secondary); }

/* Jackpot table: scrolls inside its own container so a 4-column table never
   forces the page itself to scroll horizontally on a phone. */
.table-scroll {
  overflow-x: auto; overscroll-behavior-x: contain; margin: var(--sp-4) 0 var(--sp-6);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.table-scroll table { width: 100%; min-width: 420px; border-collapse: collapse; font: var(--text-body-sm); }
.table-scroll th, .table-scroll td { padding: var(--sp-3) var(--sp-5); text-align: left; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.table-scroll thead th { background: var(--surface-subtle); font: var(--text-label); color: var(--text-secondary); }
.table-scroll tr:last-child > * { border-bottom: 0; }

/* Contact block on the dark band: phone/email/hours, sized for a real
   email address rather than the short figures .stat/.proof expect. */
.support-contact { display: grid; gap: var(--sp-6); }
.support-contact a { display: inline-flex; align-items: center; gap: 10px; font: var(--text-h4); color: var(--text-on-dark); word-break: break-word; }
.support-contact a .i { color: var(--amber-300); flex: 0 0 auto; }
.support-contact b { display: block; font: var(--text-h4); color: var(--text-on-dark); }
.support-contact p { margin-top: var(--sp-2); font: var(--text-body-sm); color: var(--text-on-dark-dim); }