/* VeriBasis site styles: the NorthGate family look (TASK-0422, 2026-09-30).
   The values are those of the selected northgatestrategic.com design
   (brand/ng-family/family.css), carried on VeriBasis's own class names:
   plain Inter wordmark in a 103 px header, 14 px body, NG's headline scale,
   7 px buttons with an arrow glyph, the announcement pill, 10 px eyebrows,
   NG's 1280 px content width and card surfaces.
   The beam scene's own rules are in assets/beam-scene.css (kit file,
   unchanged); this file only places it.
   The warm colour (--lamp) is the light: the beam and lit or recorded
   states only, never text, links, borders, focus rings or decoration.
   functions/api/signup.js renders its no-JavaScript reply pages with this
   file and the older header/footer markup (.wordmark-mark, .wordmark-text,
   .footer-inner, .company); those rules stay.

   Fonts are self-hosted from assets/fonts/ (OFL; licences sit next to the
   files). They are the same woff2 files as the shared brand kit. */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-400-normal.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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-400-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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght-normal.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0A0A0B;
  --bg-raised: #111113;
  --text: #EDEDED;
  --text-2: #A1A1A1;
  --text-3: #808080;
  --quiet: #808080;
  --hairline: rgba(255, 255, 255, 0.08);
  --lamp: #F0C674;
  --lamp-core: #FFF4DA;
  --lamp-rgb: 240, 198, 116;

  --field-border: rgba(255, 255, 255, 0.34);

  --font-display: "Instrument Serif", ui-serif, "Iowan Old Style", "Sitka Banner", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 7px;
  --radius-card: 14px;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
  background: var(--bg);
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  /* NG's soft light at the top of the page */
  background: radial-gradient(ellipse at 60% -28%, #ffffff0b, transparent 63%) 0 0 / 100% 850px no-repeat, var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: #ededed; color: #0a0a0b; }

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

a {
  color: inherit;
  text-decoration-color: rgba(237, 237, 237, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
a:focus-visible,
button:focus-visible { outline-offset: 6px; border-radius: 3px; }

p { margin: 0; color: var(--text-2); }

/* Short pages (404, form replies) keep the footer at the bottom. */
body > main { flex: 1 0 auto; }

.nowrap { white-space: nowrap; }

/* NG's content width */
.container { width: min(1280px, calc(100% - 112px)); margin: 0 auto; }
.container.narrow { width: min(720px, calc(100% - 112px)); }

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Header: the product's wordmark, hairline below ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 103px;
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -1.1px;
  line-height: 1.2;
  text-decoration: none;
}
/* The family wordmark is text only; the (empty) mark slot stays in the markup. */
.wordmark-mark { display: none; }

.nav-links { flex: 1; display: flex; align-items: center; margin-left: 65px; gap: 33px; font-size: 13px; }
.nav-links a { transition: color .2s; }
.nav-links .nav-text { margin-inline: auto; color: var(--text-2); text-decoration: none; }
.nav-links a:hover { color: #fff; }
/* the header's one call to action reads as NG's plain header link */
.nav-links .btn { margin-left: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 14px; color: var(--text); font-size: 13px; font-weight: 400; }
.nav-links .btn:hover { transform: none; background: none; }
.nav-links .btn span { color: var(--text-2); }

/* ---------- Buttons: 7 px corners, 12 px label, arrow glyph ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 45px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--text); color: #151516; border-color: var(--text); box-shadow: 0 1px 0 #fff3 inset; }
.btn-primary:hover { background: #fff; border-color: #fff; }
.btn-ghost { border-color: #ffffff20; background: #ffffff02; color: #d1d1d1; }
.btn-ghost:hover { background: #ffffff08; border-color: #ffffff40; }
.btn-sm { min-height: 36px; padding: 7px 14px; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* ---------- Type ---------- */

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: clamp(64px, 7.25vw, 106px);
  line-height: 1.01;
  letter-spacing: -2.8px;
}

h2 {
  font-size: clamp(44px, 4.8vw, 67px);
  line-height: 1.02;
  letter-spacing: -1.1px;
}

h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

/* NG's eyebrow */
.label {
  margin: 0 0 24px;
  color: var(--quiet);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.lede {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.9;
  text-wrap: pretty;
}

.br-wide { display: none; }
@media (min-width: 900px) {
  .br-wide { display: inline; }
}

/* ---------- Hero ---------- */

.hero { padding-top: 70px; text-align: center; }

/* NG's announcement pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 11px;
  border: 1px solid #ffffff15;
  border-radius: 30px;
  color: #bcbcbc;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
}
.pill-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #a1a1a1; }

.hero h1 { max-width: 12.5em; margin: 29px auto 27px; }
.hero .lede { max-width: 38em; margin: 0 auto; text-wrap: balance; }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 31px;
}

/* The scene (assets/beam-scene.*, the NorthGate family kit), held to the
   hero box the page had: 280-330 px tall, so width = height x 760/650. */
.hero .hero-art { width: min(100%, clamp(327px, 26.9vw, 386px)); margin: 24px auto 0; }

/* ---------- Sections ---------- */

.section { padding: 115px 0; border-top: 1px solid var(--hairline); }
.hero + .section { margin-top: 56px; }

.section-intro { max-width: 720px; }
.section-intro > p:not(.label) { margin-top: 24px; max-width: 36em; color: var(--text-2); font-size: 13px; line-height: 1.8; text-wrap: pretty; }

/* How it will work */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.steps li { padding-top: 22px; border-top: 1px solid var(--hairline); }
.step-n {
  display: block;
  margin-bottom: 14px;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
}
.steps p { margin-top: 8px; color: var(--text-2); font-size: 12px; line-height: 1.85; }

/* The four marks */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 85px;
  align-items: start;
}

.marks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marks li {
  padding: 25px 26px 22px;
  border: 1px solid #ffffff13;
  border-radius: 10px;
  background: linear-gradient(145deg, #171719, #0f0f11);
}
.marks p { margin-top: 10px; color: var(--text-2); font-size: 12px; line-height: 1.85; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ddd;
  font-size: 13px;
  font-weight: 500;
}
.mark::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mark-match::before { background: var(--text); }
.mark-differs::before {
  border: 1px solid var(--text);
  background: linear-gradient(90deg, var(--text) 50%, transparent 50%);
}
.mark-notfound::before { border: 1px solid var(--text-2); }
.mark-notchecked::before { border: 1px dashed var(--text-2); }

/* Limits */
.limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.limits > div { padding-top: 22px; border-top: 1px solid var(--hairline); }
.limits p { margin-top: 8px; color: var(--text-2); font-size: 12px; line-height: 1.85; max-width: 390px; }

/* Planned */
.planned {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.planned li {
  padding: 22px 24px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
}
.planned p { color: var(--text); font-size: 13px; line-height: 1.8; }
/* NG's status line */
.tag {
  display: block;
  margin-bottom: 11px;
  color: #9a9a9d;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Who it's for */
.prose { max-width: 560px; }
.prose > p:not(.label) { margin-top: 20px; color: var(--text-2); font-size: 14px; line-height: 1.9; text-wrap: pretty; }
.prose a { color: var(--text); }

/* ---------- Early access form ---------- */

.signup-card {
  position: relative;
  max-width: 560px;
  padding: 35px;
  border: 1px solid #ffffff12;
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse at 10% 0, #ffffff03, transparent 75%), #0e0e10;
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { color: var(--text); font-size: 13px; font-weight: 500; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.input,
.select {
  width: 100%;
  min-height: 45px;
  padding: 0 14px;
  background-color: var(--bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  transition: border-color .2s;
}
.input::placeholder { color: var(--text-3); opacity: 1; }
.input:hover,
.select:hover { border-color: rgba(255, 255, 255, 0.5); }
.input:focus-visible,
.select:focus-visible { outline-offset: 2px; }

.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select:invalid { color: var(--text-2); }
.select option { color: var(--text); background-color: var(--bg-raised); }

/* Honeypot: off-screen for people, still in the form for bots. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { margin-top: 6px; }
.form-actions .btn { width: 100%; }

.form-status { margin-top: 14px; color: var(--text); font-size: 13px; }
.form-status:empty { display: none; }

.privacy-note { margin-top: 18px; color: var(--text-2); font-size: 12px; line-height: 1.8; }
.privacy-note a { color: var(--text); }

.signup-done h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.signup-done p { margin-top: 10px; color: var(--text-2); }
.signup-done:focus { outline: none; }

/* ---------- Standalone pages (privacy, 404, form replies) ---------- */

.page { padding: 110px 0 136px; }
.page h1 { margin: 18px 0 24px; }
.page .lede { margin-top: 0; }
.page .lede + .lede { margin-top: 14px; }
.page-actions { margin-top: 30px; }

.doc h2 {
  margin-top: 56px;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.doc h2 + p { margin-top: 14px; }
.doc p + p { margin-top: 14px; }
.doc p { color: var(--text-2); font-size: 14px; line-height: 1.9; }
.doc a { color: var(--text); }
.doc .updated { margin-top: 0; color: var(--text-2); font-size: 13px; }
.doc p.label { color: var(--quiet); font-size: 10px; line-height: 1.5; }

/* ---------- Footer: wordmark, maker and small print left; links right ---------- */

.site-footer { padding: 0 0 48px; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px 30px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.site-footer .wordmark { font-size: 22px; }
.site-footer .maker { margin-top: 10px; color: var(--text-2); font-size: 12px; line-height: 1.6; }
.site-footer .maker a { color: var(--text); font-weight: 500; letter-spacing: -0.2px; text-decoration: none; transition: color .2s; }
.site-footer .maker a:hover { color: #fff; }
.site-footer .maker a span { margin-left: 8px; color: var(--text-2); }
.site-footer .company { max-width: 560px; margin-top: 18px; color: var(--quiet); font-size: 10px; line-height: 1.8; }
.site-footer .company a { color: var(--text-2); }
.footer-inner > .company:first-child { margin-top: 0; }
.footer-links { display: flex; align-self: flex-start; gap: 22px; font-size: 12px; }
.footer-links a { color: var(--text-2); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: #fff; }

/* ---------- NG's breakpoints ---------- */

@media (max-width: 1150px) {
  .container { width: calc(100% - 72px); }
  .container.narrow { width: min(720px, calc(100% - 72px)); }
  h1 { font-size: clamp(64px, 7.7vw, 89px); letter-spacing: -2px; }
  .btn { gap: 14px; padding-inline: 14px; }
  .actions { gap: 9px; }
  .split { gap: 65px; }
}

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .planned { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .container { width: calc(100% - 48px); }
  .container.narrow { width: min(720px, calc(100% - 48px)); }
  .nav { height: 84px; }
  .nav-links { margin-left: 0; gap: 20px; }
  .wordmark { font-size: 22px; }
  .pill { font-size: 10px; }
  h1 { font-size: clamp(64px, 10.5vw, 90px); letter-spacing: -1.8px; }
  .hero h1 { margin-top: 27px; }
  .hero .lede { font-size: 13px; }
  .section { padding: 80px 0; }
  h2 { font-size: 54px; }
}

@media (max-width: 720px) {
  .limits { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero + .section { margin-top: 32px; }
}

@media (max-width: 600px) {
  .nav-links .nav-text { display: none; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .marks { grid-template-columns: 1fr; }
}

@media (max-width: 550px) {
  .container { width: calc(100% - 40px); }
  .container.narrow { width: calc(100% - 40px); }
  .nav { height: 76px; }
  .wordmark { font-size: 23px; }
  .nav-links { font-size: 11px; }
  .hero { padding-top: 55px; text-align: left; }
  .hero h1 { margin-left: 0; margin-bottom: 23px; }
  h1 { font-size: clamp(60px, 13.8vw, 76px); letter-spacing: -1.2px; line-height: 1.02; }
  .hero .lede { margin-left: 0; font-size: 11px; line-height: 1.95; }
  .actions { justify-content: flex-start; gap: 10px; margin-top: 27px; }
  .btn { font-size: 11px; min-height: 44px; padding: 12px 15px; gap: 14px; }
  .nav-links .btn { font-size: 11px; }
  .hero .hero-art { margin-top: 12px; }
  .section { padding: 65px 0; }
  h2 { font-size: 47px; }
  .label,
  .doc p.label { font-size: 9px; letter-spacing: 1.6px; margin-bottom: 21px; }
  .signup-card { padding: 27px 22px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .page { padding: 80px 0 96px; }
  .page h1 { font-size: 68px; }
  .footer-inner { display: block; padding-top: 32px; }
  .site-footer { padding-bottom: 32px; }
  .site-footer .company { font-size: 9px; }
  .footer-links { margin-top: 28px; }
}

/* ---------- Motion ---------- */

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