/* ==========================================================================
   SmartFence - design consistency layer
   Loaded LAST on every page so it can normalise spacing, type and cards
   across the shared and page-specific stylesheets.

   Scale
   - Section spacing: 5rem (80px) desktop, 3rem (48px) mobile
   - Section heading: clamp(1.75rem, 3vw, 2.375rem), weight 700, teal
   - Card title: 1.125rem (18px), weight 700
   - Body: 1rem (16px); card body: .9375rem (15px)
   - Cards: 14px radius, 2px #D1D5DB border, soft shadow, 1.5rem padding
   ========================================================================== */

:root {
  --radius-lg: 14px;
  --section-y: 5rem;
  --section-y-sm: 3rem;
  --card-border: 2px solid #D1D5DB;
  --card-shadow: 0 2px 12px rgba(0,0,0,.07);
  --card-pad: 1.5rem;
  --h2-size: clamp(1.75rem, 3vw, 2.375rem);
}

/* ── Section spacing ── */
.section, .how-section, .benefits-section, .ps-section, .visitor-section,
.sf-plot-section, .sf-faq-section, .mvv-section, .cta-banner, .fp-why-section {
  padding-top: var(--section-y); padding-bottom: var(--section-y);
}
.diff-section-wrap { padding: var(--section-y) 0; margin-top: 0; }
.blog-hero, .legal-hero, .api-hero { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.trusted-section { padding-top: 3rem; padding-bottom: 3rem; }
.compare-intro-section { padding-bottom: var(--section-y); }
.section-header { margin-bottom: 3rem; }

/* ── Section headings ── */
.section-header h2, .sf-faq-intro h2, .sf-plot-text h2, .diff-text h2,
.compare-stat-text h2, .teal-heading-lg, .story-heading {
  font-size: var(--h2-size); font-weight: 700; line-height: 1.2;
}
.sf-faq-intro h2, .diff-text h2, .compare-stat-text h2 { color: var(--teal); }
.section-header p { font-size: 1.0625rem; }

/* Feature rows: sub-section titles */
.feat-text h3 { font-size: 1.5rem; font-weight: 700; color: var(--teal); }

/* ── Card titles and text ── */
.how-card-body h3, .benefit-card h3, .est-why-grid h3, .roadmap-card h3,
.pricing-flat-card h3, .compare-choose-card h2, .compare-flow-step h3,
.embed-compare-col h3, .compare-kind-title, .trust-flow h3, .why-works h3,
.embed-tool-card h4, .api-card h3, .blog-card h3, .mvv-card h3, .why-card h3,
.addon-card h3, .fp-why-card h3 {
  font-size: 1.125rem; font-weight: 700; line-height: 1.35;
}
.how-card-body p, .benefit-card p, .est-why-grid p, .roadmap-card p,
.pricing-flat-card p, .compare-flow-step p, .embed-compare-col p,
.embed-tool-card p, .blog-card p, .mvv-card p, .why-card p, .fp-why-card p,
.how-card-body .check-list li {
  font-size: .9375rem; line-height: 1.65;
}

/* ── Cards ── */
.how-card, .benefit-card, .est-why-grid > div, .roadmap-card, .pricing-flat-card,
.compare-choose-card, .compare-flow-step, .embed-compare-col, .embed-tool-card,
.trust-flow, .why-works, .blog-card, .api-card, .mvv-card, .why-card, .addon-card,
.tool-section, .article-toc, .sf-faq-item {
  border-radius: 14px;
}
.est-why-grid > div, .roadmap-card, .pricing-flat-card, .compare-flow-step,
.embed-compare-col, .embed-tool-card, .blog-card {
  border: var(--card-border); box-shadow: var(--card-shadow);
}
.compare-choose-card-sf, .embed-compare-col-sf, .trust-flow-sf { border-color: var(--teal); }
.est-why-grid > div, .roadmap-card, .pricing-flat-card, .compare-flow-step,
.embed-compare-col, .compare-choose-card, .trust-flow { padding: var(--card-pad); }

/* ── Body copy ── */
.article-body p, .article-body li, .legal-body p, .legal-body li { font-size: 1rem; }

/* ── Utilities (replace former inline styles) ── */
.container-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.container-md { max-width: 880px; }
.container-wide { max-width: 1040px; }
.section-alt { background: var(--off-white); }
.text-link { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.btn-block { width: 100%; justify-content: center; }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.mt-1 { margin-top: 1rem; } .mt-15 { margin-top: 1.5rem; } .mt-2 { margin-top: 2rem; } .mt-25 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: 2rem; }
.blog-card-link { text-decoration: none; color: inherit; display: block; }
.blog-card-photo { width: 100%; height: 100%; object-fit: cover; }
.hero-title { max-width: 820px; margin: 0 auto; }
.related-reading { border: var(--card-border); border-radius: 14px; padding: 1.25rem 1.5rem; margin-top: 2rem; }
.related-reading-title { font-weight: 700; color: var(--text-dark); margin-bottom: .5rem; }
.sf-mobile-cta { color: var(--teal) !important; font-weight: 700; border-bottom: none !important; }
.story-text { font-size: 1.0625rem; color: var(--text-body); line-height: 1.75; margin-bottom: 1rem; }
.contact-small { font-size: .875rem; color: #fff; }
.inline-code { background: var(--off-white); padding: .2em .5em; border-radius: 4px; font-size: .9em; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .section, .how-section, .benefits-section, .ps-section, .visitor-section,
  .sf-plot-section, .sf-faq-section, .mvv-section, .cta-banner, .fp-why-section {
    padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm);
  }
  .diff-section-wrap { padding: var(--section-y-sm) 0; }
  .blog-hero, .legal-hero, .api-hero { padding-top: 3rem; padding-bottom: 3rem; }
  .compare-intro-section { padding-bottom: var(--section-y-sm); }
  .section-header { margin-bottom: 2rem; }
}
.text-center { text-align: center; }

/* ── Shared messaging pillars (Guide / Price / Qualify) ── */
.sf-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.sf-pillar { background: #fff; border: var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: var(--card-pad); }
.sf-pillar-label { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; }
.sf-pillar h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-dark); margin-bottom: .5rem; line-height: 1.35; }
.sf-pillar p:not(.sf-pillar-label) { font-size: .9375rem; line-height: 1.65; color: var(--text-body); }
.sf-pillars-more { text-align: center; margin-top: 1.75rem; color: var(--text-body); }
@media (max-width: 900px) { .sf-pillars { grid-template-columns: 1fr; } }