/* ============================================================
   NORTHPAPER — shared design system (single source of truth)
   Imported by all templates: Home, Tool Profile, Compare, List.
   Owns: tokens, base reset, chrome (nav/crumbs/eyebrow/shell),
   and the three unified atoms — status badge, section scaffold,
   data table, verification strip — so they can't drift per page.
   Page files keep ONLY their page-unique components.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bg:#07100c; --bg-2:#0a150f; --panel:#0c1812; --panel-2:#0e1c15;
  --line:rgba(126,178,156,0.13); --line-soft:rgba(126,178,156,0.08); --line-strong:rgba(126,178,156,0.22);
  --ink:#e9f3ee; --ink-2:#aebcb4; --ink-3:#6f8278; --ink-4:#51635a;
  --teal:#2bb88f; --teal-br:#3fd9aa; --teal-dim:rgba(43,184,143,0.14); --teal-line:rgba(43,184,143,0.34); --teal-glow:rgba(43,184,143,0.20);
  --amber:#d9a441; --amber-dim:rgba(217,164,65,0.13); --amber-line:rgba(217,164,65,0.34);
  --rose:#d56b6b; --rose-dim:rgba(213,107,107,0.13); --rose-line:rgba(213,107,107,0.32);
  --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Space Grotesk',system-ui,sans-serif;
  --maxw:1180px; --gutter:clamp(20px,5vw,64px);
}

/* ---------- BASE RESET ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--teal-dim); color:var(--teal-br); }

/* ---------- CHROME ---------- */
.eyebrow{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-3); }
.eyebrow .dot{ color:var(--teal); }
.shell{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

.nav{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line-soft); background:rgba(7,16,12,0.78); backdrop-filter:blur(14px); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand{ font-weight:700; font-size:15px; letter-spacing:0.14em; }
.brand b{ color:var(--ink); } .brand span{ color:var(--teal); }
.nav__links{ display:flex; gap:34px; align-items:center; }
.nav__links a{ font-size:13.5px; color:var(--ink-3); font-weight:500; position:relative; padding-block:4px; transition:color .18s; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a.active{ color:var(--teal-br); }
.nav__links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-19px; height:1.5px; background:var(--teal); }

.crumbs{ border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg, var(--bg-2), var(--bg)); }
.crumbs__in{ display:flex; gap:10px; align-items:center; height:46px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; color:var(--ink-4); }
.crumbs__in a{ color:var(--ink-3); }
.crumbs__in a:hover{ color:var(--teal); }
.crumbs__in .sep{ opacity:.5; }
.crumbs__in .cur{ color:var(--ink-2); }

/* ============================================================
   ATOM 1 — STATUS BADGE (active / acquired / discontinued)
   Base = used in tables, cards, meta. --lg = hero headline use.
   data-s OR data-state both supported.
   ============================================================ */
.sbadge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:6px 11px; border-radius:7px; white-space:nowrap;
  border:1px solid var(--teal-line); color:var(--teal-br); background:var(--teal-dim);
}
.sbadge .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.sbadge[data-s="acquired"], .sbadge[data-state="acquired"]{ border-color:var(--amber-line); color:var(--amber); background:var(--amber-dim); }
.sbadge[data-s="discontinued"], .sbadge[data-state="discontinued"]{ border-color:var(--rose-line); color:var(--rose); background:var(--rose-dim); }

.sbadge--lg{ font-size:11.5px; gap:8px; padding:8px 13px; letter-spacing:0.16em; margin-top:14px; }
.sbadge--lg .d, .sbadge--lg .pulse{ width:7px; height:7px; }

/* animated dot for the hero badge */
.sbadge .pulse{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; animation:np-pulse 2.4s infinite; }
.sbadge[data-s="discontinued"] .pulse, .sbadge[data-state="discontinued"] .pulse{ animation:none; }
@keyframes np-pulse{ 0%{ box-shadow:0 0 0 0 var(--teal-glow);} 70%{ box-shadow:0 0 0 7px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

/* ============================================================
   ATOM 2 — SECTION SCAFFOLD + vertical rhythm
   ============================================================ */
.section{ padding-top:clamp(54px,7vw,90px); }
.section__head{ display:flex; align-items:flex-end; gap:18px; margin-bottom:28px; flex-wrap:wrap; }
.section__idx{ font-family:var(--mono); font-size:13px; color:var(--teal); font-weight:600; letter-spacing:0.05em; }
.section__title{ font-size:clamp(24px,3vw,32px); font-weight:600; letter-spacing:-0.025em; margin:0; }
.section__rule{ flex:1; min-width:40px; height:1px; background:linear-gradient(90deg, var(--line-strong), transparent); align-self:center; }
.section__note{ font-family:var(--mono); font-size:11px; color:var(--ink-4); letter-spacing:0.05em; align-self:center; }
.section__link{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:0.04em; align-self:center; transition:color .16s; }
.section__link:hover{ color:var(--teal-br); }
.section__sub{ font-size:15px; color:var(--ink-2); max-width:60ch; margin:-14px 0 30px; line-height:1.5; }

/* ============================================================
   ATOM 3a — DATA TABLE shell (pricing / comparison / at-a-glance)
   Wrap carries border+radius; table carries header + cell rhythm.
   Add .ndtable--compact for dense summary tables.
   ============================================================ */
.ndtable-wrap{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, var(--panel-2), var(--panel)); }
.ndtable{ width:100%; border-collapse:separate; border-spacing:0; }
.ndtable thead th{
  text-align:left;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ink-3);
  padding:16px 24px; background:rgba(255,255,255,0.017); border-bottom:1px solid var(--line);
}
.ndtable tbody td{ padding:18px 24px; border-bottom:1px solid var(--line-soft); vertical-align:middle; font-size:15px; color:var(--ink); }
.ndtable tbody tr:last-child td{ border-bottom:none; }
.ndtable tbody tr{ transition:background .15s; }
.ndtable tbody tr:hover{ background:rgba(43,184,143,0.035); }
.ndtable--compact thead th{ padding:14px 22px; }
.ndtable--compact tbody td{ padding:14px 22px; font-size:14px; }

/* ATOM 3b — SAMPLE flag (shared) */
.sample{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber-line); background:var(--amber-dim); padding:3px 7px; border-radius:5px; white-space:nowrap; }

/* ============================================================
   ATOM 3c — VERIFICATION STRIP (trust signature)
   ============================================================ */
.verify{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:18px; padding:14px 18px; border:1px dashed var(--line); border-radius:10px; background:rgba(255,255,255,0.008); font-size:13px; color:var(--ink-3); }
.verify a{ color:var(--teal); border-bottom:1px solid transparent; }
.verify a:hover{ border-color:var(--teal-line); }
.pending{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber-line); background:var(--amber-dim); padding:5px 9px; border-radius:6px; }
.pending .pdot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.stamp{ font-family:var(--mono); font-size:11.5px; color:var(--ink-4); margin-left:auto; }

/* ---------- shared reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .sbadge .pulse{ animation:none; }
}