/* ─────────────────────────────────────────────────────────────────────
   Nexometry — shared stylesheet for the five subpages
   ─────────────────────────────────────────────────────────────────────
   Loaded by contact-sales.html, vision-mission.html, privacy.html,
   terms.html and welcome.html. CANONICAL for all of it: tokens, the
   base element rules, the prose layer, and the nav / button / footer
   components. Was theme.css while it held only tokens; renamed once it
   started carrying five components, because "theme" no longer described it.

   index.html is NOT on it: that file must stay a single self-contained
   document because the standalone export depends on it, so it keeps its
   own inline copy of the tokens and of the nav + button component. The
   footer and prose layers below have NO counterpart there — index has a
   different, larger footer and no prose pages — so those two sections are
   canonical outright, with nothing to diff.

   The Lumen material tokens are deliberately ABSENT. No subpage uses
   .lum, so putting them here would create a third mirror of a block that
   already has one source of truth (index.html) and one verbatim mirror
   (lumen-spec.html), fenced LUMEN-TOKENS:START / END. Don't add them.

   ORDER IS LOAD-BEARING, in one direction only: BASE must come before
   PROSE. Both are single-element specificity, so the later one wins —
   `h1, h2, h3` would otherwise take the heading colour back off
   `:where(.prose) h2`. Components come last but rely on specificity, not
   order.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --primary: #4c3bf5;
  --primary-hover: #3f2ae0;
  --primary-light: #ece9ff;
  --primary-muted: rgba(76, 59, 245, 0.10);
  --primary-halo: rgba(76, 59, 245, 0.28);

  /* Keyboard focus. Opaque and distinct from any hover affordance. */
  --focus-ring: #4c3bf5;

  /* Section-label system. One recipe drawn in currentColor, so each
     surface inherits its own ink from a single declaration. */
  --rule-fade: linear-gradient(90deg, currentColor 0, currentColor 55%, transparent 100%);
  --rule-fade-sym: linear-gradient(90deg, transparent 0, currentColor 25%, currentColor 75%, transparent 100%);
  --eyebrow-ink: var(--primary);
  --spring-reveal: cubic-bezier(.22, 1.42, .36, 1);

  --ui-bg-default: oklch(96% 0.007 270);
  --ui-bg-muted: oklch(97.5% 0.005 270);
  --ui-bg-surface-elevated: oklch(99% 0.004 270);
  --ui-bg-surface-hover: #e2e8f0;
  --ui-border: #e2e8f0;
  --ui-border-warm: oklch(88% 0.01 270);

  /* Three inks, all AA on --ui-bg-default: 13:1 / 6.7:1 / 5.0:1. */
  --ui-text-body: #1e293b;
  --ui-text-body-muted: #475569;
  --ui-text-body-faint: #5f6b7d;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --shadow-card: 0 2px 8px -2px rgba(0,0,0,.08), 0 1px 4px -1px rgba(0,0,0,.04);
  --shadow-control: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-floating: 0 8px 24px -4px rgba(0,0,0,.12), 0 4px 8px -2px rgba(0,0,0,.06);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

.dark {
  --focus-ring: #c7d2fe;
  /* --primary is 2.5:1 on the dark ground, so the ink is restated. */
  --eyebrow-ink: #c7d2fe;
  --primary-hover: #6659ff;
  --primary-light: #2b246d;
  --primary-muted: rgba(102, 89, 255, 0.16);

  --ui-bg-default: #0f172a;
  --ui-bg-muted: #1e293b;
  --ui-bg-surface-elevated: #273449;
  --ui-bg-surface-hover: #334155;
  --ui-border: #334155;
  --ui-border-warm: #3d4f6b;

  --ui-text-body: #f8fafc;
  --ui-text-body-muted: #e2e8f0;
  --ui-text-body-faint: #94a3b8;

  --shadow-card: 0 2px 8px -2px rgba(0,0,0,.4), 0 1px 4px -1px rgba(0,0,0,.3);
  --shadow-control: 0 1px 2px rgba(0,0,0,.3);
}

