/* ============================================================================
   LinkedIQ - shared chassis for comparison / alternatives pages
   ----------------------------------------------------------------------------
   Thirteen pages (comparison, linkediq-vs-*, *-alternatives, linkedin-analytics,
   linkedin-profile-optimization) each carried their own near-identical copy of
   these rules. This is the single source.

   Linked once from src/layouts/Page.astro via sharedCss={['comparison']},
   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.
   ========================================================================== */


/* ---- Comparison table -------------------------------------------------- */
.comparison-table th.feat-col { color: var(--ss-accent); }
.comparison-table td.feat-col { background: rgba(200,161,99,0.04); color: var(--ss-text); }
.comparison-table tr:last-child td { border-bottom: none; }

/* ---- Verdict / identity blocks ----------------------------------------- */
.vs-hero { padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(16px, 2vw, 24px); }
.vs-hero h1 { font-family: var(--ss-font-display); font-size: clamp(30px, 4vw, 56px); line-height: 1.07; letter-spacing: -0.022em; font-weight: 400; margin-bottom: 18px; }
.vs-hero h1 em { font-style: italic; color: var(--ss-accent); }
.id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.id-card { padding: clamp(14px, 2.5vw, 20px) clamp(16px, 3vw, 24px); border: 1px solid var(--ss-line); border-radius: var(--ss-r-3); background: var(--ss-surface); }
.id-card.id-featured { border-color: var(--ss-accent-border); background: linear-gradient(135deg, rgba(200,161,99,0.05), transparent 60%), var(--ss-surface); }
.id-name { font-family: var(--ss-font-display); font-size: 22px; letter-spacing: -0.016em; font-weight: 400; margin-bottom: 6px; }
.id-price { font-family: var(--ss-font-mono); font-size: 11px; color: var(--ss-accent); margin-bottom: 14px; }
.id-body p { font-size: 14px; color: var(--ss-text-2); line-height: 1.65; }
.vs-prose { max-width: 700px; }
.vs-prose h2 { font-family: var(--ss-font-display); font-size: clamp(22px, 2.5vw, 28px); letter-spacing: -0.016em; font-weight: 400; margin: 20px 0 10px; }
.vs-prose p { color: var(--ss-text-2); font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.vs-prose p strong { color: var(--ss-text); font-weight: 500; }
.vs-prose ul { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 7px; }
.vs-prose ul li { font-size: 14px; color: var(--ss-text-2); padding-left: 18px; position: relative; line-height: 1.55; }
.vs-prose ul li::before { content: "→"; position: absolute; left: 0; color: var(--ss-text-subtle); }

/* ---- Competitor cards -------------------------------------------------- */
.alt-meta { display: flex; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.alt-meta span { font-family: var(--ss-font-mono); font-size: 11px; color: var(--ss-text-muted); text-transform: uppercase; letter-spacing: 0.12em; }

/* ---- FAQ --------------------------------------------------------------- */
.faq-item:last-child { border-bottom: none; }
.faq-a { font-size: 14px; color: var(--ss-text-2); line-height: 1.65; }
.faq-a strong { color: var(--ss-text); font-weight: 500; }

/* ---- CTA --------------------------------------------------------------- */
.cta-band { text-align: center; padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 40px); border: 1px solid var(--ss-line); border-radius: var(--ss-r-4); background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(200,161,99,0.08), transparent 60%), var(--ss-surface); }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Misc -------------------------------------------------------------- */
.section-label { font-family: var(--ss-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ss-text-muted); margin-bottom: 24px; }
.vs-section { margin-top: 20px; }
.use-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.use-card { padding: clamp(12px, 2vw, 16px) clamp(14px, 2.5vw, 20px); border: 1px solid var(--ss-line); border-radius: var(--ss-r-2); background: var(--ss-surface); }
.use-card.use-featured { border-color: var(--ss-accent-border); }
.use-title { font-size: 14px; font-weight: 600; color: var(--ss-text); margin-bottom: 10px; }
.use-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.use-list li { font-size: 13px; color: var(--ss-text-2); padding-left: 16px; position: relative; line-height: 1.5; }
.use-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ss-good); font-size: 11px; top: 2px; }
.hub-link { display: block; padding: clamp(10px, 1.5vw, 14px) clamp(12px, 2vw, 18px); border: 1px solid var(--ss-line); border-radius: var(--ss-r-2); background: var(--ss-surface); text-decoration: none; }
.hub-link .hl-type { font-family: var(--ss-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ss-text-muted); margin-bottom: 7px; }
.hub-link .hl-title { font-size: 14px; color: var(--ss-text); font-weight: 500; line-height: 1.4; }

/* ---- Grid occlusion ---------------------------------------------------
   Dense data tables get an opaque surface so the fixed page grid does not
   run behind their rows and fight their own hairlines. This is what the
   approved theme mockup does (.panel on --card). */
.comparison-table { background: var(--ss-surface); }