/* =============================================================
   BLACKNODE v3 — Awwwards-grade WARM CREAM design system
   2026-05-19 overnight rebuild, synthesized from:
   fourmula.ai · linear.app · raycast.com · cursor.com
   ============================================================= */

:root {
  /* ---------- SURFACE TIERS (warm cream light) ---------- */
  --bn-bg-page:      #F8F6F2;   /* page background, warm cream */
  --bn-bg-surface-1: #F1ECE2;   /* card surface (lifted) */
  --bn-bg-surface-2: #E8E1D2;   /* nested surface */
  --bn-bg-surface-3: #DDD3BE;   /* highest tier (rare) */
  --bn-bg-inverse:   #1A1815;   /* dark inverse surface for contrast blocks */
  /* Short aliases used by app.css + workspace.css */
  --bn-surface-1:    var(--bn-bg-surface-1);
  --bn-surface-2:    var(--bn-bg-surface-2);
  --bn-radius-lg:    16px;

  /* ---------- INK (warm near-black scale) ---------- */
  --bn-ink:           #1A1815;   /* primary text */
  --bn-ink-secondary: #5A5550;   /* secondary text */
  --bn-ink-muted:     #8A847C;   /* placeholder, captions */
  --bn-ink-faint:     #B5AFA5;   /* disabled, ultra-quiet */
  --bn-ink-inverse:   #F8F6F2;   /* text on dark surface */

  /* ---------- ACCENT (deep coral — warm, premium) ---------- */
  --bn-accent:         #E94B2C;
  --bn-accent-hover:   #D43E22;
  --bn-accent-active:  #B83218;
  --bn-accent-soft:    rgba(233, 75, 44, 0.10);
  --bn-accent-glow:    rgba(233, 75, 44, 0.20);

  /* ---------- SEMANTIC (subtle, warm) ---------- */
  --bn-success: #4A7C59;
  --bn-warning: #C28A2E;
  --bn-danger:  #C5392A;
  --bn-info:    #4A6FA5;

  /* ---------- BORDERS (warm dark on cream) ---------- */
  --bn-border-soft:   rgba(26, 24, 21, 0.06);
  --bn-border:        rgba(26, 24, 21, 0.10);
  --bn-border-strong: rgba(26, 24, 21, 0.16);

  /* ---------- TYPOGRAPHY ---------- */
  --bn-font-sans: "Geist", "Geist Fallback", "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bn-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --bn-font-display: var(--bn-font-sans);

  /* Type scale (T-shirt) — RESTRAINED, premium */
  --bn-text-xs:   12px;
  --bn-text-sm:   13px;
  --bn-text-md:   14px;
  --bn-text-base: 15px;
  --bn-text-lg:   17px;
  --bn-text-xl:   20px;
  --bn-text-2xl:  24px;
  --bn-text-3xl:  32px;
  --bn-text-4xl:  44px;
  --bn-text-5xl:  56px;
  --bn-text-6xl:  72px;

  /* Line heights (tight for display, comfortable for body) */
  --bn-lh-tight:    1.05;
  --bn-lh-snug:     1.2;
  --bn-lh-normal:   1.45;
  --bn-lh-relaxed:  1.6;

  /* Letter-spacing (Linear pattern: tight on display) */
  --bn-ls-tight:   -0.025em;
  --bn-ls-tighter: -0.04em;
  --bn-ls-normal:  -0.005em;
  --bn-ls-wide:     0.04em;

  /* Weights (custom 510 — Linear's signature) */
  --bn-fw-regular: 400;
  --bn-fw-medium:  510;
  --bn-fw-semibold: 580;
  --bn-fw-bold:    640;

  /* ---------- SPACING (4px base, t-shirt) ---------- */
  --bn-s-px: 1px;
  --bn-s-0: 0;
  --bn-s-1: 4px;
  --bn-s-2: 8px;
  --bn-s-3: 12px;
  --bn-s-4: 16px;
  --bn-s-5: 20px;
  --bn-s-6: 24px;
  --bn-s-7: 32px;
  --bn-s-8: 40px;
  --bn-s-9: 48px;
  --bn-s-10: 64px;
  --bn-s-11: 80px;
  --bn-s-12: 96px;
  --bn-s-13: 128px;

  /* ---------- RADIUS ---------- */
  --bn-r-xs:   4px;
  --bn-r-sm:   6px;
  --bn-r-md:   10px;
  --bn-r-lg:   14px;
  --bn-r-xl:   20px;
  --bn-r-2xl:  28px;
  --bn-r-pill: 9999px;

  /* ---------- SHADOWS (warm, soft) ---------- */
  --bn-shadow-xs: 0 1px 1px rgba(26, 24, 21, 0.04);
  --bn-shadow-sm: 0 2px 4px rgba(26, 24, 21, 0.04), 0 1px 2px rgba(26, 24, 21, 0.05);
  --bn-shadow-md: 0 6px 14px rgba(26, 24, 21, 0.06), 0 2px 4px rgba(26, 24, 21, 0.04);
  --bn-shadow-lg: 0 18px 38px rgba(26, 24, 21, 0.10), 0 6px 12px rgba(26, 24, 21, 0.06);
  --bn-shadow-xl: 0 32px 64px rgba(26, 24, 21, 0.14), 0 12px 24px rgba(26, 24, 21, 0.08);

  /* Inset highlight (Raycast trick — but warm) */
  --bn-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --bn-inset-shadow:    inset 0 1px 2px rgba(26, 24, 21, 0.06);

  /* ---------- LEGACY ALIASES (v2 names that page CSS still uses) ---------- */
  --bn-ink-primary:   var(--bn-ink);
  --bn-ink-tertiary:  var(--bn-ink-muted);
  --bn-ink-on-accent: #ffffff;
  --bn-bg-deep:       var(--bn-bg-page);
  --bn-bg-glass:      rgba(248, 246, 242, 0.72);
  --bn-bg-glass-2:    rgba(248, 246, 242, 0.84);
  --bn-glass-blur:    saturate(1.4) blur(14px);
  --bn-glass:         rgba(248, 246, 242, 0.72);
  --bn-glass-1:       var(--bn-bg-surface-1);
  --bn-glass-2:       rgba(248, 246, 242, 0.84);
  --bn-border-active: var(--bn-border-strong);
  --bn-cyan:          #4A6FA5;
  --bn-magenta:       #C5392A;
  --bn-font-body:     var(--bn-font-sans);
  --bn-tracking-display: -0.025em;
  --bn-tracking-tight:   -0.025em;
  --bn-tracking-wide:     0.04em;
  --bn-r:                10px;
  --bn-r-full:           9999px;
  --bn-shadow-card:      var(--bn-shadow-sm);
  --bn-shadow-card-hover: var(--bn-shadow-md);
  --bn-glow-accent:      0 4px 14px var(--bn-accent-glow);
  --bn-z-sticky:      var(--bn-z-sticky, 50);

  /* ---------- MOTION ---------- */
  --bn-dur-instant: 80ms;
  --bn-dur-fast:    160ms;
  --bn-dur:         260ms;
  --bn-dur-slow:    380ms;
  --bn-dur-slowest: 620ms;

  --bn-ease:        cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out, Linear's */
  --bn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot */
  --bn-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --bn-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-INDEX ---------- */
  --bn-z-base:     1;
  --bn-z-raised:   10;
  --bn-z-sticky:   50;
  --bn-z-overlay:  90;
  --bn-z-modal:    100;
  --bn-z-toast:    110;
  --bn-z-tooltip:  120;
}

