/* ==========================================================================
   NeoSur Intelligence N.V. — design system v4
   Type: Newsreader (display, self-hosted) over Inter (text, self-hosted).
   Colour: brand blue lifted from the mark, on near-black ink.
   Motif: topographic contours (contours.v1.svg) — the terrain the work runs on.
   No inline styles anywhere: the site runs under a strict style-src 'self' CSP.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* surfaces */
  --ink: #0a0b0e;
  --ink-2: #0e1015;
  --ink-3: #141821;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);

  /* type — all ratios verified against --ink for WCAG AA */
  --text: #eef1f6;
  --muted: #a7b0c0;
  --dim: #8d97a8;

  /* brand */
  --accent: #1173d4;
  --accent-press: #0a56a3;
  --accent-hover: #0d64be;
  --accent-hi: #56b0f5;
  --accent-wash: rgba(17, 115, 212, 0.12);
  --warn: #e0a458;

  --max: 1200px;
  --radius: 6px;
  --radius-lg: 12px;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #2a303b var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "cv11" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  caret-color: var(--accent-hi);
  -webkit-tap-highlight-color: transparent;
}

::selection { background: rgba(86, 176, 245, 0.3); color: #fff; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #262b35; border: 3px solid var(--ink); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #343b48; }

a { color: inherit; text-decoration: none; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hi); }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  transition: top 0.16s var(--ease);
}
.skip:hover { color: #fff; }
.skip:focus { top: 16px; color: #fff; }

/* --- layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
}

.section { padding: clamp(80px, 10vw, 136px) 0; }
.section--tight { padding: clamp(48px, 6vw, 72px) 0; }
.section--line { border-top: 1px solid var(--line); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 11, 14, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand:hover { color: inherit; }
.brand-mark { height: 34px; width: auto; transition: transform 0.4s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.brand-parent {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 2px;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a.nav-link {
  position: relative;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 450;
  padding: 9px 12px;
  border-radius: var(--radius);
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.nav a.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav a.nav-link[aria-current="page"] { color: var(--text); }
.nav a.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -15px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-hi);
}

.nav .btn { margin-left: 12px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  min-height: 44px;
  background: none;
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--line-3); }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px -8px rgba(0, 0, 0, 0.8);
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 22px -10px rgba(0, 0, 0, 0.9); }
.btn-primary:active { background: var(--accent-press); transform: translateY(1px); }

.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover { border-color: var(--line-3); background: rgba(255, 255, 255, 0.05); color: var(--text); }
.btn-ghost:active { transform: translateY(1px); }

.btn .arrow {
  font-family: var(--sans);
  font-size: 15px;
  opacity: 0.8;
  transition: transform 0.25s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

.nav .btn { min-height: 40px; padding: 9px 18px; }

/* --- type --------------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 420;
  letter-spacing: -0.022em;
  line-height: 1.04;
  font-feature-settings: "kern" 1, "liga" 1, "lnum" 1;
}

h1 { font-size: clamp(2.85rem, 6.4vw, 5.6rem); letter-spacing: -0.03em; line-height: 0.98; }
h2 { font-size: clamp(2.1rem, 3.9vw, 3.35rem); }

h1 em, h2 em {
  font-style: normal;
  color: var(--accent-hi);
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -0.014em;
  line-height: 1.3;
}

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.06rem, 1.45vw, 1.2rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 58ch;
}

.small { font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }

/* A label is kept only where it carries information the heading does not
   (the 404 status code). Section titles speak for themselves. */
.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 104px);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -10% 20% 35%;
  background: radial-gradient(closest-side, rgba(17, 115, 212, 0.2), transparent);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/assets/contours.v1.svg") 70% 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
  opacity: 0.9;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: 30px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}

.hero-facts span { display: flex; align-items: center; gap: 9px; }

.hero-facts span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hi);
  flex: none;
}

