/* GridNMS public web app — shared design system (landing + signup).
   Light, restrained, technical. One accent (brand blue) on controls/data only. */

:root{
  --bg:#ffffff; --surface:#f6f8fc; --border:#e6eaf1;
  --ink:#0b1220; --body:#3b465c; --muted:#5b6678;
  --brand:#2563eb; --brand-strong:#1d4ed8;
  --green:#15803d; --orange:#ea580c; --orange-ink:#9a3412; --red:#dc2626; --edge:#c7ced8;
  /* semantic tints (tokenized — no one-off hex in markup) */
  --brand-tint:#eef4ff; --brand-tint-border:#cfe0fd;
  --danger-tint:#fdecec; --danger-tint-border:#f6cfcf; --danger-ink:#b91c1c;
  --maxw:1080px;
  --z-skip:200; --z-nav:100;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--body); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3{ color:var(--ink); margin:0; line-height:1.12; letter-spacing:-0.03em; text-wrap:balance; font-weight:700; }
h1{ font-size:clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3{ font-size:1.125rem; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--mono); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.prose{ max-width:62ch; color:var(--body); text-wrap:pretty; }
.muted{ color:var(--muted); }

/* accessibility helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:12px; top:-48px; z-index:var(--z-skip); background:var(--brand);
  color:#fff; padding:.6rem 1rem; border-radius:8px; font-weight:600; transition:top .15s ease; }
.skip:focus{ top:12px; }

/* buttons — 44px min target */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px;
  font-family:var(--sans); font-weight:600; font-size:.95rem; border-radius:8px; padding:.6rem 1.15rem;
  border:1px solid transparent; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-strong); }
