/* Project Start, Service Terms and Privacy Policy. Loads after index.css (and contractor-seo.css on Project Start) and
   uses the homepage header, hero, section headers, deliverables, plain question rows, closing section and shared footer
   as they are. Only what the homepage does not have is defined here, all scoped to .doc-page. */
.doc-page .nav a:focus-visible, .doc-page .hero a:focus-visible, .doc-page .doc-head a:focus-visible,
.doc-page .contact-closing a:focus-visible { outline-color: #f5f1e7; }

/* ---------- Project Start: homepage hero (no screenshot) and body components ---------- */
.project-start-page .hero-content { grid-template-columns: minmax(0, 1fr); max-width: 1180px; }
.project-start-page .hero-copy { max-width: 940px; }
.project-start-page .hero h1 { text-transform: uppercase; }

/* Cream band between white sections (homepage rhythm). */
.project-start-page .doc-cream { padding: var(--space-section-phone) 1.5rem; background: var(--bg-cream); }
@media (min-width: 768px) { .project-start-page .doc-cream { padding: var(--space-section) var(--gutter); } }
.project-start-page .doc-cream .deliverable-item { background: #fff; }

/* ---------- Service Terms and Privacy Policy: a document, not a sales page ---------- */
/* Title block: the homepage's charcoal and type, without a button or screenshot. */
.doc-head { background: #23261f; padding: calc(var(--nav-offset) + 3.5rem) 3rem 3.5rem; }
.doc-head-inner { max-width: 720px; margin: 0 auto; }
.doc-kicker { color: #e5966b; font-size: var(--kicker-size); font-weight: var(--kicker-weight); letter-spacing: var(--kicker-track); text-transform: uppercase; margin-bottom: 20px; }
.doc-head h1 { color: #f5f1e7; font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 18px; }
.doc-updated { color: #e5966b; font-size: var(--fs-fine); font-weight: 700; margin-bottom: 18px; }
.doc-lede { color: #c4c4b9; font-size: var(--fs-lead); line-height: 1.65; }

/* One readable column on white. */
.doc-body { background: #fff; padding: 3.5rem 1.5rem 5rem; }
.doc-toc, .doc-text { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Table of contents. Each entry keeps the shared .deliverable-item class (the SEO page checks count it), so the
   homepage card styling is reset here to plain divider rows. */
.doc-toc { padding-bottom: 1.5rem; border-bottom: 1px solid var(--card-border); }
.doc-toc-title { color: var(--muted); font-size: var(--kicker-size); font-weight: var(--kicker-weight); letter-spacing: var(--kicker-track); text-transform: uppercase; margin-bottom: .5rem; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
.doc-toc .doc-toc-item { display: block; grid-row: auto; background: none; border: 0; border-top: 1px solid var(--card-border); border-radius: 0; padding: 0; }
.doc-toc a { display: flex; align-items: center; min-height: 44px; padding: .4rem 0; color: var(--action-orange-deep); font-size: var(--fs-body); font-weight: 700; line-height: 1.35; text-decoration: none; }
.doc-toc a:hover, .doc-toc a:focus-visible { text-decoration: underline; }
@media (min-width: 560px) { .doc-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .doc-toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Document text. */
.doc-text { margin-top: 3rem; }
.doc-section + .doc-section { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--card-border); }
.doc-text h2 { color: var(--text-headline); font-size: clamp(1.5rem, 2.6vw, 1.85rem); font-weight: 800; line-height: 1.1; text-transform: uppercase; margin-bottom: 1rem; }
.doc-text h3 { color: var(--text-headline); font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; margin: 2.25rem 0 .5rem; }
.doc-num { color: var(--action-orange-deep); font-size: var(--kicker-size); letter-spacing: .12em; margin-right: .4rem; }
.doc-text p, .doc-text li { color: var(--text-body); font-size: var(--fs-body); line-height: 1.7; }
/* Links inside the legal text (2026-11-08: Cloudflare's privacy policy, the deletion-request address) in the site's link style. */

.doc-text p + p { margin-top: 1rem; }
.doc-text ul { margin: 0; padding-left: 1.25rem; }
.doc-text li + li { margin-top: .75rem; }
.doc-text li::marker { color: var(--action-orange-deep); }

/* Closing section: the homepage contact-closing with the page's own links underneath. */
.doc-closing-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: 1.5rem 0 0; padding: 0; }
.doc-closing-links a { display: inline-flex; align-items: center; min-height: 44px; color: #f5f1e7; font-weight: 600; text-decoration: underline; }

@media (max-width: 800px) { .doc-head { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 480px) { .doc-head { padding-top: calc(var(--nav-offset) + 2.5rem); padding-bottom: 2.75rem; } .doc-body { padding-top: 2.5rem; } }

/* Even line lengths so no paragraph ends on a scrap of a line (2026-11-08). */
.doc-page p, .doc-page li { text-wrap: balance; }
/* The tool address stays on one line down to a 320 px screen. */
.tool-page .tool-address code { font-size: clamp(11.5px, 3.5vw, 15px); white-space: nowrap; }
/* Short paragraphs that end in a link or an address: even lines, so the last line is never a scrap. */
.doc-page .doc-text .doc-balance { text-wrap: balance; }
/* Tool page: numbered steps keep their numbers, and a paragraph after a list gets the same gap as one after a paragraph. */
.tool-page .doc-text ol { margin: 0; padding-left: 1.4rem; list-style: decimal; }
.tool-page .doc-text :is(ul, ol) + p, .tool-page .doc-text p + ol { margin-top: 1rem; }