/* Contractor website cost guide. Loads after index.css and uses the homepage header, hero, section headers,
   steps, divider rows, closing section and footer as they are. Only what the homepage does not have is
   defined here (comparison tables, a cream band, numbered question rows), all scoped to .cost-page. */
.cost-page .nav a:focus-visible, .cost-page .hero a:focus-visible, .cost-page .how-it-works a:focus-visible { outline-color: #f5f1e7; }

/* Hero: the homepage hero. The heading is longer than "CONTRACTOR WEBSITES", so the copy column is wider
   and the heading a step smaller (the same adjustment as the approved trade pages). */
@media (min-width: 801px) {
    .cost-page .hero-content { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); }
    .cost-page .hero h1 { font-size: clamp(38px, 3.6vw, 52px); }
}
.cost-page .hero .hero-sub strong { color: #f5f1e7; }

/* Section rhythm: white sections use the homepage's .section-pad-white / .faq; this is the cream band. */
.cost-page .cost-alt { padding: 5rem 1.5rem; background: var(--bg-cream); }
@media (min-width: 768px) { .cost-page .cost-alt { padding: 6rem 3rem; } }

/* Content width matches the homepage's question and steps grids. */
.cost-page .cost-wrap { max-width: 900px; margin: 0 auto; }
.cost-page .cost-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.cost-page .section-header a { color: var(--action-orange-deep); text-underline-offset: .2em; }
.cost-page .how-it-works .section-header a, .cost-page .step a { color: #f5f1e7; text-underline-offset: .2em; }
.cost-page .cost-note { margin-top: 1.25rem; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.cost-page .cost-note a, .cost-table td a { color: var(--action-orange-deep); text-underline-offset: .2em; }

/* Comparison tables: rows separated by the homepage divider colour; no cards. */
.cost-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.55; }
.cost-table th, .cost-table td { text-align: left; vertical-align: top; padding: 1.1rem 1.25rem 1.1rem 0; border-bottom: 1px solid var(--card-border); color: var(--text-body); }
.cost-table thead th { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-headline); border-bottom: 2px solid var(--text-headline); padding-top: 0; }
.cost-table tbody th { width: 26%; font-weight: 800; color: var(--text-headline); }
.cost-table td strong { color: var(--text-headline); font-size: 1.1rem; }
.cost-table ul { list-style: none; margin: 0; padding: 0; }
.cost-table li { position: relative; padding: 0.2rem 0 0.2rem 1.4rem; }
.cost-table li::before { content: '\2713'; position: absolute; left: 0; color: var(--action-orange-deep); font-weight: 800; }

/* Which package fits: a short second table under the prices, each package linking to the request form with it chosen. */
.cost-page .cost-fit-title { margin: 3.5rem 0 1.25rem; font-size: 1.35rem; font-weight: 850; line-height: 1.2; color: var(--text-headline); }
.cost-fit a { color: var(--action-orange-deep); text-underline-offset: .2em; }
.cost-fit th span { display: block; margin-top: .15rem; font-weight: 600; color: var(--text-body); }

/* Questions to ask any provider: numbered divider rows. */
.cost-questions { list-style: none; counter-reset: q; padding: 0; }
.cost-questions li { counter-increment: q; display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--card-border); font-size: 1.05rem; line-height: 1.55; color: var(--text-headline); font-weight: 600; }
.cost-questions li:last-child { border-bottom: 1px solid var(--card-border); }
.cost-questions li::before { content: counter(q, decimal-leading-zero); flex: none; min-width: 2rem; font-size: 0.85rem; font-weight: 800; color: var(--action-orange-deep); padding-top: 0.15rem; }

@media (max-width: 640px) {
    /* Stack table rows on phones: each row becomes a labelled block, so nothing scrolls sideways. */
    .cost-table thead { display: none; }
    .cost-table, .cost-table tbody, .cost-table tr, .cost-table th, .cost-table td { display: block; width: 100%; }
    .cost-table tr { border-bottom: 1px solid var(--card-border); padding: 1rem 0; }
    .cost-table tr:first-child { border-top: 2px solid var(--text-headline); }
    .cost-table th, .cost-table td { border-bottom: 0; padding: 0.2rem 0; }
    .cost-table tbody th { width: 100%; font-size: 1.1rem; padding-bottom: 0.3rem; }
    .cost-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-headline); margin-top: 0.6rem; }
}

/* Below desktop the forced break left "COST?" alone on a third line; let the heading wrap (and balance) naturally instead. */
@media (max-width: 1023px) { .cost-page .hero h1 br { display: none; } }

/* Closing section: one short line above the buttons; the other routes sit underneath as a quieter list
   (same pattern as the legal pages' closing links). */
.cost-page .cost-closing-links { list-style: none; display: grid; gap: .25rem; max-width: 560px; margin: 2rem auto 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.cost-page .cost-closing-links a { display: inline-flex; align-items: center; min-height: 44px; color: #f5f1e7; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.cost-page .cost-closing-links a:focus-visible { outline-color: #f5f1e7; }

/* "Have a question about this?" box at the end of a guide: the site's audit form, one column wide, name and email side by side. */
.cost-page .guide-ask .audit-form { max-width: 640px; margin: 0 auto 0 max(0px, calc((100% - 900px) / 2)); }
.cost-page .guide-ask .btn-full { width: 100%; max-width: none; }
.cost-page .guide-ask-row { display: grid; gap: 0 1rem; }
@media (min-width: 641px) { .cost-page .guide-ask-row { grid-template-columns: 1fr 1fr; } }
.cost-page .guide-ask .form-microcopy a { color: var(--action-orange-deep); }