/* Generated by scripts/prerenderSeo.js — do not edit.
 * The CSS the prerendered marketing pages need, in import order, so a
 * crawler (and a reader with JavaScript off) gets a styled page before the
 * bundle runs. The bundle re-injects the same rules on mount.
 */

/* css/theme.css */
/* ============================================
   NEXUS THEME SYSTEM
   CSS Variables for Light/Dark Mode
   ============================================ */

/* Default theme (Dark Mode) */
:root {
  /* === Background Colors === */
  --bg-primary: #14120b; 
  --bg-inverse: #080707;           /* Main page background */
  --bg-secondary: #171717;          /* Cards, panels, elevated surfaces */
  --bg-tertiary: #1b1b1b;           /* Slightly elevated elements */
  --bg-elevated: #202020;           /* Higher elevation surfaces */
  --bg-surface: #2a2a2a;            /* Form inputs, interactive surfaces */
  --bg-hover: #333333;              /* Hover states */
  --bg-active: #444444;             /* Active/pressed states */
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --bg-warning: #ffc1072d;
  --bg-landing-primary: #1b1913; /* Modal overlays */
  
  /* === Text Colors === */
  --text-primary: #ffffff;          /* Main text */
  --text-secondary: #cccccc;        /* Secondary text */
  --text-tertiary: #aaaaaa;         /* Muted text */
  --text-quaternary: #777777;       /* Very muted text */
  --text-inverse: #111111;          /* Text on light backgrounds */
  
  /* === Border Colors === */
  --border-primary: #333333;        /* Main borders */
  --border-secondary: #444444;      /* Secondary borders */
  --border-tertiary: #555555;       /* Tertiary borders */
  --border-light: #1f2937;          /* Subtle borders */
  
  /* === Accent Colors === */
  --accent-primary: lightskyblue;   /* Primary accent (links, highlights) */
  --accent-secondary: orange;        /* Secondary accent (CTAs, important) */
  --accent-success: #17ae51;         /* Success states */
  --accent-error: rgb(255, 65, 65);  /* Error states */
  --accent-warning: #ffc107;         /* Warning states */
  --accent-info: #17a2b8;            /* Info states */
  --accent-purple: #8C4BFF;          /* Brand purple */
  --accent-blue: #4285f4;    
  --accent-orange: orange;        /* Blue accent */
  
  /* === Button Colors === */
  --btn-primary-bg: #8C4BFF;
  --btn-primary-hover: #7339d6;
  --btn-secondary-bg: #171717;
  --btn-secondary-hover: #272727;
  --btn-success-bg: #17ae51;
  --btn-success-hover: #138a40;
  --btn-danger-bg: rgb(255, 65, 65);
  --btn-danger-hover: #dc3545;
  --btn-landing-bg: white;
  
  /* === Input Colors === */
  --input-bg: #333333;
  --input-bg-focus: #555555;
  --input-border: #444444;
  --input-border-focus: orange;
  --input-placeholder: #aaaaaa;
  
  /* === Shadow Colors === */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  
  /* === Glass Effect Colors (for landing page) === */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.25);
  
  /* === Specific Component Colors === */
  --header-bg: transparent;
  --footer-bg: #171717;
  --modal-bg: rgba(0, 0, 0, 0.8);
  --card-bg: #171717;
  --sidebar-bg: #171717;
  --menu-hover: rgb(17, 17, 17);
  
  /* === Status Colors === */
  --status-active-bg: #e8f5e9;
  --status-active-text: #2e7d32;
  --status-inactive-bg: #f5f5f5;
  --status-inactive-text: #616161;
  --status-pending-bg: #ff8833;
  --status-pending-text: #ffffff;
  
  /* === Gradient Colors === */
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #a855f7 100%);
  --gradient-text: linear-gradient(27deg, #1fa2ff 19%, rgb(13, 13, 201) 30%, #c71585 50%, magenta 70%, #ff4500 79%, #1fa2ff 100%);
  
  /* === Scrollbar Colors === */
  --scrollbar-track: #1a1a1a;
  --scrollbar-thumb: #444444;
  --scrollbar-thumb-hover: #555555;
  
  /* === Toggle specific === */
  --toggle-bg: #333333;
  --toggle-slider: #ffffff;
  
  /* === Legacy Variable Mappings (for backward compatibility) === */
  --bg-color: var(--bg-primary);
  --text-color: var(--text-primary);
  --primary-color: var(--accent-blue);
  --secondary-color: lightskyblue;
  --accent-color: var(--accent-secondary);
  --header-bg-color: var(--bg-secondary);
  --card-bg-color: var(--card-bg);
  --border-color: var(--border-primary);
  --input-bg-color: var(--input-bg);
  --input-text-color: var(--text-primary);
  --button-bg-color: var(--btn-primary-bg);
  --button-text-color: var(--text-primary);
  --link-color: var(--accent-primary);
  --hover-bg-color: var(--bg-hover);
  --secondary-bg-color: var(--bg-secondary);
  --tertiary-bg-color: var(--bg-tertiary);
  --modal-bg-color: var(--modal-bg);
  --modal-content-bg-color: var(--bg-secondary);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --success-color: var(--accent-success);
  --error-color: var(--accent-error);
  --warning-color: var(--accent-warning);
  --info-color: var(--accent-info);
}

/* Light Mode */
[data-theme="light"] {
  /* === Background Colors === */
  --bg-primary: white;            /* Main page background - slightly gray */
  --bg-primary-transparent: rgba(255, 255, 255, 0.8);
  --bg-secondary: #e0e2e5;           /* Cards, panels - grayish for contrast */
  --bg-tertiary: #f2f2f2;            /* Slightly elevated elements */
  --bg-elevated: #ffffff;            /* Higher elevation surfaces */
  --bg-surface: #f5f5f5;             /* Form inputs, interactive surfaces */
  --bg-hover: #d8dade;               /* Hover states */
  --bg-active: #c8cacd;              /* Active/pressed states */
  --bg-overlay: rgba(0, 0, 0, 0.5); 
  --bg-landing-primary: #f7f7f4; /* Modal overlays */
  
  /* === Text Colors === */
  --text-primary: #1a1a1a;           /* Main text - slightly softer black */
  --text-secondary: #4a4a4a;         /* Secondary text */
  --text-tertiary: #6b6b6b;          /* Muted text */
  --text-quaternary: #8c8c8c;        /* Very muted text */
  --text-inverse: #ffffff;           /* Text on dark backgrounds */
  
  /* === Border Colors === */
  --border-primary: #c5c7ca;         /* Main borders - visible on gray bg */
  --border-secondary: #b5b7ba;       /* Secondary borders */
  --border-tertiary: #a5a7aa;        /* Tertiary borders */
  --border-light: #d5d7da;           /* Subtle borders */
  
  /* === Accent Colors === */
  --accent-primary: #0066cc;         /* Primary accent - darker for contrast */
  --accent-secondary: #d96800;       /* Secondary accent - darker orange */
  --accent-success: #00be46;         /* Success states */
  --accent-error: #dc2626;           /* Error states */
  --accent-warning: #d97706;         /* Warning states */
  --accent-info: #0891b2;            /* Info states */
  --accent-purple: #7c3aed;          /* Brand purple */
  --accent-blue: #2563eb;    
  --accent-orange: orange;        /* Blue accent */
  
  /* === Button Colors === */
  --btn-primary-bg: #7c3aed;
  --btn-primary-hover: #6d28d9;
  --btn-secondary-bg: #e0e2e5;
  --btn-secondary-hover: #d0d2d5;
  --btn-success-bg: #15803d;
  --btn-success-hover: #166534;
  --btn-danger-bg: #dc2626;
  --btn-danger-hover: #b91c1c;
  --btn-landing-bg: #4a4a4a;
  
  /* === Input Colors === */
  --input-bg: #ffffff;
  --input-bg-focus: #ffffff;
  --input-border: #c0c2c5;
  --input-border-focus: #7c3aed;
  --input-placeholder: #8c8c8c;
  
  /* === Shadow Colors === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* === Glass Effect Colors === */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.12);
  --glass-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
  
  /* === Specific Component Colors === */
  --header-bg: rgba(240, 242, 245, 0.95);
  --footer-bg: #e8eaed;
  --modal-bg: rgba(0, 0, 0, 0.5);
  --card-bg: #e8eaed;                /* Gray cards for contrast */
  --sidebar-bg: #e0e2e5;             /* Gray sidebar */
  --menu-hover: #d0d2d5;
  
  /* === Status Colors === */
  --status-active-bg: #dcfce7;
  --status-active-text: #15803d;
  --status-inactive-bg: #e8eaed;
  --status-inactive-text: #6b7280;
  --status-pending-bg: #fed7aa;
  --status-pending-text: #9a3412;
  
  /* === Gradient Colors === */
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #a855f7 100%);
  --gradient-text: linear-gradient(27deg, #0066cc 19%, rgb(13, 13, 201) 30%, #c71585 50%, #d946ef 70%, #ea580c 79%, #0066cc 100%);
  
  /* === Scrollbar Colors === */
  --scrollbar-track: #e0e2e5;
  --scrollbar-thumb: #b0b2b5;
  --scrollbar-thumb-hover: #909295;
  
  /* === Toggle specific === */
  --toggle-bg: #d0d2d5;
  --toggle-slider: #7c3aed;
  
  /* === Legacy Variable Mappings (for backward compatibility) === */
  --bg-color: var(--bg-primary);
  --text-color: var(--text-primary);
  --primary-color: var(--accent-blue);
  --secondary-color: var(--accent-primary);
  --accent-color: var(--accent-secondary);
  --header-bg-color: var(--bg-secondary);
  --card-bg-color: var(--card-bg);
  --border-color: var(--border-primary);
  --input-bg-color: var(--input-bg);
  --input-text-color: var(--text-primary);
  --button-bg-color: var(--btn-primary-bg);
  --button-text-color: #ffffff;
  --link-color: var(--accent-primary);
  --hover-bg-color: var(--bg-hover);
  --secondary-bg-color: var(--bg-secondary);
  --tertiary-bg-color: var(--bg-tertiary);
  --modal-bg-color: var(--modal-bg);
  --modal-content-bg-color: var(--bg-elevated);
  --shadow-color: rgba(0, 0, 0, 0.15);
  --success-color: var(--accent-success);
  --error-color: var(--accent-error);
  --warning-color: var(--accent-warning);
  --info-color: var(--accent-info);
}

/* ============================================
   THEME TOGGLE BUTTON STYLES
   ============================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-primary);
  display: none;
}

.theme-toggle:hover {
  background: var(--bg-active);
  transform: scale(1.05);
}

.theme-toggle-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-toggle-icon {
  transform: rotate(20deg);
}

/* Sun icon for dark mode (clicking switches to light) */
[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

/* Moon icon for light mode (clicking switches to dark) */
[data-theme="light"] .theme-toggle .sun-icon {
  display: none;
}

[data-theme="light"] .theme-toggle .moon-icon {
  display: block;
}

/* Default state (no data-theme attribute = light mode) */
:root:not([data-theme]) .theme-toggle .sun-icon {
  display: none;
}

:root:not([data-theme]) .theme-toggle .moon-icon {
  display: block;
}

/* ============================================
   SMOOTH THEME TRANSITION
   ============================================ */

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}



/* css/HeaderMegaMenu.css */
.nexus-mega-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 30;
}

.nexus-mega-menu--open::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: min(760px, calc(100vw - 36px));
  height: 12px;
}

.nexus-mega-menu__trigger {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  border-radius: 10px;
  padding: 3px 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s;
}

.nexus-mega-menu__trigger:hover,
.nexus-mega-menu--open .nexus-mega-menu__trigger {
  background: transparent;
  color: var(--text-primary);
  transform: scale(1);
}

.nexus-mega-menu__trigger:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

.nexus-mega-menu__trigger-icon {
  width: 17px !important;
  height: 17px !important;
  color: var(--text-tertiary);
  transition: transform 180ms ease, color 180ms ease;
}

.nexus-mega-menu--open .nexus-mega-menu__trigger-icon {
  transform: rotate(180deg);
  color: var(--accent-primary);
}

.nexus-mega-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(760px, calc(100vw - 36px));
  color: var(--text-primary);
  border-radius: 8px;
  background: rgba(22, 22, 23, 0.97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  animation: nexusMegaMenuIn 170ms ease both;
  transform-origin: top left;
}

.nexus-mega-menu__panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.nexus-mega-menu__tabs,
.nexus-mega-menu__content {
  position: relative;
  z-index: 1;
}

.nexus-mega-menu__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 10px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.nexus-mega-menu__tab {
  appearance: none;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 10px 12px;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nexus-mega-menu__tab span {
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.nexus-mega-menu__tab:hover,
.nexus-mega-menu__tab--active {
  background: rgba(255, 255, 255, 0.105);
  color: var(--text-primary);
}

.nexus-mega-menu__tab:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.nexus-mega-menu__content {
  padding: 0 10px 10px;
}

.nexus-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.nexus-mega-menu__item {
  appearance: none;
  width: 100%;
  min-height: 76px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.nexus-mega-menu__item:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.nexus-mega-menu__item:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.nexus-mega-menu__item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-tertiary);
}

.nexus-mega-menu__item-icon svg {
  width: 19px;
  height: 19px;
}

.nexus-mega-menu__item-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.nexus-mega-menu__item-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: 0;
}

.nexus-mega-menu__item-description {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}

[data-theme="light"] .nexus-mega-menu__panel {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.13);
}

[data-theme="light"] .nexus-mega-menu__panel::before {
  background: rgba(17, 24, 39, 0.08);
}

[data-theme="light"] .nexus-mega-menu__tabs {
  background: rgba(255, 255, 255, 0.56);
}

[data-theme="light"] .nexus-mega-menu__trigger:hover,
[data-theme="light"] .nexus-mega-menu--open .nexus-mega-menu__trigger {
  background: transparent;
}

[data-theme="light"] .nexus-mega-menu__tab:hover,
[data-theme="light"] .nexus-mega-menu__tab--active,
[data-theme="light"] .nexus-mega-menu__item:hover {
  background: rgba(232, 236, 242, 0.86);
}

[data-theme="light"] .nexus-mega-menu__item-icon {
  background: transparent;
  color: var(--text-tertiary);
}

@keyframes nexusMegaMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1120px) {
  .nexus-mega-menu--open::after {
    left: -98px;
    width: min(760px, calc(100vw - 28px));
  }

  .nexus-mega-menu__panel {
    left: -98px;
    width: min(760px, calc(100vw - 28px));
  }
}

@media (max-width: 900px) {
  .nexus-mega-menu--open::after {
    left: -82px;
    width: min(720px, calc(100vw - 28px));
  }

  .nexus-mega-menu__panel {
    left: -82px;
    width: min(720px, calc(100vw - 28px));
  }
}

@media (max-width: 700px) {
  .header-public-nav-links {
    gap: 0;
    margin-left: 10px;
  }

  .header-public-nav-links > a {
    display: none;
  }

  .nexus-mega-menu {
    position: static;
  }

  .nexus-mega-menu--open::after {
    display: none;
  }

  .nexus-mega-menu__trigger {
    font-size: 14px;
    padding: 3px 7px;
  }

  .nexus-mega-menu__panel {
    left: 14px;
    right: 14px;
    width: auto;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    transform-origin: top center;
  }

  .nexus-mega-menu__tabs {
    grid-template-columns: 1fr;
  }

  .nexus-mega-menu__grid {
    grid-template-columns: 1fr;
  }

  .nexus-mega-menu__item {
    min-height: 0;
  }
}


/* css/siteFooter.css */
/* src/css/siteFooter.css — see components/Footer.js
 *
 * The site footer, rebuilt. The old one lived in common.css as a two-column
 * `auto auto` grid centred in the page: a logo stack on the left, three short
 * link columns on the right, nothing holding either of them together.
 *
 * WHAT CARRIES IT NOW. Structure, not decoration — no gradients, no tinted
 * cards, no coloured borders. A ruled column grid (each nav column hangs from a
 * hairline, the way a printed masthead does), one micro-cap label per column, a
 * meta rail under a second hairline, and the wordmark set huge and clipped by
 * the bottom edge at 5% contrast. Colour appears in exactly three places, all of
 * them state or brand: the logo, the heart, and a social mark on hover.
 *
 * ONE FOOTER, EVERYWHERE. This renders inside the product (dashboards, portals)
 * as well as on the marketing pages, and it is the SAME band on all of them —
 * full bleed on the page's own ground, same wordmark, same rail. It used to
 * differ: a rounded card inset by 3vh, painted `--bg-secondary`, which is #171717
 * in dark and #e0e2e5 in light — neither of them the page behind it, so it read
 * as a slab dropped on the page. `.nx-page .sf` in landingRedesign.css now only
 * re-points the type ramp and the grid, so the marketing columns line up with the
 * sections above them.
 */

