/* products/shared.css — Naptown Labs product-page system (cohesion layer + demo-kit) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg:#111210; --surface:#1a1916; --border:#2a2824;
  --limestone:#D4C5A9; --gold:#c9a227; --gold-subtle:rgba(201,162,39,.08); --gold-border:rgba(201,162,39,.3);
  --text:#e8e2d6; --muted:#9a9484; --dim:#6a6560;
  /* per-page personality knob — pages override these four */
  --accent:#c9a227; --accent-subtle:rgba(201,162,39,.1); --accent-border:rgba(201,162,39,.4); --accent-wash:rgba(201,162,39,.05);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }

/* ── Nav ── */
.site-nav { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 24px;
  background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.site-nav .brand { display:flex; align-items:center; gap:8px; text-decoration:none;
  font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:var(--text); }
.site-nav .brand svg { height:18px; width:18px; }
.site-nav .brand .nl { color:var(--text); }
.site-nav .brand .nl b { color:var(--gold); font-weight:600; }
.site-nav .brand .sep { color:var(--dim); }
.site-nav .brand .product-name { color:var(--text); }
.site-nav .nav-cta { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; padding:7px 16px;
  text-decoration:none; color:var(--accent); background:var(--accent-subtle); border:1px solid var(--accent-border); transition:background .15s; }
.site-nav .nav-cta:hover { background:var(--accent-wash); border-color:var(--accent); }

/* ── Hero band (typographic + demo column) ── */
.hero-band { display:grid; grid-template-columns:0.9fr 1.1fr; max-width:1100px; margin:0 auto; }
.hero-copy { padding:64px 24px 56px; border-right:1px solid var(--border); }
.hero-eyebrow { font-size:.65rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.2em; margin-bottom:16px; }
.hero-copy h1 { font-size:clamp(26px,3.4vw,38px); font-weight:800; line-height:1.12; letter-spacing:-.03em; margin-bottom:14px; max-width:460px; }
.hero-copy p { font-size:15px; color:var(--muted); max-width:440px; margin-bottom:24px; line-height:1.65; }
.hero-demo { padding:32px 24px; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(160deg,var(--accent-wash),transparent 75%); }

/* ── CTA bar ── */
.cta-bar { max-width:1100px; margin:0 auto; padding:20px 24px; display:flex; align-items:center; gap:16px; border-top:1px solid var(--border); }
.cta-primary { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; padding:10px 22px; text-decoration:none;
  color:var(--accent); background:var(--accent-subtle); border:1px solid var(--accent-border); transition:background .15s; }
.cta-primary:hover { background:var(--accent-wash); border-color:var(--accent); }
.cta-secondary { font-size:13px; color:var(--dim); text-decoration:none; }

/* ── ROI ── */
.roi { max-width:1100px; margin:0 auto; padding:40px 24px; }
.roi p { font-size:14.5px; color:var(--muted); line-height:1.75; max-width:680px; }
.roi p + p { margin-top:12px; }
.roi strong { color:var(--limestone); font-weight:600; }

/* ── Features ── */
.features { max-width:1100px; margin:0 auto; padding:48px 24px; border-top:1px solid var(--border); }
.features h2 { font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--limestone); margin-bottom:28px; }
.feature-list { display:flex; flex-direction:column; gap:18px; max-width:640px; }
.feature-item { display:flex; gap:18px; align-items:baseline; }
.feature-item .f-name { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--text); min-width:170px; flex-shrink:0; }
.feature-item .f-desc { font-size:14px; color:var(--muted); line-height:1.55; }

