/* Ported from Demo UI subscription.html — HeyLeads marketing design system */

    :root {
      --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
      --font-mono: "Fira Code", ui-monospace, monospace;

      /* Dark Theme Tokens — deeper blacks, brighter type for contrast */
      --color-base-100: #040406;
      --color-base-200: #0a0a0e;
      --color-base-300: #14141a;
      --color-base-content: #fafafa;

      --color-primary: #6366f1;
      --color-primary-hover: #4f46e5;
      --color-primary-content: #ffffff;
      --color-neutral: #0c0c10;

      /* Semantic Status & Accents */
      --color-info: #38bdf8;
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #f43f5e;
      --color-purple: #a855f7;
      --color-cyan: #06b6d4;
      --color-orange: #f97316;

      /* Surface Panel Fills */
      --bg-panel: #0e0e12;
      --bg-panel-elevated: #15151c;
      --bg-hover: #1a1a22;

      --border-subtle: rgba(255, 255, 255, 0.12);
      --border-strong: rgba(255, 255, 255, 0.24);
      --border-accent: rgba(99, 102, 241, 0.5);

      --card-bg: rgba(10, 10, 14, 0.9);
      --card-interactive-bg: rgba(12, 12, 18, 0.92);
      --text-heading: #ffffff;
      --text-body: #d4d4d8;
      --text-subtle: #a1a1aa;
      --ambient-grid: rgba(255, 255, 255, 0.014);
      --topbar-bg: rgba(8, 8, 12, 0.92);
      --header-gradient: linear-gradient(135deg, #ffffff 10%, #d4d4d8 100%);

      /* Standardized Icon Sizing & Squircles */
      --icon-size-primary: 1.125rem; /* 18px */
      --icon-size-menu: 0.875rem;    /* 14px */
      --icon-badge-primary: 32px;
      --icon-badge-menu: 28px;

      /* Button Heights */
      --btn-height-sm: 26px;
      --btn-height-default: 32px;
      --btn-height-lg: 38px;

      /* Radius tokens */
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-curvy: 8px;
      --radius-lg: 12px;
      --radius-xl: 14px;
      --radius-2xl: 16px;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
      --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55);
      --shadow-card-interactive: 0 8px 24px -4px rgba(0, 0, 0, 0.65);
      --shadow-elevated: 0 12px 32px -8px rgba(0, 0, 0, 0.75);
      --shadow-btn-primary: 0 0 14px -2px rgba(99, 102, 241, 0.35);

      /* Chamfer Cut */
      --chamfer-clip: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
    

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;
  /* Marketing aliases / layout */
  --color-bg-main: var(--color-base-100);
  --color-bg-sidebar: var(--color-base-200);
  --color-bg-elevated: var(--bg-panel-elevated);
  --color-bg-card: var(--card-bg);
  --color-bg-panel: var(--bg-panel);
  --color-bg-surface: rgba(6, 6, 10, 0.97);
  --text-inverse: #ffffff;
  --color-accent-ai: var(--color-purple);
  --color-primary-soft: rgba(99, 102, 241, 0.14);
  --color-primary-border: var(--border-accent);
  --color-primary-glow: rgba(99, 102, 241, 0.35);
  --btn-height: var(--btn-height-default);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
  /* Single sitewide content container (max-width layout) */
  --container: 1280px;
  --container-wide: var(--container);
  --header-height: 64px;
  --header-island-offset: 5.25rem;
  --section-y: clamp(3.5rem, 7vw, 5.5rem);
  --section-y-tight: clamp(2rem, 4vw, 3rem);
  --stack-gap: var(--space-8);
  --feature-row-gap: clamp(2.5rem, 5vw, 4rem);
  --page-stack-pad-y: 1.75rem;
}

    [data-theme="light"] {
      /* Brighter surfaces, darker type for contrast */
      --color-base-100: #ffffff;
      --color-base-200: #ffffff;
      --color-base-300: #eef2f7;
      --color-base-content: #020617;

      --color-primary: #4338ca;
      --color-primary-hover: #3730a3;
      --color-primary-content: #ffffff;
      --color-neutral: #e2e8f0;

      --bg-panel: #ffffff;
      --bg-panel-elevated: #f8fafc;
      --bg-hover: #eef2f7;

      --border-subtle: rgba(15, 23, 42, 0.12);
      --border-strong: rgba(15, 23, 42, 0.22);
      --border-accent: rgba(67, 56, 202, 0.45);

      --color-info: #0369a1;
      --color-success: #047857;
      --color-warning: #b45309;
      --color-error: #be123c;
      --color-purple: #7e22ce;
      --color-cyan: #0e7490;
      --color-orange: #c2410c;

      --card-bg: #ffffff;
      --card-interactive-bg: #ffffff;
      --text-heading: #020617;
      --text-body: #334155;
      --text-subtle: #475569;
      --ambient-grid: rgba(15, 23, 42, 0.035);
      --topbar-bg: rgba(255, 255, 255, 0.96);
      --header-gradient: linear-gradient(135deg, #020617 10%, #334155 100%);

      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1);
      --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.1);
      --shadow-card-interactive: 0 8px 24px -4px rgba(15, 23, 42, 0.14);
      --shadow-elevated: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
      --shadow-btn-primary: 0 3px 10px rgba(67, 56, 202, 0.3), 0 1px 2px rgba(15, 23, 42, 0.1);

  --color-bg-main: var(--color-base-100);
  --color-bg-sidebar: var(--color-base-200);
  --color-bg-elevated: var(--bg-panel-elevated);
  --color-bg-card: var(--card-bg);
  --color-bg-panel: var(--bg-panel);
  --color-bg-surface: #ffffff;
}



.btn-block { width: 100%; }
.btn.is-disabled,
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}