/* ==========================================================================
   Cost guide (/cost/, Figma frame 1:2182). Page-specific styles only.
   Uses site.css custom properties only: no hard-coded colours, fonts, shadows or gradients.
   Shared pieces used as-is: .article-hero, .breadcrumb, .byline, .quick-answer, .data-table,
   .table-scroll, .tabs, .faq, .sources, .crisis-box.
   ========================================================================== */

.cost-hero__note { font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-muted); }

.cost-page { padding-bottom: var(--space-24); }
.cost-block { margin-top: var(--space-16); }
.cost-block--first { margin-top: var(--space-2); }

/* Section heading (no eyebrow labels) */
.cost-head { display: grid; gap: var(--space-3); max-width: var(--reading); margin-bottom: var(--space-8); }
.cost-head__title {
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); color: var(--color-text);
}
.cost-head__lede { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-text-muted); }

/* ---------- On this page (plain link list) ---------- */
.cost-toc {
  display: grid; gap: var(--space-1); margin-top: var(--space-10);
  padding-block: var(--space-3); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.cost-toc__title { font-size: var(--fs-sm); line-height: 22px; color: var(--color-text); }
.cost-toc__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.cost-toc__list a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary);
}
@media (min-width: 960px) {
  .cost-toc { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-8); }
}

/* ---------- Comparison bar chart (1:2287): HTML/CSS, values in text ---------- */
.cost-chart {
  margin: 0; padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
@media (min-width: 640px) { .cost-chart { padding: var(--space-8); } }
.cost-chart__rows { display: grid; gap: var(--space-8); }
.cost-chart__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.cost-chart__name { font-size: var(--fs-h3); line-height: 28px; color: var(--color-text); }
.cost-chart__value {
  font-size: var(--fs-h3); line-height: 28px; font-weight: 700; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.cost-chart__value span { font-size: var(--fs-sm); font-weight: 400; color: var(--color-text-muted); }
.cost-chart__row--main .cost-chart__value { color: var(--color-primary); }
.cost-chart__track {
  position: relative; height: 20px; margin-top: var(--space-3);
  border-radius: var(--radius-sm); background: var(--color-bg-alt);
}
.cost-chart__bar {
  position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from));
  border-radius: var(--radius-sm); background: var(--color-text-subtle);
}
.cost-chart__row--main .cost-chart__bar { background: var(--color-primary); }
.cost-chart__avg {
  position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 2px; margin-left: -1px;
  background: var(--color-text);
}
.cost-chart__note { margin-top: var(--space-2); font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-muted); }
.cost-chart__axis {
  position: relative; height: 28px; margin-top: var(--space-6); padding-top: var(--space-2);
  border-top: 1px solid var(--color-border); font-size: var(--fs-xs); line-height: 16px; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.cost-chart__axis span { position: absolute; top: var(--space-2); transform: translateX(-50%); white-space: nowrap; }
.cost-chart__axis span:nth-child(1) { left: 0; transform: none; }
.cost-chart__axis span:nth-child(2) { left: 25%; }
.cost-chart__axis span:nth-child(3) { left: 50%; }
.cost-chart__axis span:nth-child(4) { left: 75%; }
.cost-chart__axis span:nth-child(5) { right: 0; transform: none; }
@media (max-width: 479.98px) { .cost-chart__axis span:nth-child(2), .cost-chart__axis span:nth-child(4) { display: none; } }
.cost-chart__caption {
  display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft); font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-soft);
}
.cost-chart__caption strong { color: var(--color-text); }

/* ---------- Price-tier table (1:2359) ---------- */
.cost-tiers { min-width: 760px; }
.cost-tiers tbody th { font-size: var(--fs-label); }
.cost-tiers__price {
  font-size: var(--fs-h3); line-height: 28px; font-weight: 700; color: var(--color-text);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cost-tiers__list { padding-left: 1.1em; list-style: disc; }
.cost-tiers__list li + li { margin-top: var(--space-1); }

/* ---------- Included vs extra (1:2519): two plain lists ---------- */
.cost-split { display: grid; gap: var(--space-10); }
@media (min-width: 768px) { .cost-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); } }
.cost-split__title {
  padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 2px solid var(--color-text);
  font-size: var(--fs-h3); line-height: 28px; color: var(--color-text);
}
.cost-split__list { padding-left: 1.2em; list-style: disc; }
.cost-split__list li { font-size: var(--fs-body); line-height: 26px; color: var(--color-text-soft); }
.cost-split__list li + li { margin-top: var(--space-3); }
.cost-split__list li::marker { color: var(--color-text-muted); }
.cost-split__list strong { color: var(--color-text); }