/* ============ BASE RESET / GLOBAL ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bn-bg-page);
  color: var(--bn-ink);
  font-family: var(--bn-font-sans);
  font-size: var(--bn-text-base);
  font-weight: var(--bn-fw-regular);
  line-height: var(--bn-lh-normal);
  letter-spacing: var(--bn-ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--bn-dur-fast) var(--bn-ease);
}

button { font: inherit; cursor: pointer; }

img, svg, iconify-icon { display: block; max-width: 100%; }

::selection { background: var(--bn-accent-soft); color: var(--bn-ink); }

/* Icons */
[data-lucide], svg.lucide {
  width: 16px; height: 16px;
  stroke-width: 1.75;
  vertical-align: -0.15em;
  color: currentColor;
  flex-shrink: 0;
  transition: color var(--bn-dur-fast) ease, transform var(--bn-dur) var(--bn-ease);
  pointer-events: none;
}

/* ============ SKIP LINK (a11y) ============ */
.bn-skip-link {
  position: absolute;
  top: -64px;
  left: 12px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--bn-accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s cubic-bezier(0.16,1,0.3,1);
}
.bn-skip-link:focus,
.bn-skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--bn-ink);
  outline-offset: 2px;
}

/* ============ TYPOGRAPHY UTILITIES ============ */
.bn-display-1 {
  font-family: var(--bn-font-display);
  font-size: var(--bn-text-6xl);
  font-weight: var(--bn-fw-medium);
  line-height: var(--bn-lh-tight);
  letter-spacing: var(--bn-ls-tighter);
}
.bn-display-2 {
  font-family: var(--bn-font-display);
  font-size: var(--bn-text-5xl);
  font-weight: var(--bn-fw-medium);
  line-height: var(--bn-lh-tight);
  letter-spacing: var(--bn-ls-tighter);
}
.bn-h1 {
  font-family: var(--bn-font-display);
  font-size: var(--bn-text-4xl);
  font-weight: var(--bn-fw-medium);
  line-height: var(--bn-lh-tight);
  letter-spacing: var(--bn-ls-tight);
}
.bn-h2 {
  font-size: var(--bn-text-3xl);
  font-weight: var(--bn-fw-medium);
  line-height: var(--bn-lh-snug);
  letter-spacing: var(--bn-ls-tight);
}
.bn-h3 {
  font-size: var(--bn-text-2xl);
  font-weight: var(--bn-fw-medium);
  line-height: var(--bn-lh-snug);
  letter-spacing: var(--bn-ls-tight);
}
.bn-h4 {
  font-size: var(--bn-text-xl);
  font-weight: var(--bn-fw-medium);
  line-height: var(--bn-lh-snug);
  letter-spacing: var(--bn-ls-normal);
}
.bn-body {
  font-size: var(--bn-text-base);
  line-height: var(--bn-lh-relaxed);
  color: var(--bn-ink-secondary);
}
.bn-eyebrow {
  font-size: var(--bn-text-xs);
  font-weight: var(--bn-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bn-ink-muted);
}

