/* qk-why.css — styles specific to /why-quikash.
 *
 * The page reuses qk-legal.css for the hero / body grid / TOC / footer
 * scaffolding (so it visually reads as part of the brand's editorial
 * surface, alongside the Terms / Privacy / Bonus Policy pages). This file
 * adds the components that don't appear on the legal pages: the
 * "four numbers" bullet list, the QuiKash-vs-industry comparison table,
 * and the CTA block at the bottom.
 *
 * Dark theme; tokens come from main.css and stake.css.
 */

/* Hero subhead — short positioning paragraph below the H1. */
.legal-hero .legal-sub {
  margin: 14px 0 0;
  max-width: 780px;
  color: var(--s-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* The four-numbers bullet list at the top of the article. Each item is
 * effectively a callout: the leading <strong> carries the headline
 * number, the rest of the sentence carries the industry baseline.
 *
 * Geometry: the LI has padding-left:60px, the absolutely-positioned
 * counter circle sits at left:18px width:32px (so it spans 18-50px from
 * the LI's left edge — 10px clear of the text and 18px clear of the LI
 * edge). overflow:visible on the LI is defensive against any inherited
 * overflow:hidden that could clip the circle.
 */
.qk-why-bullets {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: qk-why;
  display: grid;
  gap: 12px;
}
.qk-why-bullets li {
  position: relative;
  padding: 16px 18px 16px 60px;
  background: var(--s-bg-2, #161b22);
  border: 1px solid var(--s-line, #2a3037);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--s-text, #e7edf3);
  counter-increment: qk-why;
  overflow: visible;
}
.qk-why-bullets li::before {
  content: counter(qk-why, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* line-height:32px on a 32px-tall circle is the bulletproof way to
     vertically center a single-line counter inside a fixed box.
     Avoids the grid+place-items quirk seen in some pseudo-element
     rendering paths. */
  text-align: center;
  line-height: 32px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  color: #0d1117;
  background: var(--s-green, #66ffe5);
  box-sizing: border-box;
}
.qk-why-bullets li strong {
  color: var(--s-text, #e7edf3);
}

/* Comparison table — the heart of the page. Real <table> markup so
 * crawlers and screen readers see structured data. */
.qk-compare {
  margin: 28px 0;
}
.qk-compare-note {
  color: var(--s-muted, #8b96a3);
  font-size: 13px;
  margin: 6px 0 16px;
  line-height: 1.55;
}
.qk-compare-tablewrap {
  /* Horizontal scroll on narrow viewports rather than text wrapping that
   * would compress the comparison. The visible pattern is "swipe to see
   * the rest" rather than a vertical reflow. */
  overflow-x: auto;
  border: 1px solid var(--s-line, #2a3037);
  border-radius: 10px;
}
.qk-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 720px;
}
.qk-compare-caption {
  /* Visually hidden, semantically present — describes the table for
   * AEO / accessibility without taking layout space. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.qk-compare-table thead th {
  background: var(--s-bg-3, #1c222b);
  color: var(--s-text, #e7edf3);
  text-align: left;
  font-weight: 800;
  font-size: 13px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--s-line, #2a3037);
}
.qk-compare-table thead th:nth-child(2) { color: var(--s-green, #66ffe5); }
.qk-compare-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--s-text, #e7edf3);
  padding: 14px 16px;
  vertical-align: top;
  border-top: 1px solid var(--s-line, #2a3037);
  background: var(--s-bg-2, #161b22);
  width: 26%;
}
.qk-compare-table tbody td {
  padding: 14px 16px;
  vertical-align: top;
  color: var(--s-muted, #aab4bf);
  line-height: 1.5;
  border-top: 1px solid var(--s-line, #2a3037);
}
.qk-compare-table tbody td:first-of-type {
  /* QuiKash column — make it pop. */
  color: var(--s-text, #e7edf3);
  width: 37%;
}
.qk-compare-table tbody td:first-of-type strong {
  color: var(--s-green, #66ffe5);
  font-weight: 700;
}
.qk-compare-table tbody td:last-child { width: 37%; }
.qk-compare-table tbody tr:hover {
  background: rgba(102, 255, 229, 0.03);
}

/* CTA list at the bottom — internal links that promote the per-game
 * pages from this high-authority anchor. Same visual treatment as
 * legal-foot links so the page reads as a coherent editorial surface. */
.qk-why-cta {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.qk-why-cta li { margin: 0; }
.qk-why-cta-link {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--s-bg-2, #161b22);
  border: 1px solid var(--s-line, #2a3037);
  color: var(--s-text, #e7edf3);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.qk-why-cta-link:hover {
  background: var(--s-bg-3, #1c222b);
  border-color: var(--s-green, #66ffe5);
  color: var(--s-green, #66ffe5);
}

/* Comparison FAQ block reuses .qk-faq from the support page styles
 * (qk-legal.css / support page CSS). Only override here is to give the
 * comparison-FAQ heading a little more breathing room since it follows
 * a long content section, not a tile. */
#comparison-faq {
  margin-top: 28px;
}
#comparison-faq .qk-faq-intro {
  color: var(--s-muted, #8b96a3);
  font-size: 14px;
  margin: 4px 0 14px;
  line-height: 1.55;
}

/* Mobile: tighten the bullet padding and the table cells. */
@media (max-width: 720px) {
  .qk-why-bullets li {
    padding: 14px 14px 14px 52px;
    font-size: 14px;
  }
  .qk-why-bullets li::before {
    left: 12px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 11px;
  }
  .qk-compare-table thead th,
  .qk-compare-table tbody th,
  .qk-compare-table tbody td {
    padding: 11px 12px;
    font-size: 13px;
  }
}