/* ─────────────────────────────────────────────────────────────────────────────
   faq.css — page-specific styling for /faq.

   Loads after ptech-home.css. Reuses .ptech-rows / .ptech-row / .ptech-row__h /
   .ptech-row__link from ptech-home.css for every Q&A pair — this file only adds
   the four shapes FAQ content needs that the shared system doesn't already have:
   a stat row, a comparison table, a numbered step list, and a quiet source list.
   Nothing here introduces green — the only green on this page is the inherited
   .ptech-row hover rule and .ptech-row__link color, both already part of the
   shared system.
   ───────────────────────────────────────────────────────────────────────────── */

/* -- stat row: the four pilot-failure numbers -- */
.faq-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4em 2.8em;
  margin-top: 3.2em;
  padding-top: 2.4em;
  border-top: 1px solid var(--ptech-hair);
}

.faq-stat {
  display: flex;
  flex-direction: column;
}

.faq-stat__num {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 2.4em;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ptech-bone);
  margin-bottom: 0.4em;
}

.faq-stat__label {
  display: block;
  max-width: 32em;
  color: var(--ptech-bone-dim);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .faq-stats { grid-template-columns: 1fr; gap: 1.8em; }
  .faq-stat__num { font-size: 1.9em; }
}

/* -- comparison table: the four ways to get this built -- */
.faq-table-scroll {
  margin-top: 2.6em;
  overflow-x: auto;
  border-top: 1px solid var(--ptech-hair);
}

.faq-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.faq-table th,
.faq-table td {
  text-align: left;
  vertical-align: top;
  padding: 1.1em 1.4em 1.1em 0;
  border-bottom: 1px solid var(--ptech-hair);
}

.faq-table th {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ptech-bone-dim);
  font-weight: 400;
}

.faq-table td { color: var(--ptech-bone); }
.faq-table td strong { color: var(--ptech-bone); }

/* -- engagement steps: the ordered, numbered list -- */
.faq-steps {
  counter-reset: faq-step;
  margin: 2.8em 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ptech-hair);
}

.faq-steps li {
  counter-increment: faq-step;
  position: relative;
  padding: 1.5em 0 1.5em 3em;
  border-bottom: 1px solid var(--ptech-hair);
}

.faq-steps li::before {
  content: counter(faq-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.6em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ptech-bone-dim);
}

.faq-steps li p { margin: 0; max-width: 46em; }

/* -- sources: small, quiet citation list -- */
.faq-sources {
  counter-reset: faq-source;
  margin: 2.2em 0 0;
  padding: 0;
  list-style: none;
  max-width: 52em;
}

.faq-sources li {
  counter-increment: faq-source;
  position: relative;
  padding: 0.6em 0 0.6em 1.8em;
  color: var(--ptech-bone-dim);
}

.faq-sources li::before {
  content: counter(faq-source) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
}

.faq-sources li a { text-decoration: underline; text-underline-offset: 0.15em; }

/* -- who this is not for: one quiet paragraph, set apart -- */
.faq-not-for {
  border-left: 2px solid var(--ptech-hair);
  padding-left: 1.6em;
}

@media (max-width: 767px) {
  .faq-table-scroll { margin-top: 2em; }
  .faq-steps { margin-top: 2.2em; }
  .faq-steps li { padding: 1.2em 0 1.2em 2.4em; }
  .faq-steps li::before { top: 1.3em; font-size: 0.68rem; }
  .faq-not-for { padding-left: 1.2em; }
}