@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
/* nlsys — light theme, strict 4-size type scale
   SIZES (only four):
     --fs-display  main page headline (h1)
     --fs-heading  section/article subheadings (h2,h3) + the hero deck + key numbers
     --fs-body     all running text, lists, nav, buttons
     --fs-caption  technical/caption tier (eyebrows, labels, data, captions)
   Hierarchy within a shared size is carried by WEIGHT, FONT and COLOR — not new sizes. */

:root {
  --bg:      #FFFFFF;
  --bg-2:    #F6F8FC;
  --bg-3:    #FFFFFF;
  --bg-4:    #EDF1F8;
  --ink:     #15181F;
  --ink-soft:#525A6B;
  --ink-dim: #6B7280;
  --line:    #E4E8F0;
  --line-2:  #EDF0F6;

  --signal:  #2563EB;     /* links / accents */
  --signal-deep:#1D4ED8;  /* button fill (white text → ~5.9:1) */
  --signal-2:#0E9CB0;
  --clean:   #15803D;
  --noise:   #B4BAC6;

  --grad: linear-gradient(105deg, var(--signal), var(--signal-2));
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --shadow-md: 0 10px 26px -12px rgba(16,24,40,.20);
  --shadow-lg: 0 28px 60px -28px rgba(16,24,40,.24);
  --glow-soft: rgba(37,99,235,.14);

  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* the only four sizes */
  --fs-display: clamp(2.5rem, 5.2vw, 4.4rem);
  --fs-heading: clamp(1.4rem, 2.3vw, 1.72rem);
  --fs-body:    1.0625rem;
  --fs-caption: 0.8rem;

  --measure: 66ch;
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --maxw:  1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.64;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* headings: two sizes only — display (h1) and heading (h2,h3) */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
h1 { font-size: var(--fs-display); line-height: 1.06; }
h2, h3 { font-size: var(--fs-heading); line-height: 1.2; }
p { margin: 0 0 1rem; max-width: var(--measure); }
a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-deep); text-decoration: underline; text-underline-offset: 3px; }
em { font-style: normal; font-weight: 600; }
:focus-visible { outline: 2.5px solid var(--signal); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }

