/* Field-free pages around the invoice maker and the estimate maker (entry pages and templates).
   Loaded after the tool's own stylesheet; only what those pages add. */
.tool-hero h1{max-width:22ch}
.go{margin-top:22px}
.go.center{text-align:center; margin-top:26px}
.go .btn{width:100%}
.sample{max-width:760px; margin:0 auto}
.sample .paper{max-height:none; overflow:visible}   /* the tool caps its preview's height; a sample shows whole */
.sample .pv-foot{text-align:center; margin-top:10px}
.narrow{max-width:760px}
.plain{display:grid; gap:8px; margin:16px 0 18px; padding-left:20px; list-style:disc; color:var(--text-2)}
.tpl-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tpl-grid a{display:flex; align-items:center; min-height:48px; padding:10px 14px; border:1px solid var(--line-2);
  border-radius:10px; background:var(--surface); color:var(--text); font-weight:600; font-size:.95rem; text-decoration:none}
.tpl-grid a:hover{border-color:var(--teal); color:var(--teal)}
@media (min-width:640px){
  .go .btn{width:auto}
  .tpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
  .tpl-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* Longer template pages: what the lines are for, typical jobs, and the link to the trade's own page */
.lines{margin:18px 0 0; display:grid; gap:14px}
.lines dt{font-family:var(--head-font); font-weight:700; color:var(--text)}
.lines dd{margin:2px 0 0; color:var(--text-2); line-height:1.55}
.jobs{display:grid; gap:14px}
.job{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px}
.job .plain{margin:10px 0 0}
.sec-tight{padding:0 0 8px}
@media (min-width:760px){ .jobs{grid-template-columns:repeat(2,minmax(0,1fr))} .jobs .job{min-width:0} }
.after-lines{margin-top:18px; color:var(--text-2)}
.after-faq{margin-top:14px; max-width:760px}

/* Guides */
.guide{padding:28px 0}
.guide p{color:var(--text-2); line-height:1.6; margin:0 0 14px}
.guide a{font-weight:600}
.steps{margin:0 0 16px; padding-left:22px; display:grid; gap:12px; color:var(--text-2); line-height:1.55}
.steps b{color:var(--text)}
.msg{margin:0 0 14px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:10px; color:var(--text); line-height:1.5}
.tbl{overflow-x:auto; margin:0 0 14px}
.tbl table{width:100%; border-collapse:collapse; font-size:.95rem; min-width:440px}
.tbl th, .tbl td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--head-font); color:var(--text)}
.tbl tbody th{font-weight:600; color:var(--text); white-space:nowrap}
.tbl td{color:var(--text-2)}
.tpl-grid.guides{grid-template-columns:1fr}
@media (min-width:640px){ .tpl-grid.guides{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Guides hub and the breadcrumb line on guide pages (SEO batch 7) */
.crumbs{margin:0 0 12px; font-size:.9rem; color:var(--text-2)}
.crumbs a{font-weight:600; display:inline-block; padding:6px 0}
.guide-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.guide-list li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px}
.guide-list h3{margin:0 0 6px; font-size:1.1rem}
.guide-list p{margin:0}

/* the sample's "Bill to" / "Prepared for" label: the look of the tools' .inv h3 / .est h3, without being a heading */
.inv .doc-label,.est .doc-label{font-family:var(--body-font); font-size:.78em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5F6B76; margin:0 0 4px; line-height:1.12}