/* ---------- Cost estimator (1:2669) ---------- */
.cost-est {
  display: grid; gap: var(--space-8); padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
@media (min-width: 640px) { .cost-est { padding: var(--space-8); } }
@media (min-width: 960px) { .cost-est { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); padding: var(--space-10); } }
.cost-est .cost-head__lede { margin-top: var(--space-3); }
.cost-est__form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.cost-est__label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-label); line-height: 20px; font-weight: 700; color: var(--color-text); }
.cost-est__select {
  width: 100%; min-height: 48px; padding: 10px 40px 10px 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  background: var(--color-white) url("/assets/icons/chevron-down.svg") no-repeat right 14px center / 12px 8px;
  font-size: var(--fs-body); line-height: 24px; color: var(--color-text);
  -webkit-appearance: none; appearance: none;
}
.cost-est__select:hover { border-color: var(--color-primary); }
.cost-est__check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; }
.cost-est__check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--color-primary); }
.cost-est__check label { font-size: var(--fs-body); line-height: 26px; font-weight: 700; color: var(--color-text); cursor: pointer; }
.cost-est__check label span { display: block; font-size: var(--fs-sm); line-height: 22px; font-weight: 400; color: var(--color-text-muted); }

.cost-est__output { align-self: start; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
@media (min-width: 960px) { .cost-est__output { padding: 0 0 0 var(--space-10); border-top: 0; border-left: 1px solid var(--color-border); } }
.cost-est__out-label { font-size: var(--fs-sm); line-height: 22px; font-weight: 700; color: var(--color-text-muted); }
.cost-est__total {
  margin-top: var(--space-1); font-size: var(--fs-h2); line-height: 1.2; font-weight: 700; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.cost-est__breakdown { margin: var(--space-5) 0 0; border-top: 1px solid var(--color-border); }
.cost-est__breakdown > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding-block: var(--space-3); border-bottom: 1px solid var(--color-border-soft);
}
.cost-est__breakdown dt { font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-soft); }
.cost-est__breakdown dd { margin: 0; font-size: var(--fs-sm); line-height: 22px; font-weight: 700; color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-est__disclaimer { margin-top: var(--space-4); font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-soft); }
.cost-est__cta { margin-top: var(--space-4); font-size: var(--fs-sm); line-height: 22px; }
.cost-est__cta a { font-weight: 700; }
.cost-est__nojs { display: none; margin-top: var(--space-4); font-size: var(--fs-body); color: var(--color-text-soft); }
.no-js .cost-est__nojs { display: block; }
.no-js .cost-est__form, .no-js .cost-est__output { display: none; }

.cost-est__table { margin-top: var(--space-6); }
.cost-est__table > summary {
  display: list-item; padding-block: 10px; cursor: pointer;
  font-size: var(--fs-label); line-height: 24px; font-weight: 700; color: var(--color-primary);
}
.cost-est__table > summary:hover { text-decoration: underline; }
.cost-est__table .table-scroll { margin-top: var(--space-3); }
.cost-est__table td { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Insurance tabs (1:2737); tab buttons are the shared .tabs component ---------- */
.cost-ins { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .cost-ins { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } }
.cost-ins__title { font-size: var(--fs-h3-lg); line-height: 1.3; color: var(--color-text); }
.cost-ins__main p { margin-top: var(--space-3); font-size: var(--fs-body); line-height: 26px; color: var(--color-text-soft); }
.cost-ins__side { align-self: start; padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-bg-alt); }
.cost-ins__side-title { font-size: var(--fs-label); line-height: 20px; color: var(--color-text); }
.cost-ins__list { margin-top: var(--space-3); padding-left: 1.2em; list-style: disc; }
.cost-ins__list li { font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-soft); }
.cost-ins__list li + li { margin-top: var(--space-2); }

/* ---------- FAQ (1:2789): shared .faq--lg, limited to reading width ---------- */
.cost-faq { max-width: var(--reading); }

/* ---------- Method + sources (1:2830) ---------- */
.cost-method { display: grid; gap: var(--space-10); padding-top: var(--space-10); border-top: 1px solid var(--color-border); }
@media (min-width: 960px) { .cost-method { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); } }
.cost-method__text { display: grid; gap: var(--space-4); align-content: start; }
.cost-method__text .cost-head__title { font-size: var(--fs-h3-lg); }
.cost-method__text p { font-size: var(--fs-body); line-height: 26px; color: var(--color-text-soft); }
.cost-method__text a { font-weight: 700; }
.cost-method .sources { padding-top: 0; border-top: 0; align-content: start; }

/* ---------- Related guides (1:2867): plain list ---------- */
.cost-related .cost-head__title { font-size: var(--fs-h3-lg); margin-bottom: var(--space-4); }
.cost-related__list { border-top: 1px solid var(--color-border-soft); }
.cost-related__list li { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.cost-related__list a { font-size: var(--fs-lead); line-height: 1.5; font-weight: 700; }
.cost-related__text { display: block; margin-top: var(--space-1); font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-muted); }