/* Accent text */
.bn-accent-text { color: var(--bn-accent); }

/* ============ V3 PAGE-NAV OVERRIDES ============
   Force any legacy hardcoded dark topnav to v3 cream glass.
   Page CSS files (welcome.css, pricing.css, connectors.css, review.css) ship
   with `background: rgba(7, 8, 10, 0.7)` from the dark era — override here.
============================================ */
.wl-nav,
.pr-topbar,
.co-topbar,
.rv-nav,
.ob-topnav,
.mg-topbar {
  background: rgba(248, 246, 242, 0.78) !important;
  border-bottom-color: var(--bn-border-soft) !important;
  color: var(--bn-ink) !important;
}
.wl-nav a,
.pr-topbar a,
.co-topbar a,
.rv-nav a,
.ob-topnav a,
.mg-topbar a,
.wl-nav__links a,
.pr-topbar__nav a,
.co-topbar__nav a,
.rv-nav__links a,
.mg-topbar__nav a {
  color: var(--bn-ink-secondary) !important;
}
.wl-nav a:hover,
.pr-topbar a:hover,
.co-topbar a:hover,
.rv-nav a:hover,
.ob-topnav a:hover,
.mg-topbar a:hover,
.wl-nav__links a:hover,
.pr-topbar__nav a:hover,
.co-topbar__nav a:hover,
.rv-nav__links a:hover,
.mg-topbar__nav a:hover {
  color: var(--bn-ink) !important;
}
.wl-nav__brand,
.pr-topbar__brand,
.co-topbar__brand,
.rv-nav__brand,
.ob-brand,
.mg-topbar__title {
  color: var(--bn-ink) !important;
}
/* Active nav link in coral accent */
.wl-nav__links a.is-active,
.pr-topbar__nav a.is-active,
.co-topbar__nav a.is-active,
.rv-nav__links a.is-active,
.mg-topbar__nav a.is-active {
  color: var(--bn-accent) !important;
}