.hero-facts .coord { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.hero-facts .coord::before { width: 9px; height: 9px; background: none; border: 1px solid var(--accent-hi); }

/* --- artifact panel (hero visual) --------------------------------------- */

.artifact {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 40%), rgba(14, 16, 21, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 90px -36px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.artifact-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.artifact-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.artifact-bar .dot:first-child { background: rgba(86, 176, 245, 0.7); }
.artifact-bar .name { margin-left: 6px; }

.artifact-body { position: relative; padding: 14px 18px 6px; }

/* the authored moment: the verifier's pass over each finding */
.artifact-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(86, 176, 245, 0.1) 70%, rgba(86, 176, 245, 0.45) 98%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: verify-sweep 2.2s var(--ease) 0.5s 1 both;
}

@keyframes verify-sweep {
  0% { transform: translateY(-60px); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(240px); opacity: 0; }
}

.finding {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  animation: settle 0.9s var(--ease-out) both;
}
.finding:nth-child(1) { animation-delay: 0.7s; }
.finding:nth-child(2) { animation-delay: 1.15s; }
.finding:nth-child(3) { animation-delay: 1.6s; }
.finding:last-child { border-bottom: 0; }

@keyframes settle {
  from { opacity: 0.25; filter: blur(3px); transform: translateY(6px); }
  to { opacity: 1; filter: none; transform: none; }
}

.chip {
  display: inline-block;
  justify-self: start;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.chip-high { background: rgba(224, 122, 95, 0.16); color: #f0a48c; border: 1px solid rgba(224, 122, 95, 0.3); }
.chip-med { background: rgba(224, 164, 88, 0.14); color: #e8bb85; border: 1px solid rgba(224, 164, 88, 0.28); }
.chip-nv { background: rgba(86, 176, 245, 0.12); color: #8cc9f2; border: 1px solid rgba(86, 176, 245, 0.26); }

.finding .claim { display: block; color: var(--text); font-weight: 500; }
.finding .trace { display: block; color: var(--dim); font-family: var(--mono); font-size: 11.5px; margin-top: 5px; }

.artifact-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.artifact-foot span:last-child { color: #8cc9f2; }

/* --- section head ------------------------------------------------------- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(44px, 5.5vw, 68px);
}

.section-head .lead { margin: 0; }
.section-head h2 { max-width: 16ch; }

/* --- practices index (home) --------------------------------------------- */

.practices {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}

.practice {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.3fr) 48px;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  padding: clamp(26px, 3vw, 36px) 8px;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease-out);
}

.practice::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.practice:hover { color: inherit; background: linear-gradient(90deg, rgba(17, 115, 212, 0.08), transparent 70%); }
.practice:hover::before { transform: scaleX(1); }

.practice .icon { margin: 0; width: 40px; height: 40px; transition: transform 0.4s var(--ease-out); }
.practice:hover .icon { transform: translateX(4px); }

.practice h3 {
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.practice h3 small {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

.practice p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

.practice-go {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--text);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.practice-go svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.practice:hover .practice-go { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-45deg); }

/* --- cards / grids ------------------------------------------------------ */

.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  display: block;
  background: var(--ink);
  padding: 34px 30px 32px;
  transition: background 0.3s var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-hi), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.card:hover { background: var(--ink-2); }
.card:hover::before { transform: scaleX(1); }
a.card:hover { color: inherit; }

.card .num {
  display: block;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hi);
  font-variant-numeric: tabular-nums;
}

.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; line-height: 1.62; color: var(--muted); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card-link:hover, a.card:hover .card-link { color: var(--accent-hi); border-color: var(--accent-hi); }

/* --- icons -------------------------------------------------------------- */

.icon {
  width: 34px;
  height: 34px;
  margin-bottom: 22px;
  stroke: var(--accent-hi);
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- feature list (ledger rows) ----------------------------------------- */

.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); }

.features li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

.features li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 5px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2356b0f5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
}

.features strong { color: var(--text); font-weight: 600; }

.features--cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3.5vw, 48px);
  border-top: 0;
}
.features--cols li { border-top: 1px solid var(--line-2); border-bottom: 0; padding: 22px 0 0; }

/* --- band --------------------------------------------------------------- */

.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.band .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.band + .band, .band + .section, .section + .band { border-top-color: var(--line); }

.quote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -0.018em;
  font-weight: 400;
}
.quote em { font-style: italic; color: var(--accent-hi); }

/* --- statement (home: the standard) ------------------------------------- */

.statement { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.statement-quote {
  margin: 0;
  max-width: 24ch;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 380;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.statement-quote em { font-style: italic; color: var(--accent-hi); }

.statement-by {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--dim);
}

.statement-title {
  margin-top: clamp(64px, 8vw, 104px);
  margin-bottom: 28px;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
}

/* --- steps -------------------------------------------------------------- */

.steps { display: grid; gap: 0; border-top: 1px solid var(--line-2); counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: 96px minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 44px);
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background 0.3s var(--ease-out);
}

.step .n {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dim);
  font-variant-numeric: lining-nums tabular-nums;
  transition: color 0.3s var(--ease-out);
}