/* Governs the pre-JS first paint only; applyTheme() always stamps a class.
   Every element-level .dark rule needs a mirror here or system-dark
   visitors get a flash of light-mode colour. */
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --focus-ring: #c7d2fe;
    --eyebrow-ink: #c7d2fe;
    --primary-hover: #6659ff;
    --primary-light: #2b246d;
    --primary-muted: rgba(102, 89, 255, 0.16);
    --ui-bg-default: #0f172a;
    --ui-bg-muted: #1e293b;
    --ui-bg-surface-elevated: #273449;
    --ui-bg-surface-hover: #334155;
    --ui-border: #334155;
    --ui-border-warm: #3d4f6b;
    --ui-text-body: #f8fafc;
    --ui-text-body-muted: #e2e8f0;
    --ui-text-body-faint: #94a3b8;
    --shadow-card: 0 2px 8px -2px rgba(0,0,0,.4), 0 1px 4px -1px rgba(0,0,0,.3);
    --shadow-control: 0 1px 2px rgba(0,0,0,.3);
  }
}


/* ═══ BASE ═══════════════════════════════════════════════════════════
   The two element rules every subpage repeated. `a { color: inherit }`
   is why every prose link needs its own colour — see the PROSE layer. */

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; color: var(--ui-text-body); }

/* ═══ PROSE ══════════════════════════════════════════════════════════
   The reading layer for privacy.html, terms.html and welcome.html.
   Measure capped for reading; the type scale is 42 / 17 / 15 / 14 / 13,
   matching contact-sales.html rather than adding steps.

   Called .prose, not .legal: welcome.html is a post-payment confirmation
   that borrows this styling, so the old name was wrong for one of its
   three users the moment the rules were shared.

   **The element defaults are wrapped in `:where()`, which contributes
   zero specificity.** That is deliberate and it is the whole design of
   this layer: `.legal p` used to be (0,1,1) and silently beat every bare
   component class (0,1,0) placed inside it — four separate declarations
   shipped dead that way, and the workaround was to write every component
   as `.legal .thing`. At (0,0,1) a single class now wins outright, so
   components are written bare and the workaround is gone. Anything added
   here as an element default must stay inside `:where()`. */

.prose { max-width: 760px; margin: 0 auto; padding: 96px 24px 80px; }

:where(.prose) h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700;
  color: var(--ui-text-body); margin: 44px 0 12px; letter-spacing: -0.01em; }
:where(.prose) h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 600;
  color: var(--ui-text-body); margin: 24px 0 8px; }
:where(.prose) p { font-size: 15px; line-height: 1.75; color: var(--ui-text-body-muted); margin-bottom: 14px; text-wrap: pretty; }
:where(.prose) ul { margin: 0 0 16px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
:where(.prose) li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.7; color: var(--ui-text-body-muted); }
:where(.prose) li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px;
  border-radius: var(--radius-full); background: var(--primary); }
/* Prose links need their own colour because of `a { color: inherit }` above,
   and they sit after it on purpose — at (0,0,1) each, the later rule wins. */
:where(.prose) a { color: var(--eyebrow-ink); text-decoration: underline; text-underline-offset: 3px; }
/* --ui-text-body, not --primary-hover: #6659ff is 3.77:1 on the dark ground,
   which makes the link LESS readable on hover than at rest. Higher contrast
   than the rest state in both themes is the requirement for a hover. */
:where(.prose) a:hover { color: var(--ui-text-body); outline-color: transparent; }

/* Components. Bare classes, because the layer above carries no specificity. */
.prose-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 42px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.12; color: var(--ui-text-body); margin-bottom: 14px; text-wrap: pretty; }
.prose-lede { font-size: 17px; line-height: 1.7; color: var(--ui-text-body-muted); text-wrap: pretty; }
/* 13px is the last step of the scale and this is its only user. Faint is fine
   here: .prose is plain ground, not a floored Lumen surface where it is banned. */
