/*
 * fp-checklist — "us vs. the alternatives" checklist table for static pages in public/.
 * The Next.js twin is components/checklist-comparison.tsx; keep the markup contract the same.
 *
 * Markup contract:
 *   <div class="fp-check">
 *     <table class="fp-check__table">
 *       <caption>What the table compares (required; parsers read it)</caption>
 *       <thead><tr><th scope="col"></th><th scope="col" class="is-us">Flannel</th><th scope="col">Other</th>…</tr></thead>
 *       <tbody>
 *         <tr><th scope="row">Row label that stands alone</th>
 *             <td class="is-us" data-label="Flannel"><span class="fp-yes">✓</span></td>
 *             <td data-label="Other"><span class="fp-no">✗</span></td> …</tr>
 *         <tr class="is-loss"> … a row the featured column honestly loses … </tr>
 *       </tbody>
 *     </table>
 *     <p class="fp-check__note">Optional note or source line.</p>
 *   </div>
 *
 * Every ✗ in a competitor column must be true of that whole category. Name categories, never firms.
 * Theme by overriding the custom properties on .fp-check (defaults = the ad landing page sage system).
 * Phones (<640px): each row stacks — label on top, one cell per column underneath, labelled by data-label.
 */
.fp-check {
  --fpc-accent: #386548;
  --fpc-accent-soft: #f3f7f4;
  --fpc-accent-ink: #254030;
  --fpc-ink: #1E293B;
  --fpc-muted: #64748B;
  --fpc-faint: #94A3B8;
  --fpc-line: #e4ede6;
  --fpc-border: #c8dace;
  --fpc-bg: #ffffff;
  --fpc-head-bg: #FAFAF7;
  --fpc-radius: 12px;
  max-width: 860px;
  margin: 0 auto;
}
.fp-check__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--fpc-bg);
  border: 1px solid var(--fpc-border);
  border-radius: var(--fpc-radius);
  overflow: hidden;
  font-size: .9rem;
}
.fp-check__table caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.fp-check__table th,
.fp-check__table td {
  padding: .75rem .8rem;
  border-bottom: 1px solid var(--fpc-line);
  text-align: center;
  vertical-align: middle;
  color: var(--fpc-muted);
  line-height: 1.45;
}
.fp-check__table thead th {
  background: var(--fpc-head-bg);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
}
.fp-check__table thead th.is-us { background: var(--fpc-accent); color: #fff; font-size: .88rem; }
.fp-check__table tbody th { text-align: left; font-weight: 400; color: var(--fpc-ink); width: 40%; }
.fp-check__table td.is-us { background: var(--fpc-accent-soft); color: var(--fpc-accent-ink); font-weight: 700; }
.fp-check__table tbody tr:last-child > * { border-bottom: 0; }
.fp-check__table tr.is-loss th { font-style: italic; }
.fp-yes { color: var(--fpc-accent); font-weight: 700; font-size: 1.1rem; }
.fp-no { color: var(--fpc-faint); font-size: 1.05rem; }
.fp-check__note { max-width: 640px; margin: 1rem auto 0; text-align: center; font-size: .9rem; color: var(--fpc-muted); line-height: 1.6; }

@media (max-width: 639px) {
  .fp-check__table, .fp-check__table tbody { display: block; }
  .fp-check__table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
  }
  .fp-check__table tbody tr {
    display: grid;
    grid-template-columns: repeat(var(--fpc-cols, 3), minmax(0, 1fr));
    border-bottom: 1px solid var(--fpc-line);
  }
  .fp-check__table tbody tr:last-child { border-bottom: 0; }
  .fp-check__table th, .fp-check__table td { border-bottom: 0; padding: .45rem .4rem; font-size: .82rem; }
  .fp-check__table tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding: .8rem .85rem .2rem;
    font-weight: 700;
    font-size: .88rem;
  }
  .fp-check__table td { padding-bottom: .75rem; }
  .fp-check__table td::before {
    content: attr(data-label);
    display: block;
    font-size: .64rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fpc-faint);
    margin-bottom: .15rem;
  }
  .fp-check__table td.is-us { border-radius: 8px; margin: 0 .25rem .5rem; }
  .fp-check__table td.is-us::before { color: var(--fpc-accent); }
}