/* Scoped to Services, Book and the getting-started guide. */
.fit-lists { margin-top: 28px; }
.fit-lists ul { padding-left: 1.25em; margin: 0; }
.fit-lists li, .diy-links li { margin-bottom: 12px; }
.diy-links { padding-left: 1.4em; margin: 28px 0; }
.starter-intro { margin: 22px 0 0; }
.starter-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; list-style: none; counter-reset: start-step; padding: 0; margin: 0; }
.starter-steps > li { counter-increment: start-step; padding: 30px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); }
.starter-steps > li::before { content: "Step " counter(start-step); display: block; color: var(--teal-ink); font: 600 0.875rem var(--mono); margin-bottom: 18px; }
.starter-step-heading { display: block; margin-bottom: 0.45em; font: 700 1.6rem/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.starter-steps p { color: var(--muted); }
.booking-routing { margin-bottom: 0; }
.booking-section { padding-top: 56px; }
@media (max-width: 760px) {
  .starter-steps { grid-template-columns: minmax(0, 1fr); }
  .starter-steps > li { padding: 24px; }
  .booking-head { padding-top: 28px; padding-bottom: 24px; }
  .booking-head .kicker { margin-bottom: 16px; }
  .booking-head .lede { font-size: 1rem; }
  .booking-head h1 { font-size: 2.5rem; }
  .booking-section { padding-top: 24px; }
}

.services-diy-entry { padding-top: 24px; }
.services-diy-entry p { margin-bottom: 0; }
.diy-audit-note { margin-top: 24px; }
.starter-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 18px; }
.starter-choices a { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; }
.starter-choices strong { font: 700 1.4rem/1.2 var(--display); color: var(--ink); }
.starter-choices span { color: var(--muted); }
.starter-choices a:hover { border-color: var(--teal-ink); }
.starter-choices a:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 4px; }
.starter-scope { color: var(--muted); font-size: 1rem; }
.audit-comparison { margin: 32px 0; }
.audit-comparison > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--rule); }
.audit-comparison dt { font-weight: 600; }
.audit-comparison dd { margin: 0; color: var(--muted); }
.audit-comparison dt:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.audit-comparison dd:nth-of-type(2) { grid-column: 2; grid-row: 2; }
@media (max-width: 760px) {
  .starter-choices { grid-template-columns: minmax(0, 1fr); }
  .audit-comparison > div { display: block; }
  .audit-comparison dd { margin: 6px 0 20px; }
}
/* Leave section headings visible below the sticky header after a choice. */
#where, #before-ads, #steps, #audit-adds { scroll-margin-top: 96px; }
.starter-prep { max-width: 80ch; padding-left: 1.5em; }
.starter-prep li { margin-bottom: 18px; }
.starter-workspace, .starter-inline { border: 1px solid var(--rule); border-radius: var(--radius); margin: 24px 0; background: var(--white); }
.starter-workspace summary, .starter-inline summary { padding: 20px; font-weight: 600; cursor: pointer; color: var(--ink); }
.starter-workspace-body { padding: 0 24px 24px; }
.starter-inline > :not(summary) { margin-left: 20px; margin-right: 20px; }
.starter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 24px 0; }
.starter-fields label, .starter-inline label { display: block; color: var(--ink); font-weight: 600; }
.starter-fields input, .starter-inline textarea { display: block; width: 100%; padding: 12px; border: 1px solid var(--muted); border-radius: 6px; background: var(--white); color: var(--ink); font: 400 1rem var(--sans); margin-top: 8px; }
.starter-fields span { font-size: .9rem; font-weight: 400; color: var(--muted); }
.starter-summary { font: 400 1rem/1.6 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px; background: var(--paper); }
.starter-guided { grid-template-columns: minmax(0, 1fr); }
.starter-guided > li { min-width: 0; }
.starter-report .section { padding: 32px 0; }
.starter-report .wrap { width: auto; max-width: 100%; padding: 0 12px; }
.starter-report .str-intro { flex-wrap: wrap; }
@media (max-width: 760px) { .starter-fields { grid-template-columns: minmax(0, 1fr); } .starter-workspace-body { padding: 0 16px 20px; } }
