/* =============================================================================
   NURDE COMPONENTS — reusable classes for every page on lfjcllc.com.
   Load AFTER tokens.css and base.css.

   NAMING: single prefix `nu-` + BEM-ish structure.
     Block:     .nu-card
     Element:   .nu-card__title      (double underscore)
     Modifier:  .nu-card--feature    (double hyphen)
   Utilities keep the `nu-` prefix too (.nu-tnum, .nu-sr-only …).
   Never author a bare/global class name — always prefixed. See contributing.md.

   Restraint is the brief: depth comes from spacing, type hierarchy and ONE
   accent, not glows or glass. Gradients are used only for the brand-signal
   flourish and (contained) flame. No blur-glass surfaces.
   ============================================================================ */

/* ===========================================================================
   NAV
   =========================================================================== */
.nu-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--nav-bg);
  border-bottom: var(--border-hair) solid var(--nav-border);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  transition: background var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard);
}
/* Hydration-only state (see Nav.jsx): while the page rests at the very top the
   bar dissolves into the hero; the solid chrome above stays the SSR/no-JS and
   static-page default, so readability never depends on JS. */
.nu-nav[data-attop="true"] {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nu-nav__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
/* Brand lockup: the app icon already carries its own signal gradient, so it
   needs NO coloured box behind it. Just the image + white wordmark. */
.nu-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}
/* The mascot-U wordmark IS the brand lockup (2120×600 white variant). Sized
   by height so the mascot glyph in the U stays legible in the bar. */
.nu-nav__brand img { width: auto; height: 30px; display: block; }
@media (max-width: 430px) { .nu-nav__brand img { height: 26px; } }
.nu-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
}
.nu-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  /* Space Grotesk, not mono: at menu sizes mono read as terminal-era
     (founder feedback 2026-08-05). Mono survives only in micro HUD scenery. */
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.nu-nav__link:hover { color: var(--text); background: var(--border-faint); }
.nu-nav__link[aria-current="page"] { color: var(--text); }
.nu-nav__actions { display: flex; align-items: center; gap: var(--space-8); }

/* Language switch (EN⇄KO, 2026-08-09). Ghost pill showing the language you'd
   switch TO. Korean label is NOT uppercased/letter-spaced — Hangul has no case
   and tracking hurts its legibility; the mixed-script label just uses the
   display face at nav-link size. */
.nu-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-8) var(--space-12);
  background: transparent;
  border: var(--border-hair) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.nu-nav__lang:hover { color: var(--text); border-color: var(--border-strong); background: var(--border-faint); }
.nu-nav__lang .nu-icon { width: 1.15em; height: 1.15em; }
/* The globe opens a two-option menu (founder revision: offer the choice,
   don't instant-toggle). Anchored under the button, right-aligned so it
   never leaves the viewport next to the hamburger. */
.nu-nav__langwrap { position: relative; display: inline-flex; }
.nu-nav__langmenu {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  z-index: var(--z-menu);
  min-width: 10.5rem;
  padding: var(--space-8);
  background: var(--surface-raised-2);
  border: var(--border-hair) solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nu-nav__langopt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  min-height: 44px;
  padding: var(--space-8) var(--space-12);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
}
.nu-nav__langopt:hover { color: var(--text); background: var(--border-faint); }
.nu-nav__langopt[aria-checked="true"] { color: var(--text); }
.nu-nav__langopt .nu-icon { color: var(--action); }
/* Below the nav's 820px cut the button lives beside the hamburger (founder
   2026-08-09: globe LEFT of the three lines) — label drops, globe stays,
   44px round target matching .nu-nav__toggle. */
@media (max-width: 820px) {
  .nu-nav__lang { padding: 0; width: 44px; justify-content: center; }
  .nu-nav__lang-label { display: none; }
}

/* Mobile menu toggle (hidden on desktop) */
.nu-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--border-hair) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}

