/* doc-page.css — the long-form public page treatment (.pitch--doc).
Added 20 Sep 2026 after three pages shipped with an INVISIBLE HEADING.

   `h1` is globally `color:#fff` (line above), because the heroes it was written
   for sit on photographs and dark panels. `.pitch` sets padding and nothing
   else, so an article page built out of `.pitch` + `.shell` renders white type
   on the white ground — /what-is-homegrity, /free-leads-for-real-estate-agents
   and /for-teams all did, and nobody saw it because the DOM, the computed
   layout and every test were correct. Only a screenshot shows it.

   Two things were missing and both are supplied here rather than per page:
     · text colour for a light ground, because the global default is dark-hero;
     · `.ledger-table`, which is defined in teambackend.css — an ADMIN sheet no
       public page loads — so the comparison tables rendered as bare rows.

   One declaration, three pages. The alternative (a <style> block on each) is
   the two-declarations defect with a third copy waiting to be added. 
   IT LIVES IN ITS OWN FILE, not style.css, for a measured reason: style.css is
   loaded by the agent dashboard, whose first load has a 250,000-byte gzipped
   budget, and adding these rules there put it 1,688 bytes over. A treatment
   used by three public article pages has no business in the dashboard's
   critical path. The three pages link it themselves. */
.pitch.pitch--doc, not .pitch--doc: `.pitch{padding-top:64px}` lives in a
   media query 250 lines BELOW this one and has the same specificity, so it won
   on source order and the heading rendered under the sticky header. Two class
   names on the same element is the cheapest way to outrank it without an
   !important that the next person has to fight. */
.pitch.pitch--doc{padding-top:124px;padding-bottom:72px;color:var(--ink-2)}
.pitch--doc h1{color:var(--ink);font-size:clamp(34px,4.4vw,52px);max-width:16em;margin-bottom:18px}
.pitch--doc h2{color:var(--ink);font-size:clamp(23px,2.6vw,31px);margin:44px 0 12px}
.pitch--doc h3{color:var(--ink);font-size:19px;margin:28px 0 8px}
.pitch--doc p{color:var(--ink-2);font:400 17px/1.62 var(--font);margin:0 0 14px;max-width:68ch}
.pitch--doc .hero-sub{color:var(--muted);font-size:19.5px;line-height:1.55;margin-bottom:8px;max-width:60ch}
.pitch--doc ul,.pitch--doc ol{color:var(--ink-2);font:400 17px/1.62 var(--font);
  margin:0 0 16px;padding-left:1.25em;max-width:68ch}
.pitch--doc li{margin:0 0 9px}
.pitch--doc li strong,.pitch--doc p strong{color:var(--ink)}
.pitch--doc a{color:var(--sky)}

/* The comparison tables. A table wider than the screen scrolls in its own box
   so the page body never moves sideways. */
.pitch--doc .ledger-table{width:100%;border-collapse:collapse;margin:0 0 20px;
  font:400 15.5px/1.5 var(--font);color:var(--ink-2);display:block;overflow-x:auto}
.pitch--doc .ledger-table thead th{text-align:left;font-weight:700;color:var(--ink);
  font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  padding:10px 14px;border-bottom:2px solid var(--line,#e3ecf4);white-space:nowrap}
.pitch--doc .ledger-table td{padding:12px 14px;border-bottom:1px solid var(--line,#eef4f9);
  vertical-align:top}
.pitch--doc .ledger-table tr:last-child td{border-bottom:none}
.pitch--doc .ledger-table td strong{color:var(--ink);white-space:nowrap}

@media (max-width:600px){
  .pitch.pitch--doc{padding-top:104px;padding-bottom:56px}
  .pitch--doc p,.pitch--doc ul,.pitch--doc ol{font-size:16.5px}
}