/* COPYRIGHT 2024-2026 NSEi - ALL RIGHTS RESERVED
   Tokens are docs/brand/README.md's palette, carried over from the product UI on
   purpose: a prospect who sees the deck and then the demo should see one thing.
   System type stacks, no webfonts: a blocked font host silently reshapes a page,
   and this one has to render behind a corporate proxy. */
:root {
  --ground: #0a0d12;
  --panel: #121722;
  --raised: #18202e;
  --line: #232c3d;
  --ink: #e6ecf5;
  --dim: #b9c3d4;
  --muted: #8b97ad;
  --signal: #4fd6c8;
  --warn: #f5a524;
  --third: #7aa2f7;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --measure: 68ch;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--dim);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 28px; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

h1, h2, h3 { color: var(--ink); text-wrap: balance; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.08rem; }
p { max-width: var(--measure); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.1rem;
}

/* --- header ------------------------------------------------------------- */
header { border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 12px; padding: 20px 0; }
.bar svg { width: 30px; height: 30px; color: var(--signal); flex: none; }
.wordmark {
  font-size: 1.22rem; color: var(--ink); letter-spacing: -.01em;
}
.bar .spacer { flex: 1; }
.bar a.quiet { color: var(--muted); font-size: .92rem; text-decoration: none; }
.bar a.quiet:hover { color: var(--ink); }

/* --- hero --------------------------------------------------------------- */
.hero { padding: clamp(60px, 11vw, 120px) 0 clamp(50px, 8vw, 90px); }
.hero p.lede { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--dim); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 7px;
  font-size: .97rem;
  text-decoration: none;
  border: 1px solid var(--line);
}
.btn.primary { background: var(--signal); color: #06201d; border-color: var(--signal); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { color: var(--ink); }
.btn.ghost:hover { border-color: var(--muted); }

/* --- sections ----------------------------------------------------------- */
section { padding: clamp(44px, 7vw, 84px) 0; border-top: 1px solid var(--line); }

.grid { display: grid; gap: 18px; margin-top: 2rem; }
@media (min-width: 760px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.four { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
}
.card h3 { color: var(--ink); margin-bottom: .45em; }
.card p { font-size: .95rem; margin: 0; color: var(--dim); }
.card.mark { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); }
.card.mark h3 { color: var(--signal); }

/* The negative space. Deliberately quieter than the cards above it: this
   section is what a technical reader checks, not what a buyer is sold. */
.nots { display: grid; gap: 14px; margin-top: 2rem; }
@media (min-width: 820px) { .nots { grid-template-columns: repeat(2, 1fr); } }
.not {
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 18px;
}
.not strong { color: var(--ink); display: block; margin-bottom: .2em; }
.not span { font-size: .95rem; }

/* --- the worked example ------------------------------------------------- */
.example {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(22px, 4vw, 34px);
  margin-top: 2rem;
}
.step { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.step:last-of-type { border-bottom: 0; }
.step .who {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  flex: none; width: 108px; padding-top: 4px;
}
.step p { margin: 0; font-size: .97rem; }
.step.answer .who { color: var(--third); }
.step.caveat .who { color: var(--warn); }
.figure { font-family: var(--mono); color: var(--ink); }

/* --- statistics --------------------------------------------------------- */
.stats { display: grid; gap: 18px; margin-top: 2rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { border-top: 2px solid var(--line); padding-top: 16px; }
.stat b { display: block; font-size: 2.3rem; color: var(--ink); line-height: 1.1; font-weight: 600; }
.stat span { font-size: .93rem; display: block; margin-top: .4em; }
.stat cite { font-style: normal; color: var(--muted); font-size: .8rem; font-family: var(--mono); }

/* --- engagement --------------------------------------------------------- */
.artifacts { list-style: none; padding: 0; margin: 1.6rem 0 0; max-width: var(--measure); }
.artifacts li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.artifacts li:last-child { border-bottom: 0; }
.artifacts b { color: var(--ink); }

/* --- footer ------------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding: 34px 0 54px; color: var(--muted); font-size: .88rem; }
footer p { margin: .3em 0; max-width: none; }