/* =========================================================================
   Blog post: "How Much Does a Website Cost in 2026?"
   /blog/how-much-does-a-website-cost/styles.css

   Page-scoped additions only. Everything structural now lives in the
   shared component at /assets/css/sections/article.css, which is already
   linked via site.bundle.css:

     - .article-hero   the page shell that centres the title block in a
                       hero band clearing the 80px fixed header
     - .table-scroll   data tables, which collapse into stacked labelled
                       blocks below 700px instead of scrolling sideways
     - table/caption/thead th/tbody th/td/.num/.table-note
     - figure + figcaption

   So a future post only needs a .article-hero shell and plain table
   markup to get the same layout and the same mobile behaviour.

   Only the callout, the stat row, and the FAQ lead live here. Scoped
   entirely under .article so nothing can leak to another page.

   Colours are existing design tokens from base/reset.css plus the accent
   already used by .article blockquote (Rule #5: no new brand colours).
   ========================================================================= */

/* Answer-first callout — the direct response to the section question,
   repeated visually so it survives skimming. */
.article .key-takeaway {
  border-left: 3px solid #e63946;
  background: var(--color-dark-gray);
  padding: 20px 24px;
  margin: 0 0 1.5rem;
}

.article .key-takeaway p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-white);
  margin: 0;
}

.article .key-takeaway p + p {
  margin-top: 0.75rem;
}

/* Three-up headline figures */
.article .stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 1.75rem 0 2.25rem;
}

.article .stat {
  border-top: 2px solid #e63946;
  padding-top: 14px;
}

.article .stat .v {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.article .stat .k {
  display: block;
  font-size: 0.82rem;
  color: var(--color-gray);
  margin-top: 6px;
  line-height: 1.5;
}

/* FAQ answers sit under h3 headings; this rule is the only styling needed
   beyond the component default. */
.article .faq-lead {
  color: var(--color-gray);
  font-size: 1rem;
}

@media (max-width: 768px) {
  .article .stat-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .article .key-takeaway {
    padding: 18px 20px;
  }
}