/* caption tier */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 1.1rem; display: flex; align-items: center; gap: 0.6rem; line-height: 1.4; }
.eyebrow::before { content: ""; width: 1.7rem; height: 2px; border-radius: 2px; background: var(--grad); display: inline-block; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 0.8rem var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-weight: 600;
  font-size: var(--fs-body); letter-spacing: -0.01em; color: var(--ink); }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { width: 60px; height: 36px; flex: none; display: inline-block;
  background: center/contain no-repeat url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxNiAyMCAxNTAgOTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImcxIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFFNDBBRiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1NjNFQiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZzIiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjU2M0VCIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjM0I4MkY2Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJnMyIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzQjgyRjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MEE1RkEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9Imc0IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYwQTVGQSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkzQzVGRCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CgogIDwhLS0gUm93IDUgKGJvdHRvbSkg4oCUIHNvbGlkIC0tPgogIDxwb2x5Z29uIHBvaW50cz0iMzAsMTA1IDQwLDg4IDUwLDEwNSIgZmlsbD0idXJsKCNnMSkiIG9wYWNpdHk9IjAuOTUiLz4KICA8cG9seWdvbiBwb2ludHM9IjQ2LDEwNSA1Niw4OCA2NiwxMDUiIGZpbGw9InVybCgjZzEpIiBvcGFjaXR5PSIwLjkyIi8+CiAgPHBvbHlnb24gcG9pbnRzPSI2MiwxMDUgNzIsODggODIsMTA1IiBmaWxsPSJ1cmwoI2cyKSIgb3BhY2l0eT0iMC45Ii8+CiAgPHBvbHlnb24gcG9pbnRzPSI3OCwxMDUgODgsODggOTgsMTA1IiBmaWxsPSJ1cmwoI2cyKSIgb3BhY2l0eT0iMC44OCIvPgogIDxwb2x5Z29uIHBvaW50cz0iOTQsMTA1IDEwNCw4OCAxMTQsMTA1IiBmaWxsPSJ1cmwoI2czKSIgb3BhY2l0eT0iMC44MiIvPgogIDxwb2x5Z29uIHBvaW50cz0iMTEwLDEwNSAxMjAsODggMTMwLDEwNSIgZmlsbD0idXJsKCNnMykiIG9wYWNpdHk9IjAuNyIvPgogIDxwb2x5Z29uIHBvaW50cz0iMTI2LDEwNSAxMzYsODggMTQ2LDEwNSIgZmlsbD0idXJsKCNnNCkiIG9wYWNpdHk9IjAuNSIvPgogIDxwb2x5Z29uIHBvaW50cz0iMTQwLDEwNSAxNDgsOTEgMTU2LDEwNSIgZmlsbD0idXJsKCNnNCkiIG9wYWNpdHk9IjAuMyIvPgoKICA8IS0tIFJvdyA0IC0tPgogIDxwb2x5Z29uIHBvaW50cz0iMjIsODggMzIsNzEgNDIsODgiIGZpbGw9InVybCgjZzEpIiBvcGFjaXR5PSIwLjkzIi8+CiAgPHBvbHlnb24gcG9pbnRzPSIzOCw4OCA0OCw3MSA1OCw4OCIgZmlsbD0idXJsKCNnMSkiIG9wYWNpdHk9IjAuOSIvPgogIDxwb2x5Z29uIHBvaW50cz0iNTQsODggNjQsNzEgNzQsODgiIGZpbGw9InVybCgjZzIpIiBvcGFjaXR5PSIwLjg4Ii8+CiAgPHBvbHlnb24gcG9pbnRzPSI3MCw4OCA4MCw3MSA5MCw4OCIgZmlsbD0idXJsKCNnMikiIG9wYWNpdHk9IjAuODIiLz4KICA8cG9seWdvbiBwb2ludHM9Ijg2LDg4IDk2LDcxIDEwNiw4OCIgZmlsbD0idXJsKCNnMykiIG9wYWNpdHk9IjAuNzIiLz4KICA8cG9seWdvbiBwb2ludHM9IjEwMiw4OCAxMTIsNzEgMTIyLDg4IiBmaWxsPSJ1cmwoI2czKSIgb3BhY2l0eT0iMC41NSIvPgogIDxwb2x5Z29uIHBvaW50cz0iMTE2LDg4IDEyNCw3NCAxMzIsODgiIGZpbGw9InVybCgjZzQpIiBvcGFjaXR5PSIwLjM1Ii8+CiAgPHBvbHlnb24gcG9pbnRzPSIxMzAsODggMTM3LDc2IDE0NCw4OCIgZmlsbD0idXJsKCNnNCkiIG9wYWNpdHk9IjAuMTgiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjE4OzAuMDg7MC4xOCIgZHVyPSI0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3BvbHlnb24+CgogIDwhLS0gUm93IDMgLS0+CiAgPHBvbHlnb24gcG9pbnRzPSIyOCw3MSAzOCw1NCA0OCw3MSIgZmlsbD0idXJsKCNnMSkiIG9wYWNpdHk9IjAuODgiLz4KICA8cG9seWdvbiBwb2ludHM9IjQ0LDcxIDU0LDU0IDY0LDcxIiBmaWxsPSJ1cmwoI2cxKSIgb3BhY2l0eT0iMC44NSIvPgogIDxwb2x5Z29uIHBvaW50cz0iNjAsNzEgNzAsNTQgODAsNzEiIGZpbGw9InVybCgjZzIpIiBvcGFjaXR5PSIwLjc4Ii8+CiAgPHBvbHlnb24gcG9pbnRzPSI3Niw3MSA4Niw1NCA5Niw3MSIgZmlsbD0idXJsKCNnMikiIG9wYWNpdHk9IjAuNjgiLz4KICA8cG9seWdvbiBwb2ludHM9IjkyLDcxIDEwMiw1NCAxMTIsNzEiIGZpbGw9InVybCgjZzMpIiBvcGFjaXR5PSIwLjUyIi8+CiAgPHBvbHlnb24gcG9pbnRzPSIxMDYsNzEgMTE0LDU3IDEyMiw3MSIgZmlsbD0idXJsKCNnMykiIG9wYWNpdHk9IjAuMzIiLz4KICA8cG9seWdvbiBwb2ludHM9IjEyMCw3MSAxMjcsNTkgMTM0LDcxIiBmaWxsPSJ1cmwoI2c0KSIgb3BhY2l0eT0iMC4xNSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMTU7MC4wNjswLjE1IiBkdXI9IjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcG9seWdvbj4KICA8cG9seWdvbiBwb2ludHM9IjEzMiw2OCAxMzcsNjAgMTQyLDY4IiBmaWxsPSJ1cmwoI2c0KSIgb3BhY2l0eT0iMC4wNyI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMDc7MC4wMjswLjA3IiBkdXI9IjMuNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9wb2x5Z29uPgoKICA8IS0tIFJvdyAyIC0tPgogIDxwb2x5Z29uIHBvaW50cz0iMzgsNTQgNDcsMzkgNTYsNTQiIGZpbGw9InVybCgjZzEpIiBvcGFjaXR5PSIwLjgiLz4KICA8cG9seWdvbiBwb2ludHM9IjUyLDU0IDYxLDM5IDcwLDU0IiBmaWxsPSJ1cmwoI2cxKSIgb3BhY2l0eT0iMC43MiIvPgogIDxwb2x5Z29uIHBvaW50cz0iNjYsNTQgNzUsMzkgODQsNTQiIGZpbGw9InVybCgjZzIpIiBvcGFjaXR5PSIwLjYiLz4KICA8cG9seWdvbiBwb2ludHM9IjgwLDU0IDg5LDM5IDk4LDU0IiBmaWxsPSJ1cmwoI2cyKSIgb3BhY2l0eT0iMC40NSIvPgogIDxwb2x5Z29uIHBvaW50cz0iOTQsNTQgMTAyLDQxIDExMCw1NCIgZmlsbD0idXJsKCNnMykiIG9wYWNpdHk9IjAuMjgiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjI4OzAuMTQ7MC4yOCIgZHVyPSI0LjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcG9seWdvbj4KICA8cG9seWdvbiBwb2ludHM9IjEwOCw1NCAxMTQsNDMgMTIwLDU0IiBmaWxsPSJ1cmwoI2c0KSIgb3BhY2l0eT0iMC4xMiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMTI7MC4wNDswLjEyIiBkdXI9IjMuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9wb2x5Z29uPgogIDxwb2x5Z29uIHBvaW50cz0iMTE5LDUxIDEyMyw0NCAxMjcsNTEiIGZpbGw9InVybCgjZzQpIiBvcGFjaXR5PSIwLjA1Ij4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMC4wNTswLjAxOzAuMDUiIGR1cj0iNC4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3BvbHlnb24+CgogIDwhLS0gUm93IDEgKHRvcCBwZWFrKSDigJQgbW9zdGx5IGRpc3NvbHZlZCAtLT4KICA8cG9seWdvbiBwb2ludHM9IjUwLDM5IDU3LDI3IDY0LDM5IiBmaWxsPSJ1cmwoI2cxKSIgb3BhY2l0eT0iMC41NSIvPgogIDxwb2x5Z29uIHBvaW50cz0iNjIsMzkgNjksMjcgNzYsMzkiIGZpbGw9InVybCgjZzIpIiBvcGFjaXR5PSIwLjQiLz4KICA8cG9seWdvbiBwb2ludHM9Ijc0LDM5IDgwLDI4IDg2LDM5IiBmaWxsPSJ1cmwoI2cyKSIgb3BhY2l0eT0iMC4yNSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMjU7MC4xOzAuMjUiIGR1cj0iNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9wb2x5Z29uPgogIDxwb2x5Z29uIHBvaW50cz0iODQsMzcgODksMjggOTQsMzciIGZpbGw9InVybCgjZzMpIiBvcGFjaXR5PSIwLjEyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMC4xMjswLjA0OzAuMTIiIGR1cj0iNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9wb2x5Z29uPgogIDxwb2x5Z29uIHBvaW50cz0iOTMsMzUgOTcsMjggMTAxLDM1IiBmaWxsPSJ1cmwoI2c0KSIgb3BhY2l0eT0iMC4wNiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMDY7MC4wMTswLjA2IiBkdXI9IjMuNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9wb2x5Z29uPgoKICA8IS0tIFNjYXR0ZXJlZCBwYXJ0aWNsZXMgLS0+CiAgPHBvbHlnb24gcG9pbnRzPSIxMDIsMzAgMTA0LDI2IDEwNiwzMCIgZmlsbD0iIzkzQzVGRCIgb3BhY2l0eT0iMC4wNCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMDQ7MC4wMTswLjA0IiBkdXI9IjNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcG9seWdvbj4KICA8cG9seWdvbiBwb2ludHM9IjExMCwzNSAxMTIsMzIgMTE0LDM1IiBmaWxsPSIjOTNDNUZEIiBvcGFjaXR5PSIwLjAzIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMC4wMzswLjAwNTswLjAzIiBkdXI9IjRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcG9seWdvbj4KICA8cG9seWdvbiBwb2ludHM9IjE0NSw4NSAxNDcsODIgMTQ5LDg1IiBmaWxsPSIjOTNDNUZEIiBvcGFjaXR5PSIwLjA4Ij4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMC4wODswLjAyOzAuMDgiIGR1cj0iMy4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3BvbHlnb24+CiAgPHBvbHlnb24gcG9pbnRzPSIxNTUsOTYgMTU3LDkzIDE1OSw5NiIgZmlsbD0iI0JGREJGRSIgb3BhY2l0eT0iMC4wNSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMDU7MC4wMTswLjA1IiBkdXI9IjQuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9wb2x5Z29uPgogIDxwb2x5Z29uIHBvaW50cz0iMTM4LDYyIDE0MCw1OSAxNDIsNjIiIGZpbGw9IiM5M0M1RkQiIG9wYWNpdHk9IjAuMDQiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjA0OzAuMDA4OzAuMDQiIGR1cj0iNS4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3BvbHlnb24+Cjwvc3ZnPgo='); }
.brand-name { font-family: var(--font-mono); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 1.7rem; }
.nav-links a:not(.btn) { color: var(--ink-soft); font-size: var(--fs-body); transition: color .15s ease; }
.nav-links a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.nav-links a.is-current { color: var(--ink); }

/* buttons (body size, white text on deep blue) */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body);
  padding: 0.7rem 1.25rem; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  transition: transform .14s ease, box-shadow .2s ease, border-color .15s ease, background .15s ease; }