.step:hover .n { color: var(--accent-hi); }

.step h3 {
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  letter-spacing: -0.015em;
}
.step p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* --- severity table ----------------------------------------------------- */

.table-wrap { overflow-x: auto; }

.sev { width: 100%; border-collapse: collapse; font-size: 15px; }
.sev th {
  text-align: left;
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.sev td {
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}
.sev td:first-child {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.sev tr:last-child td { border-bottom: 0; }
.sev tbody tr { transition: background 0.2s var(--ease); }
.sev tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

/* --- code --------------------------------------------------------------- */

.code {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #06070a;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: #c3ccd9;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}
.code .k { color: var(--accent-hi); }
.code .c { color: var(--dim); }

/* --- price -------------------------------------------------------------- */

.price-card {
  position: relative;
  padding: clamp(30px, 3.4vw, 44px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(17, 115, 212, 0.16), transparent 60%),
    var(--ink-2);
}

.grid .price-card { border: 0; border-radius: 0; }
:not(.grid) > .price-card { border: 1px solid var(--line-2); border-radius: var(--radius-lg); }

.tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px 9px;
  border: 1px solid rgba(86, 176, 245, 0.28);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

.price {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.price span { font-family: var(--sans); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* --- page hero ---------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 7vw, 100px) 0 clamp(48px, 6vw, 76px);
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50%;
  right: -10%;
  width: 720px;
  height: 720px;
  background: radial-gradient(closest-side, rgba(17, 115, 212, 0.16), transparent);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/assets/contours.v1.svg") 85% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, rgba(0, 0, 0, 0.75) 85%);
  mask-image: linear-gradient(100deg, transparent 35%, rgba(0, 0, 0, 0.75) 85%);
  pointer-events: none;
}
.page-hero h1 { max-width: 18ch; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1; }
.page-hero .lead { margin-top: 26px; }

/* --- breadcrumbs -------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--dim);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-3); }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--accent-hi); text-decoration: underline; }

/* --- cta ---------------------------------------------------------------- */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 55% 100% at 50% 0%, rgba(17, 115, 212, 0.18), transparent 68%),
    var(--ink);
  padding: clamp(88px, 11vw, 148px) 0;
  text-align: center;
}
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/assets/contours.v1.svg") center 30% / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 100%);
  opacity: 0.7;
  pointer-events: none;
}
.cta h2 { max-width: 20ch; margin: 0 auto 24px; font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.cta p { max-width: 54ch; margin: 0 auto 38px; color: var(--muted); }
.cta .btn { margin: 0 5px; }

/* --- footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 72px 0 36px;
  font-size: 14px;
  color: var(--dim);
  background: #08090c;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.45fr;
  gap: 40px;
  padding-bottom: 44px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.footer-brand img { height: 46px; width: auto; opacity: 0.75; margin-bottom: 18px; }

.footer-heading {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

.footer-col a { display: block; padding: 5px 0; color: var(--dim); font-size: 13.5px; transition: color 0.16s var(--ease); }
.footer-col a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-hi); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: 12.5px;
}
.footer-bottom .mono { font-family: var(--sans); }

/* --- contact ------------------------------------------------------------ */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }

.contact-block { border-top: 1px solid var(--line-2); padding-top: 24px; }
.contact-block h3 { margin-bottom: 8px; }
.contact-block p { font-size: 15px; color: var(--muted); }

a.mail {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent-hi);
  word-break: break-all;
  text-decoration: underline;
  text-decoration-color: rgba(86, 176, 245, 0.35);
  transition: text-decoration-color 0.2s var(--ease);
}
a.mail:hover { text-decoration-color: var(--accent-hi); }

/* --- utilities ---------------------------------------------------------- */

