/*
 * Rules shared by the three API documentation artifacts only. Their own
 * authored styles cover endpoints, buttons and the feature grid; this file
 * supplies the common hero and feature-card treatment that is absent from one
 * or more localized artifacts. Scope prevents a public-document rule leaking
 * into the CRM UI.
 */
.static-content .hero { padding:clamp(80px,10vw,120px) 24px clamp(48px,6vw,80px); text-align:center }
.static-content .hero h1 { font-size:clamp(2rem,5vw,3rem); font-weight:800; color:var(--fl-text-primary); margin-bottom:12px; font-family:"Plus Jakarta Sans","Inter",sans-serif }
.static-content .hero p { color:var(--fl-text-secondary); font-size:1.125rem; max-width:640px; margin:0 auto 24px }
.static-content .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px }
.static-content .section-title { font-size:1.5rem; font-weight:700; color:var(--fl-text-primary); margin-bottom:32px; display:flex; align-items:center; gap:8px }
.static-content .feature-card { background:var(--fl-bg-primary); border:1px solid var(--fl-border); border-radius:12px; padding:24px; transition:transform 0.2s,box-shadow 0.2s }
.static-content .feature-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08) }
.static-content .feature-card h3 { font-size:1rem; font-weight:600; color:var(--fl-text-primary); margin-bottom:4px }
.static-content .feature-card p { color:var(--fl-text-secondary); font-size:0.875rem; line-height:1.6 }
.static-content .feature-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px }
.static-content .ic { display:inline-flex; vertical-align:middle }
.static-content .ic svg { width:20px; height:20px }

@media(max-width:768px) {
  .static-content .hero-buttons { justify-content:center }
}