.btn-primary { background: var(--signal-deep); color: #fff; box-shadow: 0 8px 20px -8px rgba(29,78,216,.5); }
.btn-primary:hover { background: #1A45C0; color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(29,78,216,.55); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { color: var(--ink); text-decoration: none; border-color: var(--signal); }
.btn-arrow::after { content: "→"; font-family: var(--font-mono); }

/* hero */
.hero { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero h1 { max-width: 18ch; }
.hero h1 .sig, .sig { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: var(--fs-heading); font-family: var(--font-body); font-weight: 400; line-height: 1.4;
  color: var(--ink-soft); margin-top: 1.6rem; max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.2rem; }

.hero-xl { position: relative; overflow: hidden; padding-top: clamp(3rem, 7vw, 5.5rem); }
.hero-xl::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 14%, #000 24%, transparent 78%);
          mask-image: radial-gradient(ellipse 95% 75% at 50% 14%, #000 24%, transparent 78%); }
.hero-xl > * { position: relative; z-index: 1; }

.hero-pill { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line);
  background: #fff; box-shadow: var(--shadow-sm); padding: .42rem .85rem; border-radius: 999px; margin-bottom: 1.7rem; }
.hero-pill .pulse { width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)} 70%{box-shadow:0 0 0 8px rgba(37,99,235,0)} 100%{box-shadow:0 0 0 0 rgba(37,99,235,0)} }
@media (prefers-reduced-motion: no-preference) { .hero-pill .pulse { animation: pulse 2.4s infinite; } }

/* scope */
.scope { margin-top: clamp(2.2rem, 4vw, 3.4rem); border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, #FBFCFE, #F4F7FC); padding: 1.1rem 1.1rem 0.5rem; box-shadow: var(--shadow-lg); position: relative; }
.scope svg { display: block; width: 100%; height: auto; }
.scope-svg path { filter: drop-shadow(0 1px 4px rgba(37,99,235,.35)); }
.scope-xl .scope-svg { height: clamp(230px, 32vw, 330px) !important; }
.scope-cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-mono);
  font-size: var(--fs-caption); color: var(--ink-dim); padding: 0.65rem 0.3rem 0.45rem; border-top: 1px solid var(--line); margin-top: 0.45rem; }
.scope-cap .k-noise { color: #97A0B0; }
.scope-cap .k-clean { color: var(--signal); }

/* trust strip */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.4rem; font-family: var(--font-mono);
  font-size: var(--fs-caption); color: var(--ink-soft); margin-top: 2.1rem; }
.trust b { color: var(--ink); font-weight: 600; }
.trust .sep { width: 1px; height: 1rem; background: var(--line); display: inline-block; }

/* section */
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; border-top: 1px solid var(--line); }
.section-head { max-width: 60ch; margin-bottom: 2.4rem; }
.section-head p { color: var(--ink-soft); margin-top: 1rem; }

