/* Draft guide only. Shared production styles and runtime remain unchanged. */
.cost-guide .national-hero { align-items: center; }
.cost-guide .cost-reference { padding-top: 48px; }
.cost-guide .cost-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 32px 0 24px; }
.cost-guide .cost-offers > div { padding: 24px 0; border-block: 1px solid #ffffff40; }
.cost-guide .cost-offers dt { color: #bbb; font: 400 14px/1.6 Inter, sans-serif; }
.cost-guide .cost-offers dd { margin: 10px 0 0; color: #fff; font: 500 32px/1.2 Syne, sans-serif; }
.cost-guide .cost-budget { max-width: none; }
.cost-guide .cost-budget .national-features { margin-top: 40px; }
.cost-guide .cost-number { display: block; margin-bottom: 20px; color: #aaa; font: 400 14px/1.5 Inter, sans-serif; }
.cost-guide .cost-project-media a { display: block; border-radius: 16px; }
.cost-guide .cost-project-media a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.cost-guide .cost-project-media img { aspect-ratio: 8 / 5; object-fit: contain; }
.cost-guide .cost-project-media figcaption { font: 400 13px/1.7 Inter, sans-serif; color: #bbb; }
.cost-guide .cost-project-media img { box-sizing: border-box; }
.cost-guide .cost-inputs { padding: 0; margin: 32px 0; list-style: none; counter-reset: input; }
.cost-guide .cost-inputs li { display: grid; grid-template-columns: 36px minmax(150px, .7fr) minmax(0, 1.3fr); gap: 16px; padding: 24px 0; border-top: 1px solid #ffffff40; font: 400 16px/1.8 Inter, sans-serif; color: #ccc; counter-increment: input; }
.cost-guide .cost-inputs li::before { content: '0' counter(input); color: #aaa; font-size: 13px; }
.cost-guide .cost-inputs strong { font-weight: 500; color: #fff; }
.cost-guide .cost-example { padding-top: 64px; }
.cost-guide .search-note { font-size: 14px; line-height: 1.8; }
@media (max-width: 991px) {
  .cost-guide .cost-budget .national-feature { display: block; }
}
@media (max-width: 767px) {
  .cost-guide .cost-offers { grid-template-columns: 1fr; gap: 0; }
  .cost-guide .cost-offers > div { display: flex; justify-content: space-between; gap: 24px; align-items: center; border-bottom: 0; padding: 20px 0; }
  .cost-guide .cost-offers > div:last-child { border-bottom: 1px solid #ffffff40; }
  .cost-guide .cost-offers dd { margin: 0; font-size: 28px; }
  .cost-guide .cost-inputs li { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; }
  .cost-guide .cost-inputs li span { grid-column: 2; }
  .cost-guide .cost-example { padding-top: 48px; }
}