.sf {
    /* Surfaces. These are the footer's OWN palette, not theme.css's product
       tokens, because the footer is one band on ~20 differently-painted pages:
       the ground is transparent so it inherits whatever the page is standing on,
       and every line and fill above it is an alpha, so the band reads the same
       on the marketing white, a dashboard's near-black, and a portal's grey. The
       product tokens are what made it a slab — `--bg-secondary` is #171717 on one
       and #e0e2e5 on the other, neither of which is the page behind it. */
    --sf-panel: rgba(255, 255, 255, 0.05);
    --sf-chip: rgba(255, 255, 255, 0.1);
    --sf-line: rgba(255, 255, 255, 0.09);
    --sf-line-2: rgba(255, 255, 255, 0.16);
    --sf-watermark: rgba(255, 255, 255, 0.05);

    /* Type follows the active theme, so the band is legible on either ground. */
    --sf-text: var(--text-primary);
    --sf-muted: var(--text-tertiary);
    --sf-faint: var(--text-quaternary);
    --sf-accent: var(--accent-purple);
    --sf-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Rhythm — the marketing page overrides both so the footer's columns line up
       with the rest of the page rather than with its own padding. */
    --sf-gutter: clamp(24px, 4vw, 60px);
    --sf-max: 1220px;

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* Full-bleed band under a hairline, everywhere. It used to be a rounded card
       inset by 3vh, which read as a floating panel in a different grey from the
       page it sat on. The bottom padding is the wordmark's room. */
    margin: 0;
    padding: clamp(56px, 6vw, 84px) var(--sf-gutter) clamp(118px, 17vw, 246px);
    border-top: 1px solid var(--sf-line);
    background: transparent;
    color: var(--sf-muted);
    /* Inside the product the footer is narrower than the viewport (there is a
       sidebar beside it), so the breakpoints below key off the footer's own
       width. The viewport copies further down are the fallback. */
    container-type: inline-size;
}

[data-theme='light'] .sf {
    --sf-panel: rgba(17, 15, 13, 0.04);
    --sf-chip: #ffffff;
    --sf-line: rgba(17, 15, 13, 0.11);
    --sf-line-2: rgba(17, 15, 13, 0.18);
    --sf-watermark: rgba(17, 15, 13, 0.055);
}

.sf__container {
    position: relative;
    z-index: 1;
    max-width: var(--sf-max);
    margin: 0 auto;
}

.sf__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

/* ================================================================== BRAND */

/* The brand block hangs from the same hairline as the nav columns, so the top of
   the footer reads as one ruled band rather than a logo floating beside a menu. */
.sf__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-top: 1px solid var(--sf-line);
    padding-top: 20px;
}

.sf__logo {
    display: inline-flex;
}

.sf__logo img {
    display: block;
    height: 34px;
    width: auto;
}

.sf__pitch {
    margin: 0;
    max-width: 34ch;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--sf-muted);
}

/* The badge is an external iframe that paints its own pill, so it stands bare in
   the rail — a container of ours only ever reads as a second shell around it.
   Sized to the badge's own content, not the 190px the embed code suggests: the
   label wraps to two lines at 179px and fits on one at 182, so this is the fit
   plus two pixels. The slack was what read as a right margin; do not re-add it,
   and do not trim below 182. */
.sf__status {
    display: block;
    border: 0;
    width: 184px;
    height: 30px;
}

/* Light / dark / system. The active segment is a raised chip rather than a
   tinted one — theme is a setting, not a status, so it doesn't take the accent. */
.sf__theme {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--sf-line);
    border-radius: 999px;
    background: var(--sf-panel);
}

.sf__theme-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--sf-faint);
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.sf__theme-btn:hover {
    color: var(--sf-text);
}

.sf__theme-btn--on {
    background: var(--sf-chip);
    color: var(--sf-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--sf-line);
}

.sf__theme-icon {
    font-size: 15px !important;
}

.sf__social {
    display: flex;
    gap: 8px;
}

.sf__social-link {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    color: var(--sf-muted);
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.sf__social-link:hover {
    background: var(--sf-panel);
    border-color: var(--sf-line-2);
}

.sf__social-icon {
    width: 16px;
    height: 16px;
    font-size: 16px !important;
}

.sf__social-link--x:hover {
    color: var(--sf-text);
}

.sf__social-link--instagram:hover {
    color: #e4405f;
}

.sf__social-link--linkedin:hover {
    color: #0077b5;
}

/* =================================================================== NAV */

.sf__nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.6vw, 32px);
}

.sf__col {
    border-top: 1px solid var(--sf-line);
    padding-top: 14px;
}

.sf__col-title {
    margin: 0 0 14px;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sf-faint);
}

.sf__list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    color: var(--sf-muted);
    cursor: pointer;
    transition: color 0.18s ease;
}

.sf__link:hover {
    color: var(--sf-text);
}

.sf__ext {
    font-size: 13px !important;
    opacity: 0.4;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.sf__link:hover .sf__ext {
    opacity: 0.85;
    transform: translate(2px, -2px);
}

/* ================================================================== META */

/* Copyright and the human line on the left, the live things on the right. The
   status badge and the social marks live down here rather than under the logo:
   in the column band they left a tall hole beside four short link lists. */
.sf__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px clamp(16px, 2.2vw, 28px);
    margin-top: clamp(32px, 4vw, 52px);
    padding-top: 18px;
    border-top: 1px solid var(--sf-line);
    font-size: 0.8rem;
    color: var(--sf-faint);
}

.sf__meta-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px clamp(14px, 1.8vw, 24px);
}

.sf__built {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sf__heart {
    font-size: 13px !important;
    color: var(--sf-accent);
}

.sf__eho {
    display: inline-flex;
    align-items: center;
}

/* The mark is white line art on transparent, so it needs inverting on a light
   ground. */
.sf__eho img {
    display: block;
    width: 38px;
    height: auto;
    opacity: 0.45;
}

[data-theme='light'] .sf__eho img {
    filter: invert(1);
}

/* ============================================================== WORDMARK */

/* The box is the footer's content column plus its gutter, centred — so the
   wordmark's left edge lands exactly on the logo's, at every width. It sizes off
   `cqi`, the footer's own width, so it still fits when a dashboard sidebar is
   taking 260px of the viewport. */
.sf__wordmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2em;
    box-sizing: content-box;
    max-width: var(--sf-max);
    margin-inline: auto;
    padding-inline: var(--sf-gutter);
    font-family: var(--sf-display);
    font-size: min(40cqi, 494px);
    white-space: nowrap;
    font-weight: 700;
    line-height: 0.78;
    letter-spacing: -0.055em;
    color: var(--sf-watermark);
    user-select: none;
    pointer-events: none;
}

/* ============================================================ RESPONSIVE */

@container (max-width: 900px) {
    .sf__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .sf__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }
}

@media (max-width: 960px) {
    .sf__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .sf__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }
}

@media (max-width: 560px) {
    .sf__meta {
        font-size: 0.75rem;
    }

    .sf__meta {
        justify-content: flex-start;
    }
}


/* css/waitlist-modal.css */
.waitlist-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modal-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.waitlist-modal-content {
  background: var(--modal-content-bg-color);
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px var(--shadow-color);
  border: 1.1px solid var(--border-color);
}

.waitlist-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 24px;
  margin-bottom: 24px;
}

.waitlist-modal-header h2 {
  color: var(--text-color);
  font-size: 24px;
  font-weight: 600;
  margin: 0;

}

.waitlist-modal-close {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.waitlist-modal-close:hover:not(:disabled) {
  background-color: var(--hover-bg-color);
  color: var(--text-color);
}

.waitlist-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.waitlist-form {
  padding: 0 24px 24px 24px;
}

.waitlist-form-group {
  margin-bottom: 20px;
}

.waitlist-form-group label {
  display: block;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.waitlist-form-group input,
.waitlist-form-group select {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--input-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--input-text-color);
  font-size: 16px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.waitlist-form-group input:focus,
.waitlist-form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow-color);
  background-color: var(--hover-bg-color);
}

.waitlist-form-group input::placeholder {
  color: var(--text-color);
  opacity: 0.6;
}

.waitlist-form-group select {
  cursor: pointer;
}

.waitlist-form-group select option {
  background-color: var(--secondary-bg-color);
  color: var(--text-color);
}

.waitlist-form-group input:disabled,
.waitlist-form-group select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.colorado-message {
  background: linear-gradient(135deg, #ff9a00, #ff6b00);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border-left: 4px solid #ff6b00;
}

.colorado-message p {
  margin: 0;
  color: black;
  font-size: 14px;
  line-height: 1.5;
}

.colorado-message strong {
  font-weight: 600;
}

.submit-message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.submit-message.success {
  background-color: rgba(23, 174, 81, 0.2);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}

.submit-message.error {
  background-color: rgba(220, 53, 69, 0.2);
  color: var(--error-color);
  border: 1px solid var(--error-color);
}

.waitlist-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
}

.waitlist-cancel-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-width: 100px;
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.waitlist-submit-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  min-width: 100px;
  font-family: inherit;
  letter-spacing: 2px;
  background: transparent;
  color: var(--text-color);
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  transition: all 0.2s ease-in;
  position: relative;
}

.waitlist-submit-btn:hover:not(:disabled) {
  background: var(--primary-color);
  box-shadow: 0 0 20px 5px var(--shadow-color);
  transform: none;
}

.waitlist-submit-btn:hover:not(:disabled)::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

.waitlist-submit-btn::before {
  content: '';
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.waitlist-submit-btn:active:not(:disabled) {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

.waitlist-cancel-btn:disabled,
.waitlist-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.waitlist-submit-btn:disabled {
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.2);
}

/* Responsive design */
@media (max-width: 768px) {
  .waitlist-modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .waitlist-modal-header {
    padding: 20px 20px 0 20px;
  }
  
  .waitlist-form {
    padding: 0 20px 20px 20px;
  }
  
  .waitlist-form-actions {
    flex-direction: column;
  }
  
  .waitlist-cancel-btn,
  .waitlist-submit-btn {
    width: 100%;
  }
} 

/* css/common.css */
/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden; /* Prevent horizontal scroll from extended/absolute hero decorations */
}

header {
    position: relative; /* This might be needed if not already set */
    color: var(--text-secondary);
    align-items: center;
    margin: 0;
    padding: 2vh 8vh; /* Adjust padding as needed */
    border-radius: 0;
    z-index: 100;
    background-color: var(--bg-primary) !important;
    backdrop-filter: none !important;
}

.navbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Divide the navbar into three equal parts */
    align-items: center;
    position: relative; /* Context for absolute positioning */
    overflow: visible; /* Make sure dropdown isn't cut off */
    z-index: 10;
    background-color: var(--bg-primary) !important;
}


.logo-container {
    display: flex;
    justify-content: flex-start; /* Align the logo to the left */
    flex-direction: row;
    align-items: center;
}

.logo img {
    height: 30px; /* Adjust the logo size as needed */
}

.header-beta-label {
    color: var(--text-inverse);
    font-size: 12px;
    font-weight: bold;
    background-color: var(--bg-hover);
    padding: 2px 4px;
    border-radius: 6px;
    margin-left: 5px;
    margin-top: 4px;
}

.nav-links {
    display: flex
;
    justify-content: center;
    list-style-type: none;
    gap: 10px;
    margin-left: 20px;
    margin-top: 7px;
    color: var(--text-secondary);
}

.nav-links-middle {
    display: flex;
    justify-content: center;
    list-style-type: none;
    gap: 20px;
    margin-left: 20px;
    margin-top: 7px;
}

.nav-links li {
    padding: 0 15px; /* Adjust spacing between nav items as needed */
}

.nav-links-middle a {
    color: var(--text-primary);
    padding: 3px 7px;
    text-decoration: none;
    font-size: 16px; /* Adjust font size as needed */
    transition: transform 0.2s; /* Add transition for hover effect */
    font-weight: bold;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.nav-links-middle a:hover {
    transform: scale(1); /* Scale up on hover */
}

.nav-links-right {
    color: var(--text-primary);
    padding: 8px;
    text-decoration: none;
    font-size: 16px;
    transition: transform 0.2s;
    font-weight: bold;
    border-radius: 7px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: all 0.1s ease;
}

.nav-links-right:hover {
    transform: scale(1);
    background-color: var(--bg-hover);
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 16px; /* Adjust font size as needed */
    transition: transform 0.2s; /* Add transition for hover effect */
    padding: 3px 7px;
    border-radius: 10px;
}

.nav-links a:hover {
    transform: scale(1); /* Scale up on hover */
}



.user-profile-container {
    display: flex;
    justify-content: flex-end; /* Align the user profile to the right */
    position: relative; /* This is important for positioning the dropdown */
    gap: 10px;
    align-items: center;

}

.user-profile:hover {
    scale: 1;
}

.book-a-demo-button {
    background-color: var(--btn-landing-bg);
    padding: .75vh 1vh;
    border-radius: 7px;
    display: flex;
    font-size: 15px;
    align-items: center;
    gap: 3px;
    color: var(--text-inverse);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s ease; /* Add transition for fade in effect */
}

.header-book-demo-button {
    white-space: nowrap;
}

.book-a-demo-button:hover {
    background-color: var(--btn-primary-hover);
    color: #ffffff;
}

.user-profile {
    padding: 9px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 10px;
    border: none;
    font-size: 16px;
    transition: all 0.5s ease;
}

a.user-profile {
    text-decoration: none;
    display: inline-block;
}


.login-button {
    width: 20%;
    padding: 10px;
    border-radius: 50px;
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease; /* Add transition for fade in effect */
}

.login-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    scale: 1.2;
}


.logout-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 39px;
    height: 39px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
    background-color: var(--btn-danger-bg);
}

/* plus sign */
.logout-button .sign {
    width: 100%;
    transition-duration: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-button .sign svg {
    width: 17px;
}

.logout-button .sign svg path {
    fill: white;
}

/* text */
.logout-button .text {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: var(--text-primary);
    font-size: 1.2em;
    font-weight: 600;
    transition-duration: .3s;
}

/* hover effect on button width */
.logout-button:hover {
    width: 125px;
    border-radius: 10px;
    transition-duration: .3s;
}

.logout-button:hover .sign {
    width: 30%;
    transition-duration: .3s;
    padding-left: 20px;
}

/* hover effect button's text */
.logout-button:hover .text {
    opacity: 1;
    width: 70%;
    transition-duration: .3s;
    padding-right: 10px;
}

/* button click effect*/
.logout-button:active {
    transform: translate(2px, 2px);
}




/* Login/Register Modal Styles */

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

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Keep display as flex */
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-overlay);
    z-index: 100;
    transition: opacity 500ms ease-in-out;
    opacity: 0;
    pointer-events: none;
    color: var(--text-primary);
}

.modal-show {
    animation: fadeIn 500ms forwards;
    pointer-events: auto;
}

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

.modal-hide {
    animation: fadeOut 500ms forwards;
}



/* Old option styles - commented out since using new toggle
.modal .options {
    display: flex;
    justify-content: space-around;
    font-size: 2em;
    margin-bottom: 50px;
}

.modal .options .option {
    cursor: pointer;
    margin: 0 20px;
    position: relative;
 }
  
.modal .options .option::after {
    content: '';
    display: block;
    height: 4px;
    background: orange;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -10px;
    transition: all .3s;
}
  
.modal .options .option.selected::after {
    left: 0;
    right: 0;
}
*/

/* Login/Register Toggle Styles */
.login-register-toggle {
    position: relative;
    display: flex;
    align-items: center;
    margin: 20px auto 50px auto;
    background-color: var(--bg-elevated);
    border-radius: 25px;
    width: 300px;
    height: 50px;
    overflow: hidden;
    color: var(--text-primary);
}

.login-register-slider {
    position: absolute;
    top: 0;
    left: 0%;
    width: 50%;
    height: 100%;
    background-color: var(--accent-secondary);
    border-radius: 25px;
    transition: left 0.3s;
    border: 5px solid var(--bg-elevated);
}

.login-register-button {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    z-index: 1;
    outline: none;
    margin: 10px;
    font-weight: bold;
    font-size: 1em;
}

.login-register-button:focus {
    outline: none;
}

.modal .login-section form,
.modal .register-section form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal .login-section form input,
.modal .register-section form input {
  margin-bottom: 10px;
  padding: 10px;
  font-size: 1em;
  width: 120%;  /* This might cause the input to overflow its container, consider using max-width instead of width */
  border-radius: 15px;
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: none;
  position: relative;
  outline: none;
}

