/* v1.0.7 — two-width layout system; Core design system remains authoritative. */
.br-cost-page,
.br-cost-hub {
  --br-text: #17231c;
  --br-muted: #5d675f;
  --br-border: #dce2dd;
  --br-border-strong: #bdc8c0;
  --br-soft: #f3f6f3;
  --br-accent: #286044;
  --br-accent-dark: #17432f;
  --br-accent-deep: #103323;
  --br-accent-soft: #edf4ef;
  width: 100%;
  min-width: 0;
  color: var(--br-text);
  font: inherit;
  line-height: 1.55;
  --br-cost-tool: var(--br-site-tool, 1180px);
  --br-cost-reading: var(--br-site-reading, 820px);
}
.br-cost-page *, .br-cost-page *::before, .br-cost-page *::after,
.br-cost-hub *, .br-cost-hub *::before, .br-cost-hub *::after { box-sizing: border-box; }

/* Keep the theme's H1 typography. Only fix the width/alignment issue seen on these managed pages. */
.br-cost-managed-page h1 {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

.br-cost-page__intro { width: min(100%, var(--br-cost-reading)); max-width: var(--br-cost-reading); margin: 0 auto 1.45rem; }
.br-cost-page__intro .br-guide-lead { width: 100%; max-width: none; margin-bottom: .9rem; }
.br-cost-page__intro .br-notice { margin: .9rem 0 1.35rem; }

/* Calculators use the shared site tool width; prose uses the reading width. */
.br-cost-calculator { width: min(100%, var(--br-cost-tool)); max-width: var(--br-cost-tool); margin: 0 auto 2.5rem; }
.br-cost-calculator .br-calculator-layout { grid-template-columns: minmax(0,1fr); justify-content: stretch; }
.br-cost-calculator .br-calculator-main { width: 100%; }
.br-cost-field[hidden] { display: none !important; }
.br-cost-form-group--primary + .br-cost-form-group { margin-top: .8rem; }
.br-cost-form-group--primary .br-input-group__hint { margin-top: -.3rem; }

/* Core .br-field styles all number/select/boolean fields. Boolean config fields render as Yes/No selects. */
.br-cost-blocking { margin: 1rem 0 1.35rem; }
.br-cost-blocking h3 { margin: .15rem 0 .45rem; font-size: 1.1rem; }
.br-cost-blocking p { margin-bottom: .35rem; }
.br-cost-blocking__action { margin-bottom: 0 !important; font-weight: 650; }

.br-cost-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin: 1rem 0 0;
  border-top: 1px solid rgba(255,255,255,.24);
}
.br-cost-hero-metrics .br-metric { padding-top: .82rem; padding-bottom: .82rem; }

.br-cost-table-wrap { width: 100%; max-width: 100%; min-width: 0; }
.br-cost-driver { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .2rem 1rem; align-items: end; margin-top: .8rem; }
.br-cost-driver > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; }
.br-cost-driver span { color: var(--br-muted); font-size: .8rem; }
.br-cost-driver b { font-size: .9rem; }
.br-cost-driver i { grid-column: 1 / -1; display: block; height: 8px; background: var(--br-soft); overflow: hidden; }
.br-cost-driver i span { display: block; height: 100%; background: var(--br-accent); }
.br-cost-result-section--split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.br-cost-checklist { margin: .5rem 0 0; padding-left: 1.2rem; }
.br-cost-checklist li + li { margin-top: .45rem; }

/* Editorial content follows the same simple dividers as Core result/guide sections. */
.br-cost-editorial,
.br-cost-faq,
.br-cost-methodology { width: min(100%, var(--br-cost-reading)); max-width: var(--br-cost-reading); margin-left: auto; margin-right: auto; padding: 1.55rem 0; border-top: 1px solid var(--br-border-strong); }
.br-cost-next-steps { width: min(100%, var(--br-cost-tool)); max-width: var(--br-cost-tool); margin: 1.55rem auto; }
.br-cost-editorial section + section { margin-top: 1.8rem; }
.br-cost-editorial p, .br-cost-methodology p, .br-cost-faq p { color: #49544d; }
.br-cost-scenarios__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.br-cost-scenarios__grid article { padding: .9rem 1rem; border-left: 3px solid #9db5a5; background: var(--br-soft); }
.br-cost-scenarios__grid article p { margin: .35rem 0 0; color: var(--br-muted); }
.br-cost-related__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.br-cost-faq details { border-top: 1px solid var(--br-border); }
.br-cost-faq details:last-child { border-bottom: 1px solid var(--br-border); }
.br-cost-faq summary { cursor: pointer; padding: .9rem 0; font-weight: 700; }
.br-cost-faq details p { margin-top: 0; }
.br-cost-source-summary { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

.br-cost-hub { width: min(100%, var(--br-cost-tool)); max-width: var(--br-cost-tool); margin: 0 auto; }
.br-cost-hub > .br-guide-lead { width: min(100%, var(--br-cost-reading)); max-width: var(--br-cost-reading); margin-left: auto; margin-right: auto; }
/* Functional hub surfaces share one axis and one width. */
.br-cost-hub > :where(.br-notice,.br-directory,.br-cost-hub__steps,.br-guide-cta,.br-guide-cluster) {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.br-cost-hub > .br-notice { margin-top: .9rem; margin-bottom: 1.35rem; }
.br-cost-hub > .br-directory { margin-top: 1.4rem; margin-bottom: 2.5rem; }
.br-cost-hub__steps { margin-top: 1.7rem; margin-bottom: 1.7rem; }
.br-cost-hub__steps .br-facts { margin-top: .8rem; }
.br-cost-hub > .br-guide-cta { margin-top: 1.8rem; margin-bottom: 1.8rem; }
.br-cost-hub > .br-guide-cluster { margin-top: 2rem; margin-bottom: 1.3rem; }

/* The result CTA belongs to the calculator column and must fill it exactly. */
.br-cost-results .br-guide-cta {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Field help normally uses the full field width; selected long notes may span the entire input grid. */
.br-cost-field > small { width: 100%; max-width: none; }
.br-cost-field-help-wide {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  max-width: none;
  margin: -.55rem 0 .1rem;
  color: var(--br-muted);
  font-size: .81rem;
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .br-cost-calculator .br-calculator-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .br-cost-result-section--split,
  .br-cost-related__grid,
  .br-cost-scenarios__grid,
  .br-cost-hero-metrics { grid-template-columns: 1fr; }

  /* Preserve the v1.0.1 mobile card breakdown while matching Core field/action styling. */
  .br-cost-table-wrap { overflow: visible; border: 0; }
  .br-cost-table { display: block; min-width: 0; background: transparent; }
  .br-cost-table thead { display: none; }
  .br-cost-table tbody { display: grid; gap: .7rem; }
  .br-cost-table tr { display: block; padding: .75rem .8rem; border: 1px solid var(--br-border); background: #fff; }
  .br-cost-table tbody th { display: block; padding: 0 0 .55rem; border-top: 0; font-size: .92rem; }
  .br-cost-table tbody td { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem; padding: .38rem 0; border-top: 1px solid var(--br-border); text-align: right; }
  .br-cost-table tbody td::before { content: attr(data-label); color: var(--br-muted); font-size: .78rem; font-weight: 600; text-align: left; }
}
@media (max-width: 520px) {
  .br-cost-managed-page h1 { max-width: 100% !important; text-align: center !important; }
  .br-cost-table { font-size: .84rem; }
  .br-cost-table tr { padding: .7rem; }
}