/* HomeAnvil · contractors.css — the contractor page's components (/contractors/).
 * Tokens only: every value reads var(--…) from tokens.css (UI_SYSTEM rule 4; scripts/lint-ui.mjs).
 * These rules were an inline <style> in the reference page; they live here so the kit is the one
 * place a component's look is defined. Load after site.css. The survey at /contractors/book/ wears funnel.css. */

/* Contractors page — tokens only. Layout: split hero (copy + sample lead), terms strip,
   heading-left / content-right sections, stacked pricing cards on phones, FAQ, sticky CTA on phones. */
.c-hero{padding-block:var(--space-8) var(--space-12);background:var(--color-bg);border-bottom:1px solid var(--color-border)}
.c-hero__grid{display:grid;gap:var(--space-8);align-items:start}
@media (min-width:64rem){.c-hero{padding-block:var(--space-12) var(--space-16)}.c-hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--space-12);align-items:center}}
.c-hero h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.2rem);max-width:20ch}
.c-lede{margin-top:var(--space-4);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--color-text-muted);max-width:var(--prose-max)}
.c-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin-top:var(--space-6)}
.c-cta .btn{width:100%}
.c-risk{font-size:var(--text-sm);color:var(--color-text-muted)}
@media (min-width:48rem){.c-cta .btn{width:auto;padding-inline:var(--space-8)}}

/* sample lead */
.c-hero__visual{min-width:0}
.c-hero__photo{display:block;overflow:hidden;border-radius:var(--radius-card);background:var(--color-ink);box-shadow:var(--shadow-sm)}
.c-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lead{position:relative;margin:calc(var(--space-8) * -1) var(--space-4) 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-md)}
@media (min-width:48rem){.lead{margin-inline:var(--space-6)}}
.lead__top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}
.lead__top b{font-size:var(--text-sm)}
.lead__top small{font-size:var(--text-xs);color:var(--color-text-muted)}
.lead__who{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}
.lead__who b{display:block;font-size:var(--text-lg)}
.lead__who span{display:block;color:var(--color-text-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.lead dl{margin:0;padding:var(--space-2) var(--space-5) var(--space-4);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--space-4)}
.lead dl div{padding-block:var(--space-2);border-bottom:1px solid var(--color-surface-2)}
.lead dt{font-size:var(--text-xs);color:var(--color-text-muted)}
.lead dd{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium)}
.lead__foot{padding:var(--space-3) var(--space-5);background:var(--color-surface-2);font-size:var(--text-xs);color:var(--color-text-muted)}

/* terms strip */
.terms{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5) var(--space-4);margin:0;padding-block:var(--space-8)}
.terms dt{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-bold)}
.terms dd{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--color-text-muted)}
.terms svg{width:22px;height:22px;flex:none;color:var(--color-brand-text);fill:currentColor}
@media (min-width:48rem){.terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.terms{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}}

/* heading-left / content-right sections */
.c-sec{padding-block:var(--space-section);border-top:1px solid var(--color-border)}
.c-split{display:grid;gap:var(--space-6)}
.c-split h2{font-size:var(--text-2xl)}
.c-split__intro p{margin-top:var(--space-3);color:var(--color-text-muted);max-width:var(--prose-max)}
.c-body p{color:var(--color-text-muted);max-width:var(--prose-max)}
.c-body p+p{margin-top:var(--space-4)}
@media (min-width:64rem){.c-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12)}}

.c-steps{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-5);counter-reset:s}
.c-steps li{counter-increment:s;display:grid;gap:var(--space-1)}
.c-steps b{font-size:var(--text-lg)}
.c-steps b::before{content:counter(s) ". "}
.c-steps span{color:var(--color-text-muted)}

.c-gap{margin-top:var(--space-6)}
.c-photo{display:block;overflow:hidden;aspect-ratio:16/9;border-radius:var(--radius-card);margin-top:var(--space-6);background:var(--color-surface-2);box-shadow:var(--shadow-sm)}
.c-photo img{width:100%;height:100%;object-fit:cover}

