:root { --ink:#172027; --muted:#5d6870; --line:#d7dfe1; --paper:#fff; --wash:#f3f6f5; --green:#176b4d; --green-dark:#0e4935; --yellow:#f2c94c; --red:#96382f; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--wash); }
* { box-sizing:border-box; }
body { margin:0; background:var(--wash); }
a { color:var(--green-dark); }
button,input,select { font:inherit; }
.site-header,footer { align-items:center; background:#fff; border-bottom:1px solid var(--line); display:flex; gap:24px; justify-content:space-between; min-height:68px; padding:14px max(24px,calc((100vw - 1240px)/2)); }
.wordmark { align-items:center; color:var(--ink); display:flex; gap:10px; text-decoration:none; }
.wordmark span { align-items:center; background:var(--yellow); display:flex; font-weight:900; height:38px; justify-content:center; width:38px; }
.site-header nav,footer nav { display:flex; flex-wrap:wrap; gap:18px; }
.site-header nav a,footer a { color:var(--ink); font-size:.88rem; font-weight:750; text-decoration:none; }
.site-header .nav-cta { background:var(--green); color:#fff; padding:9px 12px; }
main { padding-bottom:70px; }
.hero,.workspace,.saved-section,.method-section { margin:0 auto; width:min(1240px,calc(100% - 40px)); }
.hero { align-items:end; display:grid; gap:50px; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); padding:72px 0 48px; }
.eyebrow { color:var(--green); font-size:.76rem; font-weight:900; margin:0 0 9px; text-transform:uppercase; }
h1 { font-size:clamp(3.4rem,8vw,7rem); letter-spacing:-.04em; line-height:.9; margin:0 0 24px; }
h2 { margin:0 0 8px; }
.lead { color:var(--muted); font-size:1.15rem; line-height:1.65; margin:0; max-width:780px; }
.hero aside { background:var(--ink); color:#fff; padding:24px; }
.hero aside p { color:#cbd3d5; line-height:1.55; margin:8px 0 0; }
.truth-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.truth-row span { background:#e4efe9; color:var(--green-dark); font-size:.78rem; font-weight:800; padding:8px 10px; }
.status { background:#edf8f3; border-left:4px solid var(--green); margin:0 auto 20px; padding:13px 16px; width:min(1240px,calc(100% - 40px)); }
.status.error { background:#fff0ef; border-color:var(--red); color:#7d2d27; }
.workspace { align-items:start; display:grid; gap:22px; grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr); }
#basis-form { display:grid; gap:18px; min-width:0; }
fieldset,.results,.saved-section,.method-section { background:#fff; border:1px solid var(--line); }
fieldset { margin:0; min-width:0; padding:24px; }
legend { font-size:1.12rem; font-weight:850; padding:0 8px; }
.fieldset-heading { align-items:start; display:flex; gap:20px; justify-content:space-between; }
.fieldset-heading legend { padding:0; }
.fieldset-heading p { color:var(--muted); font-size:.86rem; margin:6px 0 18px; }
.form-grid { display:grid; gap:15px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
label { color:#34434a; display:grid; font-size:.82rem; font-weight:750; gap:6px; }
label.wide { grid-column:1/-1; }
input,select { background:#fff; border:1px solid #b8c3c7; border-radius:3px; color:var(--ink); min-height:42px; padding:8px 10px; width:100%; }
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,77,.14); outline:0; }
.short-field { margin-top:16px; max-width:300px; }
.labor-scroll { overflow-x:auto; }
.labor-table { border-collapse:collapse; min-width:1050px; width:100%; }
.labor-table th { color:var(--muted); font-size:.7rem; line-height:1.25; padding:8px 5px; text-align:left; }
.labor-table td { border-top:1px solid var(--line); padding:7px 5px; }
.labor-table input { min-height:38px; min-width:90px; }
.labor-table td:first-child input { min-width:150px; }
.remove-row { background:none; border:0; color:var(--red); cursor:pointer; font-size:1.1rem; }
.primary,.secondary { border:1px solid var(--green); border-radius:3px; cursor:pointer; font-weight:800; min-height:42px; padding:9px 14px; }
.primary { background:var(--green); color:#fff; }
.secondary { background:#fff; color:var(--green-dark); }
.primary:disabled,.secondary:disabled { cursor:wait; opacity:.6; }
.form-actions { align-items:center; display:flex; flex-wrap:wrap; gap:10px; }
.form-actions a { font-size:.84rem; font-weight:750; }
.form-errors { background:#fff0ef; border-left:4px solid var(--red); color:#762b25; display:grid; gap:5px; padding:12px; }
.results { padding:24px; position:sticky; top:18px; }
.empty-result { min-height:330px; display:grid; align-content:center; }
.empty-result p:last-child { color:var(--muted); line-height:1.6; }
.result-status { display:inline-flex; font-size:.72rem; font-weight:900; margin-bottom:14px; padding:7px 9px; text-transform:uppercase; }
.result-status.incomplete { background:#fff1d2; color:#72551a; }
.result-status.review-ready { background:#e4efe9; color:var(--green-dark); }
.price-stack { border-bottom:1px solid var(--line); display:grid; gap:12px; margin-bottom:18px; padding-bottom:18px; }
.price-stack div { align-items:baseline; display:flex; justify-content:space-between; }
.price-stack span { color:var(--muted); font-size:.83rem; }
.price-stack strong { font-size:1.25rem; }
.price-stack .target strong { color:var(--green); font-size:1.75rem; }
.breakdown,.scenario-list { display:grid; gap:8px; list-style:none; margin:12px 0 20px; padding:0; }
.breakdown li,.scenario-list li { border-bottom:1px solid #edf0f1; display:flex; font-size:.82rem; justify-content:space-between; padding-bottom:7px; }
.blockers,.warnings { padding:14px; }
.blockers { background:#fff5dd; }
.warnings { background:#f1f4f5; }
.blockers h3,.warnings h3 { font-size:.9rem; margin:0 0 8px; }
.blockers ul,.warnings ul { display:grid; font-size:.78rem; gap:6px; line-height:1.45; margin:0; padding-left:18px; }
.unit-grid { display:grid; gap:8px; grid-template-columns:repeat(3,1fr); margin:12px 0 20px; }
.unit-grid div { background:var(--wash); padding:10px; }
.unit-grid span,.unit-grid strong { display:block; }
.unit-grid span { color:var(--muted); font-size:.68rem; margin-bottom:4px; }
.saved-section,.method-section { margin-top:30px; padding:28px; }
.section-heading { align-items:start; display:flex; gap:30px; justify-content:space-between; }
.section-heading > p { color:var(--muted); font-size:.82rem; max-width:440px; }
.saved-list { display:grid; gap:10px; margin-top:20px; }
.saved-item { align-items:center; border-top:1px solid var(--line); display:flex; gap:15px; justify-content:space-between; padding-top:12px; }
.saved-item span { color:var(--muted); display:block; font-size:.76rem; margin-top:3px; }
.saved-actions { display:flex; gap:7px; }
.saved-actions button { background:#fff; border:1px solid #b8c3c7; cursor:pointer; padding:7px 9px; }
.method-section { display:grid; gap:24px; }
.method-grid { display:grid; gap:18px; grid-template-columns:repeat(2,1fr); }
.method-grid article { background:var(--wash); padding:20px; }
.method-grid ul { color:var(--muted); display:grid; gap:8px; line-height:1.45; padding-left:20px; }
.source-links { display:flex; flex-wrap:wrap; gap:10px 18px; }
.source-links a { font-size:.8rem; font-weight:750; }
footer { border-bottom:0; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
[hidden] { display:none!important; }
@media(max-width:980px){.hero,.workspace{grid-template-columns:1fr}.results{position:static}.form-grid.compact{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.site-header,footer,.section-heading{align-items:flex-start;flex-direction:column}.hero{padding-top:40px}.form-grid,.form-grid.compact,.method-grid{grid-template-columns:1fr}.unit-grid{grid-template-columns:1fr}.saved-item{align-items:flex-start;flex-direction:column}.workspace,.hero,.saved-section,.method-section{width:min(100% - 24px,1240px)}}

/* Context carried in from a match: what we are pricing, the rate already
   filled in, and where to find the wage that depends on the county.

   .workspace is a strict two-column grid (form | results). This banner is a
   third child, so without an explicit span it consumes the first column and
   pushes the form into the results column, leaving a tall empty gutter. It
   spans the full width instead and sits above both. */
.opportunity-context {
  grid-column: 1 / -1;
  border: 1px solid #cfe0d3;
  border-left: 5px solid #2f6f4e;
  background: #f2f8f4;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.opportunity-context p { margin: 0 0 10px; }
.opportunity-context p:last-child { margin-bottom: 0; }
.opportunity-context .context-lead { font-size: 15px; }
.opportunity-context a { font-weight: 700; }