.modal .login-section form input:focus,
.modal .register-section form input:focus {
  border: 1px solid var(--input-border-focus); /* Border appears on focus */
}

/* Style placeholders */
.modal .login-section form input::placeholder,
.modal .register-section form input::placeholder {
  color: var(--input-placeholder); /* Light placeholder text */
}

/* Hide the checkbox itself */
.agent-checkbox {
    display: none;
}

/* Style the label with padding to accommodate the checkbox */
.agent-checkbox + label {
    margin: 10px;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    user-select: none;
}

/* Style the box that will become the animated checkbox */
.agent-checkbox + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: transparent;
    transition: all 0.2s ease;
}

/* The checkmark itself, initially hidden */
.agent-checkbox + label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 3px;
    height: 9px;
    border: solid transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(15px); /* Start below */
    transition: all 0.2s ease;
    animation-fill-mode: forwards;
    border-color: transparent;
}

/* Keyframes to slide the checkmark in from the bottom */
@keyframes slideInCheckmark {
    0% {
        transform: rotate(45deg) translateY(15px);
        border-color: transparent;
    }
    100% {
        transform: rotate(45deg) translateY(0);
        border-color: gold;
    }
}

/* When the checkbox is checked, play the slide-in animation */
.agent-checkbox:checked + label::after {
    animation: slideInCheckmark 0.2s ease forwards;
}


.modal .login-section form button,
.modal .register-section form button {
  margin-top: 30px;
  padding: 10px 20px;
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 17px; /* Make button circular */
  background-color: transparent; /* Make fill transparent */
  color: var(--accent-secondary); /* Light text */
  border: 2px solid var(--accent-secondary); /* Add orange border */
  transition: background-color 0.3s ease, color 0.1s ease; /* Add this */
}

.modal .login-section form button:hover,
.modal .register-section form button:hover {
  background-color: var(--accent-secondary); /* Make fill orange */
  color: var(--text-primary); /* Make text white */
}

.modal .login-section form input:-webkit-autofill,
.modal .register-section form input:-webkit-autofill,
.modal .login-section form input:-webkit-autofill:hover,
.modal .register-section form input:-webkit-autofill:hover,
.modal .login-section form input:-webkit-autofill:focus,
.modal .register-section form input:-webkit-autofill:focus,
.modal .login-section form input:-webkit-autofill:active,
.modal .register-section form input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important; /* Match the color with your input background */
  transition: background-color 5000s ease-in-out 0s; /* This is to override the background color transition */
}

/* Careers link cursor */
.careers-link {
    cursor: pointer;
}

.option-link{
    cursor: pointer;
}

.error{
    color: var(--accent-error);
    font-size: small;
    font-style: italic;
}

.success{
    color: var(--accent-success);
    font-size: small;
    font-style: italic;
}



.border-bottom-gray{
    border-bottom: 1px solid var(--border-primary);
    margin: 30px 0px;
}

.lightskyblue{
    color: var(--accent-primary);
}

.beta-icon {
    width: 30px;
    height: 30px;
}


.loading-screen{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: var(--text-primary);
    gap: 10px;
    font-size: 20px;
}

.landing-page-meet-feature-description {
    font-size: 1rem;
    color: var(--text-secondary);
}

.playfair-display-inline {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: bold;
    display: inline;
}

/* Shared document row — THE definition of .document-item*.
   It also lived in BuyerPortal.css, byte-for-byte, and since every stylesheet in
   this bundle is injected globally the copy that happened to be evaluated last
   won. That is how the row kept a hardcoded dark background on pages that pull
   in common.css. One copy now; BuyerPortal.css points here. */
/* --bg-elevated sits one step above the panel it lives on in BOTH themes (a
   white card on the light grey panel, a lighter grey card on the dark one), so
   the row reads as a card without a per-theme override. */
.document-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 10px 0;
    cursor: pointer;
    background: var(--bg-elevated);
    padding: 14px 16px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    min-height: 72px;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.document-item:hover{
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-primary));
}

.document-item.static {
    cursor: default;
}

.document-item.static:hover {
    background: var(--bg-elevated);
    border-color: var(--border-primary);
}

.document-item.selected {
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-primary));
}

/* The row menu is a popover now, so the row keeps its content while it is open
   and only needs to read as the row the menu belongs to — same treatment as
   :hover, which is where the pointer is anyway. */
.document-item.menu-open {
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-primary));
}

.document-name{
    color: var(--text-primary, var(--text-color));
    font-size: 15px;
    font-weight: 900;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.document-item-right-container{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.document-item-left{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.document-item-type-icon {
    color: var(--accent-primary, var(--link-color));
    width: 30px;
    height: 30px;
}

.document-item-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.document-item-subtitle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.document-item-subtitle {
    color: var(--text-secondary, var(--text-color));
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.document-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    min-height: 20px;
    border-radius: 999px;
    padding: 3px 7px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 9%, transparent);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    margin-left: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.document-status.complete {
    color: var(--success-color, #16a34a);
    background: color-mix(in srgb, var(--success-color, #16a34a) 14%, transparent);
}

.document-status.pending {
    color: var(--warning-color, #d98c00);
    background: color-mix(in srgb, var(--warning-color, #d98c00) 16%, transparent);
}

.document-status.danger {
    color: var(--error-color, #dc2626);
    background: color-mix(in srgb, var(--error-color, #dc2626) 14%, transparent);
}

.document-status.draft,
.document-status.neutral {
    color: var(--text-tertiary, var(--text-color));
    background: color-mix(in srgb, var(--border-secondary, #9ca3af) 35%, transparent);
}

.document-open-button,
.document-hamburger-menu-button{
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--accent-primary, var(--link-color));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.document-open-button svg,
.document-hamburger-menu-button svg {
    width: 22px;
    height: 22px;
}

.document-open-button:hover,
.document-hamburger-menu-button:hover,
.document-hamburger-menu-button[aria-expanded="true"]{
    background: color-mix(in srgb, var(--accent-primary, var(--link-color)) 12%, transparent);
}

.document-item-menu-options{
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    flex-wrap: wrap;
}

.document-item-menu-option{
    background-color: transparent;
    color: var(--text-primary, var(--text-color));
    border: none;
    cursor: pointer;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
    transition: background-color 0.1s;
}

.document-item-menu-option:hover{
    background-color: var(--hover-bg-color);
}

.document-item-delete-option{
    background-color: transparent;
    color: var(--error-color);
    border: none;
    cursor: pointer;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
    transition: background-color 0.1s;
}

.document-item-delete-option:hover{
    background: color-mix(in srgb, var(--error-color) 14%, transparent);
}

.document-item-menu-close-icon{
    background-color: transparent;
    border: none;
    color: var(--text-secondary, var(--text-color));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0px;
    border-radius: 8px;
}

.document-item-menu-close-icon:hover{
    background-color: var(--hover-bg-color);
}

/* ============================================================================
   DOCUMENT ROW MENU (popover)

   DocumentItem's "more actions" menu. It portals to <body> and is positioned
   from the trigger's viewport rect, which the component re-reads on scroll —
   so the menu travels with its row, and no ancestor's `overflow` can clip it.
   (The document center's `.dc-section-body-inner` is `overflow: hidden` to
   drive the drawer animation; an in-flow menu got cut off there.)

   The shell is the one .seller-offers-risk-popover already uses — 1px soft
   border, 8px radius, lifted shadow. Only the anchoring differs.
   NOTE: the .document-item-menu-option/-delete-option/-close-icon rules above
   are NOT this menu's; BuyerAgentFinancing reuses them for incentive rows.
   ==========================================================================*/

.document-menu-popover {
    position: fixed;
    z-index: 1200; /* over .dc-modal-overlay (1000), under toasts (9000+) */
    width: min(248px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--border-secondary) 62%, transparent);
    border-radius: 10px;
    background: var(--bg-elevated);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
    cursor: default;
    animation: document-menu-popover-in 0.12s ease-out;
}

@keyframes document-menu-popover-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.document-menu-popover-group {
    display: grid;
    gap: 1px;
}

.document-menu-popover-group + .document-menu-popover-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-primary);
}

.document-menu-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.document-menu-popover-item:hover:not(:disabled),
.document-menu-popover-item:focus-visible {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.document-menu-popover-item:disabled {
    color: var(--text-quaternary);
    cursor: default;
}

.document-menu-popover-item.danger {
    color: var(--error-color);
}

.document-menu-popover-item.danger:hover:not(:disabled),
.document-menu-popover-item.danger:focus-visible {
    background: color-mix(in srgb, var(--error-color) 14%, transparent);
}

.document-menu-popover-item.is-current .document-menu-popover-label {
    color: var(--accent-primary);
}

/* "Ask Orbit" leads with the Orbit mark rather than an outline icon —
   it is the same glyph the dashboard rail and the console header use, and it
   brings its own colour, so it is not sized or tinted like the MUI icons. */
.document-menu-popover-orbit-glyph {
    flex-shrink: 0;
    margin-right: 1px;
}

/* Scoped through the item so these beat MUI's own `.MuiSvgIcon-root`
   (font-size: 1.5rem), which ties on specificity and wins on injection order —
   the same reason .document-hamburger-menu-button sizes its icon as `… svg`. */
.document-menu-popover-item .document-menu-popover-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.85;
}

.document-menu-popover-label {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.document-menu-popover-hint {
    flex-shrink: 0;
    max-width: 96px;
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.document-menu-popover-hint.danger {
    color: var(--error-color);
}

.document-menu-popover-item .document-menu-popover-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-quaternary);
}

.document-menu-popover-item .document-menu-popover-check {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: var(--accent-primary);
}

.document-menu-popover-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 6px;
}

.document-menu-popover-title {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.document-menu-popover-back {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.document-menu-popover-back svg {
    width: 12px;
    height: 12px;
}

.document-menu-popover-back:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.document-menu-popover-note {
    margin: 0;
    padding: 2px 6px 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Why a status write didn't stick — see DocumentItem's `statusError`. */
.document-menu-popover-note.danger {
    color: var(--error-color);
}

.document-menu-popover-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.document-menu-popover-button {
    padding: 8px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.document-menu-popover-button:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.document-menu-popover-button.danger {
    border-color: transparent;
    background: var(--error-color);
    color: #ffffff;
}

.document-menu-popover-button.danger:hover {
    background: color-mix(in srgb, var(--error-color) 86%, black);
}

.public-offer-document-preview.document-item {
    min-height: 64px;
    margin: 0;
    padding: 11px 12px;
}


/* css/landingRedesign.css */
/* src/css/landingRedesign.css — see components/LandingPage.js
 *
 * The marketing landing page, in its own `nx-` namespace so it can be redesigned
 * without disturbing css/landing.css, which still owns the shells of the three
 * embedded product demos (`.landing-dashboard-demo`, `.landing-email-demo`,
 * `.nexus-canvas`).
 *
 * TOKENS. The page defines its own scale on `.nx-page` rather than reading
 * theme.css directly. The app's palette is tuned for dense product surfaces —
 * #333 borders, #777 muted text — and at marketing sizes those read as muddy.
 * The tokens below are the same brand (warm near-black, #8C4BFF) at marketing
 * contrast, and the light-mode block is a full re-declaration so a single
 * `[data-theme]` flip is all it takes.
 *
 * MOTION lives at the end of this file. Everything animated here is a class
 * toggled by an IntersectionObserver in LandingMotion.js — no scroll-linked
 * layout reads, no per-frame React state — and the whole system collapses to its
 * finished state under `prefers-reduced-motion`.
 */

/* ================================================================== TOKENS */

.nx-page {
    /* Surfaces */
    --nx-bg: #0a0908;
    --nx-bg-2: #100e0d;
    --nx-panel: rgba(255, 255, 255, 0.026);
    --nx-panel-2: rgba(255, 255, 255, 0.05);
    --nx-line: rgba(255, 255, 255, 0.08);
    --nx-line-2: rgba(255, 255, 255, 0.15);

    /* Type */
    --nx-text: #f7f5f2;
    --nx-text-2: #a9a49d;
    --nx-text-3: #726d67;
    --nx-text-quiet: #8a837b;

    /* Brand */
    /* One accent, and it only ever marks state: the active step, a checkmark,
       the primary action. Nothing on this page is tinted for decoration. */
    --nx-accent: #8c4bff;
    --nx-accent-soft: #b08cff;
    --nx-accent-press: #7339d6;
    --nx-good: #35c47a;
    --nx-bad: #e05a5a;

    /* Shape */
    --nx-r-sm: 10px;
    --nx-r: 14px;
    --nx-r-lg: 20px;
    --nx-r-xl: 28px;

    --nx-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    --nx-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.26);

    /* Rhythm */
    --nx-gutter: clamp(20px, 4.5vw, 40px);
    --nx-max: 1220px;
    --nx-section-y: clamp(72px, 9vw, 132px);
    --nx-header-h: 74px;

    --nx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --nx-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    position: relative;
    background: var(--nx-bg);
    color: var(--nx-text);
    font-family: var(--nx-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-theme='light'] .nx-page {
    --nx-bg: #ffffff;
    --nx-bg-2: #f7f6f5;
    --nx-panel: rgba(17, 15, 13, 0.022);
    --nx-panel-2: rgba(17, 15, 13, 0.045);
    --nx-line: rgba(17, 15, 13, 0.1);
    --nx-line-2: rgba(17, 15, 13, 0.18);

    --nx-text: #131110;
    --nx-text-2: #57524d;
    --nx-text-3: #8a847e;
    --nx-text-quiet: #8e8781;

    --nx-accent-soft: #6d2fe0;

    --nx-shadow: 0 16px 40px rgba(20, 16, 12, 0.12);
    --nx-shadow-soft: 0 6px 18px rgba(20, 16, 12, 0.08);
}

/* common.css sets `body { overflow-x: hidden }`, which turns <body> into a
   scroll container and kills `position: sticky` inside it. `clip` does the same
   job without creating one, so the product tour's sticky stage works. */
body:has(.nx-page) {
    overflow-x: clip;
}

.nx-container {
    width: 100%;
    max-width: var(--nx-max);
    margin: 0 auto;
    padding: 0 var(--nx-gutter);
    box-sizing: border-box;
}

.nx-main {
    padding-top: var(--nx-header-h);
}

/* ================================================================== HEADER */

.nx-header-shell {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 300;
    transition: background 0.28s ease, border-color 0.28s ease, backdrop-filter 0.28s ease;
    border-bottom: 1px solid transparent;
}

.nx-header-shell--scrolled {
    background: color-mix(in srgb, var(--nx-bg) 86%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--nx-line);
}

/* common.css paints the shared header with `!important`; the shell owns the
   background on this page so the hero shows through it. */
.nx-header-shell header,
.nx-header-shell .navbar {
    background-color: transparent !important;
    background: transparent !important;
}

.nx-header-shell header {
    padding: 0 var(--nx-gutter);
    height: var(--nx-header-h);
    display: flex;
    align-items: center;
    max-width: var(--nx-max);
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-header-shell .navbar {
    width: 100%;
    grid-template-columns: auto 1fr auto;
}

.nx-header-shell .logo img {
    height: 26px;
    filter: none;
}

.nx-header-shell .nav-links a,
.nx-header-shell .nexus-mega-menu__trigger {
    color: var(--nx-text-2);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.18s ease;
}

.nx-header-shell .nav-links a:hover,
.nx-header-shell .nexus-mega-menu__trigger:hover {
    color: var(--nx-text);
}

.nx-header-shell .user-profile {
    color: var(--nx-text-2);
    font-size: 0.875rem;
    font-weight: 500;
}

.nx-header-shell .user-profile:hover {
    color: var(--nx-text);
}

.nx-header-shell .header-book-demo-button {
    background: var(--nx-text);
    color: var(--nx-bg);
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nx-header-shell .header-book-demo-button:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.nx-header-shell .theme-toggle {
    color: var(--nx-text-2);
}

/* ================================================================ TYPE KIT */

.nx-h2 {
    margin: 0;
    font-family: var(--nx-display);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.028em;
    font-weight: 600;
    color: var(--nx-text);
    text-wrap: balance;
}

/* Orbit greets people in Playfair italic ("Good afternoon, Yash."). This page
   borrows that voice exactly once, so it reads as the product's own and not as
   a typographic flourish. */
.nx-em {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    /* Playfair's x-height sits under Inter Tight's at the same size. */
    font-size: 1.04em;
    letter-spacing: -0.005em;
}

.nx-lede {
    margin: 0;
    max-width: 58ch;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nx-lede--center {
    margin-inline: auto;
    text-align: center;
}

.nx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nx-eyebrow--accent {
    color: var(--nx-accent-soft);
}

.nx-eyebrow__glyph {
    width: 15px;
    height: 15px;
}

.nx-section-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: clamp(36px, 4.5vw, 60px);
}

.nx-section-head--center {
    align-items: center;
    text-align: center;
}

.nx-tick {
    flex: none;
    font-size: 17px !important;
    color: var(--nx-accent-soft);
}

/* ================================================================ BUTTONS */

.nx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease,
        background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nx-btn__icon {
    font-size: 18px !important;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.nx-btn:hover .nx-btn__icon:not(.nx-btn__icon--lead) {
    transform: translateX(3px);
}

.nx-btn--primary {
    background: var(--nx-accent);
    color: #fff;
}

.nx-btn--primary:hover {
    background: var(--nx-accent-press);
}

.nx-btn--primary:active {
    transform: translateY(1px);
}

.nx-btn--ghost {
    background: var(--nx-panel);
    border-color: var(--nx-line-2);
    color: var(--nx-text);
}

.nx-btn--ghost:hover {
    background: var(--nx-panel-2);
    border-color: var(--nx-text-3);
}

.nx-btn__icon--lead {
    margin-left: -4px;
    color: var(--nx-accent-soft);
}

/* =================================================================== PILL */

/* `nx-pill`, not `nx-badge`: components/NotificationBadge.js already owns
   `.nx-badge` app-wide, and every stylesheet ships in one bundle — reusing the
   name here stripped the red off the portal trackers' notification counts. */

.nx-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border: 1px solid var(--nx-line-2);
    border-radius: 999px;
    background: var(--nx-panel);
    color: var(--nx-text-2);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.nx-pill:hover {
    border-color: var(--nx-text-3);
    color: var(--nx-text);
}

.nx-pill__sep {
    width: 1px;
    height: 12px;
    background: var(--nx-line-2);
}

.nx-pill__arrow {
    font-size: 15px !important;
    color: var(--nx-text-3);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.nx-pill:hover .nx-pill__arrow {
    transform: translateX(2px);
}

/* =================================================================== HERO */

.nx-hero {
    position: relative;
    padding: clamp(44px, 5.5vw, 76px) 0 0;
}

.nx-hero__top {
    position: relative;
}

.nx-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
}

.nx-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    animation: nx-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Status, not decoration: a live dot only where something is actually live. */
.nx-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nx-text-3);
    flex: none;
}

.nx-dot--live {
    background: var(--nx-good);
}

/* The first line is the problem, the second is the payoff, so the payoff keeps
   full contrast and the setup steps back. One flat colour each — an emphasis,
   not a gradient. */
.nx-hero__title-quiet {
    color: var(--nx-text-quiet);
}

.nx-hero__title {
    margin: 4px 0 0;
    font-family: var(--nx-display);
    font-size: clamp(2.6rem, 6.6vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 600;
    color: var(--nx-text);
    max-width: 13ch;
}

.nx-word {
    display: inline-block;
    animation: nx-word-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(90ms + var(--nx-i) * 65ms);
}

@keyframes nx-word-in {
    from { opacity: 0; transform: translate3d(0, 0.24em, 0); }
    to { opacity: 1; transform: none; }
}

.nx-hero__lede {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    line-height: 1.62;
    color: var(--nx-text-2);
    animation: nx-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

.nx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 18px;
    margin-top: 6px;
    animation: nx-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.54s both;
}

/* One line of reassurance sitting with the buttons, the way `near` and Classy
   do it, instead of a separate row of bulleted claims under them. */
.nx-hero__reassure {
    align-self: center;
    max-width: 30ch;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--nx-text-3);
}

/* Says what the thing below actually is. Nothing on the page told a visitor the
   dashboard is the running product rather than a picture of one. */
.nx-hero__demo-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: clamp(34px, 4.5vw, 60px) 0 14px;
    font-size: 0.86rem;
    color: var(--nx-text-2);
    animation: nx-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.66s both;
}

@keyframes nx-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
}

/* The live product, in a browser shell.
 *
 * The height is a crop of a real, scrolling app, so it has to land on a
 * boundary. The seller status tracker's nine steps sit 92px apart and finish
 * 920px below the browser chrome; at the old 60vh the shot cut through step
 * five and sliced a task chip in half, which reads as a broken screenshot
 * rather than a product. 980px clears all nine with room under them — and the
 * scope band directly below this claims nine stages, so the hero should show
 * nine. Everything above the shot (headline, CTA, proof line) is unaffected:
 * the fold is decided there, not here. */
.nx-hero__shot {
    position: relative;
    height: clamp(560px, 88vh, 980px);
    display: flex;
    border-radius: var(--nx-r-lg);
    animation: nx-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.nx-hero__shot .landing-dashboard-demo__browser {
    border-radius: var(--nx-r-lg);
    border-color: var(--nx-line-2);
}

/* ============================================================== HERO ORBIT */

/* See components/LandingHeroOrbit.js. What Nexus touches, ringed around the
   copy, with the work it does scrolling underneath. */

.nx-orb {
    position: absolute;
    left: 50%;
    /* Centred on the copy block, not the hero: too high and the ring's widest
       chips swing into the header. */
    top: clamp(300px, 42vh, 400px);
    width: 0;
    height: 0;
    z-index: 0;
    pointer-events: none;

    /* One unit of radius. Unitless radii in the component are multiplied by this,
       so the ring scales with the window rather than running off the sides of a
       narrower one. Capped so it stops growing on ultrawide. */
    --nx-orb-u: calc(min(100vw, 1680px) / 1440);
}

.nx-orb__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--nx-rn) * var(--nx-orb-u) * 2);
    height: calc(var(--nx-rn) * var(--nx-orb-u) * 2);
    margin: calc(var(--nx-rn) * var(--nx-orb-u) * -1);
    border: 1px solid var(--nx-line);
    border-radius: 50%;
    opacity: 0.7;
}

/* A few degrees, not revolutions: chips on a full rotation eventually track
   across the headline, and decoration crossing live text reads as a bug. */
.nx-orb__sway {
    position: absolute;
    inset: 0;
    animation: nx-orb-sway 30s ease-in-out infinite alternate;
}

@keyframes nx-orb-sway {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}

.nx-orb__chip {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px;
    /* Polar placement: swing out to the radius, then undo the swing so the chip
       itself is not tilted. */
    transform: rotate(var(--nx-a)) translateX(calc(var(--nx-rn) * var(--nx-orb-u)))
        rotate(calc(-1 * var(--nx-a)));
}

/* Cancels the parent sway so the icons stay upright the whole time. */
.nx-orb__chip-rev {
    display: block;
    width: 100%;
    height: 100%;
    animation: nx-orb-sway-rev 30s ease-in-out infinite alternate;
}

@keyframes nx-orb-sway-rev {
    from { transform: rotate(4deg); }
    to { transform: rotate(-4deg); }
}

/* Its own clock, so the ring never moves as one rigid object. */
.nx-orb__chip-drift {
    display: block;
    width: 100%;
    height: 100%;
    animation: nx-orb-drift var(--nx-drift, 10s) ease-in-out infinite alternate;
}

@keyframes nx-orb-drift {
    from { transform: translate3d(0, -5px, 0); }
    to { transform: translate3d(0, 5px, 0); }
}

.nx-orb__chip-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--nx-line-2);
    border-radius: 15px;
    background: var(--nx-bg-2);
    box-shadow: var(--nx-shadow-soft);
}

.nx-orb__icon {
    font-size: 24px !important;
    color: var(--nx-text-2);
}

.nx-orb__brand {
    width: 24px;
    height: 24px;
}

.nx-orb__chip-face .nexusta-loader-container,
.nx-orb__chip-face svg {
    width: 24px;
    height: 24px;
}

/* --- activity strip ------------------------------------------------------ */

.nx-acts {
    position: relative;
    width: min(460px, 100%);
    height: var(--nx-acts-h, 152px);
    margin: clamp(30px, 4vw, 46px) auto 0;
    overflow: hidden;
    /* Gentler than before: the spotlight now separates the focused row from its
       neighbours, so the mask only has to soften the two ends. */
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.nx-acts__track {
    display: flex;
    flex-direction: column;
    gap: var(--nx-act-gap, 10px);
    /* The list is rendered twice, so a -50% travel lands exactly on the copy and
       the loop has no seam. */
    animation: nx-acts-scroll var(--nx-acts-cycle, 30s) linear infinite;
}

@keyframes nx-acts-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.nx-act {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    height: var(--nx-act-h, 44px);
    padding: 0 16px;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    background: var(--nx-bg-2);
    text-align: left;

    /* Lifts as it crosses the centre of the window and settles after. Only
       opacity and transform, so the whole strip stays on the compositor —
       every row runs these same keyframes, offset by its own negative delay. */
    opacity: 0.3;
    transform: scale(0.95);
    animation: nx-act-spot var(--nx-acts-cycle, 30s) linear var(--nx-spot, 0s) infinite;
}

@keyframes nx-act-spot {
    0% { opacity: 1; transform: scale(1); }
    5% { opacity: 1; transform: scale(1); }
    14% { opacity: 0.3; transform: scale(0.95); }
    91% { opacity: 0.3; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.nx-act__who {
    display: flex;
    flex: none;
}

.nx-act__who img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.nx-act__orbit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nx-panel-2);
}

.nx-act__orbit svg {
    width: 15px;
    height: 15px;
}

.nx-act__text {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--nx-text-3);
}

.nx-act__text strong {
    font-weight: 600;
    color: var(--nx-text-2);
}

/* The hero's own content sits above the ring. */
.nx-hero__top,
.nx-hero > .nx-container,
.nx-hero__proof {
    position: relative;
    z-index: 1;
}

/* ================================================================== LOGOS */

/* The logo wall closes the hero instead of opening its own section, so the fold
   ends on proof — Sentry, Stripe, Reelers and Classy all do this. */
.nx-hero__proof {
    margin-top: clamp(44px, 6vw, 76px);
    padding: clamp(32px, 4vw, 48px) 0 clamp(34px, 4vw, 50px);
    border-top: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
}

.nx-logos__caption {
    margin: 0 0 28px;
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--nx-text-3);
}

.nx-logos__marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.nx-logos__track {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 84px);
    width: max-content;
    animation: nx-marquee 44s linear infinite;
}

.nx-hero__proof:hover .nx-logos__track {
    animation-play-state: paused;
}

.nx-logos__item img {
    height: clamp(22px, 2.4vw, 30px);
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.42;
    transition: opacity 0.25s ease;
}

[data-theme='light'] .nx-logos__item img {
    filter: brightness(0);
    opacity: 0.44;
}

.nx-logos__item:hover img {
    opacity: 0.85;
}

@keyframes nx-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* ================================================================== SCOPE */

.nx-scope {
    padding: clamp(56px, 7vw, 96px) 0;
}

.nx-scope__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--nx-line);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    overflow: hidden;
}

.nx-scope__cell {
    background: var(--nx-bg);
    padding: clamp(22px, 2.6vw, 34px);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms);
}

.nx-scope__grid--in .nx-scope__cell {
    opacity: 1;
    transform: none;
}

.nx-scope__value {
    font-family: var(--nx-display);
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--nx-text);
    font-variant-numeric: tabular-nums;
}

.nx-scope__label {
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nx-scope__detail {
    margin: 12px 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--nx-text-2);
}

/* ========================================================== BEFORE / AFTER */

.nx-shift {
    padding: var(--nx-section-y) 0;
}

.nx-shift__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.nx-shift__col {
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    background: var(--nx-panel);
}

.nx-shift__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.nx-shift__tag {
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--nx-line-2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nx-shift__tag--on {
    border-color: var(--nx-accent);
    color: var(--nx-accent-soft);
}

.nx-shift__title {
    margin: 0;
    font-family: var(--nx-display);
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--nx-text);
}

.nx-shift__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nx-shift__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--nx-line);
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--nx-text-2);
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity 0.55s ease calc(var(--nx-i) * 70ms),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--nx-i) * 70ms);
}