.prose-meta { margin-top: 18px; font-size: 13px; color: var(--ui-text-body-faint); }
.prose-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 32px 0 8px; padding: 16px 18px;
  background: var(--ui-bg-muted); border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg); font-size: 14px; line-height: 1.65; color: var(--ui-text-body-muted);
}
.prose-note strong { color: var(--ui-text-body); font-weight: 600; }
.prose-open { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ui-border); }

@media (max-width: 640px) {
  .prose { padding: 64px 18px 56px; }
  .prose-title { font-size: 32px; }
}

/* ═══ FOOTER ═════════════════════════════════════════════════════════
   The compact subpage footer, byte-identical on all five before this.
   index.html's footer is a different component (a four-column grid) and
   is not related to this one. */

.footer { background: var(--ui-bg-muted); border-top: 1px solid var(--ui-border); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; }
.footer-brand .mark { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--primary); display: flex; align-items: center; justify-content: center; }
.footer-meta { font-size: 13px; color: var(--ui-text-body-faint); display: flex; gap: 18px; flex-wrap: wrap; }
/* A hover is text too: higher contrast than the rest state, never lower. */
.footer-meta a:hover { color: var(--ui-text-body); }

/* ═══ COMPONENT:START — nav + button ═════════════════════════════════
   CANONICAL for the five subpages. index.html carries its own copy of these
   same rules (it must stay a single self-contained file), so this region and
   index.html's have to be compared per selector before shipping a change.

   Three permitted deltas against index.html's copy:
     · its `.nav` also carries `backdrop-filter: blur(12px)`. That predates the
       Lumen material and is deliberately left alone there; it is not reproduced
       here, and changes nothing visible either way — the bar's gradient is opaque.
     · its white focus-ring rule also lists `.cta-band a` / `.cta-band button`.
       No subpage has a CTA band.
     · it writes dark-mode overrides as `.dark X`; this file writes `html.dark X`.
       Same effect, two established file conventions.
   Compare the two per selector, ignoring comments — never as a byte diff.

   Extracted Jul 2026, when the five pages each carried their own copy. What
   the copies had drifted into, all of it fixed by having one definition:
     · three nav breakpoints for one component — 768px here, 900px on
       contact-sales, 860px on the other four;
     · `.nav-demo-desktop { display: none }` missing from all five, so below
       the breakpoint the bar CTA and the dropdown CTA both showed and the
       nav overran 375px — the very thing the comment in their media block
       said had been fixed;
     · `a:hover` hard-coding rgba(76,59,245,0.28) instead of --primary-halo;
     · `.btn-primary:hover` missing its halo on four pages;
     · the dropdown transitioning `transform .2s ease` instead of the spring.
   ═══════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Global hover halo. The transparent 1px outline is what the halo and the
   focus ring both colour in, so it has to exist on every interactive element. */
a, button, [role="button"], summary {
  cursor: pointer;
  outline: 1px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast),
              border-color var(--transition-fast), outline-color var(--transition-fast),
              opacity var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-base);
}
a:hover, button:hover, [role="button"]:hover { outline-color: var(--primary-halo); }

/* Keyboard focus. :focus-visible only, never :focus, so mouse clicks stay clean.
   Anything on the indigo nav restates the ring in white. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.nav a:focus-visible, .nav button:focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  transform: translateY(-160%);
  padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--ui-bg-surface-elevated); color: var(--ui-text-body);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-floating);
  transition: transform var(--transition-base);
}
.skip-link:focus-visible { transform: translateY(0); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 500;
  border-radius: var(--radius-md); border: 1px solid transparent;
  padding: 10px 20px; min-height: 44px; white-space: nowrap;
  transition: all var(--transition-base);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-control); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-card); outline-color: var(--primary-halo); }
/* --ui-text-body, not --primary: the indigo is a fill, and as an ink it is
   ~2.3:1 on the dark ground. The hover keeps it for light mode only. */