/* Body backgrounds for sub-pages — keep cream consistently */
.wl-body, .pr-body, .co-body, .rv-body, .ob-body, .mg-body {
  background: var(--bn-bg-page) !important;
  color: var(--bn-ink) !important;
}

/* =============================================================
   GLOBAL MOBILE RESPONSIVE (375px+)
   ============================================================= */
@media (max-width: 880px) {
  .wl-nav, .pr-topbar, .co-topbar, .rv-nav {
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 10px 16px !important;
    grid-template-columns: auto auto !important;
  }
  .wl-nav__links, .pr-topbar__nav, .co-topbar__nav, .rv-nav__links {
    order: 99;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
  }
  .wl-nav__links::-webkit-scrollbar,
  .pr-topbar__nav::-webkit-scrollbar,
  .co-topbar__nav::-webkit-scrollbar,
  .rv-nav__links::-webkit-scrollbar { display: none; }
  .wl-nav__links, .pr-topbar__nav, .co-topbar__nav, .rv-nav__links {
    scrollbar-width: none;
  }
}

@media (max-width: 600px) {
  /* Hero / display type shrinks gracefully */
  h1, .bn-display-1, .bn-display-2, .bn-h1 {
    font-size: clamp(28px, 9vw, 40px) !important;
    letter-spacing: -0.03em !important;
  }
  /* Big pricing tier numbers */
  .pr-tier__price, [class*="__price"] {
    font-size: 40px !important;
  }
  /* Pricing grid → 1 col */
  .pr-grid, .pr-tiers, .pr-tier-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Connectors grid → 1 col */
  .co-grid {
    grid-template-columns: 1fr !important;
  }
  /* Review batch grid → 1 col */
  .rv-grid, .rv-batch {
    grid-template-columns: 1fr !important;
  }
  /* Welcome 3-card showcase → 1 col */
  .wl-showcase, .wl-cards {
    grid-template-columns: 1fr !important;
  }
  /* Make all bn-modal not overflow */
  .bn-modal {
    width: calc(100vw - 24px) !important;
    margin: 0 12px !important;
    padding: 20px !important;
  }
  /* Buttons in CTA rows wrap */
  .bn-btn { white-space: normal; }
}

/* =============================================================
   DARK THEME (toggle via [data-theme="dark"] on <html>)
   ============================================================= */
[data-theme="dark"] {
  --bn-bg-page:      #0E0D0B;
  --bn-bg-surface-1: #161410;
  --bn-bg-surface-2: #1F1B15;
  --bn-bg-surface-3: #2A251E;
  --bn-bg-inverse:   #F8F6F2;

  --bn-ink:           #F5F2EA;
  --bn-ink-secondary: #D2CCBE;   /* brighter for AA on dark surfaces */
  --bn-ink-muted:     #9F9889;   /* AA on #0E0D0B (4.6:1) */
  --bn-ink-faint:     #6A6358;
  --bn-ink-inverse:   #1A1815;

  --bn-border-soft:   rgba(255, 255, 255, 0.04);
  --bn-border:        rgba(255, 255, 255, 0.08);
  --bn-border-strong: rgba(255, 255, 255, 0.14);

  --bn-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.5);
  --bn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --bn-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
  --bn-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.35);
  --bn-shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.40);

  --bn-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --bn-bg-glass:      rgba(14, 13, 11, 0.78);
  --bn-bg-glass-2:    rgba(14, 13, 11, 0.84);
  --bn-glass:         rgba(14, 13, 11, 0.78);
  --bn-glass-1:       var(--bn-bg-surface-1);
  --bn-glass-2:       rgba(14, 13, 11, 0.84);
  --bn-cyan:          #6BA5DF;
  --bn-magenta:       #FF7A6B;
}