.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.measure-32 { max-width: 32ch; }
.measure-48 { max-width: 48ch; }
.measure-62 { max-width: 62ch; }
.measure-70 { max-width: 70ch; }
.center { text-align: center; }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 14ch; }
  .hero::after { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 85%); mask-image: linear-gradient(180deg, transparent 30%, #000 85%); }
  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
  .band .wrap { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 72px minmax(0, 1fr); }
  .step p { grid-column: 2; }
  .practice { grid-template-columns: 48px minmax(0, 1fr) 44px; }
  .practice p { grid-column: 2; grid-row: 2; }
  .practice .practice-go { grid-column: 3; grid-row: 1; }
  .features--cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header .wrap { height: 64px; }

  .nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: #0b0d11;
    border-bottom: 1px solid var(--line);
  }
  .nav.open { display: flex; }
  .nav a.nav-link { padding: 14px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a.nav-link[aria-current="page"]::after { left: auto; right: 0; top: 50%; bottom: auto; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; }
  .nav .btn { margin: 16px 0 0; width: 100%; min-height: 46px; }
  .nav-toggle { display: block; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .step p { grid-column: 1; }
  .practice { grid-template-columns: 40px minmax(0, 1fr); gap: 14px 16px; padding: 26px 0; }
  .practice .icon { width: 32px; height: 32px; }
  .practice p { grid-column: 1 / -1; grid-row: auto; }
  .practice .practice-go { display: none; }
  .hero-facts { gap: 8px 18px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .cta .btn { margin: 0 0 10px; width: 100%; }
}

/* --- severity scale -----------------------------------------------------
   Severity is the product's central claim, so it is drawn rather than
   described. Each label carries a four-step meter: the count encodes the
   escalation, so the ranking survives greyscale, colour-blindness and a
   printed page. Colour is the second signal, never the only one. */

:root {
  --sev-crit: #ef6f63;
  --sev-high: #e07a5f;
  --sev-med: #e0a458;
  --sev-low: #8d97a8;
  --sev-nv: #56b0f5;
}

.sev th[scope="row"] {
  padding: 18px 28px 18px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.sev-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.sev-meter {
  display: flex;
  gap: 3px;
  margin-top: 9px;
}
.sev-meter i {
  width: 16px;
  height: 4px;
  border-radius: 1px;
  background: var(--line-2);
  transform-origin: left center;
}
.sev-r4 .sev-meter i:nth-child(-n + 4) { background: var(--sev-crit); }
.sev-r3 .sev-meter i:nth-child(-n + 3) { background: var(--sev-high); }
.sev-r2 .sev-meter i:nth-child(-n + 2) { background: var(--sev-med); }
.sev-r1 .sev-meter i:nth-child(-n + 1) { background: var(--sev-low); }
.sev-r0 .sev-meter i {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sev-nv);
}

/* The meters draw in as the scale scrolls into view. Every bar in a row
   shares one range on purpose: the FILLED COUNT is the severity, so a
   staggered fill would state the wrong number for the length of the
   stagger. The row animates as a single reading, never as a tally being
   counted up. The range closes early so the meter is settled well before
   the row reaches the middle of the viewport. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sev-meter i {
      animation: sev-fill 1ms linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 44%;
    }
  }
}
@keyframes sev-fill {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* --- page hero, split ---------------------------------------------------
   The product page carries the same evidence object as the home page, so the
   claim and the artifact that backs it are never more than one glance apart.
   Below 920px the artifact drops under the copy rather than shrinking. */

.page-hero--split .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.page-hero--split .hero-copy { min-width: 0; }

.ledger-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-k {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.ledger-v { color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.ledger-v b { font-weight: 600; }
.ledger-note { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }

@media (max-width: 920px) {
  .page-hero--split .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* --- hero artifact entrance ---------------------------------------------
   The one authored moment above the fold. The panel settles, then its three
   findings arrive in sequence: the page demonstrates the product's own
   output assembling itself. The global reduced-motion rule collapses every
   duration to 0.01ms, so this resolves instantly for anyone who asks for
   that, and the panel is never hidden without an animation to reveal it. */

@media (prefers-reduced-motion: no-preference) {
  .hero .artifact {
    animation: artifact-settle 760ms var(--ease-out) both;
  }
  .hero .artifact .finding {
    animation: finding-arrive 540ms var(--ease-out) both;
  }
  .hero .artifact .finding:nth-of-type(1) { animation-delay: 300ms; }
  .hero .artifact .finding:nth-of-type(2) { animation-delay: 400ms; }
  .hero .artifact .finding:nth-of-type(3) { animation-delay: 500ms; }
  .hero .artifact-foot { animation: finding-arrive 540ms var(--ease-out) 620ms both; }
}

@keyframes artifact-settle {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes finding-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- band alignment -----------------------------------------------------
   Bands pair a short heading against a long list. Centring the heading left
   it floating in a void above and below; top-aligning sets it against the
   first row instead, and pinning it keeps the claim on screen while the
   evidence under it scrolls past. Only above 920px, where the two columns
   actually sit side by side, and only when the band is tall enough for the
   heading to have somewhere to travel. */

.band .wrap { align-items: start; }

@media (min-width: 921px) {
  .band .wrap > :first-child {
    position: sticky;
    top: 104px;
  }
}