.nx-reveal--in .nx-shift__list li {
    opacity: 1;
    transform: none;
}

.nx-shift__col--before .nx-shift__list li {
    color: var(--nx-text-3);
}

.nx-shift__icon {
    flex: none;
    font-size: 18px !important;
    margin-top: 1px;
}

.nx-shift__icon--x {
    color: var(--nx-bad);
    opacity: 0.7;
}

.nx-shift__icon--check {
    color: var(--nx-good);
}

.nx-shift__col--after .nx-shift__list li {
    color: var(--nx-text);
}

/* =================================================================== TOUR */

.nx-tour {
    padding: var(--nx-section-y) 0;
    background: var(--nx-bg-2);
    border-top: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
}

/* Wider than the reading measure everywhere else: these are the real product
   surfaces, and at the text container's width the email pane crushes. */
.nx-tour > .nx-container {
    max-width: 1340px;
}

.nx-tour__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
}

.nx-tour__rail {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nx-tour__stage {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    height: 100%;
}

.nx-tour__sticky {
    position: sticky;
    top: calc(var(--nx-header-h) + 36px);
    height: clamp(400px, 62vh, 580px);
}

.nx-tour__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0) scale(0.985);
    transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.55s;
    pointer-events: none;
}

.nx-tour__panel--active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
    pointer-events: auto;
}

/* No browser chrome, no window frame, and no panel behind the panel: the
   surfaces are the argument, and a fake title bar with a fake URL over them is
   set dressing. Each one paints its own ground where it wants one — Orbit's
   shell carries --ox-bg, the email demo lets the section show between its rows
   — so the frame is nothing but a clipping box with rounded corners. */
.nx-tour__frame {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--nx-r-lg);
}