/* proof */
.proof { position: relative; border-radius: 16px; padding: clamp(1.6rem,3vw,2.6rem); background: var(--bg-2);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; }
.proof::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.proof .eyebrow { color: var(--ink-dim); }
.proof h3 { margin-bottom: 1.5rem; max-width: 46ch; }
.bench { font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.5; display: grid; gap: 0.6rem; }
.bench-row { display: grid; grid-template-columns: minmax(7rem, 1fr) auto; gap: 0.8rem 1.2rem; align-items: baseline;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.bench-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bench-label { color: var(--ink-soft); }
.bench-vals { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: flex-end; }
.bench-vals span { white-space: nowrap; }
.neg { color: #6E7686; }
.pos { color: var(--clean); font-weight: 600; }
.price-note { max-width: 46rem; margin: .9rem auto 0; text-align: center; font-size: .95rem; color: var(--ink-dim); }
.section-lead { max-width: 46rem; margin: 0 auto 1.4rem; line-height: 1.65; }
.permo { font-size: .95rem; color: var(--ink-dim); margin-left: 3px; font-weight: 400; }
.proof-note { font-size: .93rem; color: var(--ink-dim); margin: 1.2rem auto 0; max-width: 44rem; line-height: 1.6; text-align: center; }
.frow .proof-note, .card .proof-note { text-align: left; margin-left: 0; }

/* stats — numbers use heading size, accent colour */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.stat { border-left: 3px solid; border-image: var(--grad) 1; padding-left: 1rem; }
.stat .v { font-family: var(--font-display); font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.02em; color: var(--signal); line-height: 1.1; }
.stat .l { font-size: var(--fs-caption); color: var(--ink-soft); margin-top: 0.4rem; line-height: 1.45; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease; }
.step:hover { transform: translateY(-3px); border-color: var(--signal); box-shadow: var(--shadow-md); }
.step .n { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .12em; color: var(--signal); }
.step h3 { margin: .65rem 0 .5rem; }
.step p { color: var(--ink-soft); margin: 0; }

/* outcome cards */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.benefit { display: block; padding: 1.6rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease; }
.benefit:hover { transform: translateY(-3px); border-color: var(--signal); box-shadow: var(--shadow-md); text-decoration: none; }
.benefit h3 { margin: 0 0 .55rem; }
.benefit p { color: var(--ink-soft); margin: 0 0 1rem; }
.benefit .go { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--signal); }

/* legacy cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease; }
.card:hover { border-color: var(--signal); transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.card .num { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--signal); letter-spacing: 0.1em; }
.card h3 { margin: 0.7rem 0 0.6rem; }
.card p { color: var(--ink-soft); margin-bottom: 1.2rem; }
.card .go { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--signal); margin-top: auto; }

/* feature rows */
.rows { display: grid; gap: 0; }
.frow { display: grid; grid-template-columns: 0.9fr 1.1fr; column-gap: 2rem; row-gap: .8rem; padding: 1.9rem 0; border-top: 1px solid var(--line); }
.frow h3 { grid-column: 1; grid-row: 1; }
.frow > p, .frow > form, .frow > ul { grid-column: 2; }
.frow:first-child { border-top: 0; }
.frow p { color: var(--ink-soft); margin: 0; }

/* modes table */
.modes { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.modes th, .modes td { text-align: left; padding: 0.95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
.modes thead th { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); border-bottom: 2px solid var(--signal); }
.modes td.mode-name { font-family: var(--font-mono); font-weight: 600; color: var(--signal); white-space: nowrap; }
.modes td.mode-lat { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.modes td strong { color: var(--ink); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.9rem 1.6rem; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan.featured { border: 2px solid var(--signal); box-shadow: 0 24px 56px -28px rgba(37,99,235,.4); }
.plan .badge { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.plan h3 { margin: .5rem 0 .2rem; }
.plan .who { color: var(--ink-soft); margin: 0 0 1.2rem; }
.plan .price { font-family: var(--font-display); font-size: var(--fs-heading); font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.plan .price sup { font-size: var(--fs-caption); color: var(--signal); font-weight: 600; }
.plan .price small { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 400; color: var(--ink-dim); display: block; margin-top: .4rem; line-height: 1.45; }
.plan ul { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .65rem; }
.plan li { color: var(--ink); padding-left: 1.5rem; position: relative; }
.plan li::before { content: "+"; position: absolute; left: 0; color: var(--signal); font-family: var(--font-mono); font-weight: 600; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan-foot { font-size: var(--fs-caption); color: var(--ink-soft); margin-top: 2rem; max-width: 90ch; line-height: 1.55; }
.plan-foot code { font-family: var(--font-mono); background: var(--bg-4); padding: 0 .35em; border-radius: 4px; color: var(--ink); }
.plan-foot b { color: var(--ink); }

/* CTA band */
.cta-band { position: relative; border-radius: 16px; padding: clamp(2rem,4vw,3.4rem); overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.cta-band::after { content: ""; position: absolute; width: 340px; height: 340px; right: -90px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-soft), transparent 70%); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { max-width: 22ch; }
.cta-band p { color: var(--ink-soft); margin-top: 1rem; }
.cta-band .hero-cta { margin-top: 1.8rem; }
.ent { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; }
.ent .tag { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }

/* faq */
.faq { display: grid; gap: 0; max-width: 62rem; }
.faq details { border-top: 1px solid var(--line); padding: 1.15rem 0; }
.faq summary { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-heading); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--signal); }
.faq details[open] summary { color: var(--signal); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: .8rem 0 0; color: var(--ink-soft); }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 3rem 0 3.5rem; margin-top: 1rem; background: var(--bg-2); }
.footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer .brand { margin-bottom: 0.8rem; }
.footer p { color: var(--ink-soft); }
.footer h4 { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim); margin: 0 0 0.85rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer ul a { color: var(--ink-soft); font-size: var(--fs-caption); }
.footer ul a:hover { color: var(--ink); }
.disclaimer { font-size: var(--fs-caption); color: var(--ink-dim); border-top: 1px solid var(--line); margin-top: 2.4rem; padding-top: 1.4rem; max-width: 86ch; line-height: 1.55; }
.disclaimer code { font-family: var(--font-mono); background: var(--bg-4); padding: 0 0.3em; border-radius: 4px; color: var(--ink-soft); }

/* reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* responsive */
@media (max-width: 860px) {
  .cards, .steps, .benefits, .plans { grid-template-columns: 1fr; }
  .frow, .ent, .footer-in { grid-template-columns: 1fr; gap: 1rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .nav-links { gap: 1.1rem; }
  .nav-links a:not(.btn) { display: none; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .bench-row { grid-template-columns: 1fr; }
  .bench-vals { justify-content: flex-start; }
}

/* =====================================================================
   CENTERED LAYOUT — consistent symmetric column (fixes ragged alignment)
   Hero + section intros centre; panels/grids stay full container width.
   ===================================================================== */
.hero { text-align: center; }
.hero .eyebrow, .section-head .eyebrow { justify-content: center; }
.hero h1 { max-width: 26ch; margin-left: auto; margin-right: auto; }
.hero .lead { max-width: 56ch; margin-left: auto; margin-right: auto; }
.hero-cta { justify-content: center; }
.trust { justify-content: center; }
.section-head { max-width: 64ch; margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { max-width: 100%; margin-left: auto; margin-right: auto; }

/* =====================================================================
   TWO-PRODUCT NAV (tabs + subnav) + NDC COMPONENTS — unified palette
   ===================================================================== */
.nav-left { display: inline-flex; align-items: center; gap: 1.4rem; }
.prod-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.prod-tab { padding: .5rem .95rem; font-size: var(--fs-body); color: var(--ink-soft); white-space: nowrap; transition: background .15s ease, color .15s ease; }
.prod-tab:hover { color: var(--ink); text-decoration: none; }
.prod-tab + .prod-tab { border-left: 1px solid var(--line); }
.prod-tab.active { background: var(--signal-deep); color: #fff; }
.prod-tab.active:hover { color: #fff; }

.subnav { border-top: 1px solid var(--line); background: var(--bg); }
.subnav-in { max-width: var(--maxw); margin: 0 auto; padding: .55rem var(--pad-x); display: flex; flex-wrap: wrap; gap: 1.4rem; }
.subnav a { font-size: var(--fs-caption); color: var(--ink-soft); padding: .15rem 0; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.active { color: var(--ink); border-bottom-color: var(--signal); }

.steps.four { grid-template-columns: repeat(4, 1fr); }

.code { font-family: var(--font-mono); font-size: var(--fs-caption); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.1rem 1.2rem; overflow-x: auto; color: var(--ink); line-height: 1.6; white-space: pre; margin: 0 0 1rem; }
.code .c { color: var(--ink-dim); }

.passport { width: 100%; border-collapse: collapse; font-size: var(--fs-body); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.passport th, .passport td { text-align: left; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.passport tr:last-child td { border-bottom: 0; }
.passport td.k { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--signal); white-space: nowrap; }
.passport td.v { color: var(--ink-soft); }
.passport thead th { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); border-bottom: 2px solid var(--signal); background: var(--bg-2); }

.status-pending { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; }

@media (max-width: 860px) {
  .nav-left { gap: .7rem; }
  .prod-tab { padding: .45rem .6rem; font-size: var(--fs-caption); }
  .subnav-in { gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .steps.four { grid-template-columns: 1fr; }
}

/* anchored sections clear the sticky two-row header */
section[id] { scroll-margin-top: 112px; }

/* =====================================================================
   PLATFORM REBUILD — maturity badges, doors, lifecycle
   ===================================================================== */
.status { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .06em; text-transform: uppercase; padding: .32rem .72rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; }
.status--preview { color: #1D4ED8; } .status--preview::before { background: #2563EB; }
.status--dev     { color: #56607A; } .status--dev::before     { background: #94A3B8; }

/* lifecycle flow */
.cycle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-mono); font-size: var(--fs-caption);
  margin: 1.6rem 0 0; }
.cycle b { border: 1px solid var(--line); border-radius: 999px; padding: .42rem .9rem; background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.cycle i { color: var(--signal); font-style: normal; }

/* three doors */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.door { display: flex; flex-direction: column; padding: 1.7rem 1.6rem; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: var(--shadow-sm); transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease; }
.door:hover { transform: translateY(-4px); border-color: var(--signal); box-shadow: var(--shadow-md); text-decoration: none; }
.door .door-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.door .door-n { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .12em; color: var(--signal); }
.door h3 { margin: 0 0 .55rem; }
.door p { color: var(--ink-soft); margin: 0 0 1.2rem; }
.door .go { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--signal); margin-top: auto; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }

/* small note line under hero status */
.hero .status { margin-bottom: 1.4rem; }

/* =====================================================================
   FILTER & CONTROL as first-class options
   ===================================================================== */
.doors.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .doors.two { grid-template-columns: 1fr; } }
/* denser top nav to fit 8 items */
@media (max-width: 1280px) { .nav-links { gap: 1.05rem; } }

/* =====================================================================
   LEAD FORMS — real FormSubmit.co endpoints, no backend required
   ===================================================================== */
.lead-form { display: grid; gap: 1rem; max-width: 30rem; }
.lead-form.wide { max-width: 42rem; }
.form-row { display: grid; gap: .4rem; }
.form-row label { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-soft); letter-spacing: .02em; }
.form-row input, .form-row textarea {
  font-family: var(--font-body); font-size: var(--fs-body); padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
  width: 100%; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.form-row textarea { resize: vertical; min-height: 5.5rem; font-family: var(--font-body); line-height: 1.5; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--ink-dim); }
.form-actions { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }
.form-actions .btn { border: none; cursor: pointer; }
.form-note { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-dim); margin: 0; line-height: 1.5; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.form-two > div { border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; background: #fff; box-shadow: var(--shadow-sm); }
.form-two h3 { margin: 0 0 .3rem; }
.form-two .who { color: var(--ink-soft); margin: 0 0 1rem; }
@media (max-width: 860px) { .form-two { grid-template-columns: 1fr; } }
/* honeypot, hidden from humans, visible to bots */
.form-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* =====================================================================
   MOBILE NAV — hamburger toggle (fixes: menu was fully hidden <860px)
   ===================================================================== */
.nav-toggle { display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .62rem; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 860px) {
  .nav-in { position: relative; }
  .nav-toggle { display: inline-flex; }
  .nav.nav-open .nav-links { position: absolute; top: calc(100% + 8px); right: var(--pad-x); left: var(--pad-x);
    background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
    flex-direction: column; align-items: stretch; padding: .8rem; gap: .15rem; z-index: 60; }
  .nav.nav-open .nav-links a:not(.btn) { display: block; padding: .6rem .65rem; border-radius: 8px; }
  .nav.nav-open .nav-links a.is-current { background: var(--bg-2); }
  .nav.nav-open .nav-links .btn { margin-top: .5rem; justify-content: center; }
}

/* =====================================================================
   WORD-OF-MOUTH SHARE ROW (thanks page) + research list
   ===================================================================== */
.share-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.6rem; }
.share-note { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-dim); margin-top: .9rem; }
.doc-list { display: grid; gap: 1rem; max-width: 46rem; }
.doc-item { display: block; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); transition: transform .15s ease, border-color .15s ease; }
.doc-item:hover { transform: translateY(-2px); border-color: var(--signal); text-decoration: none; }
.doc-item h3 { margin: 0 0 .35rem; }
.doc-item p { color: var(--ink-soft); margin: 0; }
.doc-item .go { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--signal); display: inline-block; margin-top: .7rem; }

/* select fields for qualification forms */
.form-row select { font-family: var(--font-body); font-size: var(--fs-body); padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.form-row select:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

/* buy buttons: hidden until a real checkout URL is pasted (activated by JS) */

/* =====================================================================
   NAV DROPDOWNS — two top buttons: Products / Pricing
   ===================================================================== */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: .4rem; }
.dd-caret { font-size: .68em; color: var(--ink-dim); transform: translateY(1px); }
.nav-dd-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
  padding: .5rem; display: none; min-width: 15.5rem; z-index: 70; }
.nav-dd-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dd-menu a { display: block; padding: .55rem .75rem; border-radius: 8px; white-space: nowrap; }
.nav-dd-menu a:hover { background: var(--bg-2); text-decoration: none; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: block; }
@media (max-width: 860px) {
  .nav.nav-open .nav-links .nav-dd-btn { display: flex; font-weight: 600; padding: .6rem .65rem; }
  .nav.nav-open .nav-dd-menu { position: static; transform: none; display: block; border: none; box-shadow: none; padding: 0 0 .3rem .9rem; min-width: 0; }
}

/* consent note under lead forms */
.form-consent { font-size: .78rem; color: var(--ink-dim); margin: .7rem 0 0; }
.form-consent a { color: var(--ink-dim); text-decoration: underline; }


/* one-line pricing note under product hero lead */
.price-note a { white-space: nowrap; }


/* three-step grid (problem sections) */
.steps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .steps.three { grid-template-columns: 1fr; } }

/* uniform plan card buttons */
.plan ul { flex: 1 1 auto; }
.plan .plan-cta { display: flex; flex-direction: column; gap: .65rem; margin-top: auto; padding-top: 1.2rem; }
.plan .plan-cta .btn { width: 100%; justify-content: center; text-align: center; margin-top: 0; }

/* R2 layout alignment */
:root{--maxw:1240px;--measure:74ch}
@media(min-width:861px){.hero h1,.ndc-hero h1{max-width:24ch!important}.hero .lead,.ndc-hero .lead{max-width:76ch!important}.section-head{max-width:82ch!important}.section-head>p{max-width:78ch!important}}



/* nlsys public-site design system — typography and layout unification
   Five text sizes only:
   display / heading / lead / body / caption. */
:root{
  --fs-display:clamp(2.55rem,5vw,4.45rem);
  --fs-heading:clamp(1.5rem,2.25vw,1.9rem);
  --fs-lead:clamp(1.125rem,1.65vw,1.35rem);
  --fs-body:1rem;
  --fs-caption:.8rem;
  --maxw:1240px;
  --measure:74ch;
  --hero-measure:76ch;
  --section-measure:82ch;
}

html{-webkit-text-size-adjust:100%}
body{font-size:var(--fs-body);line-height:1.64}

/* The five effective sizes. */
h1{font-size:var(--fs-display)!important;line-height:1.04!important}
h2,h3{font-size:var(--fs-heading)!important}
.hero .lead,.ndc-hero .lead,.lead.hero-lead{font-size:var(--fs-lead)!important;line-height:1.5!important}
p,li,td,.modes,.passport,.btn,.nav-links a:not(.btn),.brand,.prod-tab,
.form-row input,.form-row textarea,.form-row select{font-size:var(--fs-body)!important}
.eyebrow,.hero-pill,.status,.trust,.price-note,.proof-note,.permo,.plan-foot,.disclaimer,
.scope-cap,.bench,.stat .l,.step .n,.benefit .go,.card .num,.card .go,.modes thead th,
.plan .badge,.plan .price sup,.plan .price small,.ent .tag,.footer h4,.footer ul a,
.subnav a,.code,.passport td.k,.passport thead th,.status-pending,.cycle,.door .door-n,
.door .go,.form-row label,.form-note,.share-note,.doc-item .go,.form-consent,.tbl-note,
.sku .tag,.sku .p small,.sku .val,.sku ul,.vflow .vn,.vflow .vw,.vflow .vgo,
.ndc-flow-label,.ndc-art-list span,.ndc-proofbar span,.ndc-problem .n,
.ndc-passport-head span,.ndc-passport-grid b,.ndc-fit .tag,.ndc-compare th,
.ndc-mini-row b,.ndc-mini-row em,.use-card li,.price-main .amount small,
.free-run-diagram,.flow-card .k,.mini-card .num{font-size:var(--fs-caption)!important}

/* Card and compact component titles use body size with weight, not ad-hoc sizes. */
.card h3,.step h3,.benefit h3,.door h3,.plan h3,.sku h3,.vflow h3,
.flow-card h3,.mini-card h3,.input-item h3,.artifact-card h3,.use-card h3,
.fit-card h3,.ndc-flow-box strong,.ndc-problem h3,.ndc-passport-head b,
.ndc-fit h3,.doc-item h3,.price-side .tier b{font-size:var(--fs-body)!important;line-height:1.35!important}

/* Running copy inside page-specific components. */
.ndc-flow-box p,.ndc-problem p,.ndc-passport-grid span,.ndc-fit p,.ndc-fit ul,
.ndc-compare td,.ndc-score p,.ndc-mini-row,.ndc-battery-prices p,
.flow-card p,.mini-card p,.input-item p,.artifact-card p,.use-card p,
.price-main li,.price-side li,.fit-card ul,.callout{font-size:var(--fs-body)!important}
.ndc-console pre{font-size:var(--fs-caption)!important}

/* Values and prices reuse the established heading/display tiers. */
.stat .v,.plan .price,.sku .p,.vflow .vp,.ndc-battery-prices .price{font-size:var(--fs-heading)!important}
.ndc-score .big,.price-main .amount{font-size:var(--fs-display)!important}
.price-main .amount,.price-side .tier span{font-weight:600!important}

/* One hero system across all product pages. */
.hero,.ndc-hero{text-align:center}
.hero h1,.ndc-hero h1{
  max-width:24ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-wrap:balance;
  overflow-wrap:normal;
}
.hero h1 .sig,.ndc-hero h1 .sig{white-space:normal!important}
.hero .lead,.ndc-hero .lead{
  max-width:var(--hero-measure)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-wrap:pretty;
}
/* Product label: same rule, same line, aligned to the left edge of the hero-copy measure. */
.hero .eyebrow,.ndc-hero .eyebrow{
  width:min(100%,var(--hero-measure));
  max-width:var(--hero-measure);
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:flex-start!important;
  text-align:left;
}

/* Consistent section copy width without narrow editorial columns. */
.section-head{
  max-width:var(--section-measure)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.section-head>p{max-width:78ch!important;margin-left:auto!important;margin-right:auto!important}
.section-head .eyebrow{justify-content:center}
.section-lead{max-width:74ch!important}

/* Caption/footnote rows always stay in the caption tier. */
.price-note,.proof-note,.plan-foot,.disclaimer,.tbl-note,.form-consent{line-height:1.55}

/* Defensive layout rules: no visual element may escape the content width. */
img,svg,video,canvas{max-width:100%;height:auto}
.hero,.ndc-hero,.cta-band,section{overflow-x:clip}
.tscroll,.scope,.proof,.hero-flow,.free-run-box,.price-panel,.passport,.ndc-compare{max-width:100%}
pre,code{overflow-wrap:anywhere}

@media(max-width:860px){
  :root{--fs-display:clamp(2.25rem,10vw,3.25rem);--fs-heading:1.5rem;--fs-lead:1.125rem;--fs-body:1rem;--fs-caption:.8rem}
  .hero .eyebrow,.ndc-hero .eyebrow{width:100%;max-width:100%;justify-content:flex-start!important}
  .hero h1,.ndc-hero h1{max-width:13ch!important}
  .hero .lead,.ndc-hero .lead{max-width:100%!important}
}


/* R4 — button alignment + balanced row headings */
.hero-cta,
.cta-band .hero-cta,
.ndc-final .hero-cta,
.form-actions,
.share-row{
  justify-content:center !important;
}
.hero-cta > .btn,
.form-actions > .btn,
.share-row > .btn{
  justify-content:center;
}

/* Center standalone CTA buttons when a section has a single button row. */
p[style*="text-align:center"] > .btn,
.price-main > .btn,
.price-side > .btn{
  margin-left:auto;
  margin-right:auto;
}

/* Large left-side row titles were overpowering the content. Use the lead tier instead. */
.frow{align-items:start;}
.frow h3{
  font-size:var(--fs-lead) !important;
  line-height:1.32 !important;
  letter-spacing:-0.01em !important;
  max-width:20ch;
}
.frow > p,
.frow > ul,
.frow > form{
  max-width:68ch;
}

/* Pricing cards: keep buttons optically centered and headings proportionate. */
.price-main,
.price-side{
  text-align:center;
}
.price-main ul,
.price-side ul{
  text-align:left;
  max-width:32rem;
  margin-left:auto;
  margin-right:auto;
}
.price-side .tier,
.price-main p,
.price-side p{
  text-align:left;
}
.price-main .btn,
.price-side .btn{
  display:inline-flex;
}
.price-side h3{
  font-size:var(--fs-lead) !important;
  line-height:1.32 !important;
  text-align:center;
}

@media (max-width:860px){
  .frow h3{max-width:none;}
  .frow > p,
  .frow > ul,
  .frow > form{max-width:none;}
}