.btn-outline { background: transparent; color: var(--ui-text-body); border-color: var(--ui-border); box-shadow: var(--shadow-control); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-muted); outline-color: var(--primary-halo); }
html.dark .btn-outline, html.dark .btn-outline:hover { color: var(--ui-text-body); }
.btn-ghost { background: transparent; color: var(--ui-text-body-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--ui-bg-surface-hover); color: var(--ui-text-body); }
.nav .btn-ghost { color: rgba(255,255,255,0.85); }
.nav .btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.1); }
.btn-lg { font-size: 15px; padding: 12px 28px; min-height: 48px; }
.btn-sm { font-size: 13px; padding: 7px 14px; min-height: 36px; }
/* On the indigo band only. #fff is the ink there, never a token. */
.btn-white { background: #fff; color: var(--primary); border-color: #fff; font-weight: 600; }
.btn-white:hover { background: #f8f8ff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); outline-color: rgba(255,255,255,0.4); }
.btn-white-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-white-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); outline-color: rgba(255,255,255,0.3); }

.nav {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, #4c3bf5 0%, #3f2ae0 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px -4px rgba(76,59,245,0.2);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: height 260ms cubic-bezier(.2,.7,.3,1);
}
.nav-condensed .nav-inner { height: 50px; }
.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700;
  color: white; flex-shrink: 0;
}
/* Suppresses the global halo over the indigo bar. Never as an inline style on
   the element: that also beats .nav a:focus-visible and removes the focus ring. */
.nav-logo:hover { outline-color: transparent; }
.nav-logo-mark {
  width: 30px; height: 30px; background: rgba(255,255,255,0.95);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #4c3bf5; font-weight: 700;
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85);
  padding: 6px 12px; border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.nav-links a:hover { color: white; background: rgba(255,255,255,0.1); outline-color: transparent; }
.nav-links-cta { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* White-alpha, not --ui-border / --ui-bg-surface-elevated: the bar is a fixed
   indigo gradient in both themes, so theme tokens are the wrong ground here. */
.theme-toggle {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.25); background: transparent; color: white;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }
.nav-toggle {
  display: none; width: 36px; height: 36px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff;
  align-items: center; justify-content: center;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); outline-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .nav-inner { transition: none; }
}

/* 768px, matching index.html — one component, one breakpoint. */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .nav-demo-desktop { display: none; }
  .nav .nav-toggle, .nav .theme-toggle { width: 44px; height: 44px; }
  .nav-links {
    /* 100%, not the bar's literal height — the nav condenses to 50px on
       scroll and the dropdown has to follow its bottom edge. */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 20px 18px;
    background: linear-gradient(135deg, #4c3bf5 0%, #3f2ae0 100%);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 14px 28px -10px rgba(0,0,0,0.35);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    /* --spring-reveal restates the overlay spring's curve; --lum-spring itself
       is a Lumen token and is deliberately not defined in this file. */
    transition: opacity .2s ease, transform 460ms var(--spring-reveal);
  }
  .nav.open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { display: block; padding: 12px; font-size: 15px; border-radius: var(--radius-md); }
  .nav-links-cta { display: block; margin-top: 8px; }
  .nav-links-cta a { background: #fff; color: var(--primary); font-weight: 700; text-align: center; }
  .nav-links-cta a:hover { background: #fff; color: var(--primary-hover); }
}

/* Last in the sheet on purpose. The nav's :hover rules clear outline-color to
   suppress the global indigo halo over the indigo bar; `.nav-links a:hover`
   (0,2,1) ties `.nav a:focus-visible` (0,2,1) and wins on source order, so
   tabbing through the nav with the pointer resting on a link showed no ring on
   all five subpages. `:hover:focus-visible` takes it back. Keep it last. */
a:hover:focus-visible, button:hover:focus-visible, [role="button"]:hover:focus-visible,
summary:hover:focus-visible, input:hover:focus-visible, select:hover:focus-visible,
textarea:hover:focus-visible { outline-color: var(--focus-ring); }
.nav a:hover:focus-visible, .nav button:hover:focus-visible { outline-color: #fff; }
/* ═══ COMPONENT:END ══════════════════════════════════════════════════ */