/* ═══════════════════════════════════════════════════════════════════
   base-2.css
   Site semantic aliases and common classes.
   Replaces base.css — do not load both.

   Load order:
     1. tokens.css      (shared primitive scales — spacing, radius,
                         duration, color, leading, tracking, sizing)
     2. base-2.css      (this file — site semantic aliases, nav,
                         footer, reset, common classes)
     3. site.css        (page-specific classes — no token declarations)

   Rule (Model B):
     base-2.css contains ONLY class rules.
     ALL token declarations live in tokens.css.
     No :root block. No theme override blocks.

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────
   1.  DESIGN TOKENS          CSS custom properties — edit here to
                              restyle the entire site
       1a. Color Palette      Primitive color values (refs tokens.css)
       1b. Semantic Aliases   Shorthand references to palette
       1c. Overlay / Dark     Dark-page overlay color tokens
       1d. Typography         Font families, sizes (primitives +
                              semantic aliases), weights
       1e. Spacing & Shape    Radius semantic aliases (refs tokens.css)
       1f. Shadows            Primitives + semantic aliases
       1g. Nav Dimensions     Heights, widths, backgrounds
       1h. Accent Alpha       OPT-1: semantic aliases (refs tokens.css)
       1i. Z-index            OPT-2: z-index scale tokens
       1j. Duration           OPT-3: semantic aliases (refs tokens.css)
   2.  DARK THEME             html[data-theme="dark"] overrides
   3.  LIGHT THEME            Note — :root default, no block needed
   4.  RESET                  Box-sizing, margin/padding wipe
   5.  BASE ELEMENTS          html, body, dot-texture
   6.  TYPOGRAPHY HELPERS     Shared heading + text utilities
   7.  NAV                    Primary navigation bar
   8.  SUBNAV                 Two-level dropdown menu
   9.  FOOTER                 Site-wide footer
   10. OVERLAY SHELL          .ov-root / .ov-active base rules
   11. UTILITY CLASSES        .highlight, .hl, .sr-only, etc.
   12. ANIMATIONS             @keyframes used across all pages
   13. RESPONSIVE             Breakpoints for nav + footer
   14. SETTINGS WIDGET        Gear icon, dropdown panel, theme pill selector
   15. COMMON CLASSES         Reusable text-scale, weight, color utilities
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────── */


/* Dark mode — body background and dot texture */
html[data-theme="dark"] body {
  background: var(--color-bg);
  color:      var(--color-text);
}

html[data-theme="dark"] body::before {
  background-image: radial-gradient(
    circle,
    var(--accent-dot) 1px,   /* OPT-1 */
    transparent 1px
  );
}

/* Dark mode — nav */
html[data-theme="dark"] nav {
  background:    var(--nav-bg);
  border-bottom: 1px solid var(--color-border);
}

html[data-theme="dark"] .logo {
  color: var(--color-navy);
}

html[data-theme="dark"] .nav-link {
  color: var(--color-muted);
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-item.subnav-open > .nav-link {
  color:      var(--color-navy);
  background: var(--accent-hover-dark); /* OPT-1: was rgba(61,139,212,0.08) */
}

html[data-theme="dark"] .nav-cta {
  color:        var(--color-navy);
  border-color: var(--color-overlay-btn-border);
}

html[data-theme="dark"] .nav-cta:hover {
  background:   var(--accent-hover-dark); /* OPT-1 */
  border-color: var(--accent);
}

/* Dark mode — hamburger */
html[data-theme="dark"] .nav-hamburger {
  border-color: var(--color-overlay-btn-border);
}

html[data-theme="dark"] .nav-hamburger .bar {
  background: var(--white-alpha-6);
}

html[data-theme="dark"] .nav-hamburger:hover {
  background:   var(--accent-glow-ring); /* OPT-1: was rgba(61,139,212,0.1) */
  border-color: var(--accent);
}

/* Dark mode — mobile drawer */
html[data-theme="dark"] nav .nav-links {
  background:    rgba(13, 17, 23, 0.98);
  border-bottom: 1px solid var(--color-border);
}

/* Dark mode — subnav */
html[data-theme="dark"] .subnav {
  background:   var(--subnav-bg);
  border-color: var(--subnav-border);
  box-shadow:   var(--shadow-subnav);
}

html[data-theme="dark"] .subnav::before {
  background:   var(--subnav-bg);
  border-color: var(--subnav-border);
}

html[data-theme="dark"] .subnav-link {
  color: var(--color-text);
}

html[data-theme="dark"] .subnav-link:hover {
  background: var(--subnav-item-hover);
  color:      var(--accent);
}

/* Dark mode — headings */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
  color: var(--color-navy);
}