/* Nav CTA visibility. Desktop is the DEFAULT and mobile overrides it inside the
   single 820px query below — deliberately not a min-width/max-width pair.
   The static build used `max-width:820px` + `min-width:821px`, which leaves a
   sub-pixel gap on fractional-DPR viewports where BOTH rules can miss and both
   CTAs render. These rules also used to live in index.html's inline <style>,
   so once <Nav> became a shared component every other page showed two
   "Get notified" buttons. They belong here, with the component they style.

   Both selectors are scoped under .nu-nav so they out-specify .nu-btn's own
   `display` (a bare .nav-cta--desktop TIES with .nu-btn at 0-1-0 and loses on
   source order, which silently left the desktop CTA visible on mobile). */
.nu-nav .nav-cta--mobile { display: none; }
.nu-nav .nav-cta--mobile .nu-btn { margin-top: var(--space-8); }

@media (max-width: 820px) {
  .nu-nav__toggle { display: inline-flex; }
  .nu-nav .nav-cta--desktop { display: none; }
  .nu-nav .nav-cta--mobile { display: list-item; }
  .nu-nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-24);
    background: var(--surface-raised);
    border-bottom: var(--border-hair) solid var(--border);
    box-shadow: var(--elevation-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-med) var(--ease-standard),
                transform var(--dur-med) var(--ease-standard),
                visibility 0s linear var(--dur-med);
    z-index: var(--z-menu);
  }
  .nu-nav__menu[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nu-nav__link { padding: var(--space-12); font-size: var(--fs-body); }
}

/* ===========================================================================
   BUTTONS  —  primary (solid) / secondary (raised) / ghost (text)
              sizes: --sm / (default) / --lg ; --block for full width
   =========================================================================== */
.nu-btn {
  --_pad-y: var(--space-12);
  --_pad-x: var(--space-20);
  --_fs: var(--fs-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--font-sans);
  font-size: var(--_fs);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: 0.01em;
  border: var(--border-hair) solid transparent;
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.nu-btn:active { transform: translateY(1px); }
.nu-btn[disabled],
.nu-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary: a shallow top-lit gradient (both stops keep white text at AA ≥5.1:1
   — see tokens) plus a soft action-tinted lift on hover. Depth without glass. */
.nu-btn--primary {
  background: linear-gradient(180deg, var(--btn-primary-bg), var(--action-pressed));
  color: var(--btn-primary-fg);
  /* Monitor-black pass: the one action on the page carries its own light. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 0 28px color-mix(in srgb, var(--action) 38%, transparent);
}
.nu-btn--primary:hover {
  background: var(--btn-primary-bg-h);
  color: var(--btn-primary-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 6px 18px color-mix(in srgb, var(--action) 28%, transparent);
}

.nu-btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-bd);
}
.nu-btn--secondary:hover { background: var(--btn-secondary-bg-h); color: var(--btn-secondary-fg); }

.nu-btn--ghost {
  background: transparent;
  color: var(--btn-ghost-fg);
  border-color: transparent;
}
.nu-btn--ghost:hover { color: var(--btn-ghost-fg-h); background: var(--action-soft-2); }

.nu-btn--sm { --_pad-y: var(--space-8); --_pad-x: var(--space-16); --_fs: var(--fs-caption); }
.nu-btn--lg { --_pad-y: var(--space-16); --_pad-x: var(--space-32); --_fs: var(--fs-body-lg); }
.nu-btn--block { display: flex; width: 100%; }
.nu-btn .nu-icon { width: 1.15em; height: 1.15em; }

/* ===========================================================================
   STORE CTA. Flag-gated by PRELAUNCH in StoreCTA.jsx — the one place the two
   store URLs live and the ONLY authority on release state (do not assert it
   here; a previous comment claimed "RELEASED 2026-08-05" while the live site
   was re-gated to prelaunch). PRELAUNCH=true renders the .nu-storecta__soon
   chip; false renders the side-by-side download pair below.
   =========================================================================== */
.nu-storecta { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
/* The two store buttons sit SIDE BY SIDE (founder 2026-08-05) — they only stack
   on genuinely narrow phones, where two full labels cannot share a line.
   Stack threshold is 639px, not 560px: inside the notify panel's
   .nu-container--narrow (max 640px) the pair needs ~570px of inner width, so
   between 560-639px the nowrap labels painted outside their gold fills. At
   ≥640px the wrapper is at its max and the pair always fits — desktop keeps
   the side-by-side look everywhere it actually fits. */
.nu-storecta--pair { flex-wrap: nowrap; }
.nu-storecta--pair .nu-btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
@media (max-width: 639px) {
  .nu-storecta--pair { flex-wrap: wrap; }
  .nu-storecta--pair .nu-btn { flex: 1 1 100%; }
}
.nu-storecta__soon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background: var(--surface-raised-2);
  border: var(--border-hair) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.nu-storecta__soon .nu-icon { color: var(--action); }
/* Store badge <img> slot (revealed only when badges are swapped in) */
.nu-storecta__badge { height: 48px; width: auto; }

/* ===========================================================================
   CARD
   =========================================================================== */
.nu-card {
  background: var(--card-bg);
  border: var(--border-hair) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--elevation-1);
}
.nu-card--raised { background: var(--card-bg-2); box-shadow: var(--elevation-2); }
.nu-card--flush { padding: 0; overflow: hidden; }
.nu-card--interactive {
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-standard);
}
.nu-card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.nu-card__title { font-size: var(--fs-h4); font-weight: var(--fw-extrabold); color: var(--text); }
.nu-card__body { margin-top: var(--space-8); color: var(--text-dim); font-size: var(--fs-body); }

/* Feature card: icon chip + title + body. Chip hue is set per-instance with
   --chip via inline style; defaults to the action colour. */
.nu-feature { display: flex; flex-direction: column; gap: var(--space-12); }
.nu-feature__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--chip-radius);
  color: var(--p-white);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--chip, var(--action)) 62%, #000 8%),
              var(--chip, var(--action)));
  transition: transform var(--dur-med) var(--ease-out);
}
.nu-card--interactive:hover .nu-feature__chip { transform: translateY(-2px) rotate(-3deg) scale(1.04); }
.nu-feature__chip .nu-icon { width: 22px; height: 22px; }
.nu-feature__title { font-size: var(--fs-h4); font-weight: var(--fw-extrabold); color: var(--text); }
.nu-feature__desc { color: var(--text-dim); font-size: var(--fs-body); }

