/* === F39 Phase 2 — marketing pages ======================================== */
/* Shared styles for /about, /how-it-works, /sign-packs.                      */
/* Visual language matches the home seo-about section: max-width centred       */
/* prose with subtle headings.                                                 */

.marketing {
  max-width: 720px;
  margin: 32px auto 64px;
  padding: 0 20px;
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.6;
}

.marketing h1 {
  font-size: 2rem;
  color: var(--text-heading);
  margin-bottom: 8px;
  font-weight: 800;
}

.marketing > .lede {
  font-size: 1.1rem;
  color: var(--text-body);
  margin-bottom: 32px;
}

.marketing section { margin-top: 36px; }

.marketing h2 {
  font-size: 1.3rem;
  color: var(--text-heading);
  margin-bottom: 12px;
  font-weight: 700;
}

.marketing h3 {
  font-size: 1.05rem;
  color: var(--text-heading);
  margin-top: 20px;
  margin-bottom: 6px;
  font-weight: 700;
}

.marketing p { margin-bottom: 14px; }

.marketing ul, .marketing ol {
  margin: 0 0 14px 22px;
}

.marketing li { margin-bottom: 6px; }

.marketing a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}

.marketing a:hover { text-decoration: underline; }

/* Sign pack list — compact two-column table. */
.pack-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 0.95rem;
}

.pack-table td {
  padding: 8px 12px 8px 0;
  vertical-align: top;
  border-bottom: 1px solid #f1f3f5;
}

.pack-table tr:last-child td { border-bottom: none; }

.pack-table td:first-child {
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
  padding-right: 18px;
}

@media (max-width: 600px) {
  .pack-table { font-size: 0.9rem; }
  .pack-table td:first-child { white-space: normal; min-width: 120px; }
}

/* FAQ — question is a heading; answer follows in normal prose. */
.faq-item { margin-top: 26px; }

.faq-item h2 {
  font-size: 1.05rem;
  color: var(--text-heading);
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .marketing { margin: 20px auto 48px; padding: 0 16px; font-size: 0.97rem; }
  .marketing h1 { font-size: 1.6rem; }
  .marketing h2 { font-size: 1.15rem; }
}