/* Dark mode — utility */
html[data-theme="dark"] .sec-div {
  background: var(--color-bg);
}

html[data-theme="dark"] .sec-div::before,
html[data-theme="dark"] .sec-div::after {
  background: var(--color-border);
}

html[data-theme="dark"] .div-badge {
  background:   var(--color-surface);
  border-color: var(--color-border);
  color:        var(--color-muted);
}


/* ───────────────────────────────────────────────────────────────────
   3. LIGHT THEME
   Light is the :root default — no override block needed here.
   Page-scoped light overrides (enginuity, partners) live in
   site.css using html[data-theme="light"] scoped to their
   page wrapper class.
   ─────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────
   4. RESET
   ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background:  none;
  border:      none;
  padding:     0;
  margin:      0;
  font-family: inherit;
  font-size:   inherit;
  cursor:      pointer;
}

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


/* ───────────────────────────────────────────────────────────────────
   5. BASE ELEMENTS
   ─────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family:             var(--font-sans);
  background:              var(--bg);
  color:                   var(--text);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
}

/* Subtle dot-grid texture — light pages */
body::before {
  content:          '';
  position:         fixed;
  inset:            0;
  pointer-events:   none;
  background-image: radial-gradient(
    circle,
    var(--accent-dot) 1px,   /* OPT-1: was rgba(61,139,212,0.05) */
    transparent 1px
  );
  background-size: 28px 28px;
  z-index:         var(--z-base); /* OPT-2 */
}

/* ── DEPRECATED: body.page-dark ──────────────────────────────────
   This class was used to hardcode dark styles on enginuity.html
   and partners.html. Replaced by html[data-theme="dark"] token
   system in Session 12. Class removed from HTML in 12.6.
   These rules are retained as a safety fallback until all pages
   are confirmed stable under the new token system.
   Do NOT add new body.page-dark selectors.
   ─────────────────────────────────────────────────────────────── */
body.page-dark { /* DEPRECATED */
  background: var(--color-overlay-page);
  color:      var(--color-white);
}

body.page-dark::before { /* DEPRECATED */
  background-image: radial-gradient(
    circle,
    var(--white-alpha-1) 1px,
    transparent 1px
  );
}


/* ───────────────────────────────────────────────────────────────────
   6. TYPOGRAPHY HELPERS
   ─────────────────────────────────────────────────────────────────── */
h1 {
  font-size:      var(--fs-h1);
  font-weight:    var(--fw-light);
  font-family:    var(--font-sans);
  color:          var(--navy);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tightest);
}

h1 strong {
  font-weight: var(--fw-bold);
}

h2 {
  font-size:      var(--fs-h2);
  font-weight:    var(--fw-light);
  font-family:    var(--font-sans);
  color:          var(--navy);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tightest);
}

h2 strong {
  font-weight: var(--fw-bold);
  color:       var(--accent);
}


/* ───────────────────────────────────────────────────────────────────
   7. NAV
   ─────────────────────────────────────────────────────────────────── */
nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         var(--z-nav); /* OPT-2 */
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--nav-height);
  padding:         0 var(--nav-padding-x);
  background:      var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom:   1px solid var(--border);
  box-shadow:      var(--shadow-nav);
  animation:       fadeDown var(--duration-2xslow) ease both; /* OPT-3 */
}

/* Brand / logo */
.logo {
  font-size:      var(--fs-nav-logo);
  font-weight:    var(--fw-bold);
  color:          var(--navy);
  letter-spacing: var(--tracking-tight);
  flex-shrink:    0;
}

.logo span {
  color: var(--accent);
}