/* ===========================================================================
   STAT BLOCK — big tabular number + label. Audit-confirmed counts only.
   =========================================================================== */
.nu-stat { display: flex; flex-direction: column; gap: var(--space-4); }
.nu-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-snug);
  color: var(--text);
}
.nu-stat__value--accent { color: var(--action); }
.nu-stat__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.nu-statbar {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* ===========================================================================
   BADGE / PILL  and  CLINICAL STATUS CHIP
   Status chips NEVER rely on colour alone: shape/icon + text label + colour.
   (Master plan Part II §4 — colour-blind-safe, patient-safety requirement.)
   =========================================================================== */
.nu-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--badge-radius);
  font-size: var(--fs-micro);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--surface-raised-2);
  color: var(--text-dim);
  border: var(--border-hair) solid var(--border);
}
.nu-badge--accent { background: var(--action-soft); color: var(--action); border-color: transparent; }

/* Live/roadmap markers for feature lists */
.nu-badge--live { color: var(--status-safe); background: var(--status-safe-fill); border-color: transparent; }
.nu-badge--soon { color: var(--text-muted); }

/* Status chip: icon (shape) + text label + colour. Set the variant class. */
.nu-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-xs);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  border: var(--border-hair) solid transparent;
}
.nu-chip .nu-icon { width: 1em; height: 1em; }
.nu-chip__label { line-height: 1; }
.nu-chip--critical { color: var(--status-critical); background: var(--status-critical-fill); border-color: color-mix(in srgb, var(--status-critical) 45%, transparent); }
.nu-chip--warning  { color: var(--status-warning);  background: var(--status-warning-fill);  border-color: color-mix(in srgb, var(--status-warning) 45%, transparent); }
.nu-chip--caution  { color: var(--status-caution);  background: var(--status-caution-fill);  border-color: color-mix(in srgb, var(--status-caution) 45%, transparent); }
.nu-chip--safe     { color: var(--status-safe-strong); background: var(--status-safe-fill);  border-color: color-mix(in srgb, var(--status-safe) 45%, transparent); }