.nx-tour__frame-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* ORBIT DEMO ------------------------------------------------------------
 *
 * `LandingOrbitDemo` is ONE TURN of the real Ask-Orbit dock under the real
 * `orbitx-*` styles, so it arrives dressed as the app's modal: `position:
 * fixed`, bottom-anchored, 90vh, 1360px wide. Un-fix it and let it fill
 * the frame.
 *
 * It renders at 1:1 — there is no transform here any more. The panel this
 * replaced laid the WHOLE console out at a logical 1320px and scaled it to
 * about 0.58 to fit, which is how a 14px card title becomes 8px. A single
 * thread has no rail and no chat dock competing for the width, so it simply
 * fits, and the type on screen is the product's own type. */
.nx-tour__frame-body--orbit {
    position: relative;
    overflow: hidden;
}

.nx-tour__frame-body--orbit .landing-orbit-demo {
    /* Undo the modal. */
    position: static;
    width: 100%;
    height: 100%;
    transform: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
}

/* The thread and the composer under it are one column, centred. 660px is what
   a chat is comfortable at; wider and the bubbles stop reading as speech.

   The panel is also its own query container, sized on BOTH axes, because the
   tour frame moves on both and not in the same direction: 776x558 at a 1440px
   window, 900x428 once the tour stacks below 980px, 350x418 on a phone. Width
   alone would file a wide, short frame and a tall, roomy one in the same tier. */
.landing-orbit-demo {
    --lod-col: 660px;
    container-type: size;
    container-name: orbit-demo;
}

.landing-orbit-demo__thread,
.landing-orbit-demo .orbitx-chat-inputrow {
    width: min(100%, var(--lod-col));
    margin-inline: auto;
}

/* The product's own header, minus its actions: this panel is a conversation,
   and "Check now" belongs to the monitoring surface. Slimmer than the app's
   because it is chrome on a frame little more than 500px tall. */
.landing-orbit-demo .orbitx-header {
    padding: 9px 18px;
}

.landing-orbit-demo .orbitx-logo {
    width: 26px;
    height: 26px;
    font-size: 17px;
}

/* Bottom-anchored and clipped at the top, because that is where a chat sits:
   on its newest turn. In a frame too short for the whole exchange it is the
   proposal and its approve button that survive, not the question — and the
   fade is what says there is more above, rather than a row sliced in half. */
.landing-orbit-demo__thread {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px 2px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px);
    mask-image: linear-gradient(180deg, transparent 0, #000 18px);
}

/* The tree's own margins are cut for the dock's 12px scroll gap; this column
   already spaces the turn, and the frame has no height to spare. */
.landing-orbit-demo .orbitx-think-tree {
    margin: 0 0 2px;
    padding: 2px 0;
}

.landing-orbit-demo__turn {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The card carries its own 10px margins for the dock's scroll, which sits
   inside the column gap here and pushes it off the composer. */
.landing-orbit-demo .orbitx-task {
    margin: 0;
}

.landing-orbit-demo .orbitx-chat-inputrow {
    padding: 8px 18px 12px;
}

/* Approve and Discard stay on one line, and the button's own label wraps
   instead. The card does wrap them in the product's 300px dock, but a Discard
   sitting under the primary button on a row of its own reads here as a second
   action rather than as the narrow-column fallback it is. */
.landing-orbit-demo .orbitx-task-actions {
    flex-wrap: nowrap;
}

.landing-orbit-demo .orbitx-btn-primary {
    min-width: 0;
    white-space: normal;
}

/* Nothing in the replica does anything, so nothing in it offers to. */
.landing-orbit-demo .orbitx-btn,
.landing-orbit-demo .orbitx-linkbtn,
.landing-orbit-demo .orbitx-think-head,
.landing-orbit-demo .orbitx-chat-inputrow input {
    cursor: default;
}

/* Orbit hides its own title below a 720px VIEWPORT, where the console is a
   phone-sized modal and the glyph is enough. Here the viewport is not the
   panel, and a lone glyph over a Monitoring pill does not say whose surface
   this is. */
.landing-orbit-demo .orbitx-title {
    display: block;
}

/* ---- The frame shapes the tour actually produces -----------------------
 *
 * Once the tour stacks (below 980px) the stage goes full width and takes its
 * height from a clamp, so the frame turns WIDE AND SHORT — 887x422, 808x422,
 * 688x461 — and one column does not fit in it. There is room beside the thread
 * though, so the proposal moves out from under the conversation and sits next
 * to it: the same left-to-right reading the tour's own copy has, ask then
 * document. */
@container orbit-demo (min-width: 640px) and (max-height: 540px) {
    .landing-orbit-demo__thread,
    .landing-orbit-demo .orbitx-chat-inputrow {
        width: min(100%, 1040px);
    }

    .landing-orbit-demo .orbitx-chat-inputrow {
        padding-inline: 20px;
    }

    .landing-orbit-demo__thread {
        flex-direction: row;
        align-items: center;
        gap: 22px;
        padding: 10px 20px;
        /* Nothing is clipped at this shape, so nothing needs fading. */
        -webkit-mask-image: none;
        mask-image: none;
    }

    .landing-orbit-demo__turn {
        flex: 1 1 46%;
        min-width: 0;
    }

    .landing-orbit-demo .orbitx-task {
        flex: 1 1 54%;
        min-width: 0;
    }
}

/* A short frame with no room beside the thread either. The composer is
   affordance rather than information — the question in the thread already says
   this is something you talk to — so it is the first thing to go. */
@container orbit-demo (max-width: 639px) and (max-height: 540px) {
    .landing-orbit-demo .orbitx-chat-inputrow {
        display: none;
    }
}

/* The composer was the thread's bottom margin; without it the card sits 2px
   off the frame's edge. Only where the frame has the height to give it back —
   below about 380px wide the card already fills what there is. */
@container orbit-demo (min-width: 380px) and (max-width: 639px) and (max-height: 540px) {
    .landing-orbit-demo__thread {
        padding-bottom: 18px;
    }
}

/* Too narrow to split, and a frame this narrow is always short too — the
   stacked tour never gives one more than about 480px of height. Question and
   document, in that order, is the smallest crop that still tells the story;
   the trace is what has to go, because the card it produced cannot. */
@container orbit-demo (max-width: 639px) {
    .landing-orbit-demo .orbitx-think {
        display: none;
    }
}

.nx-tour__frame-body--platform {
    position: relative;
    overflow: hidden;
}

.nx-tour__frame-body--platform .nexus-canvas {
    /* Fit the square art to the frame's height and centre it. No overscale:
       the diagram ANIMATES — nodes expand and contract — so its drawn extent is
       not a constant, and sizing a crop from one frame's getBBox() was wrong.
       Sampled across a full cycle the worst-case margins are 8.5% at the top and
       only 6.6% at the bottom, which the 118% this used to be (6% a side, before
       any easing overshoot) was already eating into. A square diagram in a 1.4:1
       column has air either side; that is what it should have.

       Centred by transform, not by flex: an item the size of its flex line does
       not centre reliably once it grows, and `margin: auto` left it anchored
       high enough to clip the bottom row of nodes outright. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    scale: 1;

    /* LandingPageAnimation.css gives the canvas a card of its own — a panel
       background and a 13px radius, plus a hard drop shadow in light mode. In
       the tour it is a diagram on the section, not a card on a card, and those
       edges are what read as the crop. */
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.nx-tour__progress {
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
}

.nx-tour__pip {
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--nx-line-2);
    transition: background 0.3s ease, width 0.3s ease;
}

.nx-tour__pip--on {
    width: 34px;
    background: var(--nx-accent);
}

.nx-tour__step {
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.nx-tour__step:last-child {
    min-height: 56vh;
}

.nx-tour__step-inner {
    padding-left: 26px;
    border-left: 2px solid var(--nx-line);
    opacity: 0.4;
    filter: saturate(0.6);
    transition: opacity 0.45s ease, border-color 0.45s ease, filter 0.45s ease;
}

.nx-tour__step--active .nx-tour__step-inner {
    opacity: 1;
    filter: none;
    border-left-color: var(--nx-accent);
}

.nx-tour__step-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nx-accent-soft);
}

.nx-tour__step-icon {
    font-size: 17px !important;
}

.nx-tour__step-title {
    margin: 14px 0 0;
    font-family: var(--nx-display);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--nx-text);
}

.nx-tour__step-body {
    margin: 14px 0 0;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--nx-text-2);
}

.nx-tour__step-points {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.nx-tour__step-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--nx-text-2);
}

/* ================================================================== ORBIT */

.nx-orbit {
    padding: var(--nx-section-y) 0;
    background: var(--nx-bg-2);
    border-top: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
}

.nx-orbit__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.nx-orbit__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.nx-orbit__actions {
    margin-top: 6px;
}

.nx-orbit__log {
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    background: var(--nx-bg);
    overflow: hidden;
}

.nx-orbit__log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--nx-line);
}

.nx-orbit__log-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nx-text);
}

.nx-orbit__entries {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.nx-orbit__entry {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 12px 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--nx-text-2);
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
    transition: opacity 0.5s ease calc(var(--nx-i) * 140ms),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--nx-i) * 140ms);
}

.nx-orbit__entries--in .nx-orbit__entry {
    opacity: 1;
    transform: none;
}

.nx-orbit__entry-module {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nx-accent-soft);
    white-space: nowrap;
}

.nx-orbit__entry-text {
    color: var(--nx-text);
}

.nx-orbit__status {
    padding: 14px 20px;
    border-top: 1px solid var(--nx-line);
    font-size: 0.84rem;
    color: var(--nx-text-3);
}

/* ================================================================== BENTO */

.nx-bento {
    padding: var(--nx-section-y) 0;
    border-top: 1px solid var(--nx-line);
}

.nx-bento__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
}

.nx-bento__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    background: var(--nx-panel);
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms),
        border-color 0.3s ease, background 0.3s ease;
}

.nx-bento__card--in {
    opacity: 1;
    transform: none;
}

.nx-bento__card:hover {
    border-color: var(--nx-line-2);
    background: var(--nx-panel-2);
}

.nx-bento__visual {
    position: relative;
    height: 176px;
    overflow: hidden;
    border-bottom: 1px solid var(--nx-line);
    background: var(--nx-bg-2);
}

.nx-bento__copy {
    padding: 22px;
}

.nx-bento__title {
    margin: 0;
    font-family: var(--nx-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--nx-text);
}

.nx-bento__body {
    margin: 9px 0 0;
    font-size: 0.9rem;
    line-height: 1.58;
    color: var(--nx-text-2);
}

/* ================================================================== TRUST */

.nx-trust {
    padding: var(--nx-section-y) 0;
    background: var(--nx-bg-2);
    border-top: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
}

.nx-trust__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
}

.nx-trust__item {
    padding: 24px 20px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    background: var(--nx-panel);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.nx-trust__item:hover {
    border-color: var(--nx-line-2);
    transform: translateY(-3px);
}

.nx-trust__icon {
    font-size: 22px !important;
    color: var(--nx-accent-soft);
}

.nx-trust__title {
    margin: 14px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nx-text);
}

.nx-trust__body {
    margin: 7px 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--nx-text-2);
}

/* ================================================================= VOICES */

.nx-voices {
    padding: var(--nx-section-y) 0;
}

.nx-voice-lead {
    margin: 0 0 clamp(14px, 1.8vw, 22px);
    padding: clamp(28px, 3.4vw, 46px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    background: var(--nx-panel);
}

.nx-voice-lead__quote {
    margin: 0 0 26px;
    max-width: 46ch;
    font-family: var(--nx-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.02em;
    color: var(--nx-text);
}

.nx-voice-lead__quote::before { content: '\201C'; }
.nx-voice-lead__quote::after { content: '\201D'; }

.nx-voice-lead .nx-voice__by {
    border-top: none;
    padding-top: 0;
}

.nx-voice__avatar--lead {
    width: 52px;
    height: 52px;
}

.nx-voices__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
}

.nx-voice {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    background: var(--nx-panel);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nx-voice:hover {
    border-color: var(--nx-line-2);
    background: var(--nx-panel-2);
    transform: translateY(-4px);
}

.nx-voice__quote {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--nx-text);
}

.nx-voice__quote::before {
    content: '\201C';
}

.nx-voice__quote::after {
    content: '\201D';
}

.nx-voice__by {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--nx-line);
}

.nx-voice__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.nx-voice__name,
.nx-voice__role {
    display: block;
}

.nx-voice__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--nx-text);
}

.nx-voice__role {
    font-size: 0.8rem;
    color: var(--nx-text-3);
}

/* =================================================================== PLAN */

.nx-plan {
    padding: 0 0 var(--nx-section-y);
}

.nx-plan__card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(30px, 4vw, 56px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-xl);
    background: var(--nx-bg-2);
}

.nx-plan__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.nx-plan__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.nx-plan__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nx-plan__list li + li {
    border-top: 1px solid var(--nx-line);
}

.nx-plan__list li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    font-size: 0.92rem;
    color: var(--nx-text-2);
}

/* ==================================================================== FAQ */

.nx-faq {
    padding: 0 0 var(--nx-section-y);
}

.nx-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.nx-faq .nx-section-head {
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--nx-header-h) + 40px);
}

.nx-faq__list {
    border-top: 1px solid var(--nx-line);
}

.nx-faq__item {
    border-bottom: 1px solid var(--nx-line);
}

.nx-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--nx-text);
    cursor: pointer;
    transition: color 0.2s ease;
}

.nx-faq__q:hover {
    color: var(--nx-accent-soft);
}

.nx-faq__sign {
    flex: none;
    font-size: 20px !important;
    color: var(--nx-text-3);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.nx-faq__item--open .nx-faq__sign {
    transform: rotate(135deg);
    color: var(--nx-accent-soft);
}

.nx-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.nx-faq__item--open .nx-faq__a {
    grid-template-rows: 1fr;
}

.nx-faq__a > p {
    overflow: hidden;
    margin: 0;
    max-width: 62ch;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--nx-text-2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nx-faq__item--open .nx-faq__a > p {
    opacity: 1;
    padding-bottom: 22px;
}

/* ================================================================== CLOSE */

.nx-close {
    position: relative;
    padding: clamp(90px, 12vw, 160px) var(--nx-gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top: 1px solid var(--nx-line);
    background: var(--nx-bg-2);
}

.nx-close__marquee {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 1.4vw, 18px);
    opacity: 0.085;
    mask-image: radial-gradient(80% 70% at 50% 50%, transparent 26%, #000 78%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, transparent 26%, #000 78%);
    pointer-events: none;
    user-select: none;
}

.nx-close__row {
    overflow: hidden;
    white-space: nowrap;
}

.nx-close__track {
    display: inline-flex;
    gap: clamp(20px, 3vw, 46px);
    width: max-content;
    font-family: var(--nx-display);
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--nx-text);
    animation-name: nx-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.nx-close__track--right {
    animation-direction: reverse;
}

.nx-close__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    max-width: 640px;
}

.nx-close__title {
    margin: 0;
    font-family: var(--nx-display);
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 600;
    color: var(--nx-text);
}

.nx-close__lede {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nx-close__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

/* ========================================================= FEATURE GLYPHS */

.nx-glyph {
    position: absolute;
    inset: 0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    font-size: 0.72rem;
    color: var(--nx-text-2);
}

/* Portals ---------------------------------------------------------------- */

.nx-glyph-lane {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.nx-glyph-lane__label {
    font-weight: 600;
    color: var(--nx-text-3);
}

.nx-glyph-lane__track {
    height: 8px;
    border-radius: 999px;
    background: var(--nx-panel-2);
    overflow: hidden;
}

.nx-glyph-lane__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--nx-accent);
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--nx-i) * 160ms);
}

.nx-bento__card--in .nx-glyph-lane__fill {
    width: var(--nx-pct);
}

.nx-glyph-chips {
    display: flex;
    gap: 7px;
    margin-top: 6px;
}

.nx-glyph-chip {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--nx-line);
    background: var(--nx-panel-2);
    color: var(--nx-text-3);
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition: opacity 0.5s ease calc(360ms + var(--nx-i) * 110ms),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(360ms + var(--nx-i) * 110ms),
        border-color 0.3s ease, color 0.3s ease;
}

.nx-bento__card--in .nx-glyph-chip {
    opacity: 1;
    transform: none;
}

.nx-bento__card:hover .nx-glyph-chip {
    border-color: var(--nx-line-2);
    color: var(--nx-text-2);
}

/* Signature -------------------------------------------------------------- */

.nx-glyph--signature {
    justify-content: center;
    gap: 8px;
}

.nx-glyph-doc {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nx-glyph-doc__line {
    height: 6px;
    width: var(--nx-w);
    border-radius: 3px;
    background: var(--nx-panel-2);
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
    transition: opacity 0.45s ease calc(var(--nx-i) * 90ms),
        transform 0.45s ease calc(var(--nx-i) * 90ms);
}

.nx-bento__card--in .nx-glyph-doc__line {
    opacity: 1;
    transform: none;
}

.nx-glyph-sign {
    width: 100%;
    height: 46px;
    overflow: visible;
}

.nx-glyph-sign__stroke {
    fill: none;
    stroke: var(--nx-accent-soft);
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.5, 0, 0.2, 1) 0.35s;
}

.nx-bento__card--in .nx-glyph-sign__stroke {
    stroke-dashoffset: 0;
}

.nx-glyph-sign__rule {
    stroke: var(--nx-line-2);
}

.nx-glyph-stamp {
    position: absolute;
    right: 22px;
    bottom: 18px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--nx-line-2);
    color: var(--nx-good);
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.4s ease 1.7s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s;
}

.nx-bento__card--in .nx-glyph-stamp {
    opacity: 1;
    transform: none;
}

/* Deadlines -------------------------------------------------------------- */

.nx-glyph--deadline {
    justify-content: center;
}

.nx-glyph-rail {
    position: relative;
    height: 60px;
}

.nx-glyph-rail__line,
.nx-glyph-rail__progress {
    position: absolute;
    top: 14px;
    left: 0;
    height: 2px;
    border-radius: 2px;
}

.nx-glyph-rail__line {
    right: 0;
    background: var(--nx-line-2);
}

.nx-glyph-rail__progress {
    width: 0;
    background: var(--nx-accent);
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.nx-bento__card--in .nx-glyph-rail__progress {
    width: 42%;
}

.nx-glyph-mark {
    position: absolute;
    top: 0;
    left: var(--nx-pos);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.5s ease calc(300ms + var(--nx-i) * 130ms);
}

.nx-bento__card--in .nx-glyph-mark {
    opacity: 1;
}

.nx-glyph-mark__dot {
    width: 9px;
    height: 9px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--nx-bg);
    border: 2px solid var(--nx-line-2);
}

.nx-glyph-mark--live .nx-glyph-mark__dot {
    border-color: var(--nx-accent);
    background: var(--nx-accent);
}

.nx-glyph-mark__label {
    white-space: nowrap;
    font-size: 0.66rem;
    color: var(--nx-text-3);
}

.nx-glyph-mark--live .nx-glyph-mark__label {
    color: var(--nx-accent-soft);
    font-weight: 600;
}

/* Documents -------------------------------------------------------------- */

.nx-glyph--document {
    justify-content: center;
    gap: 8px;
}

.nx-glyph-sheet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-sm);
    background: var(--nx-bg-2);
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 0.5s ease calc(var(--nx-i) * 110ms),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--nx-i) * 110ms);
}

.nx-bento__card--in .nx-glyph-sheet {
    opacity: 1;
    transform: none;
}

.nx-bento__card:hover .nx-glyph-sheet {
    transform: translateX(calc(var(--nx-i) * 8px));
}

.nx-glyph-sheet__tab {
    width: 14px;
    height: 16px;
    flex: none;
    border-radius: 2px;
    background: var(--nx-accent);
    opacity: 0.7;
}

.nx-glyph-sheet__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nx-text);
}

.nx-glyph-sheet__meta {
    color: var(--nx-text-3);
}

/* Offers ----------------------------------------------------------------- */

.nx-glyph--offer {
    justify-content: center;
    gap: 0;
}

.nx-glyph-offer__head,
.nx-glyph-offer__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
    align-items: center;
}

.nx-glyph-offer__head {
    color: var(--nx-text-3);
    font-weight: 600;
    border-bottom: 1px solid var(--nx-line);
}

.nx-glyph-offer__row {
    border-bottom: 1px solid var(--nx-line);
    color: var(--nx-text-2);
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity 0.5s ease calc(var(--nx-i) * 120ms),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--nx-i) * 120ms);
}

.nx-bento__card--in .nx-glyph-offer__row {
    opacity: 1;
    transform: none;
}

.nx-glyph-offer__label {
    color: var(--nx-text-3);
}

.nx-glyph-offer__win {
    color: var(--nx-text);
    font-weight: 600;
}

.nx-glyph-offer__win::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--nx-good);
    vertical-align: middle;
}

/* Pricing ---------------------------------------------------------------- */

.nx-glyph--pricing {
    justify-content: flex-end;
    gap: 14px;
}

.nx-glyph-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 84px;
}

.nx-glyph-bar {
    flex: 1;
    height: 0;
    border-radius: 4px 4px 0 0;
    background: var(--nx-panel-2);
    transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--nx-i) * 90ms),
        background 0.3s ease;
}

.nx-bento__card--in .nx-glyph-bar {
    height: var(--nx-h);
}

.nx-glyph-bar--subject {
    background: var(--nx-accent);
}

.nx-glyph-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nx-glyph-range__band {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--nx-accent);
    opacity: 0;
    transition: opacity 0.6s ease 0.7s;
}

.nx-bento__card--in .nx-glyph-range__band {
    opacity: 1;
}

.nx-glyph-range__value {
    font-weight: 600;
    color: var(--nx-text);
    white-space: nowrap;
}

/* ================================================================= MOTION */

.nx-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms);
}

.nx-reveal--in {
    opacity: 1;
    transform: none;
}

.nx-stagger__item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms);
}

.nx-stagger--in .nx-stagger__item {
    opacity: 1;
    transform: none;
}

/* ================================================================= FOOTER */

/* The site footer (css/siteFooter.css) is one component on ~20 surfaces, and it
   paints nothing that isn't an `--sf-*` token. Its own defaults already give this
   page's treatment — a full-bleed band on the page's ground, with the wordmark —
   so all that is left here is the marketing grid and type: sharing `--nx-gutter`
   and `--nx-max` is what puts the footer's columns on the same column as every
   section above it, and the `--nx-text-*` ramp is warmer than the product's
   greys. */
.nx-page .sf {
    --sf-panel: var(--nx-panel);
    --sf-line: var(--nx-line);
    --sf-line-2: var(--nx-line-2);
    --sf-watermark: color-mix(in srgb, var(--nx-text) 5%, transparent);

    --sf-text: var(--nx-text);
    --sf-muted: var(--nx-text-2);
    --sf-faint: var(--nx-text-3);
    --sf-accent: var(--nx-accent-soft);
    --sf-display: var(--nx-display);

    --sf-gutter: var(--nx-gutter);
    --sf-max: var(--nx-max);
}

/* ============================================================== RESPONSIVE */

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

    .nx-trust__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nx-voices__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    /* The ring needs more width than the copy leaves here. */
    .nx-orb {
        display: none;
    }
}

@media (max-width: 980px) {
    .nx-page {
        --nx-header-h: 64px;
    }

    .nx-hero__title {
        max-width: 20ch;
    }

    .nx-hero__shot {
        height: clamp(460px, 72vh, 760px);
    }

    .nx-shift__grid,
    .nx-orbit__inner,
    .nx-plan__card,
    .nx-faq__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .nx-faq .nx-section-head {
        position: static;
    }

    .nx-bento__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The stage moves above the steps and stays pinned while they scroll under
       it, so the panel a step is describing is always the one on screen. */
    .nx-tour__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nx-tour__stage {
        grid-column: 1;
        grid-row: 1;
    }

    .nx-tour__rail {
        grid-column: 1;
        grid-row: 2;
    }

    /* Desktop puts the stage and the rail in the same grid row, so the inner
       panel has the rail's full height to stick through. Stacked, they are in
       separate rows and that row is exactly the panel's own height — no scroll
       range, so the panel scrolled away the moment its row did. Stick the stage
       itself instead: its containing block is the grid, which the rail below
       makes tall. */
    .nx-tour__stage {
        position: sticky;
        top: var(--nx-header-h);
        z-index: 1;
        height: auto;
        align-self: start;
        padding: 12px 0 16px;
        background: var(--nx-bg-2);
    }

    .nx-tour__sticky {
        position: static;
        /* Tall enough that the Orbit panel's metric tiles finish rather than
           being cut through the middle of a row. */
        height: clamp(340px, 50vh, 440px);
    }

    /* Short steps here would flick past two panels in one thumb-swipe; each
       still needs about half a screen of scroll to be read. */
    .nx-tour__step {
        min-height: 46vh;
        padding: 30px 0;
    }

    .nx-tour__step:last-child {
        min-height: 36vh;
    }

    .nx-tour__step-inner {
        opacity: 1;
        filter: none;
    }

    .nx-orb__sway,
    .nx-orb__chip-rev,
    .nx-orb__chip-drift,
    .nx-acts__track,
    .nx-act {
        animation: none;
    }

    .nx-act {
        opacity: 1;
        transform: none;
    }

    .nx-tour__progress {
        bottom: -20px;
    }
}

@media (max-width: 700px) {
    .nx-page {
        --nx-section-y: clamp(56px, 12vw, 78px);
    }

    /* The shared header's three-up grid does not fit a phone: the nav pushed
       "Log In" onto two lines and ran the demo button off the right edge. The
       product nav belongs to the mega menu, which is desktop-only anyway. */
    .nx-header-shell .header-public-nav-links {
        display: none;
    }

    .nx-header-shell .logo img {
        height: 22px;
    }

    .nx-header-shell .user-profile-container {
        gap: 10px;
    }

    .nx-header-shell .header-book-demo-button {
        padding: 8px 14px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .nx-header-shell .user-profile {
        white-space: nowrap;
    }

    .nx-hero {
        padding-top: 34px;
    }

    .nx-hero__title {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    .nx-hero__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .nx-hero__actions .nx-btn {
        width: 100%;
    }

    .nx-hero__reassure {
        align-self: flex-start;
        max-width: 100%;
    }

    .nx-hero__shot {
        height: 74vh;
        min-height: 460px;
    }

    .nx-scope__grid,
    .nx-trust__grid,
    .nx-voices__grid,
    .nx-bento__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nx-orbit__entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .nx-close__panel {
        max-width: 100%;
    }

    .nx-close__actions {
        width: 100%;
        flex-direction: column;
    }

    .nx-close__actions .nx-btn {
        width: 100%;
    }
}

/* ======================================================= REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .nx-page *,
    .nx-page *::before,
    .nx-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }

    .nx-logos__track,
    .nx-close__track {
        animation: none !important;
        transform: none !important;
    }

    .nx-tour__step-inner {
        opacity: 1;
        filter: none;
    }
}


/* css/pricing.css */
/* src/css/pricing.css — see components/Pricing.js
 *
 * The pricing page, in the marketing site's design language.
 *
 * It rides on `.nx-page` from css/landingRedesign.css: the tokens, the type kit,
 * the buttons, the FAQ accordion, the fixed header shell and the footer skin all
 * come from there, so a change to the brand only has to happen once. This file
 * holds the pricing-specific furniture — the plan cards, the enterprise band,
 * the capability table — in an `nxp-` namespace.
 *
 * The design rules are the landing page's: flat surfaces, hairline borders, one
 * accent (#8C4BFF) that only ever marks state. Nothing here is tinted, glowed or
 * gradient-filled for decoration. The old page did all three, plus a starfield.
 */

.nxp-page {
    /* The one token this page adds. --nx-good is tuned for a dark panel; on the
       white light-mode ground it drops under 3:1 against small text. */
    --nxp-good: var(--nx-good);
}

[data-theme='light'] .nxp-page {
    --nxp-good: #12784a;
}

/* Screen-reader-only text. The check/dash marks in the capability table carry
   no accessible name of their own, so each cell states its answer in words. */
.nxp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =================================================================== HERO */

.nxp-hero {
    padding: clamp(46px, 5.5vw, 80px) 0 clamp(30px, 3.6vw, 46px);
}

.nxp-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.nxp-hero__title {
    margin: 2px 0 0;
    font-family: var(--nx-display);
    font-size: clamp(2.3rem, 5.4vw, 4.2rem);
    line-height: 1.0;
    letter-spacing: -0.04em;
    font-weight: 600;
    color: var(--nx-text);
    max-width: 16ch;
}

.nxp-hero__lede {
    margin: 0;
    max-width: 54ch;
    font-size: clamp(1rem, 1.3vw, 1.14rem);
    line-height: 1.62;
    color: var(--nx-text-2);
}

.nxp-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: var(--nx-text-3);
}

.nxp-hero__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nxp-hero__trust li + li::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--nx-line-2);
}

/* ================================================================ NOTICES */

/* Live billing state: which plan is running, why checkout is closed, what went
   wrong. It sits between the headline and the cards because it changes what the
   buttons below it will do. */
.nxp-notices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 70ch;
    margin-top: 4px;
}

.nxp-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-sm);
    background: var(--nx-panel);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--nx-text-2);
}

.nxp-notice__dot {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 0.46em;
    border-radius: 50%;
    background: var(--nx-accent-soft);
}

.nxp-notice--error {
    border-color: color-mix(in srgb, var(--nx-bad) 50%, transparent);
    color: var(--nx-text);
}

.nxp-notice--error .nxp-notice__dot {
    background: var(--nx-bad);
}

/* ================================================================== PLANS */

.nxp-plans {
    padding-bottom: clamp(16px, 1.8vw, 22px);
}

/* Six rows, one per band of a card: name, tagline, price, the line under the
   price, the button, the feature list. The cards are subgrids of it, so the
   three buttons sit on one line however long a tagline the catalog hands us —
   the min-heights further down are only the pre-subgrid fallback. */
.nxp-plans__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    gap: clamp(14px, 1.6vw, 20px);
    align-items: stretch;
}

.nxp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-row: span 6;
    padding: clamp(24px, 2.5vw, 34px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    background: var(--nx-panel);
    transition: border-color 0.25s ease;
}

.nxp-card:hover {
    border-color: var(--nx-line-2);
}

/* "Featured" is state, not decoration: the accent marks the plan we recommend
   and the button that plan's action, and nothing else on the card is tinted. */
.nxp-card--featured {
    background: var(--nx-bg-2);
    border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

.nxp-card--featured:hover {
    border-color: color-mix(in srgb, var(--nx-accent) 65%, transparent);
}

.nxp-card--current {
    border-color: var(--nx-line-2);
}

.nxp-card__tag {
    position: absolute;
    top: 0;
    right: clamp(22px, 2.4vw, 32px);
    transform: translateY(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--nx-accent);
    color: #fff;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nxp-card__tag--quiet {
    background: var(--nx-text);
    color: var(--nx-bg);
}

.nxp-card__name {
    margin: 0;
    font-family: var(--nx-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--nx-text);
}

/* The tagline comes from the server catalog, so its length is not ours to
   control; the floor keeps the three price rows on one line. */
.nxp-card__tagline {
    margin: 9px 0 0;
    min-height: 2.7em;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--nx-text-2);
}

.nxp-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin-top: clamp(20px, 2.2vw, 28px);
}

.nxp-card__amount {
    font-family: var(--nx-display);
    font-size: clamp(2.5rem, 3.6vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.048em;
    font-weight: 600;
    color: var(--nx-text);
    font-variant-numeric: tabular-nums;
}

.nxp-card__period {
    font-size: 0.86rem;
    color: var(--nx-text-3);
}

.nxp-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-height: 26px;
    margin: 13px 0 0;
    font-size: 0.82rem;
    color: var(--nx-text-3);
}

.nxp-save {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--nxp-good) 42%, transparent);
    border-radius: 999px;
    color: var(--nxp-good);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.nxp-card__action {
    margin-top: clamp(20px, 2.2vw, 26px);
}

.nxp-card__action .nx-btn {
    width: 100%;
}

/* .nx-btn has no disabled state of its own — it is only ever a link on the
   landing page. Here it covers both the in-flight redirect and the plan the
   agent is already on. */
.nxp-page .nx-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.nxp-page .nx-btn--primary:disabled:hover {
    background: var(--nx-accent);
    transform: none;
}

.nxp-page .nx-btn--ghost:disabled:hover {
    background: var(--nx-panel);
    border-color: var(--nx-line-2);
}

.nxp-card__features {
    margin: clamp(20px, 2.2vw, 26px) 0 0;
    padding: clamp(17px, 1.9vw, 22px) 0 0;
    border-top: 1px solid var(--nx-line);
    list-style: none;
    display: flex;
    flex-direction: column;
}

.nxp-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 8px 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--nx-text-2);
}

/* What the plan does NOT include. Stating it plainly is worth more than a
   feature list that quietly stops — and it is why the old page shipped a
   checkmark next to "No Orbit AI assistant". */
.nxp-card__features li.nxp-off {
    color: var(--nx-text-3);
}

.nxp-off__icon {
    flex: none;
    font-size: 17px !important;
    color: var(--nx-text-3);
}

@supports (grid-template-rows: subgrid) {
    .nxp-card {
        display: grid;
        grid-template-rows: subgrid;
        /* The parent's gap would otherwise open between every band of the card. */
        row-gap: 0;
    }

    .nxp-card__tagline,
    .nxp-card__meta {
        min-height: 0;
    }
}

/* ============================================================= ENTERPRISE */

.nxp-enterprise {
    padding: clamp(14px, 1.6vw, 20px) 0 var(--nx-section-y);
}

.nxp-enterprise__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(26px, 3.6vw, 56px);
    align-items: center;
    padding: clamp(28px, 3.4vw, 46px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-xl);
    background: var(--nx-bg-2);
}

.nxp-enterprise__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.nxp-enterprise__title {
    margin: 0;
    font-family: var(--nx-display);
    font-size: clamp(1.5rem, 2.3vw, 2.05rem);
    line-height: 1.08;
    letter-spacing: -0.032em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxp-enterprise__lede {
    margin: 0;
    max-width: 46ch;
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nxp-enterprise__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nxp-enterprise__list li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    font-size: 0.9rem;
    color: var(--nx-text-2);
    border-top: 1px solid var(--nx-line);
}

.nxp-enterprise__list li:nth-child(-n + 2) {
    border-top: none;
}

/* ================================================================ COMPARE */

.nxp-compare {
    padding: var(--nx-section-y) 0;
    background: var(--nx-bg-2);
    border-top: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
}

.nxp-compare__scroll {
    overflow-x: auto;
}

.nxp-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    text-align: left;
}

.nxp-table th,
.nxp-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--nx-line);
}

.nxp-table th:first-child,
.nxp-table td:first-child {
    width: 43%;
    padding-left: 0;
}

.nxp-table th:not(:first-child),
.nxp-table td:not(:first-child) {
    width: 19%;
    text-align: center;
}

.nxp-table thead th {
    padding-top: 0;
    border-bottom-color: var(--nx-line-2);
    font-family: var(--nx-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nx-text);
}

.nxp-table thead th:first-child {
    font-family: var(--nx-font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nxp-table__head-price {
    display: block;
    margin-top: 3px;
    font-family: var(--nx-font);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--nx-text-3);
}

.nxp-table__group th {
    padding-top: 34px;
    border-bottom-color: var(--nx-line-2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nxp-table tbody th {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--nx-text);
}

.nxp-table__row:hover th,
.nxp-table__row:hover td {
    background: var(--nx-panel);
}

.nxp-mark {
    font-size: 19px !important;
    color: var(--nx-accent-soft);
    vertical-align: middle;
}

/* "Not included" reads better as an absence than as a red cross. */
.nxp-nomark {
    display: inline-block;
    width: 13px;
    height: 1px;
    background: var(--nx-line-2);
    vertical-align: middle;
}

.nxp-compare__note {
    margin: 22px 0 0;
    font-size: 0.86rem;
    color: var(--nx-text-3);
}

/* ============================================================== ASSURANCE */

.nxp-assure {
    padding: var(--nx-section-y) 0 0;
}

.nxp-assure__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 20px);
}

.nxp-assure__item {
    padding: 26px 24px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    background: var(--nx-panel);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.nxp-assure__item:hover {
    border-color: var(--nx-line-2);
    transform: translateY(-3px);
}

.nxp-assure__icon {
    font-size: 22px !important;
    color: var(--nx-accent-soft);
}

.nxp-assure__title {
    margin: 14px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nx-text);
}

.nxp-assure__body {
    margin: 9px 0 0;
    font-size: 0.88rem;
    line-height: 1.58;
    color: var(--nx-text-2);
}

/* ==================================================================== FAQ */

/* The accordion itself is .nx-faq from landingRedesign.css; it only needs the
   top padding the landing page gets from the section above it. */
.nxp-page .nx-faq {
    padding-top: var(--nx-section-y);
}

/* ================================================================== CLOSE */

.nxp-close {
    padding: 0 0 var(--nx-section-y);
}

.nxp-close__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(42px, 5.4vw, 76px) clamp(24px, 4vw, 48px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-xl);
    background: var(--nx-bg-2);
    text-align: center;
}

.nxp-close__title {
    margin: 0;
    max-width: 20ch;
    font-family: var(--nx-display);
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.036em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxp-close__lede {
    margin: 0;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nxp-close__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

/* ============================================================== RESPONSIVE */

@media (max-width: 980px) {
    .nxp-enterprise__card {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .nxp-assure__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The cards hold three across down to a tablet in portrait — stacking them at
   the first sign of pressure leaves a 6000px page and half the width empty. */
@media (max-width: 1040px) {
    .nxp-card {
        padding: 22px 20px;
    }

    .nxp-card__amount {
        font-size: 2.3rem;
    }

    .nxp-card__features li,
    .nxp-card__tagline {
        font-size: 0.86rem;
    }
}

@media (max-width: 780px) {
    .nxp-plans__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px;
    }

    .nxp-card__tagline,
    .nxp-card__meta {
        min-height: 0;
    }

    .nxp-card__meta:empty {
        display: none;
        margin: 0;
    }
}

/* The capability table, stacked.
 *
 * Four columns will not fit a phone, and a table that scrolls sideways inside
 * the page reads as a bug — the reader sees one plan and a cut-off second. Each
 * row becomes a block instead: the capability, then the three answers labelled
 * inline from `data-plan`, which is the plan's name straight off the catalog. */
@media (max-width: 720px) {
    .nxp-compare .nxp-table {
        min-width: 0;
    }

    .nxp-compare .nxp-table thead {
        display: none;
    }

    .nxp-compare .nxp-table,
    .nxp-compare .nxp-table tbody,
    .nxp-compare .nxp-table tr,
    .nxp-compare .nxp-table th,
    .nxp-compare .nxp-table td {
        display: block;
        width: auto;
        padding: 0;
        border: none;
        text-align: left;
    }

    .nxp-compare .nxp-table__group th {
        padding: 30px 0 12px;
        border-bottom: 1px solid var(--nx-line-2);
    }

    .nxp-compare .nxp-table tr.nxp-table__row {
        padding: 15px 0;
        border-bottom: 1px solid var(--nx-line);
    }

    .nxp-compare .nxp-table__row:hover th,
    .nxp-compare .nxp-table__row:hover td {
        background: none;
    }

    .nxp-compare .nxp-table__row th {
        padding-bottom: 11px;
    }

    .nxp-compare .nxp-table__row td {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-right: 20px;
    }

    .nxp-compare .nxp-table__row td::before {
        content: attr(data-plan);
        font-size: 0.78rem;
        color: var(--nx-text-3);
    }

    .nxp-compare .nxp-mark {
        font-size: 17px !important;
    }
}

@media (max-width: 700px) {
    .nxp-hero {
        padding-top: 34px;
    }

    .nxp-hero__title {
        max-width: none;
    }

    .nxp-enterprise__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .nxp-enterprise__list li:nth-child(-n + 2) {
        border-top: 1px solid var(--nx-line);
    }

    .nxp-enterprise__list li:first-child {
        border-top: none;
    }

    .nxp-assure__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* css/About.css */
/* src/css/About.css — see components/About.js
 *
 * The about page, in the marketing site's design language.
 *
 * It rides on `.nx-page` from css/landingRedesign.css, exactly the way
 * css/pricing.css does: the tokens, the type kit, the buttons, the fixed header
 * shell and the footer skin all come from there, so the three public pages stay
 * one product. This file holds only the furniture this page adds — the
 * dictionary hero, the mission band, the principle cards and the founder's
 * story — in an `nxb-` namespace.
 *
 * `nxb-`, NOT `nxa-`: css/auth.css owns `nxa-` for the sign-in surface, and
 * every stylesheet ships in one bundle. This page briefly carried an unused
 * `nxa-page` class on its root as "scoping headroom"; auth.css then styled
 * `.nxa-page` as a centred grid shell, and /about inherited it — `<main>` and
 * the footer became centred grid items, so the full-bleed mission band was cut
 * to the container's width and the footer (which is `container-type:
 * inline-size`, so its contents contribute nothing to its own intrinsic width)
 * collapsed to a sliver. Prefixes in use: `nx-` (shared), `nxp-` (pricing),
 * `nxl-` (legal), `nxa-` (auth), `nxb-` (here). Grep before adding another —
 * and do not ship a class with no rules behind it.
 *
 * The design rules are the landing page's: flat surfaces, hairline borders, one
 * accent (#8C4BFF) that only ever marks state. The page it replaced read the
 * product's own theme.css tokens instead, so it arrived in the app's greys and
 * its cyan accent while home and /pricing were warm near-black and purple.
 *
 * THE TWO BRAND PNGS ARE MASKED, NOT FILTERED. The wordmark is a blue→purple
 * gradient and the signature is white ink; both need to land on the page's type
 * colour in both themes. `filter: invert(80%)` — what the old page used — is an
 * approximation of one token that has to be re-guessed for the other theme. A
 * mask paints the artwork with a real background, so `var(--nx-text)` is exactly
 * what shows and the light-mode rule disappears. The source is handed in from
 * the component as `--nxb-mark`, because the URL is a webpack import.
 */

/* =================================================================== HERO */

.nxb-hero {
    padding: clamp(46px, 5.5vw, 80px) 0 clamp(34px, 4vw, 54px);
}

.nxb-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* The headword line: the wordmark itself, with its pronunciation beside it. */
.nxb-entry {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(12px, 1.8vw, 22px);
    margin: 2px 0 0;
    font-weight: 400;
}

.nxb-entry__word {
    display: block;
    height: clamp(2.5rem, 6vw, 4.3rem);
    /* logo.png is 838x251 */
    aspect-ratio: 838 / 251;
    background: var(--nx-text);
    -webkit-mask-image: var(--nxb-mark);
    mask-image: var(--nxb-mark);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}

.nxb-entry__phonetic {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
    letter-spacing: 0.01em;
    color: var(--nx-text-3);
}

/* The definition, set as a dictionary sets one. */
.nxb-gloss {
    max-width: 44ch;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    color: var(--nx-text-2);
}

/* Orbit greets people in Playfair italic, and the landing page borrows that
   voice exactly once. This page spends its one on the part of speech, which is
   where a dictionary already expects a serif italic. */
.nxb-gloss__pos {
    margin-right: 0.5rem;
    color: var(--nx-text-3);
}

/* Setup quiet, payoff at full contrast — the landing hero's device. The bright
   half is the company tagline verbatim; everything after it is the mechanism. */
.nxb-hero__claim {
    max-width: 52ch;
    margin: clamp(10px, 1.4vw, 18px) 0 0;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.62;
    color: var(--nx-text-2);
}

.nxb-hero__claim-strong {
    color: var(--nx-text);
}

/* ================================================================ MISSION */

/* A full-bleed band, so the one sentence the company is organised around is not
   just another paragraph in the column. */
.nxb-mission {
    padding: var(--nx-section-y) 0;
    background: var(--nx-bg-2);
    border-top: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
}

.nxb-mission__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.nxb-statement {
    /* Wide enough that the quiet half does not stack into a four-line block, and
       sized just above .nx-h2 — this is the one sentence on the page that should
       outrank a section heading. */
    max-width: 26ch;
    margin: 0;
    font-family: var(--nx-display);
    font-size: clamp(1.8rem, 3.5vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.036em;
    font-weight: 600;
    text-wrap: balance;
}

.nxb-statement__lead {
    color: var(--nx-text);
}

.nxb-statement__rest {
    color: var(--nx-text-quiet);
}

/* ============================================================= PRINCIPLES */

.nxb-principles {
    padding: var(--nx-section-y) 0;
}

.nxb-principles__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 20px);
}

/* The transition restates the stagger's, deliberately.
 *
 * These cards are `Stagger` children, so `.nx-stagger__item` in
 * landingRedesign.css owns their opacity and transform in the base state — and
 * `transition` is a shorthand, so a bare `transition: border-color …` here would
 * REPLACE that list rather than extend it, and the reveal would pop in instead
 * of fading up. (That is what /pricing's plan cards do today.) This file loads
 * after landingRedesign.css and wins at equal specificity, so it has to carry
 * the reveal's own timing along with the hover's. */
.nxb-principle {
    padding: 26px 24px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    background: var(--nx-panel);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--nx-reveal-delay, 0ms),
        border-color 0.25s ease;
}

/* Border only, the way /pricing's plan cards mark hover. A lift would animate
   the same `transform` the reveal above is holding, and inherit its delay. */
.nxb-principle:hover {
    border-color: var(--nx-line-2);
}

.nxb-principle__icon {
    font-size: 22px !important;
    color: var(--nx-accent-soft);
}

.nxb-principle__title {
    margin: 14px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nx-text);
}

.nxb-principle__body {
    margin: 9px 0 0;
    font-size: 0.88rem;
    line-height: 1.58;
    color: var(--nx-text-2);
}

/* ================================================================== STORY */

.nxb-story {
    padding: 0 0 var(--nx-section-y);
}

.nxb-story__card {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 60px);
    align-items: start;
    padding: clamp(28px, 3.4vw, 46px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-xl);
    background: var(--nx-bg-2);
}

.nxb-signoff {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* White ink on transparent — masked so it takes the type colour in both themes.
   SASignature.png is 854x700. */
.nxb-signoff__mark {
    display: block;
    width: clamp(92px, 8vw, 116px);
    aspect-ratio: 854 / 700;
    margin-left: -0.15rem;
    background: var(--nx-text-2);
    -webkit-mask-image: var(--nxb-mark);
    mask-image: var(--nxb-mark);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
}

.nxb-signoff__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nxb-signoff__name {
    font-family: var(--nx-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--nx-text);
}

.nxb-signoff__role {
    font-size: 0.85rem;
    color: var(--nx-text-3);
}

.nxb-socials {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

/* The same boxed mark the site footer uses, on this page's tokens. */
.nxb-social {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    color: var(--nx-text-3);
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.nxb-social:hover {
    background: var(--nx-panel);
    border-color: var(--nx-line-2);
}

.nxb-social__icon {
    width: 16px;
    height: 16px;
    font-size: 16px !important;
}

.nxb-social--x:hover { color: var(--nx-text); }
.nxb-social--instagram:hover { color: #e4405f; }
.nxb-social--linkedin:hover { color: #0077b5; }

.nxb-story__body {
    display: flex;
    max-width: 62ch;
    flex-direction: column;
    gap: 1.15rem;
}

.nxb-story__body p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.72;
    color: var(--nx-text-2);
}

/* Emphasis is contrast, not a tint or a rule down the side. */
.nxb-story__em {
    color: var(--nx-text);
}

/* ================================================================== CLOSE */

/* Deliberately the same shape as .nxp-close__card on /pricing: the secondary
   pages close quietly, and the marquee belongs to the landing page's finale. */
.nxb-close {
    padding: 0 0 var(--nx-section-y);
}

.nxb-close__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(42px, 5.4vw, 76px) clamp(24px, 4vw, 48px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-xl);
    background: var(--nx-bg-2);
    text-align: center;
}

.nxb-close__title {
    margin: 0;
    max-width: 20ch;
    /* Six words over 20ch otherwise breaks as five-and-one. */
    text-wrap: balance;
    font-family: var(--nx-display);
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.036em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxb-close__lede {
    margin: 0;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nxb-close__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

/* ============================================================== RESPONSIVE */

/* The principle cards hold three across all the way down to the phone
   breakpoint, the way .nx-bento__grid does. A two-up step in between only puts
   the third card on a row of its own with an empty half beside it. */

@media (max-width: 980px) {
    /* The signature column and the prose stop sharing a line before the prose
       measure collapses; the sign-off then reads as a byline above the story. */
    .nxb-story__card {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(22px, 3vw, 32px);
    }

    .nxb-signoff {
        gap: 12px;
    }
}

@media (max-width: 700px) {
    .nxb-hero {
        padding-top: 34px;
    }

    .nxb-entry {
        gap: 10px;
    }

    .nxb-statement {
        max-width: none;
    }

    .nxb-principles__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nxb-close__actions {
        width: 100%;
        flex-direction: column;
    }

    .nxb-close__actions .nx-btn {
        width: 100%;
    }
}


/* css/seo.css */
/* src/css/seo.css — see components/seo/
 *
 * The SEO surfaces: six product pages, the guide hub and nine guides.
 *
 * Fifth namespace on the pattern css/pricing.css established. Everything here
 * sits under `.nxr-page`, which is always carried alongside `.nx-page`, so the
 * tokens, the type kit, `.nx-btn`, `.nx-pill`, `.nx-tick`, the `.nx-faq`
 * accordion, the fixed header shell and the footer skin all come from
 * css/landingRedesign.css. This file adds only what those pages do not have:
 * a prose measure, a contents rail, tables, callouts and the link blocks.
 *
 * PREFIX MAP, because these collide app-wide and every stylesheet ships in one
 * bundle: `nx-` shared, `nxp-` pricing, `nxl-` legal, `nxs-` support,
 * `nxa-` auth, `nxb-` about, `nxr-` here. `nxr-` was grepped clear across
 * frontend/src before use — and that grep is only true at the moment it runs, so
 * check again before claiming another one.
 *
 * THREE THINGS THAT ARE LOAD-BEARING:
 *
 * 1. No `<header>` elements anywhere in these components. css/common.css:15
 *    paints the header ELEMENT with `background-color: … !important`, plus
 *    `padding: 2vh 8vh` and `align-items: center`. It has silently broken four
 *    surfaces in this repo. Hero bands here are divs.
 *
 * 2. The contents rail is `position: sticky`, which needs two things the other
 *    marketing pages already learned: `body:has(.nx-page) { overflow-x: clip }`
 *    in landingRedesign.css (because `overflow-x: hidden` on body makes it a
 *    scroll container and kills sticky), and the grid must NOT be
 *    `align-items: start` — that shrinks the aside to its content height and the
 *    rail has no travel. Default `stretch` is deliberate.
 *
 * 3. `transition` is a shorthand and it beats the reveal. `.nx-stagger__item`
 *    owns a Stagger child's `opacity` and `transform` timing; a local
 *    `transition: border-color …` on the same element REPLACES that list, and
 *    this file loads after landingRedesign.css, so the card pops in instead of
 *    fading up. `.nxr-card` and `.nxr-entry` restate the reveal's own timing
 *    before adding their own properties.
 */

.nxr-page {
    /* The prose column. Every paragraph, list and callout shares this measure so
       they line up on one right edge; tables and cards are figures and break it. */
    --nxr-measure: 68ch;
    --nxr-rail: 232px;
}

/* ==================================================================== HERO */

.nxr-hero {
    padding: clamp(44px, 6vw, 84px) 0 clamp(28px, 3.5vw, 44px);
}

.nxr-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.nxr-hero__title {
    margin: 0;
    max-width: 22ch;
    font-family: var(--nx-display);
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--nx-text);
    text-wrap: balance;
}

.nxr-hero--article .nxr-hero__title {
    max-width: 26ch;
    font-size: clamp(1.95rem, 3.6vw, 2.9rem);
}

.nxr-hero__lede {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nxr-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.nxr-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
    color: var(--nx-text-3);
}

.nxr-hero__trust li {
    position: relative;
    padding-left: 14px;
}

.nxr-hero__trust li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nx-text-3);
    transform: translateY(-50%);
}

.nxr-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin: 2px 0 0;
    font-size: 0.84rem;
    color: var(--nx-text-3);
}

.nxr-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.nxr-hero__meta-icon {
    font-size: 15px !important;
    color: var(--nx-text-3);
}

/* ============================================================== BREADCRUMBS */

.nxr-crumbs {
    font-size: 0.8rem;
    color: var(--nx-text-3);
}

.nxr-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nxr-crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.nxr-crumbs__list a {
    color: var(--nx-text-3);
    text-decoration: none;
    transition: color 0.18s ease;
}

.nxr-crumbs__list a:hover {
    color: var(--nx-text);
}

.nxr-crumbs__sep {
    font-size: 15px !important;
    color: var(--nx-line-2);
}

/* ==================================================================== BODY */

.nxr-body {
    padding-bottom: var(--nx-section-y);
}

/* Default `align-items` on purpose — `start` collapses the aside and the rail
   then has no travel to stick through. */
.nxr-body--article .nxr-body__inner {
    display: grid;
    grid-template-columns: var(--nxr-rail) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
}

.nxr-rail {
    position: relative;
}

.nxr-rail__sticky {
    position: sticky;
    top: calc(var(--nx-header-h) + 28px);
}

.nxr-rail__title {
    margin: 0 0 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nxr-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

/* The active-section treatment is the product tour's active step: a 2px left
   rule that turns accent, with the number in the accent tint. */
.nxr-rail__link {
    display: flex;
    gap: 10px;
    padding: 8px 0 8px 14px;
    border-left: 2px solid var(--nx-line);
    font-size: 0.855rem;
    line-height: 1.4;
    color: var(--nx-text-3);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nxr-rail__link:hover {
    color: var(--nx-text-2);
    border-left-color: var(--nx-line-2);
}

.nxr-rail__link--active {
    color: var(--nx-text);
    border-left-color: var(--nx-accent);
}

.nxr-rail__n {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    padding-top: 2px;
    color: var(--nx-text-3);
}

.nxr-rail__link--active .nxr-rail__n {
    color: var(--nx-accent-soft);
}

/* ================================================================== PROSE */

.nxr-prose {
    min-width: 0;
}

.nxr-block + .nxr-block {
    margin-top: 20px;
}

.nxr-block--wide {
    margin-top: 36px;
}

.nxr-block--wide + .nxr-block {
    margin-top: 36px;
}

.nxr-lead,
.nxr-p,
.nxr-list,
.nxr-checks {
    max-width: var(--nxr-measure);
}

.nxr-lead {
    margin: 0;
    font-size: clamp(1.06rem, 1.3vw, 1.22rem);
    line-height: 1.62;
    color: var(--nx-text);
}

.nxr-p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--nx-text-2);
}

.nxr-h2 {
    margin: 0;
    padding-top: clamp(18px, 2.4vw, 30px);
    font-family: var(--nx-display);
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    line-height: 1.16;
    letter-spacing: -0.022em;
    font-weight: 600;
    color: var(--nx-text);
    scroll-margin-top: calc(var(--nx-header-h) + 24px);
}

.nxr-h3 {
    margin: 0;
    font-family: var(--nx-display);
    font-size: clamp(1.08rem, 1.5vw, 1.24rem);
    line-height: 1.3;
    letter-spacing: -0.014em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxr-prose a {
    color: var(--nx-text);
    text-decoration: none;
    border-bottom: 1px solid var(--nx-accent-soft);
    padding-bottom: 1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.nxr-prose a:hover {
    color: var(--nx-accent-soft);
    border-bottom-color: var(--nx-text-3);
}

.nxr-prose strong {
    color: var(--nx-text);
    font-weight: 600;
}

.nxr-prose em {
    font-style: italic;
    color: var(--nx-text);
}

/* Form numbers (`CBS1`, `NTC43R`) read as identifiers, so they get a monospace
   chip rather than the accent — the accent marks state, not emphasis. */
.nxr-code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.86em;
    padding: 1.5px 5px;
    border: 1px solid var(--nx-line);
    border-radius: 5px;
    background: var(--nx-panel);
    color: var(--nx-text);
    white-space: nowrap;
}

/* ================================================================== LISTS */

.nxr-list {
    margin: 0;
    padding-left: 1.15em;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 1rem;
    line-height: 1.66;
    color: var(--nx-text-2);
}

.nxr-list li::marker {
    color: var(--nx-text-3);
}

.nxr-list--ordered {
    padding-left: 1.35em;
}

.nxr-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.nxr-checks li {
    display: flex;
    gap: 11px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nxr-checks .nx-tick {
    margin-top: 2px;
}

/* ================================================================== STEPS */

.nxr-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--nx-line);
}

.nxr-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--nx-line);
}

.nxr-step__n {
    font-family: var(--nx-display);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--nx-accent-soft);
    padding-top: 2px;
}

.nxr-step__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nxr-step__title {
    margin: 0;
    font-family: var(--nx-display);
    font-size: 1.06rem;
    letter-spacing: -0.014em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxr-step__text {
    margin: 0;
    max-width: 62ch;
    font-size: 0.98rem;
    line-height: 1.66;
    color: var(--nx-text-2);
}

.nxr-step__points {
    margin: 4px 0 0;
    padding-left: 1.1em;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--nx-text-3);
}

/* ================================================================= TABLES */

.nxr-figure {
    margin: 0;
}

/* `position: relative` is load-bearing, not decoration. The compare table's
   accessible cell labels (.nxr-sr) are the standard visually-hidden recipe —
   `position: absolute`, 1px, clipped — and an absolutely positioned element is
   only clipped by an ancestor that is its containing block. `.nx-page` is
   `position: relative`, so without this the labels resolved against the PAGE,
   landed at their static position inside a horizontally scrolled table, and
   pushed the whole document 71px sideways on a phone. */
.nxr-table__scroll {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    -webkit-overflow-scrolling: touch;
}

.nxr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.nxr-table__caption {
    caption-side: top;
    text-align: left;
    padding: 14px 18px 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nxr-table thead th {
    text-align: left;
    padding: 14px 18px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nx-text-3);
    border-bottom: 1px solid var(--nx-line);
    white-space: nowrap;
}

.nxr-table tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--nx-text);
}

.nxr-table tbody th,
.nxr-table tbody td {
    padding: 14px 18px;
    vertical-align: top;
    line-height: 1.55;
    color: var(--nx-text-2);
    border-bottom: 1px solid var(--nx-line);
}

.nxr-table tbody tr:last-child th,
.nxr-table tbody tr:last-child td {
    border-bottom: none;
}

.nxr-figure__note {
    margin: 12px 0 0;
    max-width: var(--nxr-measure);
    font-size: 0.855rem;
    line-height: 1.6;
    color: var(--nx-text-3);
}

.nxr-offset {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--nx-text-2);
}

.nxr-offset--none {
    white-space: normal;
    color: var(--nx-text-3);
    font-style: italic;
}

/* The comparison matrix. Our own column gets a faint ground so the eye can find
   it, and nothing else is tinted. */
.nxr-table--compare tbody th,
.nxr-table--compare thead th:first-child {
    min-width: 200px;
}

.nxr-table__th--us,
.nxr-table__td--us {
    background: var(--nx-panel);
}

.nxr-table__th--us {
    color: var(--nx-text);
}

.nxr-mark {
    font-size: 19px !important;
    display: block;
}

.nxr-mark--yes {
    color: var(--nx-accent-soft);
}

.nxr-mark--no {
    color: var(--nx-text-3);
}

.nxr-mark--partial {
    color: var(--nx-text-3);
}

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

/* ================================================================== NOTES */

.nxr-note {
    display: flex;
    gap: 14px;
    max-width: var(--nxr-measure);
    padding: 16px 18px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    background: var(--nx-panel);
}

.nxr-note__icon {
    flex: none;
    font-size: 19px !important;
    margin-top: 2px;
    color: var(--nx-text-3);
}

.nxr-note--legal .nxr-note__icon {
    color: var(--nx-accent-soft);
}

.nxr-note__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nxr-note__title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--nx-text);
}

.nxr-note__text {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--nx-text-2);
}

/* ================================================================== CARDS */

.nxr-cards {
    display: grid;
    gap: 14px;
}

.nxr-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nxr-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Restates the reveal's opacity/transform timing before adding its own — a bare
   `transition: border-color …` here REPLACES the Stagger child's timing and the
   card stops fading in. */
.nxr-card {
    padding: 20px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    background: var(--nx-panel);
    transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, background 0.22s ease;
}

.nxr-card:hover {
    border-color: var(--nx-line-2);
    background: var(--nx-panel-2);
}

.nxr-card__title {
    margin: 0 0 8px;
    font-family: var(--nx-display);
    font-size: 1.02rem;
    letter-spacing: -0.014em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxr-card__body {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.62;
    color: var(--nx-text-2);
}

/* ================================================================== SPLIT */

.nxr-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.nxr-split__col {
    padding: 22px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    background: var(--nx-panel);
}

.nxr-split__col--accent {
    border-color: var(--nx-line-2);
    background: var(--nx-panel-2);
}

.nxr-split__tag {
    margin: 0 0 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nxr-split__col--accent .nxr-split__tag {
    color: var(--nx-accent-soft);
}

.nxr-split__title {
    margin: 0 0 14px;
    font-family: var(--nx-display);
    font-size: 1.06rem;
    letter-spacing: -0.014em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxr-split__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nxr-split__list li {
    display: flex;
    gap: 10px;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--nx-text-2);
}

.nxr-split__icon {
    flex: none;
    font-size: 17px !important;
    margin-top: 2px;
}

.nxr-split__icon--check {
    color: var(--nx-accent-soft);
}

.nxr-split__icon--x {
    color: var(--nx-text-3);
}

/* ==================================================================== FAQ */

/* .nx-faq is a full-bleed SECTION on the landing page (its own padding and
   background); inside the prose column it is just a block. */
.nxr-page .nxr-faq {
    padding: 0;
    background: none;
}

.nxr-faq .nx-faq__list {
    margin-top: 20px;
}

/* ================================================================== LINKS */

.nxr-links {
    padding: 22px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    background: var(--nx-panel);
}

.nxr-links__title {
    margin: 0 0 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--nx-text-3);
}

.nxr-links__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nxr-links__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--nx-line);
    text-decoration: none;
    transition: padding-left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.nxr-links__list li:last-child .nxr-links__item {
    border-bottom: none;
}

.nxr-links__item:hover {
    padding-left: 6px;
}

.nxr-links__label {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--nx-text);
}

.nxr-links__note {
    grid-column: 1;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--nx-text-3);
}

.nxr-links__arrow {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 18px !important;
    color: var(--nx-text-3);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.nxr-links__item:hover .nxr-links__arrow {
    transform: translateX(3px);
    color: var(--nx-accent-soft);
}

/* The prose link treatment must not reach the link blocks or the cards. */
.nxr-prose .nxr-links__item,
.nxr-prose .nxr-links__item:hover {
    border-bottom-color: var(--nx-line);
    color: inherit;
}

/* ==================================================================== CTA */

.nxr-cta {
    padding: 28px;
    border: 1px solid var(--nx-line-2);
    border-radius: var(--nx-r-lg);
    background: var(--nx-panel-2);
}

.nxr-cta__title {
    margin: 0 0 10px;
    font-family: var(--nx-display);
    font-size: clamp(1.3rem, 1.9vw, 1.6rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxr-cta__text {
    margin: 0 0 20px;
    max-width: 56ch;
    font-size: 0.98rem;
    line-height: 1.62;
    color: var(--nx-text-2);
}

.nxr-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.nxr-cta__reassure {
    margin: 14px 0 0;
    font-size: 0.86rem;
    color: var(--nx-text-3);
}

/* ============================================================== BLOG INDEX */

.nxr-group {
    padding-top: clamp(30px, 4vw, 54px);
}

.nxr-group__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 26px;
}

.nxr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Same reveal-timing restatement as .nxr-card. */
.nxr-entry {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r);
    background: var(--nx-panel);
    text-decoration: none;
    transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, background 0.22s ease;
}

.nxr-entry:hover {
    border-color: var(--nx-line-2);
    background: var(--nx-panel-2);
}

.nxr-entry__title {
    margin: 0;
    font-family: var(--nx-display);
    font-size: 1.06rem;
    line-height: 1.26;
    letter-spacing: -0.016em;
    font-weight: 600;
    color: var(--nx-text);
}

.nxr-entry__body {
    margin: 0;
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--nx-text-2);
}

.nxr-entry__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--nx-text-3);
}

.nxr-entry__icon {
    font-size: 15px !important;
}

.nxr-entry__arrow {
    margin-left: auto;
    font-size: 17px !important;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.nxr-entry:hover .nxr-entry__arrow {
    transform: translateX(3px);
    color: var(--nx-accent-soft);
}

/* ================================================================== CLOSE */

.nxr-close {
    padding-bottom: var(--nx-section-y);
}

.nxr-close__panel {
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-xl);
    background: var(--nx-bg-2);
    text-align: center;
}

.nxr-close__title {
    margin: 0 0 12px;
    font-family: var(--nx-display);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    line-height: 1.1;
    letter-spacing: -0.026em;
    font-weight: 600;
    color: var(--nx-text);
    text-wrap: balance;
}

.nxr-close__lede {
    margin: 0 auto 22px;
    max-width: 56ch;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--nx-text-2);
}

.nxr-close__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.nxr-close__fine {
    margin: 18px auto 0;
    max-width: 62ch;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--nx-text-3);
}

/* ============================================================== RESPONSIVE */

@media (max-width: 1080px) {
    .nxr-page {
        --nxr-rail: 200px;
    }
}

@media (max-width: 940px) {
    /* The rail goes above the prose rather than beside it. It keeps its sticky
       behaviour off, because a sticky contents list at the top of a phone screen
       eats the content it indexes. */
    .nxr-body--article .nxr-body__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .nxr-rail__sticky {
        position: static;
    }

    .nxr-rail {
        padding: 18px;
        border: 1px solid var(--nx-line);
        border-radius: var(--nx-r);
        background: var(--nx-panel);
    }

    .nxr-cards--3,
    .nxr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .nxr-cards--2,
    .nxr-cards--3,
    .nxr-grid,
    .nxr-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .nxr-step {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .nxr-cta,
    .nxr-links {
        padding: 20px;
    }

    .nxr-table thead th,
    .nxr-table tbody th,
    .nxr-table tbody td {
        padding: 12px 14px;
    }
}

/* ========================================================= REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .nxr-links__item,
    .nxr-links__item:hover,
    .nxr-entry__arrow,
    .nxr-links__arrow {
        transition: none;
        transform: none;
        padding-left: 0;
    }
}


/* Runtime-injected rules (emotion / styled-components), captured from the
 * rendered pages so icons are sized before the bundle runs. */
.hNXGbo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; }
.hNXGbo .loader { position: relative; transform: rotateZ(45deg); perspective: 1000px; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; color: rgb(255, 140, 0); }
.hNXGbo .loader::before, .hNXGbo .loader::after { content: ""; display: block; position: absolute; top: 0px; left: 0px; width: inherit; height: inherit; border-radius: 50%; transform: rotateX(70deg); animation: 1.5s linear 0s infinite normal none running spin; box-shadow: currentcolor 0px 0px 3px 1px; }
.hNXGbo .loader::after { color: rgb(255, 107, 0); transform: rotateY(70deg); animation-delay: 0.4s; }
@keyframes spin { 
  0%, 100% { box-shadow: currentcolor 0.4em 0px 0px 0px; }
  12% { box-shadow: currentcolor 0.4em 0.4em 0px 0px; }
  25% { box-shadow: currentcolor 0px 0.4em 0px 0px; }
  37% { box-shadow: currentcolor -0.4em 0.4em 0px 0px; }
  50% { box-shadow: currentcolor -0.4em 0px 0px 0px; }
  62% { box-shadow: currentcolor -0.4em -0.4em 0px 0px; }
  75% { box-shadow: currentcolor 0px -0.4em 0px 0px; }
  87% { box-shadow: currentcolor 0.4em -0.4em 0px 0px; }
}
.css-vubbuv { user-select: none; width: 1em; height: 1em; display: inline-block; fill: currentcolor; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.5rem; }
.css-1cw4hi4 { user-select: none; width: 1em; height: 1em; display: inline-block; fill: currentcolor; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1); font-size: inherit; }
.css-vubbuv { user-select: none; width: 1em; height: 1em; display: inline-block; fill: currentcolor; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.5rem; }