/* Dark-page nav overrides */
body.page-dark nav { /* DEPRECATED */
  background:    var(--color-overlay-nav);
  border-bottom: 1px solid var(--color-overlay-border);
}

body.page-dark .logo { /* DEPRECATED */
  color: var(--color-white);
}

/* Nav link list */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--space-tight);
}

/* Individual nav items — position context for subnav */
.nav-item {
  position: relative;
}

/* Nav links */
.nav-link {
  display:        flex;
  align-items:    center;
  gap:            var(--space-tight);
  padding:        8px 12px;
  font-size:      var(--fs-nav-link);
  font-weight:    var(--fw-regular);
  color:          var(--muted);
  border-radius: var(--radius-p-lg);
  transition:     color var(--duration-2xslow), background var(--duration-2xslow); /* OPT-3 */
  white-space:    nowrap;
  cursor:         pointer;
}

.nav-link:hover,
.nav-item.subnav-open > .nav-link {
  color:      var(--navy);
  background: var(--accent-hover); /* OPT-1: was rgba(61,139,212,0.06) */
}

body.page-dark .nav-link { /* DEPRECATED */
  color: var(--color-overlay-btn-text);
}

body.page-dark .nav-link:hover, /* DEPRECATED */
body.page-dark .nav-item.subnav-open > .nav-link {
  color:      var(--color-white);
  background: var(--color-overlay-btn-hover);
}

/* Chevron indicator */
.nav-chevron {
  font-size:  var(--fs-nav-chevron);
  line-height: var(--leading-none);
  opacity:    0.6;
  transition: transform var(--duration-2xslow) ease, opacity var(--duration-2xslow); /* OPT-3 */
}

.nav-item.subnav-open > .nav-link .nav-chevron {
  transform: rotate(180deg);
  opacity:   1;
}

/* CTA button */
.nav-cta {
  flex-shrink:    0;
  font-size:      var(--fs-nav-cta);
  font-weight:    var(--fw-semibold);
  color:          var(--accent);
  border:         1.5px solid var(--accent-border); /* OPT-1: was rgba(61,139,212,0.35) */
  padding:        7px 18px;
  border-radius: var(--radius-p-lg);
  letter-spacing: var(--tracking-wide);
  transition:     all var(--duration-2xslow) ease; /* OPT-3 */
  white-space:    nowrap;
}

.nav-cta:hover {
  background:   var(--accent-hover-md); /* OPT-1: was rgba(61,139,212,0.08) */
  border-color: var(--accent);
  box-shadow:   0 0 16px var(--accent-shadow-sm); /* OPT-1: was rgba(61,139,212,0.18) */
}

body.page-dark .nav-cta { /* DEPRECATED */
  color:        var(--color-white);
  border-color: var(--color-overlay-btn-border);
}

body.page-dark .nav-cta:hover { /* DEPRECATED */
  background: var(--color-overlay-btn-hover);
}


/* ───────────────────────────────────────────────────────────────────
   8. SUBNAV  (two-level dropdown)
   ─────────────────────────────────────────────────────────────────── */
.subnav {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%);
  min-width:     var(--subnav-min-width);
  background:    var(--subnav-bg);
  border:        1px solid var(--subnav-border);
  border-radius: var(--subnav-radius);
  box-shadow:    var(--shadow-subnav);
  padding:       var(--space-base);
  z-index:       var(--z-subnav); /* OPT-2 */

  /* Hidden state */
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transform:      translateX(-50%) translateY(-6px);
  transition:     opacity var(--duration-pace) ease,       /* OPT-3 */
                  visibility var(--duration-pace) ease,
                  transform var(--duration-pace) ease;
}

/* Small pointer arrow */
.subnav::before {
  content:       '';
  position:      absolute;
  top:           -5px;
  left:          50%;
  transform:     translateX(-50%) rotate(45deg);
  width:         9px;
  height:        9px;
  background:    var(--subnav-bg);
  border-top:    1px solid var(--subnav-border);
  border-left:   1px solid var(--subnav-border);
  border-radius: var(--radius-p-2xs) 0 0 0;
}

/* Open state */
.nav-item.subnav-open > .subnav {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateX(-50%) translateY(0);
}