/* ===========================================================================
   FEATURE ROW — alternating media + copy blocks
   =========================================================================== */
.nu-featurerow {
  display: grid;
  gap: clamp(var(--space-24), 4vw, var(--space-64));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .nu-featurerow { grid-template-columns: 1fr 1fr; }
  .nu-featurerow--reverse .nu-featurerow__media { order: -1; }
}
.nu-featurerow__eyebrow {
  font-family: var(--font-display); /* matches .nu-eyebrow */
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--action);
}
.nu-featurerow__title { margin-top: var(--space-8); font-size: var(--fs-h2); }
.nu-featurerow__body { margin-top: var(--space-16); }
.nu-featurerow__media img { border-radius: var(--radius-lg); border: var(--border-hair) solid var(--border); }

/* Section header (eyebrow + title + optional lede) */
.nu-sectionhead { max-width: 52ch; }
.nu-sectionhead--center { margin-inline: auto; text-align: center; }
/* Monitor-black pass: eyebrows read as instrument labels — system mono,
   wide-tracked, with an optional aria-hidden index numeral (JSX) that takes
   the signal teal. The label text keeps the action hue for continuity. */
.nu-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--action);
}
.nu-eyebrow__index {
  color: var(--p-signal-to);
  margin-right: var(--space-8);
}
.nu-eyebrow__index::after {
  content: "/";
  margin-left: var(--space-8);
  color: var(--text-faint);
}
.nu-sectionhead__title { margin-top: var(--space-12); }
.nu-sectionhead__lede { margin-top: var(--space-16); font-size: var(--fs-body-lg); color: var(--text-dim); }

/* ===========================================================================
   FORM FIELDS  +  NOTIFY-ME FORM
   =========================================================================== */
.nu-field {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  background: var(--field-bg);
  color: var(--field-fg);
  border: var(--border-hair) solid var(--field-border);
  border-radius: var(--field-radius);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.nu-field::placeholder { color: var(--field-placeholder); }
.nu-field:focus-visible { border-color: var(--action); }
.nu-label { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text); margin-bottom: var(--space-6); }
.nu-help { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-6); }
.nu-fieldset { border: 0; display: flex; flex-direction: column; gap: var(--space-12); }

