/* Shared prose styling for /guides articles. Promoted 2026-08-15 out of
   website-flipping-side-hustle-uk.html's own scoped <style> block, per
   that block's own comment: "If a second guide gets written, promote
   this block into its own guides/guides.css rather than duplicating it
   again." This session added eight more guides on top of the two that
   already existed, which made a tenth copy of the same ~20 lines
   indefensible — one shared file instead, linked by every guide page.

   `.answer-box` and `.faq-list`/`.faq-item` (the direct-answer paragraph
   and the visible FAQ accordion) are NOT here — they're already global,
   defined once in css/style.css for find-businesses-without-a-website.html,
   and every guide below reuses them as-is rather than a second copy. */

.guide-prose{ max-width:72ch; margin:0 auto; line-height:1.7; color:var(--text); }
.guide-prose h2{ margin:2em 0 .5em; font-size:1.5rem; }
.guide-prose h2:first-child{ margin-top:0; }
.guide-prose p{ margin:0 0 1.1em; color:var(--dim); }
.guide-prose ul, .guide-prose ol{ margin:0 0 1.1em; padding-left:1.3em; color:var(--dim); }
.guide-prose li{ margin-bottom:.5em; }
.guide-prose a{ color:var(--acc-text); }
.guide-prose .callout{
  border:1px solid var(--line-strong); border-radius:10px; padding:16px 18px;
  margin:1.6em 0; background:var(--surface);
}
.guide-prose .callout p:last-child{ margin-bottom:0; }
.guide-meta{ color:var(--faint); font-size:.85rem; margin-top:8px; }

/* Related-guides links at the bottom of a guide, reusing the same
   .diff-grid/.diff-card cards the guides index already uses — no new
   card component, just fewer of them and a lighter heading above. */
.guide-related h2{ font-size:1.2rem; margin:0 0 14px; text-align:center; }