/* ============================================================================
   AJAY CHEEMA — FAQ page
   Page hero + accordion list + CTA band. The accordion itself lives in
   components.css; this file adds the list measure and the comparison table
   used inside answer 2.
   Bundled by PostCSS → assets/css/page-faq.css
   ============================================================================ */

/* ============================================================================
   SHARED EDITORIAL INDEX GRAMMAR
   Used by the home Experience section and the Method page (steps / receive).
   Source: Ajay Cheema Website.html page styles (exp / idx / metaline).
   ============================================================================ */

.exp { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }

@media (max-width: 860px){ .exp { grid-template-columns: 1fr; gap: 28px; } }

.exp__intro { position: sticky; top: 96px; }

@media (max-width: 860px){ .exp__intro { position: static; } }

.exp__intro p { color: var(--ash-400); font-size: 15.5px; line-height: 1.6; margin: 18px 0 0; max-width: 34ch; }

/* shared editorial index language */

.idx { font-family: var(--font-text); font-size: 13px; letter-spacing: .12em;
  color: var(--ignite); font-weight: 600; }

.on-dark .idx { color: var(--ignite-300); }

.metaline { font-family: var(--font-text); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }

/* ============================================================================
   SHARED PAGE HERO (carbon)
   Used by The Method page and the standard/legal page template.
   Source: Ajay Cheema/The Method.html page styles.
   ============================================================================ */

.page-hero { background: var(--carbon); padding: clamp(80px,12vh,150px) clamp(24px,5vw,72px) clamp(56px,8vh,96px); }

.page-hero__inner { max-width: var(--container); margin: 0 auto; }

.page-hero h1 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(40px,7vw,96px); line-height: .98; color: var(--bone); margin: 18px 0 0;
  overflow-wrap: anywhere; }

.page-hero p.sub { font-size: clamp(16px,1.4vw,20px); color: var(--ash-400); line-height: 1.55;
  margin: 24px 0 0; max-width: 52ch; }

.faq__list { max-width: 900px; margin-inline: auto; }

.faq__list .acc { border-color: var(--border); }

.faq__list .acc__a-inner p:first-child { margin-top: 0; }

.faq__list .acc__a-inner p:last-child { margin-bottom: 0; }

.faq__list .acc__a-inner ul { margin: 0 0 16px; padding-left: 20px; }

.faq__list .acc__a-inner li { margin-bottom: 6px; }

/* ---- CTA BAND (shared grammar with How It Works) ---- */

.ctaband { background: var(--carbon); text-align: center;
  padding: clamp(64px,10vh,120px) clamp(24px,5vw,72px); }

.ctaband h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(36px,5vw,64px); line-height: 1.02; color: var(--bone); margin: 0;
  overflow-wrap: anywhere; }

.ctaband__sub { font-size: clamp(16px,1.4vw,19px); line-height: 1.6; color: var(--ash-400);
  margin: 20px auto 0; max-width: 52ch; }

/* ---- COMPARISON TABLE (answer 2) ---- */

.faq-table__scroll { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }

.faq-table { width: 100%; border-collapse: collapse; font-size: 15px; }

.faq-table th, .faq-table td { padding: 14px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); }

.faq-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ignite);
  border-bottom: 1px solid var(--carbon); white-space: nowrap; }

.faq-table tbody th { font-weight: 600; color: var(--carbon); white-space: nowrap; }

.faq-table td { color: var(--text-muted); }

.faq-table tbody tr:last-child th, .faq-table tbody tr:last-child td { border-bottom: 0; }

/* Restack into labelled blocks on phones — a 3-column table cannot stay
   legible at 360px, and horizontal scrolling inside an accordion is fiddly. */

@media (max-width: 700px) {
  .faq-table__scroll { overflow-x: visible; }
  .faq-table, .faq-table tbody, .faq-table tr, .faq-table th, .faq-table td { display: block; width: 100%; }
  .faq-table thead { display: none; }
  .faq-table tbody tr { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .faq-table tbody tr:last-child { border-bottom: 0; }
  .faq-table th, .faq-table td { border-bottom: 0; padding: 0; }
  .faq-table tbody th { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ignite); white-space: normal; margin-bottom: 8px; }
  .faq-table td { position: relative; padding: 6px 0 6px 0; }
  .faq-table td::before { content: attr(data-label); display: block; font-family: var(--font-display);
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--carbon); margin-bottom: 2px; }
}