.nu-notify { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.nu-notify .nu-field { flex: 1 1 220px; }
.nu-notify__note { margin-top: var(--space-8); font-size: var(--fs-caption); color: var(--text-muted); }

/* ===========================================================================
   TABLE  (learn pages / spec tables). Tabular numerals via base.css.
   =========================================================================== */
.nu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.nu-table caption { text-align: left; color: var(--text-muted); font-size: var(--fs-caption); margin-bottom: var(--space-8); }
.nu-table th,
.nu-table td {
  text-align: left;
  padding: var(--space-12) var(--space-16);
  border-bottom: var(--border-hair) solid var(--border);
  vertical-align: top;
}
.nu-table th {
  font-weight: var(--fw-bold);
  color: var(--text);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.nu-table tr:last-child td { border-bottom: 0; }
.nu-table--zebra tbody tr:nth-child(even) { background: var(--surface-wash); }

/* ===========================================================================
   PROSE / ARTICLE — learn (Tier-3 educational) pages. Comfortable measure.
   =========================================================================== */
.nu-prose {
  color: var(--text-dim);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.nu-prose > * + * { margin-top: var(--space-20); }
.nu-prose h2 { margin-top: var(--space-48); font-size: var(--fs-h2); color: var(--text); }
.nu-prose h3 { margin-top: var(--space-32); font-size: var(--fs-h3); color: var(--text); }
.nu-prose h2 + *, .nu-prose h3 + * { margin-top: var(--space-12); }
.nu-prose ul, .nu-prose ol { padding-left: var(--space-24); }
.nu-prose li + li { margin-top: var(--space-8); }
.nu-prose strong { color: var(--text); }
.nu-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  color: var(--text);
}
.nu-prose blockquote {
  border-left: 3px solid var(--action);
  padding-left: var(--space-16);
  color: var(--text-muted);
}

/* ===========================================================================
   BREADCRUMB
   =========================================================================== */
.nu-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: var(--fs-caption); color: var(--text-muted); }
.nu-breadcrumb a { color: var(--text-dim); }
.nu-breadcrumb a:hover { color: var(--action); }
/* Decorative chevron only — the markup is an aria-hidden icon carrying no text,
   so --text-faint is permitted here (WCAG 1.4.3 exempts decorative glyphs). */
.nu-breadcrumb__sep { color: var(--text-faint); }
.nu-breadcrumb__sep .nu-icon { width: 0.85em; height: 0.85em; }

/* ===========================================================================
   HERO
   =========================================================================== */
.nu-hero { position: relative; padding-block: clamp(var(--space-80), 12vw, var(--space-128)) var(--section-y); overflow: hidden; }
.nu-hero__eyebrow { color: var(--action); }
.nu-hero__title { margin-top: var(--space-16); font-size: var(--fs-display); }
.nu-hero__lede { margin-top: var(--space-24); font-size: var(--fs-body-lg); color: var(--text-dim); max-width: 44ch; }
.nu-hero__actions { margin-top: var(--space-32); display: flex; flex-wrap: wrap; gap: var(--space-12); }
/* Optional single restrained brand-signal wash behind the hero (NOT glass). */
.nu-hero__glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 46rem; height: 46rem;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--action-soft), transparent 72%);
  opacity: 0.7;
  z-index: -1;
}

/* ===========================================================================
   DISCLAIMER + LEGAL NOTES
   Educational-reference framing. Never "diagnose/treat/verified/validated".
   =========================================================================== */
.nu-note {
  padding: var(--space-16) var(--space-20);
  background: var(--surface-raised);
  border: var(--border-hair) solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.nu-note--disclaimer { border-left-color: var(--status-warning); }
.nu-note strong { color: var(--text-dim); }

/* Trademark attribution line (NCLEX / NCSBN). Small, always present where the
   term appears prominently. This is real prose at caption size, so it must meet
   the 4.5:1 body-text ratio — use --text-muted, which clears AA on every dark
   and light surface; never --text-faint (3.00:1 on --surface, 2.86:1 on the
   footer's --surface-wash — fails WCAG 1.4.3). */
.nu-attribution { font-size: var(--fs-caption); color: var(--text-muted); line-height: var(--lh-normal); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.nu-footer {
  position: relative;
  border-top: var(--border-hair) solid var(--border);
  background: var(--surface-wash);
  padding-block: var(--section-y-sm);
  /* The ::after sweep travels to translateX(100vw) — clip its off-screen exit
     so it never widens the document (phones pan/wiggle otherwise). X only:
     the ::before/::after hairlines ride at top:-1px and must stay visible. */
  overflow-x: clip;
}
/* Brand-signal hairline along the footer's top edge (sanctioned flourish —
   same --p-signal-* stops as the scroll bar; ends fade so it reads as light,
   not as a stripe). */
.nu-footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent, var(--p-signal-from) 22%, var(--p-signal-mid) 50%,
              var(--p-signal-to) 78%, transparent);
  opacity: 0.55;
}
/* (Giant outlined footer watermark REMOVED 2026-08-02 at the founder's request
   — do not reintroduce. The gradient hairline above stays.) */
/* NOTE: the original `1.4fr repeat(auto-fit, minmax(140px,1fr))` was INVALID
   CSS (auto-fit cannot share a track list with fr sizes), so browsers dropped
   the declaration and the footer stacked in one column at every width.
   Explicit responsive tracks instead (2026-08-05 fix). */