/* Subnav items */
.subnav-item {
  border-radius: var(--radius-p-lg);
}

.subnav-link {
  display:        block;
  padding:        9px 14px;
  font-size:      var(--fs-nav-subnav);
  font-weight:    var(--fw-regular);
  color:          var(--text);
  border-radius: var(--radius-p-lg);
  white-space:    nowrap;
  transition:     background var(--duration-pace), color var(--duration-pace); /* OPT-3 */
}

.subnav-link:hover {
  background: var(--subnav-item-hover);
  color:      var(--accent);
}

/* Dark-page subnav */
body.page-dark .subnav { /* DEPRECATED */
  background:   var(--dark-alpha-nav);
  border-color: var(--color-overlay-border);
  box-shadow:   0 8px 32px var(--shadow-alpha-md);
}

body.page-dark .subnav::before { /* DEPRECATED */
  background:   var(--dark-alpha-nav);
  border-color: var(--color-overlay-border);
}

body.page-dark .subnav-link { /* DEPRECATED */
  color: var(--color-overlay-text);
}

body.page-dark .subnav-link:hover { /* DEPRECATED */
  background: var(--accent-hover-dark); /* OPT-1: was rgba(61,139,212,0.12) */
  color:      var(--color-white);
}


/* ───────────────────────────────────────────────────────────────────
   9. FOOTER
   ─────────────────────────────────────────────────────────────────── */
footer {
  background:      var(--color-footer-bg);
  padding:         28px var(--nav-padding-x);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-xl);
  position:        relative;
  z-index:         var(--z-base); /* OPT-2 */
}

.foot-logo {
  font-size:      var(--fs-nav-logo);
  font-weight:    var(--fw-bold);
  color:          var(--color-foot-logo-text);
  letter-spacing: var(--tracking-tight);
}

.foot-logo span {
  color: var(--accent);
}

.foot-copy {
  font-size:      var(--fs-foot);
  color:          var(--color-footer-text);
  letter-spacing: var(--tracking-wide);
}


/* ───────────────────────────────────────────────────────────────────
   10. OVERLAY SHELL
   CSS contract for overlay.js:
     .ov-root            → hidden by default
     .ov-root.ov-active  → visible (overlay.js adds/removes this)
   ─────────────────────────────────────────────────────────────────── */
.ov-root {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    var(--z-modal); /* OPT-2 */
  overflow-y: auto;
  animation:  fadeIn var(--duration-base) ease both; /* OPT-3 */
}

.ov-root.ov-active {
  display: block;
}

/* Centered modal variant */
.ov-root.ov-modal {
  display:         none;
  align-items:     center;
  justify-content: center;
  background:      var(--dark-alpha-nav);
  backdrop-filter: blur(6px);
}

.ov-root.ov-modal.ov-active {
  display: flex;
}

/* Overlay nav bar */
.ov-nav {
  position:        sticky;
  top:             0;
  z-index:         var(--z-float); /* OPT-2 */
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px var(--nav-padding-x);
  background:      var(--color-overlay-nav);
  backdrop-filter: blur(14px);
  border-bottom:   1px solid var(--color-overlay-border);
}

.ov-logo {
  font-size:      var(--fs-overlay-logo);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-sans);
  color:          var(--color-white);
  letter-spacing: var(--tracking-tight);
}

.ov-logo span,
.ov-logo .ov-accent {
  color: var(--accent);
}

.ov-slash {
  font-size:   var(--fs-overlay-slash);
  font-weight: var(--fw-light);
  color:       var(--color-overlay-logo-dim);
  margin-left: var(--space-3xwide);
}

/* Overlay body area */
.ov-body {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - var(--nav-height));
  padding:         48px var(--nav-padding-x);
}


/* ───────────────────────────────────────────────────────────────────
   11. UTILITY CLASSES
   ─────────────────────────────────────────────────────────────────── */

/* Inline accent highlight — used by renderer.js */
.highlight,
.hl {
  color:      var(--accent);
  font-style: normal;
}

