/* ==========================================================================
   Funnel v2 layer: loaded right after main.css by the four ad-funnel layouts
   (/ecommerce, /fcommerce, /ai-consultation, /lead). Re-points main.css's
   tokens at the v2 palette inside .funnel and sets the shared base; each
   funnel's own CSS styles its components with the --fx-* tokens below.
   ========================================================================== */

.funnel {
  /* v2 palette */
  --fx-navy: #2a2877;
  --fx-navy-hover: #22206a;
  --fx-dark: #1b1a4e;
  --fx-footer: #131236;
  --fx-navy-50: #f3f2f7;
  --fx-ink: #171641;
  --fx-text: #3e404b;
  --fx-muted: #6c6e7a;
  --fx-paper: #f7f6f2;
  --fx-surface: #efeee8;
  --fx-line: #e9e7e1;
  --fx-line-strong: #d7d4cc;
  --fx-orange: #ff8123;
  --fx-orange-ink: #c24e00;
  --fx-success: #067a46;
  --fx-success-50: #eaf7f0;
  --fx-danger: #c4320a;
  --fx-shadow: 0 1px 2px rgba(18, 17, 43, 0.04), 0 28px 56px -24px rgba(18, 17, 43, 0.22);
  --fx-shadow-sm: 0 1px 2px rgba(18, 17, 43, 0.05), 0 0.75rem 2rem -1rem rgba(18, 17, 43, 0.16);
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-font: var(--font-sans), var(--font-bn), system-ui, -apple-system, "Segoe UI", sans-serif;

  /* main.css tokens, re-pointed so anything still reading them gets v2 */
  --navy: var(--fx-navy);
  --navy-700: var(--fx-navy-hover);
  --navy-50: var(--fx-navy-50);
  --orange: var(--fx-orange);
  --orange-50: #fff3ea;
  --bg: var(--fx-paper);
  --surface: #ffffff;
  --border: var(--fx-line);
  --border-strong: var(--fx-line-strong);
  --ink: var(--fx-ink);
  --ink-2: var(--fx-text);
  --muted: var(--fx-muted);
  --green: var(--fx-success);
  --green-50: var(--fx-success-50);
  --red: var(--fx-danger);
  --shadow-sm: 0 1px 2px rgba(18, 17, 43, 0.04);
  --shadow-md: var(--fx-shadow-sm);
  --shadow-lg: var(--fx-shadow);
  --radius-sm: 0.625rem;
  --radius: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;

  font-family: var(--fx-font);
  color: var(--fx-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

html:has(.funnel), body:has(.funnel) {
  background: #fff;
  font-family: var(--font-sans), var(--font-bn), system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Root size steps (same as the marketing site): rem-sized funnels keep
   their proportions on large and 4K screens. */
@media (min-width: 2400px) { :root:has(.funnel) { font-size: 112.5%; } }
@media (min-width: 3000px) { :root:has(.funnel) { font-size: 137.5%; } }
@media (min-width: 3600px) { :root:has(.funnel) { font-size: 162.5%; } }

.funnel ::selection { background: var(--fx-navy); color: #fff; }
.funnel :focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 3px; }
.funnel :where(button, input, textarea, select) { font-family: inherit; }
.funnel :where(svg) { flex-shrink: 0; }