/* ── Pricing ── */
.pricing { max-width:1100px; margin:0 auto; padding:48px 24px; border-top:1px solid var(--border); }
.pricing h2 { font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--limestone); margin-bottom:20px; }
.pricing-tiers { display:flex; flex-direction:column; gap:10px; max-width:600px; }
.pricing-tier { background:var(--surface); border:1px solid var(--border); padding:18px 22px; display:flex; justify-content:space-between; align-items:center; }
.pricing-tier.featured { border-color:var(--accent-border); }
.tier-name { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px; }
.tier-detail { font-size:12px; color:var(--dim); }
.tier-price { font-family:'JetBrains Mono',monospace; font-size:1.4rem; font-weight:600; color:var(--text); white-space:nowrap; }
.tier-price span { font-size:.68rem; color:var(--dim); font-weight:400; }
.pricing-cta { margin-top:20px; }
.pricing-cta a { font-family:'JetBrains Mono',monospace; display:inline-block; color:var(--accent); background:var(--accent-subtle);
  border:1px solid var(--accent-border); padding:10px 22px; font-size:13px; font-weight:600; text-decoration:none; }

/* ── Related ── */
.related { max-width:1100px; margin:0 auto; padding:48px 24px; border-top:1px solid var(--border); }
.related h2 { font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--limestone); margin-bottom:24px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; }
.related-card { display:block; text-decoration:none; color:inherit; border:1px solid var(--border); background:var(--surface); transition:border-color .15s; }
.related-card:hover { border-color:rgba(212,197,169,.3); }
.related-card img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.related-card .rc-name { display:block; padding:12px 14px 4px; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--limestone); }
.related-card .rc-tagline { display:block; padding:0 14px 14px; font-size:12px; color:var(--muted); line-height:1.5; }

/* ── Footer ── */
.site-footer { background:var(--surface); border-top:1px solid var(--border); padding:28px 24px;
  display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--dim); }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--text); }
.site-footer .footer-links { display:flex; gap:20px; }

/* ═══ DEMO-KIT (reusable per-product demo primitives) ═══ */
.demo-cap { font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.14em; margin-bottom:10px; }
.demo-box { border:1px solid var(--border); background:var(--surface); }
.demo-head { padding:9px 13px; border-bottom:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--dim); display:flex; justify-content:space-between; }
.demo-head .w { color:var(--accent); display:flex; align-items:center; gap:6px; }
.demo-row { padding:9px 13px; display:grid; grid-template-columns:8px 1fr auto auto; gap:10px; align-items:center; border-bottom:1px solid #201f1c; font-family:'JetBrains Mono',monospace; font-size:10.5px; }
.demo-row:last-child { border-bottom:none; }
.demo-row .ep { color:var(--muted); } .demo-row .lat { color:var(--dim); text-align:right; }
.demo-row .pct { text-align:right; color:#5fae5f; } .demo-row .pct.w { color:var(--accent); } .demo-row .pct.d { color:#cf5b4a; }
.dot { width:7px; height:7px; border-radius:50%; }   /* dots are the one intentional round element */
.dot.up { background:#5fae5f; } .dot.warn { background:var(--accent); } .dot.down { background:#cf5b4a; animation:blink 1s infinite; }
.pulse { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite; }
.chat { padding:14px; display:flex; flex-direction:column; gap:9px; }
.bub { max-width:80%; padding:8px 12px; font-size:12.5px; line-height:1.45; opacity:0; animation:rise .4s forwards; }
.bub.them { align-self:flex-start; background:#222019; color:var(--text); }
.bub.us { align-self:flex-end; background:var(--accent-subtle); border:1px solid var(--accent-border); color:var(--text); }
.ring { width:80px; height:80px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p,80)*1%), #252320 0); animation:fill 2.2s ease-out; }
.ring .inner { width:62px; height:62px; border-radius:50%; background:var(--surface); display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:19px; color:var(--accent); }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes rise { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes fill { from{background:conic-gradient(var(--accent) 0,#252320 0)} }

/* ── Responsive ── */
@media (max-width:820px) {
  .hero-band { grid-template-columns:1fr; }
  .hero-copy { border-right:none; border-bottom:1px solid var(--border); padding:48px 20px 36px; }
  .related-grid { grid-template-columns:1fr; }
  .site-nav { padding:0 16px; }
  .site-footer { flex-direction:column; gap:10px; align-items:flex-start; }
  .feature-item { flex-direction:column; gap:4px; }
  .feature-item .f-name { min-width:auto; }
  .pricing-tier { flex-direction:column; gap:10px; align-items:flex-start; }
}