/* Logo — disabled state on landing page (already home) */
.logo-disabled {
  pointer-events:  none;
  cursor:          default;
  text-decoration: none;
  /* Visually identical to active logo — no dimming */
}

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

/* Page content wrapper — pushes below fixed nav */
.page-content {
  padding-top: var(--nav-height);
}

/* Shared section divider badge */
.sec-div {
  display:     flex;
  align-items: center;
  gap:         var(--space-5xl);
  padding:     0 var(--nav-padding-x);
  background:  var(--bg);
}

.sec-div::before,
.sec-div::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}

.div-badge {
  font-size:      var(--fs-badge);
  font-weight:    var(--fw-bold);
  font-family:    var(--font-mono);
  color:          var(--muted);
  border:         1px solid var(--border);
  padding:        6px 14px;
  border-radius:  var(--radius-p-pill);
  background:     var(--surface);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  white-space:    nowrap;
}

/* Shared continue/action button */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-3xwide);
  font-size:       var(--fs-btn);
  font-weight:     var(--fw-semibold);
  font-family:     var(--font-sans);
  color:           var(--color-white);
  background:      linear-gradient(135deg, var(--accent) 0%, var(--palette-blue-deep) 100%);
  padding:         13px 24px;
  border-radius:  var(--radius-p-xl);
  border:          2px solid transparent;
  white-space:     nowrap;
  cursor:          pointer;
  box-shadow:      0 3px 14px var(--accent-shadow-md); /* OPT-1 */
  transition:      all var(--duration-3xslow) cubic-bezier(0.34, 1.3, 0.64, 1); /* OPT-3 */
  text-decoration: none;
}

.btn .arr {
  width:           22px;
  height:          22px;
  border-radius:  var(--radius-p-md);
  background:      var(--white-alpha-2);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--fs-card-cta);  /* 12px — arrow badge */
  transition:      transform var(--duration-3xslow) cubic-bezier(0.34, 1.3, 0.64, 1); /* OPT-3 */
}

.btn:hover {
  background:   transparent;
  color:        var(--accent);
  border-color: var(--accent);
  box-shadow:   0 0 0 4px var(--accent-glow-ring),    /* OPT-1 */
                0 6px 24px var(--accent-shadow-lg);    /* OPT-1 */
  transform:    translateY(-2px);
}

.btn:hover .arr {
  transform:  translateX(4px);
  background: var(--accent-glow-ring); /* OPT-1: was rgba(61,139,212,0.1) */
}


/* ───────────────────────────────────────────────────────────────────
   12. ANIMATIONS
   ─────────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%,  100% { opacity: 1;   transform: scale(1);   }
  50%        { opacity: 0.3; transform: scale(0.7); }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}


/* ───────────────────────────────────────────────────────────────────
   13. RESPONSIVE
   ─────────────────────────────────────────────────────────────────── */

/* Tablet nav padding — token override in tokens.css */

/* Mobile */
@media (max-width: 600px) {
  /* Mobile nav padding — token override in tokens.css */

  /* Stack footer */
  footer {
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
  }
}

/* ── HAMBURGER BUTTON ───────────────────────────────────────────── */
/* Hidden on desktop, shown on mobile via media query below */
.nav-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             var(--space-narrow);
  width:           36px;
  height:          36px;
  padding:         var(--space-base);
  background:      none;
  border:          1px solid var(--border);
  border-radius:  var(--radius-p-lg);
  cursor:          pointer;
  flex-shrink:     0;
  z-index:         var(--z-nav); /* OPT-2: sits at nav level, above page content */
  transition:      background var(--duration-2xslow), border-color var(--duration-2xslow); /* OPT-3 */
}

.nav-hamburger:hover {
  background:   var(--accent-hover-md); /* OPT-1: was rgba(61,139,212,0.08) */
  border-color: var(--accent);
}

/* Three bar lines */
.nav-hamburger .bar {
  display:          block;
  width:            18px;
  height:           2px;
  background:       var(--navy);
  border-radius:  var(--radius-p-2xs);
  transform-origin: center;
  transition:       transform var(--duration-3xslow) ease, opacity var(--duration-2xslow) ease; /* OPT-3 */
}