/* trades */
.trades{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-2)}
@media (min-width:48rem){.trades{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}
.trades a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);min-height:4.5rem;text-decoration:none}
.trades img{width:44px;height:44px;object-fit:contain}
.trades b{display:block}
.trades small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.trades .go{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-brand-text)}

/* pricing: stacked cards on phones, table from 64rem */
.price-cards{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-3)}
.price-cards li{padding:var(--space-4) var(--space-5)}
.price-cards h3{font-size:var(--text-lg)}
.price-cards__q{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--color-text-muted)}
.price-table{display:none}
@media (min-width:48rem){.price-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){
  .price-cards{display:none}
  .price-table{display:block;margin-top:var(--space-6);padding:0;overflow:hidden}
  .price-table table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
  .price-table th,.price-table td{padding:var(--space-3) var(--space-5);text-align:left;vertical-align:top;border-top:1px solid var(--color-border)}
  .price-table th{border-top:0;background:var(--color-surface-2);font-weight:var(--weight-bold)}
}
.c-cols{display:grid;gap:var(--space-6);margin-top:var(--space-8)}
@media (min-width:48rem){.c-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-cols h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.c-cols ul{margin:0;padding-left:var(--space-5);display:grid;gap:var(--space-2);color:var(--color-text-muted)}

/* contractor trust signals */
.proof{display:grid;gap:var(--space-4)}
@media (min-width:48rem){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proof .card{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--space-4);padding:var(--space-5)}
.proof svg{width:30px;height:30px;color:var(--color-brand-text);fill:currentColor}
.proof b{display:block;font-size:var(--text-lg)}
.proof p{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--color-text-muted)}

/* closing */
.c-close{background:var(--color-bg)}
.c-close h2{font-size:var(--text-3xl);max-width:22ch}
.c-close p{margin-top:var(--space-3);color:var(--color-text-muted);max-width:var(--prose-max)}
.c-close a:not(.btn){color:var(--color-brand-text)}

/* contractor guides (/contractors/<slug>/, ADR 0140): the guide layout of site.css in the contractor chrome.
   The sample lead sits in the page head, not over a photo; the terms strip and the closing block sit in the reading column. */
.lead--flat{margin:var(--space-6) 0 0;max-width:32rem}
.guide__head .c-cta{margin-top:var(--space-5)}
.guide-prose .terms--guide{padding-block:var(--space-4) var(--space-2)}
@media (min-width:64rem){.guide-prose .terms--guide{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
.guide-prose .faq{margin-top:var(--space-4)}
.guide-prose .faq .acc>summary{font-size:var(--text-base)}
.guide-prose .faq .acc__body p+p{margin-top:var(--space-2)}
.guide-close{margin-top:var(--space-12);padding:var(--space-8) var(--space-6);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card)}
.guide-prose .guide-close h2{margin-top:0;font-size:var(--text-2xl)}
.guide__head .c-lede{margin-top:var(--space-4)}
/* the checklist on the page after a booking (/contractors/book/next/, register row 508) */
.c-ready{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2)}
.c-ready li{display:flex;gap:var(--space-3);align-items:flex-start}
.c-ready li::before{content:"✓";flex:none;display:grid;place-items:center;width:1.25rem;height:1.25rem;margin-top:.15rem;border-radius:var(--radius-full);background:var(--color-action);color:var(--color-action-fg);font-size:.8rem}