/* Dark theme — page topnavs */
[data-theme="dark"] .wl-nav,
[data-theme="dark"] .pr-topbar,
[data-theme="dark"] .co-topbar,
[data-theme="dark"] .rv-nav,
[data-theme="dark"] .ob-topnav,
[data-theme="dark"] .mg-topbar,
[data-theme="dark"] .ag-topnav {
  background: rgba(14, 13, 11, 0.78) !important;
  border-bottom-color: var(--bn-border-soft) !important;
}

/* Dark theme — bn-shell radial gradients tuned for dark */
[data-theme="dark"] .bn-shell {
  background:
    radial-gradient(ellipse 800px 600px at 80% -20%, rgba(233, 75, 44, 0.10), transparent 70%),
    radial-gradient(ellipse 600px 400px at -10% 90%, rgba(74, 111, 165, 0.06), transparent 70%),
    var(--bn-bg-page);
}

/* Dark theme — agent page cursor spotlight stronger */
[data-theme="dark"] .ag-body::before {
  background:
    radial-gradient(circle 500px at var(--mouse-x, 80%) var(--mouse-y, 30%),
      rgba(233, 75, 44, 0.10), transparent 60%);
}

/* Dark theme — rail */
[data-theme="dark"] .ag-rail {
  background: var(--bn-bg-page);
  border-right-color: var(--bn-border-soft);
}
[data-theme="dark"] .ag-rail__btn:hover { background: var(--bn-bg-surface-1); }
[data-theme="dark"] .ag-rail__btn--active { background: var(--bn-bg-surface-2); }

/* Dark theme — sidebar */
[data-theme="dark"] .ag-sidebar {
  background: var(--bn-bg-page);
  border-left-color: var(--bn-border-soft);
}

/* Dark theme — suggestion cards */
[data-theme="dark"] .ag-suggest {
  background: var(--bn-bg-surface-1);
  border-color: var(--bn-border-soft);
}
[data-theme="dark"] .ag-suggest:hover { background: var(--bn-bg-surface-2); border-color: var(--bn-border); }
[data-theme="dark"] .ag-suggest__icon {
  background: var(--bn-bg-page);
  border-color: var(--bn-border-soft);
}

/* Dark theme — composer */
[data-theme="dark"] .bn-composer {
  background: var(--bn-bg-surface-1);
  border-color: var(--bn-border);
}
[data-theme="dark"] .bn-composer:focus-within {
  border-color: var(--bn-border-strong);
  box-shadow: 0 0 0 3px var(--bn-accent-soft), var(--bn-shadow-md);
}
[data-theme="dark"] .bn-composer__send { background: var(--bn-accent); color: #fff; }
[data-theme="dark"] .bn-composer__send:hover { background: var(--bn-accent-hover); }

/* Dark theme — buttons */
[data-theme="dark"] .bn-btn--primary {
  background: var(--bn-accent);
  color: #fff;
  border-color: var(--bn-accent);
}
[data-theme="dark"] .bn-btn--primary:hover { background: var(--bn-accent-hover); }
[data-theme="dark"] .bn-btn--secondary {
  background: var(--bn-bg-surface-1);
  color: var(--bn-ink);
  border-color: var(--bn-border);
}
[data-theme="dark"] .bn-btn--ghost { color: var(--bn-ink-secondary); }
[data-theme="dark"] .bn-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--bn-ink);
}
[data-theme="dark"] .bn-btn--icon {
  background: var(--bn-bg-surface-1);
  border-color: var(--bn-border);
}

/* Dark theme — avatar */
[data-theme="dark"] .bn-avatar--signed-out {
  background: var(--bn-bg-surface-1);
  color: var(--bn-ink);
  border-color: var(--bn-border);
}