/* Dark page variant */
body.page-dark .nav-hamburger, /* DEPRECATED */
body.page-docs .nav-hamburger {
  border-color: var(--color-overlay-btn-border);
}

body.page-dark .nav-hamburger .bar, /* DEPRECATED */
body.page-docs .nav-hamburger .bar {
  background: var(--white-alpha-6);
}

body.page-dark .nav-hamburger:hover, /* DEPRECATED */
body.page-docs .nav-hamburger:hover {
  background:   var(--color-overlay-btn-hover);
  border-color: var(--white-alpha-3);
}

/* Animated X when drawer open */
nav.nav-open .nav-hamburger .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
nav.nav-open .nav-hamburger .bar:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}
nav.nav-open .nav-hamburger .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── MOBILE DRAWER ──────────────────────────────────────────────── */
/* Phase 3: hamburger shows below 480px; 480-768 uses ··· overflow dropdown. */
@media (max-width: 480px) {

  /* Show hamburger */
  .nav-hamburger {
    display: flex;
  }

  /* Redefine nav-links as a slide-down drawer */
  .nav-links {
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-tight);
    position:        fixed;
    top:             var(--nav-height);
    left:            0;
    right:           0;
    z-index:         var(--z-overlay-bg); /* OPT-2: was 199 */
    padding:         12px 16px 20px;
    background:      var(--light-alpha-nav);
    backdrop-filter: blur(16px);
    border-bottom:   1px solid var(--border);
    box-shadow:      0 8px 24px var(--shadow-alpha-xs);
    /* Hidden by default */
    transform:       translateY(-8px);
    opacity:         0;
    pointer-events:  none;
    visibility:      hidden;
    transition:
      transform  var(--duration-2xslow) ease,   /* OPT-3 */
      opacity    var(--duration-2xslow) ease,
      visibility var(--duration-2xslow) ease;
  }

  /* Open state */
  nav.nav-open .nav-links {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
    visibility:     visible;
  }

  /* Dark page drawer variants */
  body.page-dark nav .nav-links, /* DEPRECATED */
  body.page-docs nav .nav-links {
    background:    var(--dark-alpha-nav);
    border-bottom: 1px solid var(--color-overlay-border);
    box-shadow:    0 8px 32px var(--shadow-alpha-md);
  }

  /* Full-width items */
  .nav-item {
    width: 100%;
  }

  .nav-link {
    width:           100%;
    padding:         11px 14px;
    border-radius:  var(--radius-p-lg);
    font-size:       var(--fs-p-xl);  /* 16px — mobile drawer nav link */
    justify-content: space-between;
  }

  /* Subnav — inline expand on mobile (not dropdown) */
  .subnav {
    position:       static;
    transform:      none  !important;
    min-width:      100%;
    width:          100%;
    border-radius: var(--radius-p-lg);
    box-shadow:     none;
    border:         1px solid var(--border);
    background:     var(--accent-dot); /* OPT-1: was rgba(61,139,212,0.04) */
    margin-top:     4px;
    padding:        4px;
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    max-height:     0;
    overflow:       hidden;
    transition:
      opacity    var(--duration-2xslow) ease,      /* OPT-3 */
      visibility var(--duration-2xslow) ease,
      max-height var(--duration-2xslow) ease;
  }

  .subnav::before {
    display: none;
  }

  .nav-item.subnav-open > .subnav {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    max-height:     300px;
  }

  .subnav-link {
    padding:       10px 14px;
    font-size:     var(--fs-p-lg);  /* 15px — mobile subnav item */
    border-radius: var(--radius-p-base);
  }

  body.page-dark nav .subnav, /* DEPRECATED */
  body.page-docs nav .subnav {
    background:   var(--white-alpha-1);
    border-color: var(--color-overlay-border);
  }

  /* Dark theme — mobile subnav (token-driven replacement for body.page-dark) */
  html[data-theme="dark"] nav .subnav {
    background:   var(--white-alpha-1);
    border-color: var(--color-overlay-border);
  }

  /* Backdrop — dims page behind open drawer */
  .nav-backdrop {
    display:        block;
    position:       fixed;
    inset:          0;
    top:            var(--nav-height);
    z-index:        var(--z-sticky); /* OPT-2: was 198 */
    background:     rgba(0, 0, 0, 0.3);
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--duration-2xslow) ease; /* OPT-3 */
  }

  nav.nav-open ~ .nav-backdrop {
    opacity:        1;
    pointer-events: auto;
  }
}

