/* N2GTM site styles. Tokens mirror the N2GTM design system. */
:root {
  --paper: #f5f6fa; --surface: #ffffff; --surface-sunk: #eceef5;
  --ink: #0d1124; --ink-muted: #4a5170; --line: #d9dce8; --line-strong: #8a91ad;
  --cobalt: #2337ff; --cobalt-hover: #1424c8; --cobalt-text: #2337ff; --cobalt-wash: #e6e9ff; --on-cobalt: #ffffff;
  --volt: #ffd12e; --volt-wash: #fff4c7;
  --pipeline: #08774f; --pipeline-wash: #dcf5ea; --signal: #c4343a;
  --night: #0d1124; --on-night: #f1f3fa; --night-muted: #a9b0cc; --night-line: #2a3150;
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 6px; --radius-md: 11px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-lift: 0 1px 0 rgba(13,17,36,0.06), 0 8px 24px -12px rgba(13,17,36,0.18);
  --shadow-hard: 6px 6px 0 #0d1124;
  color-scheme: light;
}
html, body { background: var(--paper); color: var(--ink); }
.n2-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); box-sizing: border-box; }
.n2-h-xl { font-family: var(--font-display); font-stretch: 112%; font-weight: 850; font-size: clamp(44px, 6.4vw, 84px); line-height: 0.94; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.n2-h-l { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(36px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.n2-h1 { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.n2-h3 { font-family: var(--font-sans); font-weight: 700; font-size: 20px; line-height: 1.25; margin: 0; }
.n2-lede { font-family: var(--font-sans); font-size: 19px; line-height: 30px; color: var(--ink-muted); margin: 0; max-width: 60ch; }
.n2-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--ink-muted); margin: 0; }
.n2-link { color: var(--cobalt-text); font-weight: 600; text-decoration: none; }
.n2-link:hover { text-decoration: underline; }
.n2-navlink { color: var(--ink); text-decoration: none; font: 500 15px/1 var(--font-sans); padding: 10px 4px; }
.n2-navlink:hover { color: var(--cobalt-text); }
.n2-navlink--on { color: var(--cobalt-text); box-shadow: inset 0 -2px 0 var(--cobalt); }
.n2-foot a { color: var(--night-muted); text-decoration: none; font: 400 15px/1.9 var(--font-sans); }
.n2-foot a:hover { color: var(--on-night); }
.n2-check { display: flex; gap: 10px; align-items: flex-start; font: 400 16px/24px var(--font-sans); color: var(--ink); }
.n2-check svg { flex: none; margin-top: 3px; }
.n2-faq summary { cursor: pointer; list-style: none; font: 600 18px/1.4 var(--font-sans); color: var(--ink); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; }
.n2-faq summary::-webkit-details-marker { display: none; }
.n2-faq summary::after { content: "+"; font: 500 24px/1 var(--font-mono); color: var(--cobalt-text); }
.n2-faq[open] summary::after { content: "–"; }
.n2-faq p { margin: 0 0 20px; font: 400 16px/26px var(--font-sans); color: var(--ink-muted); max-width: 70ch; }
.n2-faq { border-bottom: 1px solid var(--line); }
.n2-tab { font: 600 15px/1 var(--font-sans); padding: 12px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.n2-tab--on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.n2-tab:focus-visible, .n2-navlink:focus-visible, .n2-link:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }


.n2 { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.n2-display { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
.n2-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.n2-mark { background: var(--volt-wash); color: var(--ink); padding: 0 0.15em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Button ---------------------------------------------------------------- */
.n2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 16px/1 var(--font-sans); padding: 14px 20px; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; white-space: nowrap; }
.n2-btn:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.n2-btn:active { transform: translateY(1px); }
.n2-btn--primary { background: var(--cobalt); color: var(--on-cobalt); }
.n2-btn--primary:hover { background: var(--cobalt-hover); }
.n2-btn--volt { background: var(--volt); color: #0d1124; }
.n2-btn--volt:hover { box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.n2-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.n2-btn--ghost:hover { border-color: var(--ink); }
.n2-btn--sm { font-size: 14px; padding: 9px 14px; border-radius: var(--radius-sm); }
.n2-btn--lg { font-size: 18px; padding: 18px 26px; }
.n2-btn .n2-arrow { display: inline-block; transition: transform .15s ease; }
.n2-btn:hover .n2-arrow { transform: translate(2px, -2px); }

/* Chip ------------------------------------------------------------------ */
.n2-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--ink-muted); border: 1px solid var(--line); white-space: nowrap; }
.n2-chip--brand { background: var(--cobalt-wash); color: var(--cobalt-text); border-color: transparent; }
.n2-chip--pass { background: var(--pipeline-wash); color: var(--pipeline); border-color: transparent; }
.n2-chip--pass::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.n2-chip--volt { background: var(--volt); color: #0d1124; border-color: transparent; }

/* Field ----------------------------------------------------------------- */
.n2-field { display: grid; gap: 6px; }
.n2-field label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.n2-field .n2-help { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.n2-input, .n2-select { font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 11px 14px; width: 100%; box-sizing: border-box; }
.n2-input::placeholder { color: var(--ink-muted); }
.n2-input:focus, .n2-select:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-wash); }
.n2-field--error .n2-input { border-color: var(--signal); }
.n2-field--error .n2-help { color: var(--signal); }

/* Card base ------------------------------------------------------------- */
.n2-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-4); min-width: 0; }
.n2-card--link { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; cursor: pointer; }
.n2-card--link:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); transform: translateY(-2px); }

