/* ============================================================================
   LinkedIQ - shared chassis for /features/* pages
   ----------------------------------------------------------------------------
   research-assist, infographic and mcp-server each carried their own copy of
   these rules. This is the single source.

   Linked once from src/layouts/Page.astro via sharedCss={['features']},
   BEFORE that layout's <slot name="head" />, so a page can still override
   anything here from its own <style is:global>.

   Colours come from --ss-* tokens only. Mono micro-labels are 11px minimum.
   Bump SHARED_CSS_V in Page.astro when you edit this file.
   ========================================================================== */


/* ---- Hero -------------------------------------------------------------- */
.feature-hero { padding:72px 0 56px; border-bottom:1px solid var(--ss-line-soft); }
.feature-hero h1 { font-family:var(--ss-font-display); font-size:clamp(32px,5vw,56px); font-weight:400; letter-spacing:-.022em; line-height:1.1; margin-bottom:16px; }
.feature-hero h1 em { font-style:italic; color:var(--ss-accent); }
.feature-hero .lede { font-size:16px; color:var(--ss-text-2); max-width:560px; line-height:1.65; margin-bottom:24px; }
.hero-badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.hero-meta-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--ss-font-mono); font-size:11px; color:var(--ss-text-muted); letter-spacing:.04em; }
.hero-cta { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }

/* ---- Chips ------------------------------------------------------------- */
.chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.chip-accent { color:var(--ss-accent); background:var(--ss-accent-soft); border:1px solid var(--ss-accent-border); }
.chip-ghost { color:var(--ss-text-muted); background:var(--ss-surface-2); border:1px solid var(--ss-line-soft); }

/* ---- How it works ------------------------------------------------------ */
.how-section { padding:64px 0; border-bottom:1px solid var(--ss-line-soft); }

/* ---- Use cases --------------------------------------------------------- */
.use-section { padding:64px 0; border-bottom:1px solid var(--ss-line-soft); }
.use-card-icon { width:40px; height:40px; border-radius:10px; background:var(--ss-accent-soft); border:1px solid var(--ss-accent-border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.use-card h3 { font-size:15px; font-weight:500; color:var(--ss-text); margin-bottom:8px; }
.use-card p { font-size:13px; color:var(--ss-text-2); line-height:1.65; }
.use-card-example { margin-top:14px; padding-top:14px; border-top:1px dashed var(--ss-line-soft); font-family:var(--ss-font-mono); font-size:11px; color:var(--ss-text-muted); line-height:1.55; }
.use-card-example .ex-label { color:var(--ss-accent); text-transform:uppercase; letter-spacing:.1em; font-size:11px; display:block; margin-bottom:6px; }

/* ---- FAQ --------------------------------------------------------------- */
.faq-section { padding:64px 0; border-bottom:1px solid var(--ss-line-soft); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:40px; }

/* ---- CTA --------------------------------------------------------------- */
.cta-band { padding:80px 0; border-top:1px solid var(--ss-line-soft); text-align:center; }
.cta-band h2 { font-family:var(--ss-font-display); font-size:clamp(24px,3.5vw,38px); font-weight:400; letter-spacing:-.02em; color:var(--ss-text); margin-bottom:14px; }
.cta-band h2 em { font-style:italic; color:var(--ss-accent); }
.cta-band p { font-size:15px; color:var(--ss-text-2); margin-bottom:28px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.65; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }