/* Shared CSS for /demo-* pages (Lead Router / Indexing API / Content Ideas / Lead Nurture).
   Extracted from inline <style> in 4 demo HTML pages to enable browser cache reuse + single source of truth. */

.lrd-shell{max-width:1080px;margin:0 auto;padding:0 var(--space-3)}

      .lrd-hero{text-align:center;padding:var(--space-6) 0 var(--space-3)}

      .lrd-hero .eyebrow{background:linear-gradient(135deg,#0080ff,#10c8ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

      .lrd-hero h1{margin:var(--space-2) 0 var(--space-3);font-size:clamp(1.8rem,4vw,2.6rem)}

      .lrd-hero p{color:var(--muted);max-width:680px;margin:0 auto var(--space-3);line-height:1.6}

      .lrd-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border:1px solid rgba(16,200,255,.3);border-radius:999px;font-size:.78rem;color:var(--accent);background:rgba(16,200,255,.08)}

      .lrd-tag svg{width:14px;height:14px}

      .lrd-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-3);padding:var(--space-4)}

      .lrd-card h2{font-size:1.15rem;margin:0 0 var(--space-3);display:flex;align-items:center;gap:.5rem}

      .lrd-card h2::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}

      .lrd-viz{position:relative}

      .lrd-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;transition:transform .25s cubic-bezier(.2,.6,.2,1)}

      .lrd-node-circle{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);transition:background-color .35s cubic-bezier(.2,.6,.2,1), border-color .35s cubic-bezier(.2,.6,.2,1), color .35s cubic-bezier(.2,.6,.2,1), transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s cubic-bezier(.2,.6,.2,1);position:relative}

      .lrd-node-circle svg{width:24px;height:24px}

      .lrd-node-label{font-size:.7rem;color:var(--muted);font-weight:600;letter-spacing:.02em;line-height:1.2;max-width:80px;transition:color .3s ease}

      .lrd-node-check{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;display:none;place-items:center;font-size:.7rem;font-weight:700;border:2px solid var(--bg)}

      .lrd-node-check svg{width:10px;height:10px}

      .lrd-node.is-active .lrd-node-circle{background:linear-gradient(135deg,rgba(0,109,255,.25),rgba(16,200,255,.15));border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px rgba(16,200,255,.15),0 0 24px rgba(16,200,255,.35);animation:lrd-pulse 1.2s ease-in-out infinite}

      .lrd-node.is-active .lrd-node-label{color:var(--text)}

      .lrd-node.is-done .lrd-node-circle{background:linear-gradient(135deg,#0080ff,#10c8ff);border-color:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(16,200,255,.25)}

      .lrd-node.is-done .lrd-node-label{color:var(--text)}

      .lrd-node.is-done .lrd-node-check{display:grid}

      @keyframes lrd-pulse{
        0%,100%{transform:scale(1);box-shadow:0 0 0 4px rgba(16,200,255,.15),0 0 24px rgba(16,200,255,.35)}
        50%{transform:scale(1.06);box-shadow:0 0 0 8px rgba(16,200,255,.08),0 0 36px rgba(16,200,255,.55)}
      }

      @media (prefers-reduced-motion: reduce){
        .lrd-node.is-active .lrd-node-circle{animation:none}
        .lrd-node{transition:none}
      }

      .lrd-explainer{margin-top:var(--space-6);padding:var(--space-5) 0}

      .lrd-explainer h2{text-align:center;margin-bottom:var(--space-4)}

      .lrd-explainer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}

      .lrd-explainer-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-3);padding:var(--space-4)}

      .lrd-explainer-card h3{display:flex;align-items:center;gap:.5rem;font-size:1rem;margin:0 0 var(--space-2)}

      .lrd-explainer-card h3 svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}

      .lrd-explainer-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}

      .lrd-cta{margin:var(--space-6) auto 0;padding:var(--space-5);background:linear-gradient(135deg,rgba(0,109,255,.1),rgba(16,200,255,.04));border:1px solid var(--border);border-radius:var(--radius-3);text-align:center;max-width:760px}

      .lrd-cta h2{margin:0 0 var(--space-2)}

      .lrd-cta p{color:var(--muted);max-width:520px;margin:0 auto var(--space-3)}