/* ─────────────────────────────────────────────────────────────────────────────
   custom-software-orange-county.css — page-specific styling for
   /custom-software-orange-county.

   Loads after ptech-home.css. Reuses about-section / about-header_wrapper /
   ptech-rows / ptech-row / ptech-row__h / ptech-row__link / offer-cta /
   offer-btn as they already exist. This page is long-form AEO content (a
   priced-services landing page with a comparison table, a stack list, a
   disqualifier block, an FAQ and cited sources) and the homepage never needed
   any of that, so the additions here are: a left-aligned prose column for
   multi-paragraph answers, a stat grid for the cited market numbers, a
   comparison table, a plain fact list, and a sources block.

   Green stays reserved for the .ptech-row hover rule already in ptech-home.css
   and the CTA's mailto button below — nowhere else on this page.
   ───────────────────────────────────────────────────────────────────────────── */

.cs-prose,
.cs-list-wrap {
  max-width: 46em;
  margin-top: 2.4em;
  margin-inline: auto;
}

.cs-prose p,
.cs-list-wrap > p {
  margin: 0 0 1.3em;
  color: var(--ptech-bone-dim);
}

.cs-prose p:last-child,
.cs-list-wrap > p:last-child { margin-bottom: 0; }

.cs-prose strong,
.cs-list-wrap strong { color: var(--ptech-bone); font-weight: 600; }

/* ── Stat grid — cited market numbers, not a call to action. ────────────────── */
.cs-stats {
  margin-top: 3em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ptech-hair);
  border-top: 1px solid var(--ptech-hair);
  border-bottom: 1px solid var(--ptech-hair);
}

.cs-stat {
  background: var(--ptech-ink);
  padding: 2em 1.6em;
}

.cs-stat b {
  display: block;
  font-size: 2.1em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.35em;
}

.cs-stat span {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ptech-bone-dim);
}

@media (max-width: 900px) {
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .cs-stats { grid-template-columns: 1fr; }
}

/* ── Comparison table ─────────────────────────────────────────────────────── */
.table-scroll {
  margin-top: 2.4em;
  overflow-x: auto;
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.92rem;
}

.cs-table th,
.cs-table td {
  text-align: left;
  padding: 1em 1.2em 1em 0;
  border-bottom: 1px solid var(--ptech-hair);
  vertical-align: top;
  color: var(--ptech-bone-dim);
}

.cs-table th {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.cs-table td:first-child,
.cs-table th:first-child { color: var(--ptech-bone); }

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

/* The one row that is the path forward gets the one green mark on the table. */
.cs-table tbody tr:last-child td:first-child { color: var(--ptech-green-glow); }

/* ── Plain fact lists — the stack section and the disqualifier block, where
   each line stands alone rather than pairing a title with a description. ── */
.cs-ul,
.cs-ol {
  max-width: 46em;
  margin: 2.4em 0 0;
  padding-left: 1.2em;
}

.cs-ul li,
.cs-ol li {
  padding-left: 0.3em;
  margin-bottom: 0.9em;
  color: var(--ptech-bone-dim);
  font-size: 1rem;
  line-height: 1.6;
}

.cs-ul li:last-child,
.cs-ol li:last-child { margin-bottom: 0; }

.cs-ul li strong,
.cs-ol li strong { color: var(--ptech-bone); font-weight: 600; }

/* ── Sources ──────────────────────────────────────────────────────────────── */
.cs-sources {
  margin-top: 3.5em;
  padding-top: 2.2em;
  border-top: 1px solid var(--ptech-hair);
}

.cs-sources h3 {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ptech-bone-dim);
  margin: 0 0 1.2em;
}

.cs-sources ol {
  max-width: 46em;
  padding-left: 1.3em;
  margin: 0;
}

.cs-sources li {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ptech-bone-dim);
  margin-bottom: 0.7em;
}

.cs-sources a {
  color: var(--ptech-bone-dim);
  text-decoration: underline;
  text-decoration-color: var(--ptech-hair);
  text-underline-offset: 0.15em;
}

.cs-sources a:hover { color: var(--ptech-green-glow); text-decoration-color: currentColor; }

/* ── CTA band — same button language as the homepage's offer-section. ───────
   Duplicated here (rather than shared) because it lives in an index.html
   w-embed style block, not in ptech-home.css. ─────────────────────────────── */
.cta-band .offer-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2.4em;
}



@media (max-width: 767px) {
  .cs-stats,
  .table-scroll,
  .cs-ul,
  .cs-ol,
  .cs-prose,
  .cs-list-wrap { margin-top: 1.8em; }
}