/* RoleCard (candidate-facing job listing) -------------------------------- */
.n2-role__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.n2-role__title { font: 700 20px/1.25 var(--font-sans); margin: 0; color: var(--ink); }
.n2-role__co { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); margin: 2px 0 0; }
.n2-role__pay { font: 700 18px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }
.n2-role__pay small { display: block; font: 500 11px/14px var(--font-mono); color: var(--ink-muted); text-align: right; margin-top: 4px; letter-spacing: 0.04em; }
.n2-role__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.n2-role__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* RepCard (company-facing prescreened profile) --------------------------- */
.n2-rep__head { display: flex; gap: var(--space-4); align-items: center; }
.n2-avatar { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--cobalt); color: var(--on-cobalt); display: grid; place-items: center; font: 800 20px/1 var(--font-display); flex: none; }
.n2-rep__name { font: 700 18px/1.2 var(--font-sans); margin: 0; }
.n2-rep__meta { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); margin: 2px 0 0; }
.n2-score { display: grid; gap: 10px; }
.n2-score__row { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; align-items: center; gap: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.n2-score__track { height: 8px; border-radius: var(--radius-sm); background: var(--surface-sunk); overflow: hidden; }
.n2-score__fill { height: 100%; background: var(--cobalt); border-radius: inherit; }
.n2-score__fill--top { background: var(--volt); }
.n2-score__val { font: 600 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.n2-rep__audio { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-sunk); border-radius: var(--radius-sm); padding: 10px 12px; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.n2-play { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; border: 0; cursor: pointer; }
.n2-play::before { content: ""; border-left: 9px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.n2-wave { flex: 1; height: 22px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(180deg, transparent 20%, #000 20% 80%, transparent 80%); opacity: .8; border-radius: 2px; }

/* StatBlock ------------------------------------------------------------- */
.n2-stat { display: grid; gap: 6px; padding-top: var(--space-4); border-top: 3px solid var(--ink); min-width: 0; }
.n2-stat__num { font: 700 44px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.n2-stat__num em { font-style: normal; background: var(--volt); color: #0d1124; padding: 0 6px; border-radius: 4px; }
.n2-stat__label { font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) { .n2-btn, .n2-card--link, .n2-btn .n2-arrow { transition: none; } }

/* ---- Site extras ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--volt); color: #0d1124; padding: 10px 14px; border-radius: 6px; font-weight: 600; }
.skip:focus { left: 8px; }
.n2-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.n2-menu-btn { display: none; background: transparent; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; font: 600 14px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
@media (max-width: 900px) {
  .n2-menu-btn { display: inline-flex; }
  .n2-nav, .n2-nav-ctas { display: none !important; width: 100%; }
  .n2-header[data-open="true"] .n2-nav, .n2-header[data-open="true"] .n2-nav-ctas { display: flex !important; flex-direction: column; align-items: stretch; }
  .n2-header[data-open="true"] .n2-nav-ctas .n2-btn { width: 100%; }
}
[hidden] { display: none !important; }
.n2-embed { width: 100%; min-height: 700px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }

/* Legal pages (privacy, terms) */
.n2-legal { display: flex; flex-direction: column; gap: 32px; margin-top: 8px; }
.n2-legal-sec { display: flex; flex-direction: column; gap: 12px; }
.n2-legal-sec h2 { color: var(--ink); }
.n2-legal ul { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 8px; }
.n2-legal strong { color: var(--ink); font-weight: 600; }