/* Hide backdrop on desktop */
@media (min-width: 601px) {
  .nav-backdrop { display: none; }
}


/* ───────────────────────────────────────────────────────────────────
   14. SETTINGS WIDGET
   Styles for the gear subnav pill panel rendered by buildNavItem().
   The old standalone widget (.nav-settings, .nav-settings__btn,
   .nav-settings__icon, .settings-dropdown, .settings-section) has
   been removed — renderSettings() is no longer called.
   Retained classes below are still active inside .subnav--gear.
   ─────────────────────────────────────────────────────────────────── */

/* Gear icon SVG — sized explicitly so it renders at nav scale */
.nav-gear-icon {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  display:     block;
}

/* Gear nav item link — center the icon vertically */
.nav-item--icon .nav-link {
  padding: 6px 10px;
}

/* Gear subnav panel — right-align, override default center-left */
.subnav--gear {
  left:  auto;
  right: 0;
  /* Override both transform declarations from .subnav:
     hidden state uses translateX(-50%) translateY(-6px) — strip the X */
  transform: translateY(-6px);
}

/* Higher specificity than .nav-item.subnav-open > .subnav to prevent
   the base open-state translateX(-50%) translateY(0) from overriding */
.nav-item.has-subnav.subnav-open > .subnav--gear {
  transform: translateY(0);
}

/* Gear subnav arrow — align to right side to match right:0 anchor */
.subnav--gear::before {
  left:      auto;
  right:     14px;
  transform: rotate(45deg);
}

/* Gear subnav rows — flex column layout for label + pill stack */
.subnav-item--theme,
.subnav-item--lang {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-base);
  padding:        8px 10px;
}

/* Language pill row — compact inline with pipe dividers */
.settings-pills--lang {
  gap: 0;
}

.settings-pills--lang .settings-lang-pill {
  flex:          unset;
  padding:       4px 8px;
  border:        none;
  background:    transparent;
  border-radius: 0;
}

.settings-pills--lang .settings-lang-pill + .settings-lang-pill {
  border-left: 1px solid var(--border);
}

html[data-theme="dark"] .settings-pills--lang .settings-lang-pill + .settings-lang-pill {
  border-left-color: var(--color-overlay-btn-border);
}