.btn-secondary{ border-color:var(--border); color:var(--ink); background:#fff; }
.btn-secondary:hover{ border-color:#c5cde0; }
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:8px; }

/* nav */
header.nav{ position:sticky; top:0; z-index:var(--z-nav); background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; color:var(--ink); }
.nav-links{ display:flex; gap:2rem; }
.nav-links a{ color:var(--muted); font-size:.93rem; font-weight:500; padding:.4rem 0; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-cta .signin{ color:var(--muted); font-size:.93rem; font-weight:500; padding:.5rem .25rem; }
.nav-cta .signin:hover{ color:var(--ink); }
@media(max-width:780px){ .nav-links{ display:none; } }

/* sections + rows */
section{ padding:clamp(4.5rem,8vw,7.5rem) 0; }
.alt{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
@media(max-width:880px){ .row{ grid-template-columns:1fr; } .row .visual{ order:2; } }
.feature h2{ margin-bottom:1rem; }
ul.checks{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.85rem; }
ul.checks li{ position:relative; padding-left:1.8rem; color:var(--body); font-size:.97rem; line-height:1.55; }
ul.checks svg{ position:absolute; left:0; top:.3rem; flex:none; }

/* product panels + diagrams */
.panel{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px;
  box-shadow:0 1px 2px rgba(11,18,32,.04), 0 12px 28px -18px rgba(11,18,32,.18); }
.panel .bar{ display:flex; align-items:center; gap:.5rem; padding:2px 4px 12px; }
.panel .bar .label{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.panel svg.diagram{ width:100%; display:block; background:#fbfcfe; border:1px solid var(--border); border-radius:8px; }
.nlabel{ font-family:var(--mono); font-size:10px; }
.tint-danger{ background:var(--danger-tint); border:1px solid var(--danger-tint-border); }
.tint-brand{ background:var(--brand-tint); border:1px solid var(--brand-tint-border); }
.row-item{ display:flex; justify-content:space-between; align-items:center; padding:.65rem .8rem; border-radius:8px; }
.row-item.plain{ background:var(--surface); border:1px solid var(--border); }

/* product app-frame showcase (Metrics) */
.appframe{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(11,18,32,.04), 0 30px 60px -34px rgba(11,18,32,.28); }
.appbar{ display:flex; align-items:center; gap:.45rem; padding:.6rem .9rem; border-bottom:1px solid var(--border); background:var(--surface); }
.appbar .dot{ width:10px; height:10px; border-radius:50%; background:#d7dde7; }
.appbar .crumb{ margin-left:.6rem; font-size:.74rem; color:var(--muted); }
.appbody{ padding:clamp(.9rem,2vw,1.4rem); display:grid; gap:1.1rem; }
.mgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:760px){ .mgrid{ grid-template-columns:1fr; } }
.mcard{ border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; background:#fff; }
.mc-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.mc-t{ font-weight:600; font-size:.9rem; color:var(--ink); }
.mc-u{ font-size:.68rem; color:var(--muted); }
.mcard svg{ width:100%; height:auto; display:block; }
.mc-leg{ display:flex; gap:1.1rem; font-size:.7rem; color:var(--muted); margin-top:.4rem; }
.mc-leg b{ font-weight:700; }
.mtiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:.7rem; }
.mtile{ border:1px solid var(--border); border-radius:10px; padding:.6rem .75rem; background:var(--surface); }
.mtile .k{ font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.mtile .v{ font-size:1.15rem; font-weight:700; color:var(--ink); margin-top:.2rem; }
.mtile .v small{ font-size:.7rem; font-weight:500; color:var(--muted); }

/* graph entrance — visible by default, animate as enhancement only */
@keyframes nodeIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes edgeIn{ from{ stroke-dashoffset:200; } to{ stroke-dashoffset:0; } }
.g-node{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: no-preference){
  .g-edge{ stroke-dasharray:200; stroke-dashoffset:200; animation:edgeIn .9s cubic-bezier(.22,1,.36,1) forwards; }
  .g-node{ opacity:0; animation:nodeIn .5s cubic-bezier(.22,1,.36,1) forwards; }
}

/* secondary capabilities */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.caps > div{ padding:0 2rem; border-left:1px solid var(--border); }
.caps > div:first-child{ padding-left:0; border-left:0; }
@media(max-width:780px){ .caps{ grid-template-columns:1fr; gap:2rem; } .caps > div{ padding:0; border-left:0; } }

/* how it works — real sequence */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-top:2.5rem; }
.flow > div{ background:#fff; padding:1.5rem; }
.flow h3{ margin:0 0 .4rem; }
.flow p{ font-size:.9rem; color:var(--muted); }
@media(max-width:780px){ .flow{ grid-template-columns:1fr; } }

/* deployment checklist mock (#171) */
.checklist{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 34px rgba(11,18,32,.07); }
.checklist .ck-head{ padding:1rem 1.15rem .95rem; border-bottom:1px solid var(--border); background:var(--surface); }
.checklist .ck-title{ display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--ink); font-size:.98rem; }
.checklist .ck-count{ font-family:var(--mono); font-size:.82rem; color:var(--brand); font-weight:700; }
.checklist .ck-prog{ margin-top:.7rem; height:6px; border-radius:999px; background:#e6eaf1; overflow:hidden; }
.checklist .ck-prog > span{ display:block; height:100%; width:70%; background:var(--brand); border-radius:999px; }
.checklist .ck-sub{ margin-top:.55rem; font-size:.76rem; color:var(--muted); }
.ck-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem 1.15rem; border-top:1px solid var(--border); font-size:.9rem; }
.ck-item .ck-ic{ flex:none; display:block; }
.ck-item .ck-t{ flex:1; color:var(--ink); }
.ck-item.done .ck-t{ color:var(--muted); }
.ck-item.current{ background:var(--brand-tint); }
.ck-item.current .ck-t{ font-weight:600; }
.ck-tag{ font-size:.66rem; font-weight:600; font-family:var(--mono); color:var(--muted); white-space:nowrap; }
.ck-item.done .ck-tag{ color:#16a34a; }
.ck-item.current .ck-tag{ color:var(--brand); }
.onb-list{ margin-top:1.4rem; display:grid; gap:.7rem; }
.onb-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:var(--body); }
.onb-list svg{ flex:none; margin-top:.15rem; }

/* pricing */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2.5rem; }
@media(max-width:720px){ .plans{ grid-template-columns:1fr; } }
.plan{ border:1px solid var(--border); border-radius:12px; padding:2rem; background:#fff; }
.plan.primary{ border-color:var(--brand-tint-border); }
.plan .price{ display:flex; align-items:baseline; gap:.25rem; margin-top:.4rem; }
.plan .price .amt{ font-size:2rem; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }
.plan ul{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.7rem; font-size:.93rem; color:var(--body); }
.plan ul li{ display:grid; grid-template-columns:1.1rem 1fr; gap:.6rem; }

.ctaband{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

footer{ border-top:1px solid var(--border); }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:2.25rem 0; color:var(--muted); font-size:.9rem; }
.foot a{ padding:.25rem 0; }
.foot a:hover{ color:var(--ink); }

/* ---- forms (signup) ---- */
.form-wrap{ max-width:560px; margin:0 auto; }
.notice{ display:flex; gap:.85rem; align-items:flex-start; background:var(--brand-tint);
  border:1px solid var(--brand-tint-border); border-radius:10px; padding:1rem 1.1rem; color:#1e3a8a; }
.notice strong{ color:#1e3a8a; }
.field{ display:grid; gap:.4rem; margin-top:1.1rem; }
.field label{ font-size:.9rem; font-weight:600; color:var(--ink); }
.field .req{ color:var(--brand); }
.field .hint{ font-size:.82rem; color:var(--muted); }
.field input, .field select{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:#fff;
  border:1px solid var(--border); border-radius:8px; padding:.7rem .85rem; min-height:44px; width:100%; }
.field input::placeholder{ color:var(--muted); }
.field input:hover, .field select:hover{ border-color:#c5cde0; }
.field input[aria-invalid="true"]{ border-color:var(--red); }
.err{ font-size:.82rem; color:var(--danger-ink); min-height:1em; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.2rem; }
.consent input[type=checkbox]{ width:18px; height:18px; margin-top:.2rem; accent-color:var(--brand); flex:none; }
.consent label{ font-size:.92rem; color:var(--body); line-height:1.5; }
.consent .sub{ display:block; font-size:.82rem; color:var(--muted); margin-top:.15rem; }
.success{ text-align:center; padding:2rem 0; }
.success .check{ width:48px; height:48px; border-radius:999px; background:var(--brand-tint);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem; }

/* legal documents (privacy, terms, DPA, sub-processors, cookies, EULA) */
.legal-head{ padding:2.5rem 0 1.5rem; border-bottom:1px solid var(--border); }
.legal-updated{ font-family:var(--mono); font-size:.85rem; color:var(--muted); margin-top:.6rem; }
.legal-notice{ background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.9rem 1.1rem; margin-top:1.25rem; font-size:.88rem; color:var(--body); line-height:1.55; }
.legal-crosslinks{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:1.1rem; font-size:.88rem; }
.legal-crosslinks a{ color:var(--brand); font-weight:600; }
.legal-body{ max-width:72ch; padding:2.5rem 0 3.5rem; color:var(--body); line-height:1.7; }
.legal-body h2{ font-size:1.35rem; margin-top:2.2rem; margin-bottom:.7rem; letter-spacing:-0.01em; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:1.05rem; margin-top:1.5rem; margin-bottom:.5rem; }
.legal-body p{ margin:0 0 .9rem; }
.legal-body ul, .legal-body ol{ margin:0 0 .9rem; padding-left:1.3rem; display:grid; gap:.4rem; }
.legal-body li{ line-height:1.6; }
.legal-body strong{ color:var(--ink); font-weight:600; }
.legal-body a{ color:var(--brand); font-weight:600; }
.legal-body table{ width:100%; border-collapse:collapse; margin:1rem 0 1.3rem; font-size:.9rem; }
.legal-body th{ text-align:left; font-weight:600; color:var(--ink); border-bottom:1px solid var(--border);
  padding:.5rem .7rem; }
.legal-body td{ border-bottom:1px solid var(--border); padding:.6rem .7rem; vertical-align:top; color:var(--body); }
.legal-body .allcaps{ font-size:.82rem; letter-spacing:.01em; color:var(--muted); background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:.9rem 1.1rem; margin:0 0 .9rem; line-height:1.6; }
.legal-body .contact-block{ background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.2rem; margin-top:.5rem; font-size:.92rem; line-height:1.7; }
.legal-body .contact-block strong{ display:block; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }