/**
 * ValixData — Mobile-First CSS  v141
 *
 * SINGLE SOURCE OF TRUTH for mobile on every page.
 * Loaded via nd-nav.php (all PHP pages) and nd-global-nav.js (all HTML pages).
 * Any HTML change auto-inherits these rules — one file to edit.
 *
 * SELECTOR DISCIPLINE:
 *   #nd-nav         → site nav (PHP pages and HTML pages via nd-global-nav.js)
 *   nav (no id)     → terminal desk nav (inside /valixdata_platform/)
 *   .app-layout     → terminal desk layout
 *   .container      → site page content wrapper
 *
 * BREAKPOINTS (mobile-first, min-width):
 *   default         → 375px  (iPhone SE — designed for this)
 *   480px           → large phone / phone landscape
 *   768px           → tablet portrait
 *   1024px          → tablet landscape / small laptop
 *   1280px          → standard laptop
 *
 * @media (max-width: N) overrides for progressive enhancement above 375px.
 */

/* ─────────────────────────────────────────────────────────────────────
   0. GLOBAL RESETS  (apply everywhere, all screen sizes)
   ───────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stop iOS from zooming on input focus — must be exactly 16px */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px;
}

/* Safe-area padding on elements that touch screen edges */
.nd-footer,
#nd-bottom-nav,
.terminal-mobile-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }


/* ─────────────────────────────────────────────────────────────────────
   1. SITE BOTTOM NAV  (#nd-bottom-nav)
   Used on PHP site pages only. Hidden by default, shown ≤768px.
   Terminal pages have their own .terminal-mobile-bar — no conflict.
   ───────────────────────────────────────────────────────────────────── */

#nd-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(4, 9, 20, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 490;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  align-items: center;
  justify-content: space-around;
}

.nd-bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: rgba(138,150,166,.65);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  min-height: 44px;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.nd-bn-item.active { color: #C4A23A; }
.nd-bn-item:active  { color: #E8C96A; }
.nd-bn-icon { font-size: 17px; line-height: 1; }


/* ─────────────────────────────────────────────────────────────────────
   2. SITE PAGES — layout at ≤768px
   Targets: PHP pages using #nd-nav, .container, .nd-nav-inner
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Show bottom nav, add body padding so content clears it */
  #nd-bottom-nav { display: flex; }
  body:not(.nd-terminal-page) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Site nav bar ── */
  #nd-nav { height: 54px !important; }
  .nd-nav-inner { padding: 0 16px !important; gap: 8px !important; }

  /* Hide desktop nav groups */
  .nd-links         { display: none !important; }
  .nd-aria-hint     { display: none !important; }
  .nd-sep           { display: none !important; }
  .nd-right .nd-btn:not(.nd-gold) { display: none !important; }

  /* Logo compact */
  .nd-logo        { font-size: 20px !important; }
  .nd-logo-badge  { font-size: 7px !important; padding: 2px 5px !important; }

  /* CTA compact */
  .nd-btn.nd-gold {
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Show burger */
  #nd-burger { display: flex !important; }

  /* Ticker smaller */
  #nd-ticker { height: 24px !important; }
  .nd-ticker-label {
    font-size: 7px !important;
    padding: 0 8px 0 14px !important;
  }
  .nd-ti { padding: 0 10px !important; font-size: 9px !important; }

  /* Content containers */
  .container,
  .container-wide {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Homepage ── */
  #hero { padding: 40px 0 36px !important; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 28px !important;
  }
  .hero-terminal    { display: none !important; }
  .hero-h1 {
    font-size: clamp(28px, 7.5vw, 42px) !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
  }
  .hero-sub         { font-size: 15px !important; max-width: 100% !important; }
  .hero-actions     { justify-content: center; flex-wrap: wrap; gap: 10px !important; }
  .hero-social-proof{ justify-content: center; flex-wrap: wrap; gap: 10px !important; }
  .hero-human       { text-align: center; }

  /* Sections */
  .section { padding: 52px 0 !important; }
  .section-title, .section-h {
    font-size: clamp(24px, 6.5vw, 38px) !important;
  }

  /* All multi-col grids → single column */
  .for-grid,
  .cap-grid,
  .diff-grid,
  .steps-grid,
  .proof-grid,
  .tm-grid,
  .social-proof-grid,
  .prev-grid { grid-template-columns: 1fr !important; }

  .terminals-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-grid      { grid-template-columns: repeat(2, 1fr) !important; }

  /* Diff section */
  .diff-col.bad {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* NOVA subscribe */
  .nova-subscribe-strip,
  .subscribe-strip {
    flex-direction: column !important;
    text-align: center;
    gap: 14px !important;
    padding: 24px 16px !important;
  }
  .nova-form         { flex-direction: column !important; border-radius: 10px !important; gap: 8px !important; }
  .nova-form input   { border-radius: 8px !important; width: 100% !important; }
  .nova-form-btn     { width: 100% !important; border-radius: 8px !important; padding: 14px !important; }

  /* Demo */
  .demo-topics { flex-wrap: wrap; gap: 6px !important; }
  .demo-topic  { flex: 1 1 calc(50% - 4px); min-width: 0; }

  /* ── Pricing ── */
  .plans-wrap,
  .teams-wrap     { padding: 0 16px !important; }
  .plans-grid     { grid-template-columns: 1fr !important; }
  .teams-grid     { grid-template-columns: 1fr !important; }
  .plan-card      { padding: 24px 18px !important; }
  .plan-price     { font-size: clamp(34px, 9vw, 50px) !important; }
  .pricing-hero,
  .pg-hero        { padding: 44px 16px 36px !important; }
  .pg-h1          { font-size: clamp(26px, 7vw, 40px) !important; text-align: center; }
  .toggle-wrap    { justify-content: center; flex-wrap: wrap; }

  /* ── Register / Login ── */
  .auth-layout,
  .reg-layout,
  .login-layout {
    grid-template-columns: 1fr !important;
    min-height: 100dvh;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 20px 16px;
  }
  .auth-panel-left,
  .reg-panel-left,
  .login-panel-left { display: none !important; }
  .auth-card,
  .reg-card,
  .login-card {
    padding: 28px 20px !important;
    border-radius: 16px !important;
    max-width: 440px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .auth-title,
  .reg-title,
  .login-title    { font-size: clamp(22px, 6vw, 28px) !important; }
  .auth-btn,
  .reg-btn,
  .login-btn      { padding: 16px !important; font-size: 15px !important; width: 100%; }

  /* Onboarding */
  .tools-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .tool-card      { padding: 12px 10px !important; }
  .submit-btn     { width: 100% !important; padding: 16px !important; }

  /* ── Account / Billing ── */
  .acct-layout    { grid-template-columns: 1fr !important; }
  .acct-sidebar   { display: none !important; }
  .acct-tabs,
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding-bottom: 1px;
  }
  .acct-tabs::-webkit-scrollbar,
  .tab-nav::-webkit-scrollbar { display: none; }
  .acct-tab       { flex-shrink: 0; }
  .acct-card,
  .settings-card  { padding: 18px 16px !important; }
  .acct-field-row { flex-direction: column !important; gap: 8px !important; }
  .billing-summary{ grid-template-columns: 1fr !important; }
  .invoice-table  { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .plan-cards-grid{ grid-template-columns: 1fr !important; }

  /* ── Watch Alerts ── */
  .watch-grid,
  .alerts-grid    { grid-template-columns: 1fr !important; }
  .watch-hero h1  { font-size: clamp(24px, 7vw, 36px) !important; text-align: center; }
  .preset-chips   { flex-wrap: wrap; gap: 6px !important; }
  .preset-chip    { flex: 1 1 calc(50% - 4px); text-align: center; min-height: 44px; }
  .alert-card,
  .watch-row      { padding: 14px !important; }
  .alert-actions  { flex-direction: column !important; gap: 8px !important; }
  .alert-actions button { width: 100%; }

  /* ── Desks page ── */
  .desks-hero h1  { font-size: clamp(24px, 7vw, 38px) !important; text-align: center; }
  .desks-hero p   { text-align: center; }
  .desks-filters  { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .dg             { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 8px !important; }

  /* ── Help / FAQ / Contact ── */
  .help-wrap,
  .faq-wrap,
  .hc-wrap        { padding: 32px 16px 56px !important; }
  .help-title,
  .faq-h1,
  .hc-hero h1     { font-size: clamp(24px, 7vw, 36px) !important; text-align: center; }
  .help-cats,
  .faq-cats       { flex-wrap: wrap; gap: 6px; }
  .hc-cats        { grid-template-columns: repeat(2, 1fr) !important; }
  .hc-contact     { padding: 20px 14px !important; }

  /* ── Footer ── */
  .nd-footer-main,
  .footer-main    { padding: 36px 16px 16px !important; }
  .ndf-grid       { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
  .ndf-grid > div:first-child { grid-column: 1 / -1; }
  .ndf-bottom-inner {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center;
  }
  .ndf-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* ── Marketing pages (/pages/*.html) ── */
  .page-wrap,
  .content-wrap,
  .inner-wrap     { padding: 0 16px !important; }
  .hero-section,
  .page-hero      { padding: 44px 16px 36px !important; }
  .hero-section h1,
  .page-hero h1   {
    font-size: clamp(24px, 7vw, 38px) !important;
    text-align: center;
    letter-spacing: -0.3px !important;
  }
  .hero-section p,
  .page-hero p    { text-align: center; font-size: 15px !important; }
  .hero-cta-row,
  .cta-row        { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-btn,
  .btn-cta        { width: 100%; text-align: center; padding: 14px 20px !important; }
  .features-grid,
  .benefits-grid,
  .roles-grid,
  .use-cases-grid { grid-template-columns: 1fr !important; }
  .comparison-grid,
  .vs-grid        { grid-template-columns: 1fr !important; }
  .stat-row,
  .stats-row      { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Touch targets — minimum 44×44px ── */
  a[href],
  button,
  [role="button"],
  .nd-btn,
  .plan-cta,
  .help-cat,
  .faq-cat,
  .hc-cat,
  .preset-chip,
  .for-cta-wrap a,
  .dg a,
  .tb-btn,
  .sb-item,
  .mode-btn,
  .panel-action,
  .nd-mob-link,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Kill hover transforms on touch ── */
  .for-card:hover,
  .proof-card:hover,
  .plan-card:hover,
  .cap-cell:hover,
  .desk-card:hover,
  .kpi-cell:hover { transform: none !important; }

  /* ── Tables ── */
  table           { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table { display: block; overflow-x: auto; }

  /* ── Modals → bottom sheet on mobile ── */
  .nd-modal,
  .overlay,
  .modal          {
    align-items: flex-end !important;
    padding: 0 !important;
    justify-content: flex-end !important;
  }
  .nd-modal-box,
  .modal-inner,
  .modal-content  {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Nav dropdown → full width ── */
  .nd-drop {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    top: 68px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   3. SMALL PHONE  (≤430px)
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 430px) {
  .container,
  .container-wide { padding-left: 14px !important; padding-right: 14px !important; }

  .nd-logo-badge  { display: none !important; }
  .nd-btn.nd-gold { display: none !important; }

  .hero-h1        { font-size: clamp(26px, 7.5vw, 34px) !important; }
  .hero-actions   { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center !important; }

  .trust-grid,
  .terminals-grid { grid-template-columns: 1fr !important; }
  .demo-topic     { flex: 1 1 100%; }

  .dg             { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }

  .ndf-grid       { grid-template-columns: 1fr !important; gap: 20px !important; }
  .nd-footer-main,
  .footer-main    { padding: 28px 14px 12px !important; }

  .help-cats,
  .faq-cats       { display: none; }
  .hc-cats        { grid-template-columns: 1fr !important; }

  .auth-card,
  .reg-card,
  .login-card     { padding: 22px 16px !important; }
  .tools-grid     { grid-template-columns: 1fr !important; }

  .stat-row,
  .stats-row      { grid-template-columns: 1fr !important; }

  .preset-chip    { flex: 1 1 100%; }
}


/* ─────────────────────────────────────────────────────────────────────
   4. TERMINAL DESK PAGES  (body[data-terminal])
   All selectors scoped with body[data-terminal] — no bleed to site pages.
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  /* Nav: compact — logo + terminal pill + burger only */
  body[data-terminal] #nd-terminal-nav {
    padding: 0 14px !important;
    height: 54px !important;
    gap: 10px !important;
  }
  body[data-terminal] .nav-aria-wrap         { display: none !important; }
  body[data-terminal] .nav-toolbar           { display: none !important; }
  body[data-terminal] .nav-right .plan-badge { display: none !important; }
  body[data-terminal] .nav-right .notif-btn  { display: none !important; }
  body[data-terminal] .nd-platform-drop      { display: none !important; }

  /* Ticker: smaller, still visible */
  body[data-terminal] .ticker-bar   { height: 24px !important; }
  body[data-terminal] .ticker-label { font-size: 7px !important; padding: 0 8px 0 12px !important; }
  body[data-terminal] .ticker-item  { font-size: 9px !important; padding: 0 12px !important; }

  /* App layout: single column */
  body[data-terminal] .app-layout {
    grid-template-columns: 1fr !important;
    min-height: calc(100dvh - 54px - 24px);
  }
  body[data-terminal] .sidebar,
  body[data-terminal] .right-panel { display: none !important; }

  /* Main — clear trial banner (~52px) + mobile bar (~56px) + buffer */
  body[data-terminal] .main {
    padding: 12px 14px !important;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* KPI grid: 4→2 columns */
  body[data-terminal] .kpi-grid { gap: 1px !important; }
  body[data-terminal] .kg-4,
  body[data-terminal] .kg-3     { grid-template-columns: repeat(2, 1fr) !important; }
  body[data-terminal] .kpi-cell {
    padding: 12px 10px !important;
    min-height: 72px;
  }
  body[data-terminal] .kpi-val  {
    font-size: clamp(15px, 4.5vw, 22px) !important;
    line-height: 1.1 !important;
  }
  body[data-terminal] .kpi-label { font-size: 8px !important; margin-bottom: 4px !important; }
  body[data-terminal] .kpi-chg   { font-size: 10px !important; }
  body[data-terminal] .kpi-sub   { display: none !important; }
  body[data-terminal] .kpi-hover-actions { display: none !important; }

  /* Panels */
  body[data-terminal] .panel      { border-radius: 8px !important; }
  body[data-terminal] .panel-head {
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  body[data-terminal] .panel-title  { font-size: 12px !important; }
  body[data-terminal] .panel-action { font-size: 10px !important; min-height: 44px; }
  body[data-terminal] .panel-body   { padding: 0 !important; }

  /* Tabs: horizontal scroll */
  body[data-terminal] .desk-tabs,
  body[data-terminal] .tab-bar,
  body[data-terminal] .tab-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-wrap: nowrap;
  }
  body[data-terminal] .desk-tabs::-webkit-scrollbar,
  body[data-terminal] .tab-bar::-webkit-scrollbar { display: none; }
  body[data-terminal] .desk-tab,
  body[data-terminal] .tab { flex-shrink: 0 !important; }

  /* Mode bar: scrollable */
  body[data-terminal] .mode-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  body[data-terminal] .mode-bar::-webkit-scrollbar { display: none; }
  body[data-terminal] .mode-btn { flex-shrink: 0 !important; }

  /* Tables: horizontal scroll */
  body[data-terminal] .spread-stack,
  body[data-terminal] .lbo-grid,
  body[data-terminal] table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  /* News: single column */
  body[data-terminal] .news-grid,
  body[data-terminal] .signal-grid { grid-template-columns: 1fr !important; }

  /* Window conditions: hide on mobile */
  body[data-terminal] .win-conditions { display: none !important; }

  /* Trial banner sits ABOVE the mobile bar */
  body[data-terminal] #nd-trial-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9000 !important;
  }

  /* Bottom action bar */
  body[data-terminal] .terminal-mobile-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 6px 4px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 400 !important;
    min-height: 56px;
  }
  body[data-terminal] .dmb-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    flex: 1 !important;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 520px) {
  body[data-terminal] .kg-4,
  body[data-terminal] .kg-3     { grid-template-columns: repeat(2, 1fr) !important; }
  body[data-terminal] .kpi-cell { padding: 10px 8px !important; min-height: 66px; }
  body[data-terminal] .kpi-val  { font-size: clamp(14px, 4.5vw, 19px) !important; }
  body[data-terminal] .main     { padding: 8px 10px !important; }

  body[data-terminal] .lbo-grid,
  body[data-terminal] .spread-stack { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  body[data-terminal] .panel-head  { padding: 10px 10px !important; }
  body[data-terminal] .panel-title { font-size: 11px !important; }
}

@media (max-width: 375px) {
  body[data-terminal] .kpi-val  { font-size: 13px !important; }
  body[data-terminal] .kpi-cell { padding: 8px 6px !important; }
  body[data-terminal] .main     { padding: 6px 8px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   5. TABLET (768px – 1024px)
   ───────────────────────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-grid      { grid-template-columns: 1fr 1fr !important; }
  .for-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .plans-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .terminals-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .features-grid,
  .benefits-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-row,
  .stats-row      { grid-template-columns: repeat(3, 1fr) !important; }

  /* Terminal: KPI 3 columns at tablet */
  .kg-4           { grid-template-columns: repeat(3, 1fr) !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   5b. ARIA MOBILE FULL-SCREEN OVERLAY  (#nd-aria-mobile)
   Slides up from bottom on terminal pages at ≤900px.
   Triggered by bottom bar ARIA button via ndOpenMobileAria().
   ───────────────────────────────────────────────────────────────────── */

#nd-aria-mobile {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 90dvh;
  background: #060D1A;
  border-top: 1px solid rgba(196,162,58,0.2);
  border-radius: 20px 20px 0 0;
  z-index: 8000;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#nd-aria-mobile.open {
  display: flex;
  animation: nd-slide-up 0.25s ease;
}
@keyframes nd-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Header bar */
#nd-aria-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
#nd-aria-mobile-head .aria-mob-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #C4A23A;
  font-family: 'DM Mono', monospace;
}
#nd-aria-mobile-close {
  background: transparent;
  border: none;
  color: rgba(138,150,166,0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
}

/* Conversation history */
#nd-aria-mobile-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  font-size: 13px;
  color: #BDB8AE;
  line-height: 1.65;
}

/* Input row at bottom */
#nd-aria-mobile-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #060D1A;
  flex-shrink: 0;
}
#nd-aria-mobile-inp {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,162,58,0.25);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px; /* prevent iOS zoom */
  color: #EDE8DC;
  font-family: 'DM Mono', monospace;
  outline: none;
  -webkit-appearance: none;
}
#nd-aria-mobile-inp:focus {
  border-color: rgba(196,162,58,0.5);
}
#nd-aria-mobile-send {
  background: #C4A23A;
  border: none;
  border-radius: 8px;
  color: #060D1A;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  font-family: 'DM Mono', monospace;
}
#nd-aria-mobile-send:active { background: #E8C96A; }


/* ─────────────────────────────────────────────────────────────────────
   6. PRINT
   ───────────────────────────────────────────────────────────────────── */

@media print {
  #nd-nav,
  #nd-ticker,
  #nd-mob,
  #nd-bottom-nav,
  .nd-footer,
  #nd-terminal-nav,
  #nd-burger,
  .terminal-mobile-bar { display: none !important; }

  body {
    background: white !important;
    color: black !important;
    padding-bottom: 0 !important;
  }
  a { color: black !important; }
  .container,
  .container-wide { max-width: 100% !important; padding: 0 !important; }
  .app-layout     { grid-template-columns: 1fr !important; }
  .sidebar        { display: none !important; }
}

/* ── Fixed nav offset for mobile ─────────────────────────────────────── */
/* Site pages use a fixed #nd-nav — body needs top padding so content clears it.
   Terminal pages use a sticky nav (not fixed) — they must NOT get this offset
   or there's a phantom gap at the top. Terminal pages have data-terminal on <body>. */
@media (max-width: 768px) {
  /* Mobile: ticker 24px + nav 54px = 78px */
  body:not([data-terminal]) { padding-top: 78px !important; }
  .nd-mega-panel { top: 78px !important; }
}
@media (max-width: 430px) {
  /* No ticker at this size, nav 54px only */
  body:not([data-terminal]) { padding-top: 54px !important; }
}

/* Terminal pages: #nd-nav is normally top:28px (below site ticker).
   No site ticker on terminals → push it flush to the very top. */
body[data-terminal] #nd-nav {
  top: 0 !important;
}

/* Terminal pages: no marketing ticker, so offset is nav only (62px) */
body[data-terminal] { padding-top: 62px !important; }

/* Terminal nav: full-width — remove the 1200px centered wrapper */
body[data-terminal] #nd-nav .nd-nav-inner {
  max-width: 100% !important;
  padding: 0 24px !important;
}

/* Profession ticker: full-width, slow scroll */
body[data-terminal] .ticker-bar {
  width: 100% !important;
}
body[data-terminal] .ticker-scroll {
  animation-duration: 260s !important;
}

/* Terminal nav bar sits sticky directly below the marketing nav */
body[data-terminal] #nd-terminal-nav {
  position: sticky !important;
  top: 62px;
  z-index: 490 !important;
}
@media (max-width: 768px) {
  /* Mobile: nav compact = 54px, no ticker */
  body[data-terminal]                  { padding-top: 54px !important; }
  body[data-terminal] #nd-terminal-nav { top: 54px; }
}



/* Desktop: ARIA btn at bottom-right, float bubble to its left */
#nd-ae-btn    { bottom: 24px !important; right: 24px !important; }
#nd-aria-float { right: 174px !important; }    /* left of 130px btn + 20px gap */
#nd-ae-panel  { bottom: 90px !important; right: 24px !important; }
#nd-voice-status { bottom: 90px !important; right: 180px !important; }

/* Mobile: raise above the 56px bottom nav */
@media (max-width: 768px) {
  #nd-ae-btn    { bottom: 76px !important; right: 16px !important; }
  #nd-ae-panel  { bottom: 148px !important; right: 0 !important; width: 100vw !important; border-radius: 16px 16px 0 0 !important; }
  #nd-aria-float { bottom: 76px !important; right: calc(100vw - 80px) !important; }
  #nd-voice-status { bottom: 140px !important; }
  #nd-shortcut-card { bottom: 76px !important; }
  #nd-toast     { bottom: 76px !important; }
}
@media (max-width: 430px) {
  #nd-ae-btn    { bottom: 72px !important; right: 12px !important; min-width: unset !important; padding: 10px 16px 10px 12px !important; }
  #nd-aria-float { display: none !important; }   /* too cluttered on small phones */
}

/* ════════════════════════════════════════════════════════════════════════
   ARIA BOTTOM-RIGHT STACKING  — definitive layout
   Trial banner is 52px tall at bottom. Everything clears it.
   ════════════════════════════════════════════════════════════════════════ */

/* Kill the terminal's own .aria-float — nd-ae-btn replaces it */
.aria-float { display: none !important; }
#nd-aria-toggle { display: none !important; }

/* #nd-aria-float: visible on desktop, hidden only on small phones (too cluttered) */
@media (max-width: 430px) {
  #nd-aria-float { display: none !important; }
}

/* ARIA button — primary entry point, always visible */
#nd-ae-btn {
  bottom: 72px !important;   /* 52px trial banner + 20px gap */
  right: 24px !important;
  z-index: 9998 !important;
}

/* ARIA chat panel — opens above button */
#nd-ae-panel {
  bottom: 138px !important;  /* 72px btn-bottom + 66px btn-height */
  right: 24px !important;
  z-index: 9999 !important;
}

/* Voice status — to the left of the button */
#nd-voice-status {
  bottom: 72px !important;
  right: 180px !important;
}

/* Toast notifications — above trial banner */
#nd-toast { bottom: 72px !important; }
#nd-shortcut-card { bottom: 72px !important; }

/* Trial banner stays at bottom:0 */
#nd-trial-banner { bottom: 0 !important; z-index: 9000 !important; }

/* On terminal pages with the mobile action bar, the trial banner must sit ABOVE
   the action bar so ARIA/Brief/Report buttons remain tappable.
   .terminal-mobile-bar is ~56px tall. */
@media (max-width: 900px) {
  body[data-terminal] #nd-trial-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Main content clears both bars (terminal bar ~56px + trial banner ~52px + gap) */
  body[data-terminal] .main {
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile: above mobile nav bar (56px) AND trial banner */
@media (max-width: 768px) {
  #nd-ae-btn   { bottom: 130px !important; right: 16px !important; }
  #nd-ae-panel {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 70vh !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 9999 !important;
  }
  #nd-voice-status { bottom: 196px !important; }
  #nd-toast { bottom: 130px !important; }
}

@media (max-width: 430px) {
  #nd-ae-btn {
    bottom: 126px !important;
    right: 12px !important;
    min-width: unset !important;
    padding: 10px 14px !important;
  }
}