html[data-theme="dark"] .settings-pills--lang .settings-lang-pill {
  color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .settings-pills--lang .settings-lang-pill:hover,
html[data-theme="dark"] .settings-pills--lang .settings-lang-pill--active {
  color: var(--accent);
}

/* Section label */
.settings-label {
  font-size:      var(--fs-p-sm);   /* 11px */
  font-weight:    var(--fw-bold);
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Pill row */
.settings-pills {
  display: flex;
  gap:     var(--space-tight);
}

/* Individual pill button */
.settings-theme-pill {
  flex:          1;
  padding:       6px 10px;
  border-radius: var(--radius-p-base);
  border:        1.5px solid var(--border);
  background:    transparent;
  color:         var(--muted);
  font-size:     var(--fs-p-base);  /* 13px */
  font-weight:   var(--fw-semibold);
  cursor:        pointer;
  transition:    all var(--duration-pace); /* OPT-3 */
  white-space:   nowrap;
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-narrow);
}

.settings-theme-pill:hover {
  border-color: var(--accent);
  color:        var(--accent);
}

.settings-theme-pill--active {
  background:   var(--accent-pill-active);    /* OPT-1: was rgba(61,139,212,0.1) */
  border-color: var(--accent);
  color:        var(--accent);
}

/* Dark theme overrides for settings pill selector */
html[data-theme="dark"] .settings-label {
  color: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .settings-theme-pill {
  border-color: rgba(255, 255, 255, 0.12);
  color:        rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .settings-theme-pill:hover {
  border-color: var(--accent);
  color:        var(--accent);
}

html[data-theme="dark"] .settings-theme-pill--active {
  background:   var(--accent-pill-active-dark); /* OPT-1: was rgba(61,139,212,0.15) */
  border-color: var(--accent);
  color:        var(--accent);
}

/* Fixed-dark pages (enginuity.html, partners.html) ──────────────────
   Currently use body.page-dark as a temporary dark baseline.
   Light theme variants for these pages are planned — the gear icon
   must remain visible so the theme toggle is accessible site-wide.
   Do NOT suppress .nav-item--icon here.
   ─────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────
   15. COMMON CLASSES
   Reusable utility classes available to any page.
   All values reference tokens only — no hard-coded values.
   Property order: font-size → font-weight → font-family → color → other.
   ─────────────────────────────────────────────────────────────────── */

/* Text scale utilities — maps to --fs-text-* semantic aliases */
.text-2xs  { font-size: var(--fs-text-2xs); }   /* 10px */
.text-xs   { font-size: var(--fs-text-xs);  }   /* 11px */
.text-sm   { font-size: var(--fs-text-sm);  }   /* 12px */
.text-base { font-size: var(--fs-text-base); }  /* 13px */
.text-md   { font-size: var(--fs-text-md);  }   /* 14px */
.text-lg   { font-size: var(--fs-text-lg);  }   /* 15px */
.text-xl   { font-size: var(--fs-text-xl);  }   /* 18px */
.text-2xl  { font-size: var(--fs-text-2xl); }   /* 20px */
.text-3xl  { font-size: var(--fs-text-3xl); }   /* 23px */
.text-4xl  { font-size: var(--fs-text-4xl); }   /* 25px */
.text-5xl  { font-size: var(--fs-text-5xl); }   /* 28px */

/* Font weight utilities */
.fw-light     { font-weight: var(--fw-light);     }  /* 300 */
.fw-regular   { font-weight: var(--fw-regular);   }  /* 400 */
.fw-medium    { font-weight: var(--fw-medium);    }  /* 500 */
.fw-semibold  { font-weight: var(--fw-semibold);  }  /* 600 */
.fw-bold      { font-weight: var(--fw-bold);      }  /* 700 */
.fw-extrabold { font-weight: var(--fw-extrabold); }  /* 800 */

/* Color utilities */
.text-muted  { color: var(--muted);  }   /* secondary / supporting text */
.text-accent { color: var(--accent); }   /* brand blue highlight */
.text-nav    { color: var(--navy);   }   /* dark heading color */

/* Eyebrow — shared uppercase label pattern (used on index, docs, partners) */
/* → used in place of duplicated eyebrow rules across page CSS files */
.eyebrow-label {
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-semibold);
  font-family:    var(--font-mono);
  color:          var(--muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Accent eyebrow variant — same pattern with accent color */
.eyebrow {
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-semibold);
  color:          var(--accent);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  margin-bottom:  var(--space-3xl);            /* consistent spacing across all eyebrow usages */
}

/* Oracle Partner logo in main nav (right side) — matches contact-header__oracle */
.epi-nav__oracle {
  height: 32px;
  width: auto;
  margin-left: 24px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .epi-nav__oracle { height: 28px; margin-left: 12px; }
}

/* ── Tab-bar overflow: ··· button + dropdown menu ───────────────── */
.epi-nav__overflow { position: relative; }
.epi-nav__overflow-btn {
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
}
.epi-nav__overflow-count {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
  vertical-align: middle;
}
.epi-nav__overflow-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 4px 0 0 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 220px;
  z-index: 200;
  display: none;
}
.epi-nav__overflow.is-open .epi-nav__overflow-menu { display: block; }
.epi-nav__overflow-menu li { list-style: none; margin: 0; }
.epi-nav__overflow-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
}
.epi-nav__overflow-menu a:hover { background: rgba(0, 102, 204, 0.08); color: #0066cc; }

[data-theme="dark"] .epi-nav__overflow-menu {
  background: #1a2332;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .epi-nav__overflow-menu a { color: #f0f2f5; }
[data-theme="dark"] .epi-nav__overflow-menu a:hover { background: rgba(111, 179, 255, 0.12); color: #6fb3ff; }