/* ═══════════════════════════════════════════════════════════════════
   answer-pages.css — shared styles for the static answer pages
   (/pricing, /compare, /pressure-washing-software).

   One file instead of three duplicated <style> blocks so palette and
   layout changes happen once, and the browser caches it across the
   pages.  Colors are the Outdoor Pro tokens from the app (do not
   revert to the base Warm Sage palette — see ZIPPER-BUILD-SPEC.md).
   ═══════════════════════════════════════════════════════════════════ */

:root { --bg:#F2F0EB; --fg:#2A2824; --muted:#4E4C46; --accent:#3A5E30; --accent-pale:#E0EDDA; --border:#E4E2DA; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 Nunito,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--fg); background:var(--bg); }
.wrap { max-width:820px; margin:32px auto 48px; padding:36px 32px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
h1 { font-family:"Playfair Display",Georgia,serif; font-size:32px; line-height:1.2; margin:0 0 10px; }
h2 { font-family:"Playfair Display",Georgia,serif; font-size:21px; margin:36px 0 10px; color:var(--accent); }
p, li { color:#3b3a35; }
.back { display:inline-block; margin-bottom:18px; color:var(--accent); text-decoration:none; font-size:13px; font-weight:600; }
.back:hover { text-decoration:underline; }
.answer { background:var(--accent-pale); border:1px solid var(--accent); border-radius:8px; padding:16px 20px; margin:18px 0 8px; font-size:17px; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; margin:14px 0; font-size:15px; }
th, td { border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top; }
th { background:var(--bg); font-weight:700; }
td.num, th.num { text-align:right; white-space:nowrap; }
td.us { background:var(--accent-pale); font-weight:700; }
blockquote { border-left:3px solid var(--accent); margin:18px 0; padding:6px 18px; font-style:italic; color:#3b3a35; }
blockquote .attr { display:block; font-style:normal; font-size:13px; color:var(--muted); margin-top:6px; }
a.btn { display:inline-block; padding:12px 22px; background:var(--accent); color:#fff; border-radius:22px; text-decoration:none; font-size:15px; font-weight:700; }
a.btn:hover { filter:brightness(1.08); }
.cta-row { margin:26px 0 6px; }
.cta-note { font-size:13px; color:var(--muted); margin-top:8px; }
.faq-q { font-weight:700; margin:18px 0 4px; }
.faq-a { margin:0 0 6px; }
.footer { margin-top:40px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
.footer a { color:var(--muted); }

/* Phones: let the card become the page — full-bleed, tighter padding,
   smaller display type, full-width CTA thumb target. */
@media (max-width: 560px) {
  .wrap { margin:0; border-left:none; border-right:none; border-radius:0; box-shadow:none; padding:26px 18px 34px; }
  h1 { font-size:25px; }
  h2 { font-size:19px; margin-top:30px; }
  .answer { font-size:16px; padding:14px 16px; }
  th, td { padding:8px 10px; font-size:14px; }
  a.btn { display:block; text-align:center; }
}