.nu-footer__grid {
  display: grid;
  gap: var(--space-32) var(--space-24);
  grid-template-columns: 1fr 1fr;
}
/* Brand always owns its own full-width row: icon + wordmark lockup with the
   blurb running on ONE line on desktop (founder request 2026-08-05). */
.nu-footer__brand { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .nu-footer__grid { grid-template-columns: repeat(3, 1fr); }
}
/* max-width removed (was 34ch): the blurb runs one line on desktop. */
.nu-footer__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.nu-footer__lockup img { display: block; width: auto; height: 40px; }
/* Static pages (privacy/terms/contact) put the wordmark straight in the brand
   block with no lockup wrapper — same size, plus the spacing the wrapper
   would have supplied. */
.nu-footer__brand > img { display: block; width: auto; height: 40px; margin-bottom: var(--space-12); }
.nu-footer__blurb { text-wrap: balance; }
.nu-footer__col-title {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-12);
}
.nu-footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-8); }
.nu-footer__links a { color: var(--text-dim); font-size: var(--fs-small); }
.nu-footer__links a:hover { color: var(--action); }
.nu-footer__legal {
  margin-top: var(--space-40);
  padding-top: var(--space-24);
  border-top: var(--border-hair) solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-caption);
  /* Copyright + trademark attribution are real prose on --surface-wash, so this
     row needs the 4.5:1 body-text ratio. --text-faint was 2.86:1 there. */
  color: var(--text-muted);
}

/* ===========================================================================
   ONE-WORLD ACCENTS (2026-08-04 3D upgrade) — shared 3D/heartbeat plumbing.
   The WebGL trace (HeroScene) is the page's one canvas; these accents echo its
   rhythm in the DOM. Everything here is decorative, transform/opacity-only,
   and guarded for reduced motion. The shared period is var(--pulse) — see
   tokens.css for the SWEEP_SECONDS contract.
   =========================================================================== */

/* Perspective utility: give DEPTH_ITEM entrances (Reveal.jsx) a vanishing
   point. Safe: creates no fixed-position containing-block surprises here. */
.nu-3d { perspective: 1000px; }

/* A 160px hotspot of signal light that travels a hairline, left to right.
   Consumers size/position/tint it; this only defines the movement. */
@keyframes nu-band-sweep {
  from { transform: translateX(-160px); }
  to   { transform: translateX(100vw); }
}

/* Nav brand: the monitor's lub-dub on the mark, ≤4% scale, transform-only. */
@media (prefers-reduced-motion: no-preference) {
  .nu-nav__brand img {
    animation: nu-brand-beat var(--pulse) var(--ease-in-out) infinite;
  }
  @keyframes nu-brand-beat {
    0%, 20%, 100% { transform: scale(1); }
    8%  { transform: scale(1.04); }
    14% { transform: scale(1.02); }
  }
}

/* Nav links: signal-gradient underline sweeps in on hover; keyboard/current
   page gets the same bar via aria-current (no motion needed to see it). */
.nu-nav__link { position: relative; }
.nu-nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: 4px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--brand-signal-gradient);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-med) var(--ease-out);
}
.nu-nav__link:hover::after,
.nu-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Footer: the existing static signal hairline gains a traveling hotspot —
   half the stat band's brightness, twice its period (the heartbeat slowing
   as the page rests). ::after so the static ::before line stays untouched. */
@media (prefers-reduced-motion: no-preference) {
  .nu-footer::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 2px;
    width: 160px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent,
                color-mix(in srgb, var(--p-signal-mid) 55%, transparent),
                color-mix(in srgb, var(--p-signal-to) 55%, transparent),
                transparent);
    animation: nu-band-sweep calc(var(--pulse) * 2) linear infinite;
    will-change: transform;
  }
  :root[data-theme="light"] .nu-footer::after { opacity: 0.5; }
  @media (prefers-color-scheme: light) {
    :root[data-theme="auto"] .nu-footer::after { opacity: 0.5; }
  }
}