@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Golos+Text:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================================
   NIBVOK — visual theme (single source of truth)
   ============================================================================
   Purpose: give NIBVOK the *structure* of SamCart (type scale, section rhythm,
   component shapes, nav/hero/card/button/pricing/footer patterns) and SamCart's own MEASURED palette
   (electric blue #3034f4, navy #001134, mint #27ff8b, on #f6f9fe) — the 'AI feel'.

   How it works
   ------------
   1. Defines the palette once as --nv-* custom properties (the source of truth).
   2. Aliases the app's pre-existing legacy variables (--primary, --dark, …) onto
      the palette, so every stylesheet that already consumes them re-themes with
      no per-file value edits.
   3. Overrides Tailwind's arbitrary-hex utilities (e.g. `bg-[#6C63FF]`) used by
      the CDN pages. Those compile to class selectors of specificity (0,1,0); the
      `html` prefix below lifts ours to (0,1,1) so we win regardless of the order
      the Tailwind runtime injects its <style>. Unlayered + higher specificity =
      no !important needed.
   4. Adds SamCart-style typographic + spacing + component refinements keyed to
      the app's EXISTING class names — no markup or JS renames.

   Loaded LAST in every page <head> so it wins equal-specificity ties.

   Palette roles (mirroring SamCart's roles, new hue):
     dark band    -> --nv-ink       (deep plum-ink)      [SamCart #001134 navy]
     light band   -> --nv-cream / --nv-surface-2         [was #f1ede5 / #f6f9fe]
     strong accent-> --nv-accent    (electric blue #3034F4) [SamCart #3034f4 blue]
     muted body   -> --nv-body                           [was #344051 slate]
   ========================================================================== */

:root {
  /* ---- Palette: source of truth -------------------------------------- */
  --nv-ink:        #001134;   /* SamCart deep navy — dark full-width bands       */
  --nv-ink-rgb:    0 17 52;
  --nv-ink-2:      #000B24;   /* near-black navy — deepest surfaces              */
  --nv-ink-soft:   #0A1F42;   /* raised dark card sitting on ink                 */
  --nv-ink-line:   #16305C;   /* hairline border on dark                        */

  --nv-surface:    #FFFFFF;   /* light card                                     */
  --nv-surface-2:  #F6F9FE;   /* cool blue-white band (SamCart body bg)          */
  --nv-cream:      #F1EDE5;   /* warm cream band                                */
  --nv-line:       #E3E9F5;   /* light hairline                                 */
  --nv-line-2:     #EFF3FA;   /* faintest hairline                              */

  --nv-text:       #001134;   /* headings on light                              */
  --nv-body:       #303D59;   /* muted body text on light                       */
  --nv-body-2:     #6B6961;   /* faint / disabled on light                      */
  --nv-on-dark:    #FFFFFF;   /* headings on dark                               */
  --nv-on-dark-2:  #B8C2D9;   /* muted body on dark                             */

  --nv-accent:      #3034F4;  /* SamCart electric blue — the one strong accent   */
  --nv-accent-rgb:  48 52 244;
  --nv-accent-dark: #2327C9;  /* hover / pressed                                */
  --nv-accent-light:#808AFF;  /* accent text on dark panels                     */
  --nv-accent-soft: #EEF0FF;  /* accent-tinted surface                          */
  --nv-accent-soft-dark: #0A1650;  /* accent-tinted surface on ink               */

  /* ---- Creator-site accent (second brand colour) ----------------------
     Two surfaces, two colours. The AI store (/ai) keeps the electric blue
     accent above; the creator landing page uses the warm magenta from the
     NIBVOK mark so the two sites read as distinct brands. Declared HERE,
     in the single source of truth, and applied on that page only by the
     html[data-nv-site="creator"] rule below — no hex lives in the pages. */
  --nv-accent-creator:           #C2255C;  /* creator magenta (NIBVOK mark)   */
  --nv-accent-creator-rgb:       194 37 92;
  --nv-accent-creator-dark:      #8E1B43;  /* hover / pressed                 */
  --nv-accent-creator-light:     #EE9CBE;  /* accent text on dark panels      */
  --nv-accent-creator-soft:      #FDEBF3;  /* accent-tinted surface           */
  --nv-accent-creator-soft-dark: #3D0A1D;  /* accent-tinted surface on ink    */

  --nv-gold:    #D9A404;
  --nv-mint:    #27FF8B;  /* SamCart neon-mint highlight (stats) */
  --nv-success: #0F9D68;
  --nv-warning: #E8940E;
  --nv-danger:  #E03131;
  --nv-danger-rgb: 224 49 49;
  --nv-success-rgb: 15 157 104;
  --nv-warning-rgb: 232 148 14;

  /* Semantic tints for badges/status (shared palette, not one-off literals) */
  --nv-success-soft: #E4F6EE;  --nv-success-dark: #0B7A50;
  --nv-warning-soft: #FDF1DC;  --nv-warning-dark: #A5650A;
  --nv-danger-soft:  #FCE7E7;  --nv-danger-dark:  #C42A2A;
  --nv-info-soft:    #E8EEFF;  --nv-info-dark:    #1E3A8A;
  /* Dark-mode needs its own tints (light tints read as glare on ink) */
  --nv-success-soft-dark: #103024;
  --nv-warning-soft-dark: #33260F;
  --nv-danger-soft-dark:  #3A1520;
  --nv-success-bright:    #7FD1A6;
  --nv-warning-bright:    #FFC078;
  --nv-danger-bright:     #FF9AA8;
  --nv-ink-raise:         #34204D;  /* raised surface between ink-soft and ink-line */

  /* Soft, SamCart-ish elevation */
  --nv-shadow:       0 6px 24px rgba(23, 10, 36, 0.07);
  --nv-shadow-hover: 0 16px 44px rgba(23, 10, 36, 0.13);
  --nv-ring:         0 0 0 3px rgba(48, 52, 244, 0.22);

  /* ---- Type system (SamCart's design language, measured) -------------- */
  --nv-font-display: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --nv-font-body:    'Golos Text', 'Inter', system-ui, -apple-system, sans-serif;
  --nv-font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --nv-display:  clamp(3.25rem, 7vw,    5.9375rem);  /* 95px  hero display   */
  --nv-h1:       clamp(2.25rem, 4.4vw,  3.75rem);    /* 60px  secondary h1   */
  --nv-stat:     52px;                               /* big stat number      */
  --nv-h2-lg:    40px;                               /* large section head   */
  --nv-h2:       26px;                               /* section head         */
  --nv-body-lg:  19px;                               /* lead paragraph       */
  --nv-eyebrow:  13px;                               /* uppercase mono label */
  --nv-btn:      15px;                               /* button label         */

  --nv-radius:    10px;   /* cards / panels   (was SamCart 10px)           */
  --nv-radius-lg: 20px;   /* large feature panels (was SamCart 20px)       */

  /* ---- Legacy variable aliases (re-theme consumer stylesheets) -------- */
  --primary:        var(--nv-accent);
  --primary-dark:   var(--nv-accent-dark);
  --primary-light:  #DE4C7E;
  --primary-bg:     var(--nv-accent-soft);
  --secondary:      var(--nv-danger);
  --success:        var(--nv-success);
  --warning:        var(--nv-warning);
  --danger:         var(--nv-danger);
  --info:           var(--nv-accent);
  --gold:           var(--nv-gold);
  --dark:           var(--nv-ink);
  --dark-secondary: var(--nv-ink-soft);
  --gray:           var(--nv-body);
  --gray-light:     var(--nv-line);
  --gray-bg:        var(--nv-surface-2);
  --white:          #ffffff;
  --shadow:         var(--nv-shadow);
  --shadow-hover:   var(--nv-shadow-hover);

  /* NB: the generic names `--bg`, `--text`, `--card`, `--border` are deliberately
     NOT aliased here. Pages that carry their own inline <style>
     (ai-store, contact-sheet, store-photos) use those names for OPPOSITE
     meanings (dark-band surface vs light surface), so a global alias would
     clobber them. Each of those pages consumes --nv-* directly instead. */
}

/* ---- Creator site opts into the magenta accent -------------------------
   One marker on the page's <html> element swaps the accent tokens to the
   creator palette above. Specificity (0,1,1) beats the :root (0,1,0) block,
   and re-pointing the token — rather than each consumer — re-themes every
   descendant. This is the ONLY place the two sites diverge. */
html[data-nv-site="creator"] {
  --nv-accent:           var(--nv-accent-creator);
  --nv-accent-rgb:       var(--nv-accent-creator-rgb);
  --nv-accent-dark:      var(--nv-accent-creator-dark);
  --nv-accent-light:     var(--nv-accent-creator-light);
  --nv-accent-soft:      var(--nv-accent-creator-soft);
  --nv-accent-soft-dark: var(--nv-accent-creator-soft-dark);
}

/* Dark mode: keep the plum-ink system coherent (mirrors studio.css `.dark`). */
.dark {
  --gray-bg:   var(--nv-ink);
  --white:     var(--nv-ink-soft);
  --card:      var(--nv-ink-soft);
  --text:      var(--nv-on-dark);
  --dark:      var(--nv-on-dark);
  --gray:      var(--nv-on-dark-2);
  --gray-light:var(--nv-ink-line);
  --primary-bg:#3A1030;
  --border:    var(--nv-ink-line);
  --shadow:    0 6px 24px rgba(0, 0, 0, 0.38);
}

/* ============================================================================
   Base
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--nv-font-body);
}

h1, h2, h3, h4, h5, h6, .brand, .display { font-family: var(--nv-font-display); }

/* Default link colour, without clobbering page-local anchor rules.
   `:where()` contributes ZERO specificity, so this beats the browser's
   UA-default link blue (#0000EE) but still loses to EVERY author rule —
   e.g. ai-store.html's `a{color:inherit}`, index.html's accent-light links,
   or legal.css's `.legal-header nav a`. Without it, ~100 links across the app
   (legal-page logos, signup terms, store-photos attribution) render in raw
   UA blue. */
:where(a) { color: var(--nv-accent); }
:where(a:hover) { color: var(--nv-accent-dark); }

::selection { background: rgb(var(--nv-accent-rgb) / 22%); color: var(--nv-text); }

/* SamCart-style tight tracking on display type */
h1, h2, .hero-content h1, .section-header h2, .header h1, .display {
  letter-spacing: -0.03em;
}

/* ============================================================================
   Tailwind arbitrary-hex utilities (CDN pages)
   ============================================================================
   `html` prefix => specificity (0,1,1), above the runtime's (0,1,0). `dark:`
   variants are re-gated with the app's own `&:where(.dark, .dark *)`.        */

/* --- surfaces & bands ------------------------------------------------- */
html .bg-\[\#F7F7FB\]              { background-color: var(--nv-surface-2); }
html .bg-\[\#F0EFFF\]              { background-color: var(--nv-accent-soft); }
html .hover\:bg-\[\#F0EFFF\]:hover { background-color: var(--nv-accent-soft); }
html .bg-\[\#E5E7EB\]              { background-color: var(--nv-line); }

/* --- accent ------------------------------------------------------------ */
html .bg-\[\#6C63FF\]              { background-color: var(--nv-accent); }
html .hover\:bg-\[\#6C63FF\]:hover { background-color: var(--nv-accent); }
html .hover\:bg-\[\#5A52D5\]:hover { background-color: var(--nv-accent-dark); }
html .bg-\[\#6C63FF\]\/10          { background-color: rgb(var(--nv-accent-rgb) / 10%); }
html .bg-\[\#6C63FF\]\/12          { background-color: rgb(var(--nv-accent-rgb) / 12%); }
html .from-\[\#6C63FF\]\/10        { --tw-gradient-from: rgb(var(--nv-accent-rgb) / 10%); }
html .text-\[\#6C63FF\]            { color: var(--nv-accent); }
html .hover\:text-\[\#6C63FF\]:hover { color: var(--nv-accent); }
html .hover\:text-\[\#5A52D5\]:hover { color: var(--nv-accent-dark); }
html .text-\[\#5A52D5\]            { color: var(--nv-accent-dark); }
html .border-\[\#6C63FF\]          { border-color: var(--nv-accent); }
html .border-\[\#6C63FF\]\/25      { border-color: rgb(var(--nv-accent-rgb) / 25%); }
html .hover\:border-\[\#8B83FF\]:hover { border-color: #DE4C7E; }
html .text-\[\#A5A0FF\]            { color: var(--nv-accent-light); }
html .from-\[\#6C63FF\]            { --tw-gradient-from: var(--nv-accent); }

/* --- ink / neutral text ----------------------------------------------- */
html .text-\[\#0f0e17\]   { color: var(--nv-text); }
html .text-\[\#6B7280\]   { color: var(--nv-body); }
html .text-\[\#374151\]   { color: var(--nv-text); }
html .text-\[\#9CA3AF\]   { color: var(--nv-body-2); }
html .text-\[\#C9C6F0\]   { color: var(--nv-on-dark-2); }
html .border-\[\#E5E7EB\] { border-color: var(--nv-line); }
html .border-\[\#F3F4F6\] { border-color: var(--nv-line-2); }
html .bg-\[\#6B7280\]\/12 { background-color: rgb(94 84 112 / 12%); }

/* --- dark-panel tokens ------------------------------------------------- */
html .bg-\[\#14132b\]                   { background-color: var(--nv-ink-soft); }
html .from-\[\#14132b\]                 { --tw-gradient-from: var(--nv-ink-soft); }
html .to-\[\#241f4d\]                   { --tw-gradient-to: var(--nv-ink-soft); }
html .dark\:text-\[\#C6B9DA\]:where(.dark, .dark *)  { color: var(--nv-on-dark-2); }
html .dark\:bg-\[\#0f0e17\]:where(.dark, .dark *)      { background-color: var(--nv-ink); }
html .dark\:bg-\[\#0f0e17\]\/92:where(.dark, .dark *)  { background-color: rgb(var(--nv-ink-rgb) / 92%); }
html .dark\:bg-\[\#1a1a2e\]:where(.dark, .dark *)      { background-color: var(--nv-ink-soft); }
html .dark\:bg-\[\#12121c\]:where(.dark, .dark *)      { background-color: var(--nv-ink-2); }
html .dark\:border-\[\#2a2a40\]:where(.dark, .dark *)  { border-color: var(--nv-ink-line); }
html .dark\:text-\[\#D1D5DB\]:where(.dark, .dark *)    { color: var(--nv-on-dark-2); }

/* --- semantic status (harmonised, still readable) ---------------------- */
html .bg-\[\#10B981\]\/12 { background-color: rgb(15 157 104 / 12%); }
html .bg-\[\#10B981\]      { background-color: var(--nv-success); }
html .text-\[\#059669\]    { color: #0B7A50; }
html .text-\[\#10B981\]    { color: var(--nv-success); }
html .bg-\[\#EF4444\]\/12 { background-color: rgb(224 49 49 / 12%); }
html .bg-\[\#EF4444\]      { background-color: var(--nv-danger); }
html .text-\[\#DC2626\]    { color: #C42A2A; }
html .text-\[\#EF4444\]    { color: var(--nv-danger); }
html .bg-\[\#F59E0B\]\/12 { background-color: rgb(232 148 14 / 14%); }
html .text-\[\#B45309\]    { color: #A5650A; }
/* danger tokens used by the creator pages' dark mode + inline alerts */
html .text-\[\#E03131\]         { color: var(--nv-danger); }
html .bg-\[\#FCE7E7\]           { background-color: var(--nv-danger-soft); }
html .border-\[\#E03131\]\/30   { border-color: rgb(var(--nv-danger-rgb) / 30%); }
html .dark\:bg-\[\#3A1520\]:where(.dark, .dark *)  { background-color: var(--nv-danger-soft-dark); }

/* --- softer, SamCart-style card shadow -------------------------------- */
html [class*="shadow-[0_4px_20px_rgba(0,0,0,0.08)]"] {
  box-shadow: var(--nv-shadow);
}

/* ============================================================================
   SamCart design-system layer (keyed to EXISTING class names)
   ============================================================================
   Type:  Poppins (display) / Golos Text (body) / Space Mono (labels, buttons).
   Shape: buttons are SQUARE-cornered, uppercase, monospace — SamCart's
          button language (radius 0, 15px Space Mono 700, 0.02em tracking).
   Rhythm: generous full-width bands, 1200px content column, 80–100px padding.
   Behaviour is untouched: colours, type, spacing, radius and shadow only.
   ========================================================================== */

/* ---- Landing: display type + band rhythm ------------------------------ */
.hero-content h1 {
  font-size: var(--nv-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero-stats .stat .number {
  font-family: var(--nv-font-display);
  font-size: var(--nv-stat);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.section-header h2 {
  font-size: var(--nv-h2-lg);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.section-header p { font-size: var(--nv-body-lg); line-height: 1.52; }

/* All-caps monospace eyebrow — SamCart's label voice */
.eyebrow, .ox-eyebrow, .section-eyebrow, .kicker, .label-mono, .stat-label-mono {
  font-family: var(--nv-font-mono);
  font-size: var(--nv-eyebrow);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nv-body);
}

/* ---- Buttons: square, uppercase, monospace ---------------------------- */
.btn-primary, .btn-secondary, .btn-login, .btn-signup,
.product-card .btn-product, .modal-content .btn-purchase {
  border-radius: 0;
  font-family: var(--nv-font-mono);
  font-weight: 700;
  font-size: var(--nv-btn);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 16px 30px;
}
.btn-primary, .product-card .btn-product, .modal-content .btn-purchase {
  background: var(--nv-accent);
  color: #fff;
  border: none;
  box-shadow: none;
}
.btn-primary:hover, .product-card .btn-product:hover, .modal-content .btn-purchase:hover {
  background: var(--nv-accent-dark);
  transform: none;
  box-shadow: none;
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--nv-line);
  color: var(--nv-text);
}
.btn-secondary:hover {
  border-color: var(--nv-accent);
  color: var(--nv-accent);
  background: transparent;
}

/* Nav CTAs share the square language, lighter weight */
.nav-links .btn-login {
  border: 1px solid var(--nv-line);
  background: transparent;
  color: var(--nv-text);
}
.nav-links .btn-login:hover { background: var(--nv-ink); color: var(--nv-on-dark); }
.nav-links .btn-signup { background: var(--nv-accent); color: #fff; }
.nav-links .btn-signup:hover { background: var(--nv-accent-dark); transform: none; }
.hero-book-link { font-family: var(--nv-font-mono); font-size: 13px; }

/* ---- Cards / panels --------------------------------------------------- */
.product-card, .testimonial-card {
  border-radius: var(--nv-radius-lg);
  border: 1px solid var(--nv-line);
  box-shadow: none;
}
.product-card:hover, .testimonial-card:hover {
  border-color: var(--nv-ink);
  box-shadow: var(--nv-shadow-hover);
}
.product-card .price, .modal-content .price-large {
  font-family: var(--nv-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.product-card .badge {
  border-radius: 0;
  font-family: var(--nv-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Auth pages -------------------------------------------------------- */
.auth-card {
  border-radius: 0;
  border: 1px solid var(--nv-line);
  box-shadow: none;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--nv-accent);
  box-shadow: var(--nv-ring);
}
.auth-card button {
  border-radius: 0;
  background: var(--nv-accent);
  font-family: var(--nv-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.auth-card button:hover { background: var(--nv-accent-dark); }

/* ---- Studio: plum-ink sidebar + accent active state -------------------- */
.sidebar { background: var(--nv-ink); color: var(--nv-on-dark); }
.sidebar-nav li.active { background: var(--nv-accent); color: #fff; }
.sidebar-brand .pro { background: var(--nv-accent); color: #fff; }
.btn-buy-tokens { background: var(--nv-accent); }
.btn-buy-tokens:hover { background: var(--nv-accent-dark); }

/* ---- Legal pages: ink band + accent links ----------------------------- */
.legal-header { border-bottom-color: var(--nv-ink-line); }
.logo .eightyeight, .legal-header nav a:hover { color: var(--nv-accent); }

/* ---- Dark-mode form surfaces -----------------------------------------
   Inputs/selects/textarea have no background rule of their own, so in dark
   mode they fall back to the UA's white. Give them the ink surface. */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark select,
.dark textarea {
  background-color: var(--nv-ink-soft);
  color: var(--nv-on-dark);
  border-color: var(--nv-ink-line);
}
html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea { background-color: var(--nv-ink-soft); color: var(--nv-on-dark); }

/* ---- Focus visibility (accessibility, kept intact) -------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--nv-accent);
  outline-offset: 2px;
}

/* ---- Scrollbar -------------------------------------------------------- */
* { scrollbar-color: rgb(var(--nv-accent-rgb) / 55%) transparent; }

@media (prefers-reduced-motion: no-preference) {
  .product-card, .testimonial-card, .btn-primary, .btn-secondary,
  .product-card .btn-product, .modal-content .btn-purchase {
    transition: box-shadow 0.2s ease, transform 0.2s ease,
                background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
}

/* ============================================================================
   Layout system: announcement bar, full-width bands, stat strip, features
   ============================================================================
   These are the structural primitives SamCart's home is built from: a thin
   dark announcement bar, alternating full-bleed bands (cream / ink), an
   all-caps monospace eyebrow above every section, oversized display type, a
   big-number stat strip, and two-column alternating feature blocks. Colours
   come from the palette above, so the whole system re-themes from one place.
   ========================================================================== */

/* ---- Announcement bar (sits in the fixed navbar, spans full width) ----- */
.ox-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.ox-header .navbar { position: static; }

/* Clear the fixed header (announcement bar + navbar) */
.hero { padding-top: 168px; }

.ox-announce { background: var(--nv-ink-2); color: var(--nv-on-dark); }
.ox-announce-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; padding: 9px 40px; flex-wrap: wrap;
}
.ox-announce span, .ox-announce a {
  font-family: var(--nv-font-mono);
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.3;
}
.ox-announce span { color: var(--nv-on-dark-2); }
.ox-announce a {
  color: var(--nv-accent-light); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ox-announce a:hover { color: #fff; border-bottom-color: currentColor; }

/* ---- Full-width bands ------------------------------------------------- */
.ox-band { padding: 100px 40px; }
.ox-band--tight { padding: 72px 40px; }
.ox-band--dark { background: var(--nv-ink); color: var(--nv-on-dark); }
.ox-band--ink2 { background: var(--nv-ink-2); color: var(--nv-on-dark); }
.ox-band--cream { background: var(--nv-cream); }
.ox-band--soft { background: var(--nv-surface-2); }
.ox-band-inner { max-width: 1280px; margin: 0 auto; }
.ox-band-inner--text { max-width: 820px; }

/* ---- Eyebrow: all-caps monospace label above every section ------------ */
.ox-eyebrow {
  display: inline-block;
  font-family: var(--nv-font-mono);
  font-size: var(--nv-eyebrow);
  font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--nv-body);
  margin: 0 0 18px;
}
.ox-band--dark .ox-eyebrow, .ox-band--ink2 .ox-eyebrow { color: var(--nv-accent-light); }

/* ---- Display type ----------------------------------------------------- */
.ox-display {
  font-family: var(--nv-font-display); font-weight: 800;
  font-size: var(--nv-display); line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.ox-headline {
  font-family: var(--nv-font-display); font-weight: 800;
  font-size: var(--nv-h1); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.ox-h2 {
  font-family: var(--nv-font-display); font-weight: 800;
  font-size: var(--nv-h2-lg); line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.ox-lead { font-size: var(--nv-body-lg); line-height: 1.52; color: var(--nv-body); margin: 0 0 30px; }
.ox-band--dark .ox-lead, .ox-band--ink2 .ox-lead { color: var(--nv-on-dark-2); }

/* ---- Stat strip (big numbers + mono caption) -------------------------- */
.ox-stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px 48px;
}
.ox-stat .n {
  font-family: var(--nv-font-display); font-weight: 800;
  font-size: var(--nv-stat); line-height: 1; letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.ox-stat .l {
  font-family: var(--nv-font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--nv-body-2);
}
.ox-band--dark .ox-stat .l, .ox-band--ink2 .ox-stat .l { color: var(--nv-on-dark-2); }
.ox-band--dark .ox-stat .n .accent, .ox-band--ink2 .ox-stat .n .accent { color: var(--nv-accent-light); }
.ox-stat .n .accent { color: var(--nv-accent); }

/* ---- Alternating feature blocks --------------------------------------- */
.ox-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ox-feature + .ox-feature { margin-top: 88px; }
.ox-feature--flip .ox-feature-media { order: -1; }
.ox-feature .ox-feature-num {
  font-family: var(--nv-font-display); font-weight: 800;
  font-size: var(--nv-h1); line-height: 1; letter-spacing: -0.02em;
  color: var(--nv-accent); margin-bottom: 14px;
}
.ox-feature h3 {
  font-family: var(--nv-font-display); font-weight: 800;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px;
}
.ox-feature p { font-size: 17px; line-height: 1.6; color: var(--nv-body); margin: 0; }

/* Placeholder panel where a product visual would sit (never a fake photo) */
.ox-panel {
  background: var(--nv-surface); border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius-lg); padding: 34px;
  box-shadow: var(--nv-shadow);
}
.ox-panel--dark { background: var(--nv-ink-soft); border-color: var(--nv-ink-line); box-shadow: none; }

/* Checklist inside a panel (hero visual) */
.ox-checklist { list-style: none; margin: 18px 0 22px; padding: 0; }
.ox-checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; font-size: 15px; line-height: 1.45;
  color: var(--nv-body);
}
.ox-checklist li i { color: var(--nv-accent); font-size: 13px; margin-top: 4px; }
.ox-panel-foot {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--nv-line);
}
.ox-panel-foot > span:first-child {
  font-family: var(--nv-font-display); font-weight: 800;
  font-size: 40px; letter-spacing: -0.02em; color: var(--nv-text);
}
.ox-panel-note {
  font-family: var(--nv-font-mono); font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--nv-body-2);
}

/* Mini diagram row used inside feature panels */
.ox-mini-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--nv-font-mono); font-size: 14px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--nv-text);
}
.ox-mini-row span:not(.ox-mini-arrow) {
  background: var(--nv-accent-soft); color: var(--nv-accent-dark);
  padding: 8px 12px; border-radius: 6px;
}
.ox-mini-arrow { color: var(--nv-accent); font-weight: 700; }
.ox-mini-note {
  margin-top: 16px; font-family: var(--nv-font-mono); font-size: 12px;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--nv-body-2);
}

/* Hero visual column (replaces the old photo block) */
.hero-visual { display: flex; align-items: center; justify-content: center; }
.hero-visual .ox-panel { width: 100%; max-width: 460px; }
.hero-visual .ox-h2 { margin-bottom: 6px; }

/* ---- Simple content card grid ----------------------------------------- */
.ox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.ox-card {
  background: var(--nv-surface); border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius); padding: 26px 24px;
}
.ox-card h4 {
  font-family: var(--nv-font-display); font-weight: 700;
  font-size: 17px; margin: 12px 0 6px;
}
.ox-card p { font-size: 14px; line-height: 1.6; color: var(--nv-body); margin: 0; }
.ox-card .ox-card-ico { font-size: 28px; line-height: 1; }

/* ---- Closing CTA band -------------------------------------------------- */
.ox-cta { text-align: center; }
.ox-cta .ox-display { font-size: var(--nv-h1); margin-bottom: 18px; }
.ox-cta .ox-lead { max-width: 620px; margin: 0 auto 32px; }
.ox-cta .btn-primary { padding: 18px 40px; }
.ox-cta .note {
  font-family: var(--nv-font-mono); font-size: 12px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--nv-body-2); margin-top: 16px;
}

/* ---- Logo / trust row -------------------------------------------------- */
.ox-logo-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px 48px;
}
.ox-logo-row span {
  font-family: var(--nv-font-display); font-weight: 700; font-size: 19px;
  color: var(--nv-body); opacity: 0.65;
}
.ox-band--dark .ox-logo-row span { color: var(--nv-on-dark-2); opacity: 0.8; }

@media (max-width: 900px) {
  .ox-feature { grid-template-columns: 1fr; gap: 30px; }
  .ox-feature--flip .ox-feature-media { order: 0; }
  .ox-band { padding: 64px 20px; }
  .ox-band--tight { padding: 48px 20px; }
  .ox-stat-strip { gap: 28px 32px; }
}