/* The deposit's return (?checkout=paid / ?checkout=cancelled): a plain note above the hero, shown only by contractors.js. */
.c-checkout{background:var(--color-success-soft);color:var(--color-success-text);padding-block:var(--space-6)}
.c-checkout--cancelled{background:var(--color-warning-soft);color:var(--color-warning-text)}
.c-checkout h2{margin:0 0 var(--space-2)}
.c-checkout p{margin:var(--space-2) 0 0;max-width:46rem}
.c-checkout h3{margin:var(--space-4) 0 0}
.c-checkout__steps{margin:var(--space-2) 0 0;padding-left:1.25rem;max-width:46rem}
.c-checkout__steps li{margin:var(--space-1) 0 0}
.c-checkout a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* The contractor landing page shares the homeowner homepage palette and clear card shapes. */
:root.contractor-reference{--color-bg:var(--home-paper);--color-text:var(--home-ink);--color-text-muted:var(--home-muted);--color-border:var(--home-border);--color-action:var(--home-orange);--color-action-hover:var(--home-orange-hover);--color-action-edge:var(--home-orange);--color-action-fg:var(--home-ink);--color-brand-text:var(--home-link);--color-brand-soft:var(--home-soft)}
.contractor-reference .c-sec{padding-block:var(--space-12)}
.contractor-reference .c-sec:nth-of-type(even){background:var(--color-bg)}
.contractor-reference .terms>div{padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card)}
.contractor-reference .terms dt{align-items:flex-start;gap:var(--space-3)}
.contractor-reference .terms dd{margin-top:var(--space-3);line-height:var(--leading-body)}
.contractor-reference .terms svg{width:28px;height:28px}
.contractor-reference .proof .card{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-6);border-radius:var(--radius-card)}
.c-icon-tile{display:grid;place-items:center;flex:none;width:56px;height:56px;background:var(--color-brand-soft);border-radius:var(--radius-control);color:var(--color-brand-text)}
.contractor-reference .proof .c-icon-tile svg{width:28px;height:28px;margin:0;fill:currentColor}
.contractor-reference .proof b{font-size:var(--text-lg)}
.contractor-reference .proof p{margin-top:var(--space-2);line-height:var(--leading-body)}
.contractor-reference .trades a{gap:var(--space-3);padding:var(--space-4);min-height:96px;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.contractor-reference .trades a:hover{background:var(--color-brand-soft);border-color:var(--color-action)}
.contractor-reference .trades img{width:56px;height:56px;background:var(--color-brand-soft);border-radius:var(--radius-control);padding:var(--space-1)}
.contractor-reference .trades .go{font-size:var(--text-xs);display:flex;gap:var(--space-1);align-items:center}
.contractor-reference .trades .go svg{width:18px;height:18px;fill:none}
.contractor-reference .c-steps{gap:var(--space-3)}
.contractor-reference .c-steps li{position:relative;padding:var(--space-5) var(--space-5) var(--space-5) var(--space-16);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface)}
.contractor-reference .c-steps b::before{content:counter(s);position:absolute;left:var(--space-4);top:var(--space-5);width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-full);background:var(--color-brand-soft);color:var(--color-brand-text);font-size:var(--text-base)}
.contractor-reference .c-close{background:var(--color-ink);color:var(--color-text-inverse);text-align:center}
.contractor-reference .c-close .wrap{max-width:48rem}
.contractor-reference .c-close p,.contractor-reference .c-close .c-risk{color:var(--color-ink-muted)}
.contractor-reference .c-close .c-cta{justify-content:center}
.contractor-reference .c-close .c-risk{width:100%}
.contractor-reference .c-cta .btn,.contractor-reference .mobile-cta .btn{min-height:56px;border-radius:var(--radius-control);gap:var(--space-3)}
.c-button-arrow{width:20px;height:20px;flex:none;fill:none;stroke:currentColor}
.contractor-reference .mobile-cta{padding-bottom:max(var(--space-3),env(safe-area-inset-bottom))}
@media(min-width:64rem){.contractor-reference .c-sec{padding-block:var(--space-16)}}
@media(min-width:48rem){.contractor-reference .trades a{gap:var(--space-4);padding:var(--space-5)}.contractor-reference .trades .go{font-size:var(--text-sm)}}