/* Dark theme — pills, tabs, modals, dropdowns */
[data-theme="dark"] .bn-tabs { background: var(--bn-bg-surface-1); border-color: var(--bn-border); }
[data-theme="dark"] .bn-tab.is-active { background: var(--bn-bg-page); color: var(--bn-ink); }
[data-theme="dark"] .bn-pill { background: var(--bn-bg-surface-1); border-color: var(--bn-border); color: var(--bn-ink-secondary); }
[data-theme="dark"] .bn-pill--accent { background: rgba(233, 75, 44, 0.18); color: #FFB59E; }
[data-theme="dark"] .bn-pill--success { background: rgba(120, 200, 140, 0.16); color: #A8D8B7; }
[data-theme="dark"] .bn-pill--warning { background: rgba(220, 175, 80, 0.16); color: #E8C77A; }
[data-theme="dark"] .bn-pill--danger  { background: rgba(220, 90, 80, 0.16); color: #F1A5A0; }
[data-theme="dark"] .bn-modal { background: var(--bn-bg-surface-1); border-color: var(--bn-border); }
[data-theme="dark"] .bn-modal__icon { background: var(--bn-accent-soft); color: var(--bn-accent); }
[data-theme="dark"] .bn-input, [data-theme="dark"] .bn-textarea, [data-theme="dark"] .bn-select {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--bn-border);
  color: var(--bn-ink);
}
[data-theme="dark"] .bn-dropdown { background: var(--bn-bg-surface-1); border-color: var(--bn-border); }
[data-theme="dark"] .bn-dropdown__item:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .bn-toast { background: var(--bn-bg-surface-1); border-color: var(--bn-border); }

/* Dark theme — settings drawer */
[data-theme="dark"] .ag-settings-drawer { background: var(--bn-bg-surface-1); border-color: var(--bn-border); }
[data-theme="dark"] .ag-settings__nav { background: var(--bn-bg-page); border-right-color: var(--bn-border-soft); }
[data-theme="dark"] .ag-settings__nav-btn:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .ag-settings__nav-btn.is-active { background: var(--bn-bg-surface-2); }
[data-theme="dark"] .ag-settings__row { border-bottom-color: var(--bn-border-soft); }

/* Dark theme — rail mobile bottom bar */
[data-theme="dark"] .ag-rail {
  background: rgba(14, 13, 11, 0.95);
}

/* Dark theme — review platform badges (bump from 1.7 to >3.0) */
[data-theme="dark"] .rv-thumb__platform--pinterest { background: rgba(230, 0, 35, 0.30); color: #FF9AA8; }
[data-theme="dark"] .rv-thumb__platform--tiktok    { background: rgba(0, 242, 234, 0.22); color: #A5F4F1; }
[data-theme="dark"] .rv-thumb__platform--youtube   { background: rgba(255, 0, 0, 0.30); color: #FF9A9A; }
[data-theme="dark"] .rv-thumb__platform--instagram { background: rgba(238, 49, 184, 0.30); color: #FFB2DD; }
[data-theme="dark"] .rv-thumb__platform--facebook  { background: rgba(24, 119, 242, 0.30); color: #A5C8FA; }
[data-theme="dark"] .rv-thumb__platform--linkedin  { background: rgba(10, 102, 194, 0.30); color: #92BBE6; }

/* Dark theme — welcome week chip platform colors (was illegible) */
[data-theme="dark"] .wl-week__chip--tiktok    { background: rgba(0, 242, 234, 0.18); color: #A5F4F1 !important; }
[data-theme="dark"] .wl-week__chip--pinterest { background: rgba(230, 0, 35, 0.22); color: #FF9AA8 !important; }
[data-theme="dark"] .wl-week__chip--youtube   { background: rgba(255, 0, 0, 0.24); color: #FF9A9A !important; }

@media (max-width: 480px) {
  .bn-container, .bn-container--narrow, .bn-container--wide {
    padding: 0 16px;
  }
  body { font-size: 14px; }
  .bn-topbar { padding: 0 14px; }
  .bn-toasts {
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

.bn-grad-text {
  background: linear-gradient(135deg, var(--bn-ink) 0%, var(--bn-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* =============================================================
   REDUCED MOTION (accessibility) — honor user preference
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}