/*
 * CAMPAIGNSHIP Web (Remix) — Design System
 *
 * Ported from: apps/web/src/app/globals.css
 * Tailwind utilities are emitted into the built stylesheet during deployment.
 *
 * This file contains:
 * - CSS custom properties (theme variables)
 * - Base/reset styles
 * - Animation utilities
 * - Glassmorphism effects
 * - Component classes (card, btn-primary, btn-outline, input)
 * - Gradient text
 * - Feature icon styles
 */

/* ===== Theme Variables ===== */
:root {
  /* Primary colors - Indigo gradient */
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;

  /* Secondary colors - Emerald */
  --color-secondary: #10b981;
  --color-secondary-light: #34d399;
  --color-secondary-dark: #059669;

  /* Semantic colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Neutral colors */
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-surface-elevated: #ffffff;
  --color-border: #e5e7eb;

  /* Text colors */
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;

  /* Gradient colors */
  --gradient-primary: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 50%,
    #a855f7 100%
  );
  --gradient-secondary: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  --scrollbar-track: #f8fafc;
  --scrollbar-thumb: rgba(79, 70, 229, 0.42);
}

/* Dark mode theme */
.dark {
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-surface-elevated: #334155;
  --color-border: #334155;

  --color-text-primary: #f9fafb;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --scrollbar-track: #020617;
  --scrollbar-thumb: rgba(129, 140, 248, 0.48);
}

.theme-light .theme-backdrop { background-color: rgba(255, 255, 255, 0.86); border-color: rgba(15, 23, 42, 0.1); }
.theme-dark .theme-backdrop { background-color: rgba(3, 7, 18, 0.82); border-color: rgba(255, 255, 255, 0.1); }

.theme-light .marketing-shell { --marketing-ink: #0f172a; --marketing-muted: #475569; }
.theme-light .marketing-shell .bg-\[\#030712\] { background-color: rgba(248, 250, 252, 0.86); }
.theme-light .marketing-shell .text-gray-300 { color: #334155; }
.theme-light .marketing-shell .text-gray-400 { color: var(--marketing-muted); }
.theme-light .marketing-shell .border-white\/10 { border-color: rgba(15, 23, 42, 0.12); }
.theme-light .marketing-shell .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04); }
.theme-light .marketing-shell a.bg-gradient-to-r { color: #fff; }

/* Marketing uses one indigo-to-fuchsia system in both themes. These semantic
   classes keep the campaign story readable without duplicating markup. */
.marketing-shell {
  color-scheme: light;
  --marketing-ink: #0f172a;
  --marketing-muted: #475569;
  --marketing-soft: #64748b;
  --marketing-accent: #4f46e5;
  --marketing-accent-strong: #7c3aed;
  --marketing-accent-pink: #db2777;
  --marketing-accent-soft: #eef2ff;
  --marketing-panel: #ffffff;
  --marketing-panel-strong: #ffffff;
  --marketing-panel-soft: #f8faff;
  --marketing-border: rgba(79, 70, 229, 0.2);
  --marketing-rule: rgba(15, 23, 42, 0.11);
  --marketing-grid: rgba(79, 70, 229, 0.035);
  --marketing-card-shadow: 0 20px 55px rgba(45, 41, 110, 0.08);
  --marketing-fade: #f8faff;
  background-color: var(--color-background);
  isolation: isolate;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(129, 140, 248, 0.2), transparent 32rem),
    linear-gradient(180deg, #fbfbff 0%, #f7f8ff 48%, #ffffff 100%);
}

/* A light structural grid gives long marketing pages a visual rhythm without
   competing with the content or depending on blur effects. */
.marketing-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--marketing-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--marketing-grid) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 96%);
  opacity: 0.42;
}

.theme-dark .marketing-shell,
.dark .marketing-shell {
  color-scheme: dark;
  --marketing-ink: #f8fafc;
  --marketing-muted: #94a3b8;
  --marketing-soft: #64748b;
  --marketing-accent: #818cf8;
  --marketing-accent-strong: #c4b5fd;
  --marketing-accent-pink: #f0abfc;
  --marketing-accent-soft: #1e1b4b;
  --marketing-panel: #111a33;
  --marketing-panel-strong: #17213d;
  --marketing-panel-soft: #101a31;
  --marketing-border: rgba(165, 180, 252, 0.24);
  --marketing-rule: rgba(255, 255, 255, 0.1);
  --marketing-grid: rgba(148, 163, 184, 0.1);
  --marketing-fade: #080d1d;
  --marketing-card-shadow: 0 24px 60px rgba(2, 6, 23, 0.32);
  background-image:
    radial-gradient(circle at 50% -10%, rgba(99, 102, 241, 0.28), transparent 32rem),
    linear-gradient(180deg, #080d1d 0%, #0f172a 48%, #080d1d 100%);
}

.marketing-ink { color: var(--marketing-ink) !important; }
.marketing-muted { color: var(--marketing-muted) !important; }
.marketing-shell .marketing-ink,
.marketing-shell .marketing-card-title,
.marketing-shell .marketing-section-title { text-rendering: optimizeLegibility; }
.marketing-gradient-text {
  /* Keep the theme token in the fallback contract for older WebKit renderers. */
  /* -webkit-text-fill-color: var(--marketing-ink); */
  display: inline-block;
  position: relative;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 52%, #db2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 8px 28px rgba(124, 58, 237, 0.12);
}
.marketing-gradient-text::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.08em;
  left: 0.02em;
  height: 0.075em;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 52%, #db2777 100%);
  pointer-events: none;
  animation: underline-heartbeat 2.4s ease-in-out infinite;
}
.marketing-pencil-underline {
  position: absolute;
  right: -0.02em;
  bottom: -0.16em;
  left: 0.02em;
  width: 100%;
  height: 0.28em;
  overflow: visible;
  pointer-events: none;
  color: currentColor;
}
.marketing-pencil-underline path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marketing-pencil-underline path { stroke-width: 1.8; opacity: 0.82; }
@media (prefers-reduced-motion: reduce) {
  .marketing-pencil-underline { transition: none; }
}
.theme-dark .marketing-gradient-text,
.dark .marketing-gradient-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 52%, #db2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 8px 28px rgba(124, 58, 237, 0.12);
}
.marketing-brand {
  display: inline-flex;
  align-items: baseline;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 52%, #db2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.045em;
  line-height: 1;
}
.theme-dark .marketing-brand-accent,
.dark .marketing-brand-accent { color: inherit; }
.theme-dark .marketing-brand,
.dark .marketing-brand {
  background-image: linear-gradient(90deg, #4c2cff 0%, #8c24f5 52%, #ec168e 100%);
  text-shadow: 0 0 18px rgba(140, 36, 245, 0.35);
}

/* Keep clipped gradient text legible in forced-colour and older browser modes. */
@media (forced-colors: active) {
  .marketing-gradient-text,
  .marketing-brand-accent {
    background: none;
    color: CanvasText !important;
    -webkit-text-fill-color: currentColor;
  }
}
.marketing-badge {
  border: 1px solid var(--marketing-border);
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}
.marketing-section-badge { color: #4338ca !important; }
.theme-dark .marketing-section-badge,
.dark .marketing-section-badge { color: #a5b4fc !important; }
.theme-dark .marketing-badge,
.dark .marketing-badge { color: #a5b4fc; }
.marketing-hero-grid {
  display: none;
}
.marketing-particle-field { opacity: 0.48; mix-blend-mode: normal; }
.marketing-shell > canvas[aria-hidden='true'] { opacity: 0.48; mix-blend-mode: normal; }
.theme-dark .marketing-shell > canvas[aria-hidden='true'],
.dark .marketing-shell > canvas[aria-hidden='true'] { opacity: 0.62; mix-blend-mode: normal; }
.marketing-primary-button { background: linear-gradient(105deg, #4f46e5, #9333ea 55%, #db2777); color: #fff !important; }
.marketing-primary-button:hover { filter: saturate(1.08) brightness(1.03); }
.marketing-secondary-button {
  border: 1px solid var(--marketing-border);
  background: var(--marketing-panel);
  color: var(--marketing-ink) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.marketing-secondary-button:hover { border-color: rgba(99, 102, 241, 0.45); background: var(--marketing-panel-strong); }
.marketing-hero {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 42%),
    radial-gradient(circle at 50% 18%, rgba(129, 140, 248, 0.1), transparent 28rem);
}
.theme-dark .marketing-hero,
.dark .marketing-hero {
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, 0.24), transparent 42%),
    radial-gradient(circle at 50% 18%, rgba(99, 102, 241, 0.14), transparent 28rem);
}
.marketing-avatar { border-color: var(--marketing-panel-strong); background: linear-gradient(135deg, #6366f1, #d946ef); color: #fff; }
.marketing-dashboard { border: 1px solid var(--marketing-border); background: var(--marketing-panel); }
.marketing-dashboard-chrome { border-bottom: 1px solid var(--marketing-rule); background: rgba(148, 163, 184, 0.08); }
.marketing-dashboard-stat, .marketing-dashboard-chart { border: 1px solid var(--marketing-border); background: rgba(148, 163, 184, 0.08); }
.marketing-chart-bar { background: linear-gradient(to top, #6366f1, #d946ef); opacity: 0.8; }
.marketing-hero-fade { background: linear-gradient(to top, var(--marketing-fade), transparent); }

/* Shared marketing surfaces keep the landing page readable in both themes. */
.marketing-section-title { color: var(--marketing-ink); }
.marketing-section-copy { color: var(--marketing-muted); }
.marketing-card {
  position: relative;
  border-color: var(--marketing-border) !important;
  background: var(--marketing-panel) !important;
  box-shadow: var(--marketing-card-shadow);
}
.marketing-card::before {
  content: '';
  position: absolute;
  inset: 0 1.5rem auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), rgba(217, 70, 239, 0.28), transparent);
  opacity: 0.45;
  pointer-events: none;
}
.marketing-card:hover { background: var(--marketing-panel-strong) !important; }
.marketing-feature-card {
  position: relative;
  isolation: isolate;
  box-shadow: var(--marketing-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.marketing-feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), transparent 50%, rgba(236, 72, 153, 0.06));
  opacity: 0;
  transition: opacity 350ms ease;
}
.marketing-feature-card:hover::after { opacity: 1; }
.marketing-feature-icon { background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.16); }
.theme-dark .marketing-feature-icon, .dark .marketing-feature-icon { background: rgba(129, 140, 248, 0.14); border-color: rgba(165, 180, 252, 0.2); }
.marketing-step-track { background: linear-gradient(90deg, rgba(99, 102, 241, 0.22), rgba(168, 85, 247, 0.38), rgba(236, 72, 153, 0.22)); }
.marketing-how-step {
  border-color: var(--marketing-border);
  background: linear-gradient(145deg, var(--marketing-panel-strong), rgba(99, 102, 241, 0.035));
  box-shadow: 0 16px 34px rgba(79, 70, 229, 0.07);
}
.marketing-how-step:hover { border-color: rgba(129, 140, 248, 0.55); box-shadow: 0 22px 42px rgba(79, 70, 229, 0.13); }
.theme-dark .marketing-how-step,
.dark .marketing-how-step { background: linear-gradient(145deg, rgba(30, 41, 59, 0.92), rgba(79, 70, 229, 0.1)); box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22); }
.marketing-card-title { color: var(--marketing-ink); }
.marketing-card-copy { color: var(--marketing-muted); }
.marketing-step-number {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  background: #eef2ff;
  color: #4338ca !important;
  border: 1px solid rgba(99, 102, 241, 0.24);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.14);
}
.marketing-step-number::before {
  content: '';
  position: absolute;
  inset: 0.25rem;
  z-index: -1;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 0.8rem;
}
.marketing-step-number span { position: relative; z-index: 2; color: #4338ca !important; }
.marketing-step-number > span { -webkit-text-fill-color: #4338ca !important; }
.theme-dark .marketing-step-number,
.dark .marketing-step-number { background: #312e81; border-color: rgba(165, 180, 252, 0.35); color: #eef2ff !important; }
.theme-dark .marketing-step-number span,
.dark .marketing-step-number span,
.theme-dark .marketing-step-number > span,
.dark .marketing-step-number > span { color: #eef2ff !important; -webkit-text-fill-color: #eef2ff !important; }
.marketing-pricing-card {
  border-color: var(--marketing-border) !important;
  background: var(--marketing-panel) !important;
}
.marketing-pricing-card.is-popular {
  border-color: rgba(99, 102, 241, 0.46) !important;
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), var(--marketing-panel)) !important;
}
.marketing-pricing-cta {
  border-color: var(--marketing-border);
  background: rgba(148, 163, 184, 0.08);
  color: var(--marketing-ink) !important;
}
.marketing-pricing-cta:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.42);
}
.marketing-pricing-cta.bg-gradient-to-r { color: #fff !important; }
.marketing-pricing-cta.is-primary { background: linear-gradient(105deg, #4f46e5, #9333ea 55%, #db2777) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(99, 102, 241, 0.22); }
.marketing-pricing-cta.is-primary:hover { filter: saturate(1.08) brightness(1.03); }
.marketing-impact-card { min-height: 13rem; }
.marketing-impact-comparison { border-color: var(--marketing-border); background: var(--marketing-panel); }
.marketing-impact-card { box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06); }
.marketing-impact-card-positive { border-color: rgba(45, 212, 191, 0.3); background: linear-gradient(145deg, rgba(236, 254, 255, 0.78), var(--marketing-panel-strong)); }
.marketing-impact-card-negative { border-color: rgba(251, 113, 133, 0.28); background: linear-gradient(145deg, rgba(255, 241, 242, 0.72), var(--marketing-panel-strong)); }
.marketing-impact-card-icon { color: #0f766e; background: rgba(45, 212, 191, 0.14); }
.marketing-impact-card-negative .marketing-impact-card-icon { color: #e11d48; background: rgba(251, 113, 133, 0.12); }
.marketing-impact-item-icon { color: #14b8a6; }
.marketing-impact-card-negative .marketing-impact-item-icon { color: #fb7185; }
.theme-dark .marketing-impact-card-positive, .dark .marketing-impact-card-positive { background: linear-gradient(145deg, rgba(13, 148, 136, 0.14), var(--marketing-panel-strong)); }
.theme-dark .marketing-impact-card-negative, .dark .marketing-impact-card-negative { background: linear-gradient(145deg, rgba(225, 29, 72, 0.12), var(--marketing-panel-strong)); }
.marketing-platform-outcome { border-color: var(--marketing-border); background: linear-gradient(145deg, rgba(99, 102, 241, 0.11), rgba(217, 70, 239, 0.08)); }
.marketing-platform-outcome span { display: flex; flex-direction: column; gap: 0.2rem; border-radius: 0.75rem; padding: 0.65rem 0.7rem; background: rgba(255, 255, 255, 0.5); }
.marketing-platform-outcome strong { color: #4f46e5; font-size: 0.85rem; font-weight: 900; }
.marketing-platform-outcome small { color: var(--marketing-muted); font-size: 0.65rem; font-weight: 700; }
.theme-dark .marketing-platform-outcome span, .dark .marketing-platform-outcome span { background: rgba(15, 23, 42, 0.42); }
.marketing-impact-table { border-color: var(--marketing-border); background: rgba(148, 163, 184, 0.035); }
.marketing-impact-table > div { border-color: var(--marketing-border); }
.marketing-impact-proof { border-color: var(--marketing-border); background: rgba(99, 102, 241, 0.06); }
.marketing-impact-menu,
.marketing-impact-panel { border-color: var(--marketing-border); background: var(--marketing-panel); }
.marketing-impact-menu { display: grid; gap: 0.25rem; align-content: start; }
.marketing-impact-tab { color: var(--marketing-muted); }
.marketing-impact-tab:hover,
.marketing-impact-tab.is-active { color: var(--marketing-ink); background: rgba(99, 102, 241, 0.1); }
.marketing-impact-tab.is-active { box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.3); }
.marketing-impact-tab > span:last-child { color: var(--marketing-soft); font-size: 0.7rem; letter-spacing: 0.12em; }
.marketing-impact-index { color: #4f46e5; background: rgba(99, 102, 241, 0.1); }
.marketing-impact-side { border-color: var(--marketing-border); background: rgba(148, 163, 184, 0.06); }
.marketing-impact-side-positive { background: linear-gradient(145deg, rgba(99, 102, 241, 0.1), rgba(217, 70, 239, 0.08)); }
.marketing-impact-meter { height: 0.45rem; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.2); }
.marketing-impact-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #d946ef); transition: width 300ms ease; }
.theme-dark .marketing-impact-tab:hover, .dark .marketing-impact-tab:hover,
.theme-dark .marketing-impact-tab.is-active, .dark .marketing-impact-tab.is-active { background: rgba(129, 140, 248, 0.14); }
.theme-dark .marketing-impact-index, .dark .marketing-impact-index { color: #c4b5fd; background: rgba(129, 140, 248, 0.14); }
@media (max-width: 640px) {
  .marketing-impact-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-impact-tab { padding-inline: 1rem; }
}
.marketing-impact-kicker {
  color: var(--marketing-soft);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marketing-impact-result {
  border-color: var(--marketing-rule);
  color: #4338ca;
}
.theme-dark .marketing-impact-result,
.dark .marketing-impact-result { color: #c4b5fd; }
.theme-dark .marketing-impact-kicker,
.dark .marketing-impact-kicker { color: #cbd5e1; }
.theme-dark .marketing-progress-track + .mt-2 .text-indigo-500,
.dark .marketing-progress-track + .mt-2 .text-indigo-500 { color: #a5b4fc !important; }
.marketing-footer-heading { color: var(--marketing-ink); }
.marketing-footer-copy { color: var(--marketing-muted); }
.marketing-store-badge { color: var(--marketing-ink); border-color: var(--marketing-border); background: var(--marketing-panel-strong); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
.marketing-store-icon { display: inline-flex; width: 1.35rem; align-items: center; justify-content: center; color: var(--marketing-ink); }
.marketing-store-play { color: #4f46e5; }
.theme-dark .marketing-store-badge, .dark .marketing-store-badge { box-shadow: 0 4px 12px rgba(2, 6, 23, 0.22); }
.marketing-icon-tile { color: #4f46e5; background: rgba(99, 102, 241, 0.1); }
.marketing-contact-input { color: var(--marketing-ink); border-color: var(--marketing-border); background: var(--marketing-panel); outline: none; }
.marketing-contact-input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14); }
.marketing-contact-note { color: var(--marketing-muted); border-color: var(--marketing-border); background: rgba(99, 102, 241, 0.06); }
.theme-dark .marketing-icon-tile, .dark .marketing-icon-tile { color: #c4b5fd; background: rgba(129, 140, 248, 0.14); }
.theme-dark .marketing-contact-input, .dark .marketing-contact-input { color-scheme: dark; }
.marketing-mobile-menu-backdrop { background: rgba(2, 6, 23, 0.68); backdrop-filter: blur(10px); }
.marketing-mobile-menu { align-items: stretch; justify-content: flex-start; gap: 1rem; max-width: 28rem; border-left: 1px solid var(--marketing-border); background: var(--marketing-panel-strong); box-shadow: -1.5rem 0 3rem rgba(2, 6, 23, 0.25); }
.marketing-mobile-menu-header,
.marketing-mobile-menu-nav,
.marketing-mobile-menu-actions { flex: 0 0 auto; }

/* Marketing surfaces use a small set of crisp layers instead of broad
   blurred overlays, which keeps headings readable and makes the page feel
   intentional in both themes. */
.marketing-shell section > .mx-auto { position: relative; z-index: 1; }
.marketing-section {
  /* Keep every marketing section paintable for full-page captures, anchors,
     and reduced-motion users. The sections are compact enough that deferred
     rendering creates more visual gaps than it saves. */
  contain: layout style;
}
.marketing-shell .marketing-section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(238, 242, 255, 0.34), rgba(255, 255, 255, 0));
}
.theme-dark .marketing-shell .marketing-section:nth-of-type(even),
.dark .marketing-shell .marketing-section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.32), rgba(15, 23, 42, 0));
}
.marketing-shell .marketing-section:nth-of-type(even)::before {
  content: '';
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--marketing-border), transparent);
  pointer-events: none;
}
.marketing-section-head { max-width: 56rem; margin-inline: auto; }
.marketing-section-head::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 0.2rem;
  margin-top: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--marketing-accent), var(--marketing-accent-pink));
  opacity: 0.8;
}
.marketing-section + .marketing-section { border-top: 1px solid var(--marketing-grid); }
.marketing-shell .marketing-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.marketing-shell .marketing-card:hover { transform: translateY(-3px); }
.marketing-shell .marketing-dashboard { backdrop-filter: none; -webkit-backdrop-filter: none; }

@keyframes marketing-section-rise {
  from { opacity: 0.72; transform: translateY(2.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
.marketing-shell .marketing-section > .mx-auto { animation: marketing-section-rise linear both; animation-timeline: view(); animation-range: entry 8% cover 30%; }
.marketing-shell .marketing-section:nth-of-type(3n) { --section-glow: rgba(99, 102, 241, 0.1); }
.marketing-shell .marketing-section:nth-of-type(3n + 1) { --section-glow: rgba(217, 70, 239, 0.08); }
.marketing-shell .marketing-section:nth-of-type(3n + 2) { --section-glow: rgba(14, 165, 233, 0.07); }
.marketing-shell .marketing-section::after { content: ''; position: absolute; top: 18%; right: -8rem; width: 18rem; height: 18rem; border-radius: 999px; background: radial-gradient(circle, var(--section-glow), transparent 68%); pointer-events: none; opacity: 0.8; }
.marketing-shell .marketing-section:nth-of-type(even)::after { left: -8rem; right: auto; top: 46%; }
.marketing-shell .marketing-card, .marketing-shell .marketing-builder-tab, .marketing-shell .marketing-donation-level { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .marketing-shell .marketing-section > .mx-auto { animation: none; }
}

/* Landing-page composition: crisp surfaces, clear hierarchy, and a product
   preview that explains the no-code workflow before the feature grid begins. */
.marketing-hero {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.92), transparent 30rem),
    linear-gradient(180deg, rgba(238, 242, 255, 0.45), transparent 68%);
}
.marketing-hero-copy { display: flex; min-height: 39rem; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 2.5rem; }
.marketing-hero-copy > * { margin-top: 0 !important; }
.marketing-hero-grid-layout { min-height: 39rem; }
.marketing-hero-product { isolation: isolate; }
.marketing-product-tabs { border-color: var(--marketing-border); background: var(--marketing-panel-strong); }
.marketing-product-tabs button { border: 0; border-radius: 999px; padding: 0.65rem 1rem; color: var(--marketing-muted); background: transparent; font-size: 0.75rem; font-weight: 800; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.marketing-product-tabs button:hover, .marketing-product-tabs button.is-active { color: var(--marketing-ink); background: var(--marketing-panel); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12); }
.marketing-product-tabs button:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.45); outline-offset: 2px; }
.marketing-hero-product-glow {
  position: absolute;
  inset: 10% -8% -8%;
  z-index: -1;
  border-radius: 3rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(217, 70, 239, 0.13));
  filter: blur(28px);
  opacity: 0.8;
}
.marketing-hero-proof { color: var(--marketing-muted); }
.marketing-hero-proof strong { letter-spacing: -0.03em; }
.marketing-hero-product .marketing-editor-sidebar { display: none; }
@media (min-width: 1024px) {
  .marketing-hero-product .marketing-editor-sidebar { display: block; }
}
.marketing-hero-product .marketing-product-preview { box-shadow: 0 28px 70px rgba(79, 70, 229, 0.16), 0 8px 24px rgba(15, 23, 42, 0.08); }
.marketing-hero-product .marketing-story-card { min-height: 18rem; }
.marketing-hero-product .marketing-mini-stat { min-height: 3.25rem; }
.theme-dark .marketing-hero,
.dark .marketing-hero {
  background:
    radial-gradient(circle at 50% 22%, rgba(30, 41, 85, 0.72), transparent 30rem),
    linear-gradient(180deg, rgba(30, 41, 59, 0.48), transparent 68%);
}
.theme-dark .marketing-hero-product-glow,
.dark .marketing-hero-product-glow { opacity: 0.55; }
.marketing-hero-kicker {
  color: var(--marketing-soft);
  letter-spacing: 0.14em;
}
.marketing-hero-stat {
  border: 1px solid var(--marketing-border);
  background: var(--marketing-panel);
  color: var(--marketing-muted);
}
.marketing-hero-ruler {
  height: 18rem;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.12), rgba(217, 70, 239, 0.1), transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  opacity: 0.8;
}
.marketing-badge { border: 1px solid var(--marketing-border); background: var(--marketing-panel); color: #4f46e5; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08); }
.marketing-badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #6366f1; box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.13); }
.theme-dark .marketing-badge, .dark .marketing-badge { color: #c4b5fd; background: rgba(30, 41, 59, 0.82); }
.marketing-proof-divider { background: var(--marketing-rule); }
.marketing-product-preview { overflow: hidden; border: 1px solid var(--marketing-border); border-radius: 1.5rem; background: var(--marketing-panel); box-shadow: 0 32px 80px rgba(79, 70, 229, 0.13), 0 8px 24px rgba(15, 23, 42, 0.08); }
.marketing-product-preview-bar { min-height: 3.75rem; border-color: var(--marketing-rule); background: rgba(148, 163, 184, 0.07); }
.marketing-window-dot { display: block; height: 0.65rem; width: 0.65rem; border-radius: 999px; }
.marketing-url-pill { color: var(--marketing-muted); background: rgba(148, 163, 184, 0.1); }
.marketing-status-pill { color: #047857; background: rgba(16, 185, 129, 0.12); }
.theme-dark .marketing-status-pill, .dark .marketing-status-pill { color: #6ee7b7; background: rgba(16, 185, 129, 0.16); }
.marketing-editor-sidebar { border-color: var(--marketing-rule); background: rgba(148, 163, 184, 0.045); }
.marketing-editor-step { color: var(--marketing-muted); }
.marketing-editor-step > span { color: #475569; background: rgba(148, 163, 184, 0.12); }
.theme-dark .marketing-editor-step > span, .dark .marketing-editor-step > span { color: #cbd5e1; }
.marketing-editor-step.is-active { color: #4338ca; background: rgba(99, 102, 241, 0.1); }
.marketing-editor-step.is-active > span { color: #fff; background: #4f46e5; }
.theme-dark .marketing-editor-step.is-active, .dark .marketing-editor-step.is-active { color: #c4b5fd; background: rgba(99, 102, 241, 0.2); }
.marketing-editor-tip { border: 1px solid var(--marketing-border); background: rgba(99, 102, 241, 0.07); }
.marketing-editor-canvas { background: linear-gradient(180deg, rgba(248, 250, 252, 0.6), rgba(248, 250, 252, 0.28)); }
.theme-dark .marketing-editor-canvas, .dark .marketing-editor-canvas { background: rgba(2, 6, 23, 0.22); }
.marketing-dashboard-stat { border-color: var(--marketing-border); background: var(--marketing-panel-strong); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.marketing-dashboard-stat:hover { border-color: rgba(129, 140, 248, 0.55); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(79, 70, 229, 0.1); }
.marketing-dashboard-stat span, .marketing-dashboard-stat em { display: block; color: var(--marketing-muted); font-size: 0.58rem; font-style: normal; font-weight: 700; }
.marketing-dashboard-stat strong { display: block; margin: 0.3rem 0; color: var(--marketing-ink); font-size: 1.05rem; font-weight: 900; }
.marketing-dashboard-stat em { color: #047857; }
.marketing-monthly-chart { border-color: var(--marketing-border); background: var(--marketing-panel-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.marketing-monthly-bars { display: grid; height: 9rem; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 0; }
.marketing-monthly-bar-column { display: grid; height: 100%; grid-template-rows: 1.25rem minmax(0, 1fr) 1.25rem; align-items: end; justify-items: center; color: var(--marketing-muted); font-size: 0.65rem; font-weight: 800; }
.marketing-monthly-bar-column strong { color: var(--marketing-ink); font-size: 0.68rem; }
.marketing-monthly-bar-track { display: flex; width: 100%; height: 100%; align-items: end; overflow: hidden; background: rgba(148, 163, 184, 0.18); }
.marketing-monthly-bar-column:first-child .marketing-monthly-bar-track { border-radius: 0.5rem 0 0 0.2rem; }
.marketing-monthly-bar-column:last-child .marketing-monthly-bar-track { border-radius: 0 0.5rem 0.2rem 0; }
.marketing-monthly-bar-track span { display: block; width: 100%; min-height: 1rem; border-radius: inherit; background: linear-gradient(180deg, #d946ef, #6366f1); }
.marketing-monthly-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2.75rem; align-items: center; gap: 0.6rem; color: var(--marketing-muted); font-size: 0.65rem; font-weight: 800; }
.marketing-monthly-row strong { color: var(--marketing-ink); font-size: 0.68rem; text-align: right; }
.marketing-monthly-track { height: 0.45rem; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.18); }
.marketing-monthly-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #d946ef); }
.marketing-dashboard-chart { border-color: var(--marketing-border); background: var(--marketing-panel-strong); }
.marketing-dashboard-bar { flex: 1; min-width: 0.35rem; border-radius: 0.35rem 0.35rem 0.15rem 0.15rem; background: linear-gradient(180deg, #c084fc, #6366f1); opacity: 0.88; }
.marketing-preview-button { color: #4338ca; border: 1px solid var(--marketing-border); background: var(--marketing-panel); }
.theme-dark .marketing-preview-button,
.dark .marketing-preview-button { color: #c4b5fd; }
.marketing-story-card { min-height: 15rem; background: linear-gradient(145deg, #312e81 0%, #4f46e5 48%, #9333ea 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); }
.marketing-story-card::after { content: ''; position: absolute; inset: auto -3rem -4rem auto; width: 12rem; height: 12rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; box-shadow: 0 0 0 1.5rem rgba(255, 255, 255, 0.06), 0 0 0 3rem rgba(255, 255, 255, 0.035); }
.marketing-story-kicker { color: #e0e7ff; background: rgba(255, 255, 255, 0.14); }
.marketing-donation-row { background: rgba(255, 255, 255, 0.12); }
.marketing-giving-card { border-color: var(--marketing-border); background: var(--marketing-panel-strong); }
.marketing-giving-option { display: flex; min-height: 3.75rem; flex-direction: column; justify-content: center; border: 1px solid var(--marketing-border); border-radius: 0.75rem; padding: 0.55rem 0.7rem; color: var(--marketing-ink); background: rgba(148, 163, 184, 0.06); }
.marketing-giving-option { cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.marketing-giving-option:hover { border-color: rgba(99, 102, 241, 0.55); background: rgba(99, 102, 241, 0.08); transform: translateY(-1px); }
.marketing-giving-option strong { font-size: 0.8rem; }
.marketing-giving-option small { margin-top: 0.15rem; color: #475569; font-size: 0.62rem; }
.theme-dark .marketing-giving-option small, .dark .marketing-giving-option small { color: #cbd5e1; }
.marketing-giving-option.is-selected { border-color: #6366f1; background: rgba(99, 102, 241, 0.1); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12); }
.marketing-giving-option:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.45); outline-offset: 2px; }
.marketing-progress-track { height: 0.4rem; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.18); }
.marketing-progress-track span { display: block; height: 100%; width: 64%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #d946ef); }
.marketing-editor-cta { color: #fff; background: linear-gradient(105deg, #4f46e5, #9333ea); }
.marketing-mini-stat { display: flex; align-items: center; gap: 0.45rem; color: var(--marketing-muted); background: rgba(148, 163, 184, 0.06); font-size: 0.65rem; font-weight: 700; }
.marketing-hero-fade { background: linear-gradient(to bottom, transparent, var(--marketing-fade)); }
.marketing-builder-promise { border-color: var(--marketing-rule); background: rgba(148, 163, 184, 0.045); }
.marketing-promise-icon { color: #4338ca; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.16); }
.theme-dark .marketing-promise-icon, .dark .marketing-promise-icon { color: #c4b5fd; background: rgba(129, 140, 248, 0.16); border-color: rgba(165, 180, 252, 0.22); }

.marketing-builder-showcase { overflow: hidden; border-radius: 1.5rem; background: linear-gradient(135deg, var(--marketing-panel-strong), rgba(99, 102, 241, 0.05)); box-shadow: 0 28px 70px rgba(79, 70, 229, 0.16), 0 8px 24px rgba(15, 23, 42, 0.08); }
.marketing-builder-glow { position: absolute; inset: 8% -8% -8%; z-index: -1; border-radius: 3rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(217, 70, 239, 0.13)); filter: blur(28px); opacity: 0.8; pointer-events: none; }
.theme-dark .marketing-builder-glow, .dark .marketing-builder-glow { opacity: 0.55; }
.marketing-builder-showcase > * { min-width: 0; }
.marketing-builder-tab { border-color: var(--marketing-border); color: var(--marketing-muted); background: rgba(148, 163, 184, 0.06); }
.marketing-builder-tab:hover { border-color: rgba(99, 102, 241, 0.45); color: var(--marketing-ink); }
.marketing-builder-tab.is-active { border-color: rgba(99, 102, 241, 0.55); color: #4338ca; background: rgba(99, 102, 241, 0.12); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1); }
.theme-dark .marketing-builder-tab.is-active, .dark .marketing-builder-tab.is-active { color: #c4b5fd; background: rgba(99, 102, 241, 0.2); }
.marketing-builder-link { border: 1px solid rgba(99, 102, 241, 0.28); color: #4338ca; background: rgba(99, 102, 241, 0.08); transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.marketing-builder-link:hover { border-color: rgba(99, 102, 241, 0.5); background: rgba(99, 102, 241, 0.14); transform: translateY(-1px); }
.marketing-campaign-promotion { border-color: var(--marketing-border); background: rgba(99, 102, 241, 0.06); }
.theme-dark .marketing-builder-link, .dark .marketing-builder-link { color: #e0e7ff; border-color: rgba(165, 180, 252, 0.3); background: rgba(99, 102, 241, 0.18); }
.marketing-builder-stage { border-color: var(--marketing-border); background: linear-gradient(180deg, rgba(148, 163, 184, 0.09), rgba(148, 163, 184, 0.035)); box-shadow: 0 16px 34px rgba(79, 70, 229, 0.06); }
.marketing-builder-stage > div:first-child { border-color: var(--marketing-rule); }
.marketing-donation-widget { position: relative; overflow: hidden; border-color: rgba(129, 140, 248, 0.35); background: linear-gradient(145deg, rgba(238, 242, 255, 0.94), rgba(255, 255, 255, 0.78)); box-shadow: 0 18px 40px rgba(99, 102, 241, 0.08); }
.marketing-donation-widget::before { content: ''; position: absolute; top: -7rem; right: -5rem; width: 14rem; height: 14rem; border: 1px solid rgba(99, 102, 241, 0.12); border-radius: 999px; box-shadow: 0 0 0 1.25rem rgba(99, 102, 241, 0.035), 0 0 0 2.5rem rgba(217, 70, 239, 0.025); pointer-events: none; }
.marketing-donation-widget > * { position: relative; z-index: 1; }
.marketing-donation-progress { display: flex; align-items: center; }
.marketing-donation-progress span { position: relative; display: block; height: 0.2rem; flex: 1; background: rgba(148, 163, 184, 0.4); }
.marketing-donation-progress span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.65rem; height: 0.65rem; border: 2px solid #94a3b8; border-radius: 999px; background: var(--marketing-panel); transform: translate(-50%, -50%); }
.marketing-donation-progress span.is-active { background: #8b5cf6; }
.marketing-donation-progress span.is-active::after { border-color: #8b5cf6; background: #ede9fe; box-shadow: inset 0 0 0 0.18rem #fff; }
.marketing-frequency-switch { background: rgba(99, 102, 241, 0.13); color: #4338ca; }
.marketing-frequency-switch button { border: 0; border-radius: 999px; padding: 0.65rem 0.8rem; color: inherit; font: inherit; cursor: pointer; transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.marketing-frequency-switch button:hover { transform: translateY(-1px); }
.marketing-frequency-switch button.is-active { background: #fff; box-shadow: 0 1px 4px rgba(120, 53, 15, 0.12); }
.marketing-donation-title, .marketing-donation-amount { color: var(--marketing-ink); }
.marketing-donation-level { border-color: var(--marketing-border); background: var(--marketing-panel-strong); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.marketing-donation-level:hover, .marketing-donation-level.is-selected { border-color: rgba(99, 102, 241, 0.7); box-shadow: 0 8px 22px rgba(99, 102, 241, 0.14); transform: translateY(-1px); }
.marketing-donation-level:focus-visible, .marketing-frequency-switch button:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.45); outline-offset: 2px; }
.marketing-donation-label { color: var(--marketing-muted); }
.marketing-donation-input, .marketing-donation-summary { border-color: var(--marketing-border); background: var(--marketing-panel-strong); color: var(--marketing-ink); }
.marketing-donation-input::placeholder { color: var(--marketing-muted); }
.marketing-donation-summary { color: var(--marketing-muted); }
.marketing-donation-summary strong { color: var(--marketing-ink); }
.marketing-donation-thumb-1 { background: linear-gradient(145deg, #4f46e5, #7c3aed); }
.marketing-donation-thumb-2 { background: linear-gradient(145deg, #7c3aed, #c026d3); }
.marketing-donation-thumb-3 { background: linear-gradient(145deg, #9333ea, #db2777); }
.marketing-donation-arrow { color: #6366f1; }
.marketing-donation-continue { background: linear-gradient(105deg, #4f46e5, #9333ea 55%, #db2777); color: #fff; box-shadow: 0 8px 18px rgba(99, 102, 241, 0.2); }
.theme-dark .marketing-donation-widget, .dark .marketing-donation-widget { background: linear-gradient(145deg, rgba(30, 27, 75, 0.9), rgba(15, 23, 42, 0.72)); }
.marketing-builder-rail-item { border-color: var(--marketing-border); color: var(--marketing-muted); background: var(--marketing-panel); }
.marketing-builder-rail-item.is-selected { border-color: rgba(99, 102, 241, 0.45); color: var(--marketing-ink); background: rgba(99, 102, 241, 0.1); }
.marketing-builder-proof { color: #475569; background: rgba(148, 163, 184, 0.08); border: 1px solid var(--marketing-rule); }
.theme-dark .marketing-builder-proof, .dark .marketing-builder-proof { color: #cbd5e1; }
.marketing-builder-art { min-height: 18rem; background: linear-gradient(145deg, #312e81 0%, #4f46e5 48%, #c026d3 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.marketing-builder-art-orbit { position: absolute; right: -3rem; bottom: -5rem; width: 16rem; height: 16rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; box-shadow: 0 0 0 1.5rem rgba(255, 255, 255, 0.07), 0 0 0 3rem rgba(255, 255, 255, 0.04); }
.marketing-conversion-panel { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--marketing-panel-strong), rgba(99, 102, 241, 0.06)); }
.marketing-conversion-panel::before { content: ''; position: absolute; top: -8rem; right: -7rem; width: 22rem; height: 22rem; border: 1px solid rgba(99, 102, 241, 0.16); border-radius: 999px; box-shadow: 0 0 0 2rem rgba(99, 102, 241, 0.035), 0 0 0 4rem rgba(217, 70, 239, 0.025); pointer-events: none; }
.marketing-conversion-panel > * { position: relative; z-index: 1; }
.marketing-conversion-proof { border-color: var(--marketing-border); background: rgba(99, 102, 241, 0.06); }
.marketing-conversion-proof-icon { color: #4338ca; background: rgba(99, 102, 241, 0.12); }
.theme-dark .marketing-conversion-proof-icon, .dark .marketing-conversion-proof-icon { color: #c4b5fd; background: rgba(129, 140, 248, 0.18); }
.marketing-conversion-stage { border-color: var(--marketing-border); background: rgba(148, 163, 184, 0.055); transition: transform 220ms ease-out, border-color 220ms ease-out, background-color 220ms ease-out; }
.marketing-conversion-stage:hover { transform: translateX(4px); border-color: rgba(99, 102, 241, 0.42); background: var(--marketing-panel); }
.marketing-conversion-stage-number { color: #4338ca; background: rgba(99, 102, 241, 0.12); }
.theme-dark .marketing-conversion-stage-number, .dark .marketing-conversion-stage-number { color: #e0e7ff; background: rgba(99, 102, 241, 0.24); }
.marketing-conversion-connector { position: absolute; left: 2.25rem; bottom: -0.75rem; z-index: 2; height: 0.75rem; width: 1px; background: linear-gradient(to bottom, rgba(99, 102, 241, 0.42), transparent); }
.marketing-how-step { border-color: var(--marketing-border); background: linear-gradient(145deg, var(--marketing-panel-strong), rgba(99, 102, 241, 0.035)); box-shadow: 0 16px 34px rgba(79, 70, 229, 0.07); }
.marketing-how-step:hover { border-color: rgba(129, 140, 248, 0.55); background: var(--marketing-panel); box-shadow: 0 22px 42px rgba(79, 70, 229, 0.13); }

.marketing-highlights-menu,
.marketing-highlight-panel { border-color: var(--marketing-border); background: var(--marketing-panel); }
.marketing-highlights-menu { display: grid; gap: 0.25rem; align-content: start; }
.marketing-highlight-tab { color: var(--marketing-muted); }
.marketing-highlight-tab:hover,
.marketing-highlight-tab.is-active { color: var(--marketing-ink); background: rgba(99, 102, 241, 0.1); }
.marketing-highlight-tab.is-active { box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.3); }
.marketing-highlight-tab-index { color: var(--marketing-soft); }
.marketing-highlight-tab-eyebrow { color: currentColor; opacity: 0.8; }
.marketing-highlight-panel { min-height: 26rem; overflow: hidden; position: relative; }
.marketing-highlight-panel::after { content: ''; position: absolute; right: -4rem; bottom: -7rem; width: 20rem; height: 20rem; border: 1px solid currentColor; border-radius: 999px; opacity: 0.12; pointer-events: none; }
.marketing-highlight-panel > * { position: relative; z-index: 1; }
.marketing-highlight-panel-step { color: currentColor; }
.marketing-highlight-progress { height: 0.35rem; max-width: 20rem; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.2); }
.marketing-highlight-progress span { display: block; height: 100%; border-radius: inherit; background: currentColor; transition: width 300ms ease; }
.theme-dark .marketing-highlight-tab:hover, .dark .marketing-highlight-tab:hover,
.theme-dark .marketing-highlight-tab.is-active, .dark .marketing-highlight-tab.is-active { background: rgba(129, 140, 248, 0.14); }
@media (max-width: 640px) {
  .marketing-highlights-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-highlight-tab { align-items: flex-start; padding: 0.9rem; }
}
.marketing-highlight-card { overflow: hidden; min-height: 19rem; transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out; }
.marketing-highlight-card:hover { transform: translateY(-4px); border-color: rgba(99, 102, 241, 0.4) !important; box-shadow: 0 24px 58px rgba(79, 70, 229, 0.13); }
.marketing-highlight-card::after { content: ''; position: absolute; right: -4rem; bottom: -5rem; width: 15rem; height: 15rem; border: 1px solid currentColor; border-radius: 999px; opacity: 0.1; pointer-events: none; }
.marketing-highlight-primary { color: #4f46e5; background: linear-gradient(135deg, var(--marketing-panel-strong), rgba(99, 102, 241, 0.09)) !important; }
.marketing-highlight-secondary { color: #047857; background: linear-gradient(135deg, var(--marketing-panel-strong), rgba(16, 185, 129, 0.08)) !important; }
.marketing-highlight-tertiary { color: #a21caf; background: linear-gradient(135deg, var(--marketing-panel-strong), rgba(217, 70, 239, 0.08)) !important; }
.marketing-highlight-quaternary { color: #b45309; background: linear-gradient(135deg, var(--marketing-panel-strong), rgba(245, 158, 11, 0.09)) !important; }
.marketing-highlight-card .marketing-card-title,
.marketing-highlight-card .marketing-card-copy { color: var(--marketing-ink); }
.marketing-highlight-icon { color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.marketing-highlight-eyebrow { color: currentColor; }
.marketing-highlight-points { color: var(--marketing-muted); }
.marketing-highlight-points li span { color: currentColor; }
.theme-dark .marketing-highlight-primary, .dark .marketing-highlight-primary { color: #a5b4fc; }
.theme-dark .marketing-highlight-secondary, .dark .marketing-highlight-secondary { color: #6ee7b7; }
.theme-dark .marketing-highlight-tertiary, .dark .marketing-highlight-tertiary { color: #f0abfc; }
.theme-dark .marketing-highlight-quaternary, .dark .marketing-highlight-quaternary { color: #fcd34d; }

/* Shared brand treatment for dashboard, admin, and builder surfaces. These
   semantic classes can be adopted incrementally without changing legacy JSX. */
.app-shell,
.dashboard-shell,
.admin-shell { color: var(--color-text-primary); }
.app-shell,
.dashboard-shell,
.admin-shell { color-scheme: light; }
.dark .app-shell,
.dark .dashboard-shell,
.dark .admin-shell { color-scheme: dark; }
.app-shell {
  background-color: var(--color-surface);
  background-image: radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.07), transparent 28rem);
}
.dark .app-shell { background-image: radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.14), transparent 28rem); }
.dashboard-shell { background-color: var(--color-surface); }
.admin-shell { background-color: var(--color-surface); }
.app-shell-header,
.app-shell-sidebar {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.app-shell-header {
  color: var(--color-text-primary);
  background-image: linear-gradient(90deg, rgba(99, 102, 241, 0.035), transparent 42%);
}
.app-shell-sidebar { background-image: linear-gradient(180deg, rgba(99, 102, 241, 0.035), transparent 18rem); }
.app-shell main { color: var(--color-text-primary); }
.app-shell .text-gray-500 { color: var(--color-text-secondary); }
.app-shell .text-gray-400 { color: var(--color-text-muted); }
.app-shell .text-gray-900 { color: var(--color-text-primary); }
.app-shell .text-gray-700 { color: var(--color-text-primary); }
.app-shell .text-gray-600 { color: var(--color-text-secondary); }
.app-shell .border-gray-200 { border-color: var(--color-border); }
.app-shell .border-gray-100 { border-color: color-mix(in srgb, var(--color-border) 72%, transparent); }
.app-shell .bg-gray-50 { background-color: var(--color-surface); }
.app-shell .bg-gray-100 { background-color: color-mix(in srgb, var(--color-surface) 78%, var(--color-text-primary) 5%); }
.app-shell .bg-white { background-color: var(--color-surface-elevated); }
.app-shell .theme-toggle { color: var(--color-text-secondary); }
.app-shell .theme-toggle:hover { color: var(--color-primary-dark); }
.app-shell-sidebar a[aria-label*='dashboard'],
.app-shell-sidebar a[aria-label*='admin'] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.035), transparent);
}
.app-shell input:focus,
.app-shell textarea:focus,
.app-shell select:focus {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}
.app-shell .btn-primary {
  background: linear-gradient(105deg, #4f46e5, #7c3aed);
}
.app-shell .btn-primary:hover {
  background: linear-gradient(105deg, #4338ca, #6d28d9);
}
.page-builder-palette-group + .page-builder-palette-group { margin-top: 1rem; }
.page-builder-palette-group-title {
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-builder-block-option {
  width: 100%;
  appearance: none;
  font: inherit;
  min-height: 3.25rem;
  border-color: var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  cursor: grab;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.page-builder-block-option:hover {
  border-color: rgba(99, 102, 241, 0.45);
  background: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.08);
}
.page-builder-block-option:active { cursor: grabbing; }
.page-builder-block-option:focus-visible {
  border-color: rgba(99, 102, 241, 0.7);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
  outline: none;
}
.page-builder-block-add {
  border-color: rgba(99, 102, 241, 0.28);
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.page-builder-block-add:hover {
  border-color: rgba(99, 102, 241, 0.52);
  background: rgba(99, 102, 241, 0.15);
}
.dark .page-builder-block-add {
  border-color: rgba(165, 180, 252, 0.3);
  background: rgba(99, 102, 241, 0.18);
  color: #c4b5fd;
}
.page-builder-recovery {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
  color: var(--color-text-secondary);
}
.form-builder-recovery {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
  color: var(--color-text-secondary);
}
.page-builder-recovery button:last-child {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface-elevated);
}
.form-builder-recovery button:last-child {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface-elevated);
}

/* Keep the public builder preview feeling like a product surface rather than
   a static card: the active step is carried through the same accent system. */
.marketing-builder-showcase,
.marketing-conversion-panel,
.marketing-product-preview {
  isolation: isolate;
}
.marketing-conversion-panel::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--marketing-accent-pink);
  box-shadow: -0.75rem 0 0 var(--marketing-accent-strong), -1.5rem 0 0 var(--marketing-accent);
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 639px) {
  .marketing-hero-copy { display: flex; min-height: calc(100svh - 9rem); flex-direction: column; justify-content: space-between; }
  .marketing-highlights-grid { grid-template-columns: minmax(0, 1fr); }
  .marketing-highlight-card { min-height: auto; }
  .marketing-how-step { border-color: var(--marketing-border); background: linear-gradient(145deg, var(--marketing-panel-strong), rgba(99, 102, 241, 0.035)); }
  .marketing-product-preview { border-radius: 1.1rem; }
  .marketing-mini-stat { justify-content: center; padding: 0.65rem 0.25rem; }
  .marketing-mini-stat span { display: none; }
  .marketing-story-card { min-height: 20rem; }
  .marketing-conversion-stage:hover { transform: translateY(-2px); }
}

.page-builder-shell { min-width: 0; }
.page-builder-header {
  align-items: flex-start;
  gap: 1rem;
}
.page-builder-toolbar {
  max-width: 100%;
}
.page-builder-toolbar > * {
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .page-builder-header {
    position: sticky;
    top: 4.25rem;
    z-index: 20;
    padding: 0.85rem 1rem;
    margin-inline: -1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface-elevated) 96%, transparent);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  }
  .dark .page-builder-header {
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.22);
  }
}
@media (max-width: 639px) {
  .page-builder-header { flex-direction: column; }
  .page-builder-toolbar { width: 100%; justify-content: flex-start; }
  .page-builder-toolbar > button { flex: 1 1 auto; }
}
.page-builder-design-presets button { transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.page-builder-design-presets button:hover { transform: translateY(-1px); }
.page-builder-preview-frame { min-width: 0; transition: max-width 220ms ease, box-shadow 220ms ease; }
.page-builder-preview-frame[data-viewport='mobile'] { border-inline: 8px solid rgba(15, 23, 42, 0.12); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12); }
.dark .page-builder-preview-frame[data-viewport='mobile'] { border-color: rgba(148, 163, 184, 0.18); box-shadow: 0 18px 45px rgba(2, 6, 23, 0.3); }
.page-builder-shell .glass-card { background: var(--color-surface-elevated); border-color: var(--color-border); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dark .page-builder-shell .glass-card { background: rgba(15, 23, 42, 0.9); border-color: #334155; box-shadow: 0 16px 34px rgba(2, 6, 23, 0.25); }
.form-builder-shell { min-width: 0; color: var(--color-text-primary); }
.form-builder-shell .glass-card,
.form-builder-shell .rounded-xl.border,
.form-builder-shell .rounded-2xl.border { border-color: var(--color-border); }
.form-builder-shell .glass-card { background: var(--color-surface-elevated); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dark .form-builder-shell .glass-card { background: rgba(15, 23, 42, 0.9); box-shadow: 0 16px 34px rgba(2, 6, 23, 0.25); }
.form-builder-shell input,
.form-builder-shell textarea,
.form-builder-shell select { color: var(--color-text-primary); background-color: var(--color-surface-elevated); border-color: var(--color-border); }
.form-builder-shell input::placeholder,
.form-builder-shell textarea::placeholder { color: var(--color-text-muted); }
.form-builder-shell label { color: var(--color-text-secondary); }
.form-builder-heading { border-bottom: 1px solid var(--color-border); padding-bottom: 1.25rem; }
.form-builder-save-state { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-text-secondary); background: var(--color-surface-elevated); }
.form-builder-save-state.is-dirty { color: #92400e; border-color: rgba(245, 158, 11, 0.38); background: rgba(245, 158, 11, 0.1); }
.form-builder-save-state.is-saved { color: #047857; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.08); }
.form-builder-save-state-dot { display: block; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor; }
.dark .form-builder-save-state.is-dirty { color: #fcd34d; }
.dark .form-builder-save-state.is-saved { color: #6ee7b7; }
.dark .form-builder-shell label { color: #cbd5e1; }
.form-builder-shell button,
.form-builder-shell input,
.form-builder-shell textarea,
.form-builder-shell select { min-height: 2.5rem; }

/* Shared builder status cards make the visual editors easier to scan and
   expose the important readiness checks before an operator publishes. */
.builder-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.builder-readiness-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  padding: 0.75rem;
  background: var(--color-surface-elevated);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.builder-readiness-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.1);
}
.builder-readiness-label,
.builder-readiness-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-readiness-label { color: var(--color-text-muted); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.builder-readiness-value { margin-top: 0.15rem; color: var(--color-text-primary); font-size: 0.75rem; font-weight: 800; }
.builder-readiness-item.is-ready .builder-readiness-icon { color: #047857; background: rgba(16, 185, 129, 0.12); }
.builder-readiness-item.is-attention .builder-readiness-icon { color: #b45309; background: rgba(245, 158, 11, 0.14); }
.dark .builder-readiness-item { box-shadow: 0 12px 26px rgba(2, 6, 23, 0.2); }
.dark .builder-readiness-item.is-ready .builder-readiness-icon { color: #6ee7b7; }
.dark .builder-readiness-item.is-attention .builder-readiness-icon { color: #fcd34d; }
@media (max-width: 767px) {
  .builder-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .builder-readiness { grid-template-columns: minmax(0, 1fr); }
}
.page-builder-shell button,
.form-builder-shell button { touch-action: manipulation; }
.page-builder-shell input,
.page-builder-shell textarea,
.page-builder-shell select { color: var(--color-text-primary); background-color: var(--color-surface-elevated); border-color: var(--color-border); }
.page-builder-shell input::placeholder,
.page-builder-shell textarea::placeholder { color: var(--color-text-muted); }
.page-builder-shell label { color: var(--color-text-secondary); }
.dark .page-builder-shell label { color: #cbd5e1; }
.page-builder-shell .campaign-page-block { background: var(--color-surface-elevated); border-color: var(--color-border); }
.page-builder-block { min-width: 0; }
.page-builder-block-row > :first-child { min-width: 0; flex: 1 1 auto; }
.page-builder-block-row > :last-child { flex: 0 0 auto; }
.page-builder-block-preview { min-width: 0; overflow: hidden; }
.page-builder-block-hidden {
  border-style: dashed !important;
  opacity: 0.72;
}
.page-builder-hidden-notice {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.07);
  color: #4338ca;
}
.dark .page-builder-hidden-notice {
  border-color: rgba(165, 180, 252, 0.3);
  background: rgba(99, 102, 241, 0.16);
  color: #c4b5fd;
}
@media (max-width: 640px) {
  .page-builder-block-row { align-items: flex-start; flex-wrap: wrap; }
  .page-builder-block-row > :first-child { min-width: 0; flex: 1 1 100%; }
  .page-builder-block-row > :last-child { margin-left: auto; }
}

/* Mobile navigation stays compact and intentional rather than distributing
   links across a full viewport of empty space. */
.marketing-mobile-menu-nav a { min-height: 4.25rem; display: flex; align-items: center; border-bottom: 1px solid var(--marketing-rule); border-radius: 0; padding-inline: 0.25rem; font-size: 1rem; }
.marketing-mobile-menu-actions { margin-top: 0; }
.marketing-mobile-menu-actions a.bg-gradient-to-r { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.marketing-mobile-menu-promo { border-color: var(--marketing-border); background: rgba(99, 102, 241, 0.06); }
.marketing-mobile-menu-promo-icon { color: #4338ca; background: rgba(99, 102, 241, 0.12); }
.marketing-mobile-menu-promo-title { color: var(--marketing-ink); }
.marketing-mobile-menu-promo-copy { color: var(--marketing-muted); }
.marketing-mobile-menu-promo-points { color: #6366f1; }
.theme-dark .marketing-mobile-menu-promo,
.dark .marketing-mobile-menu-promo { background: rgba(99, 102, 241, 0.14); }
.theme-dark .marketing-mobile-menu-promo-icon,
.dark .marketing-mobile-menu-promo-icon { color: #c4b5fd; background: rgba(129, 140, 248, 0.18); }
.theme-dark .marketing-mobile-menu-promo-points,
.dark .marketing-mobile-menu-promo-points { color: #a5b4fc; }

/* A compact mobile drawer keeps the navigation usable without a large empty
   middle area, while the action group remains reachable on short screens. */
@media (max-width: 1023px) {
  .marketing-mobile-menu { height: 100dvh; min-height: 0; gap: 0.75rem; justify-content: flex-start; }
  .marketing-mobile-menu-nav { gap: 0; padding-block: 0; overflow-y: auto; }
  .marketing-mobile-menu-promo { margin-top: 0; }
  .marketing-mobile-menu-actions { margin-top: auto; padding-bottom: max(0.25rem, env(safe-area-inset-bottom)); }
}

.marketing-shell a:focus-visible,
.marketing-shell button:focus-visible,
.marketing-shell input:focus-visible,
.marketing-shell select:focus-visible,
.marketing-shell textarea:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.55);
  outline-offset: 3px;
}

.marketing-shell .marketing-card,
.marketing-shell .marketing-dashboard,
.marketing-shell .marketing-primary-button,
.marketing-shell .marketing-secondary-button {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 220ms;
  transition-timing-function: ease-out;
}

/* Keep the shared dashboard surfaces crisp and theme-aware. Marketing cards
   intentionally use their own treatment above; these rules cover the admin,
   organisation, and builder surfaces without relying on backdrop blur. */
.glass-card {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dark .glass-card {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.24);
}
.auth-card {
  background: #ffffff;
  border-color: #e2e8f0;
}
.dark .auth-card {
  background: #1e293b;
  border-color: #475569;
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.38);
}
.auth-google-button > div,
.auth-google-button .S9gUrf-YoZ4jf,
.auth-google-button .nsm7Bb-HzV7m-LgbsSe {
  width: 100% !important;
  max-width: 100%;
}
.dark .auth-card {
  background: linear-gradient(145deg, #1e293b 0%, #172554 100%);
  border-color: rgba(129, 140, 248, 0.38);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.5), 0 0 0 1px rgba(129, 140, 248, 0.08);
}
.dark .auth-card .input {
  background: #0b1530;
  border-color: #334155;
  color: #f8fafc;
}
.dark .auth-card .input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
}
.dark .auth-card .input::placeholder { color: #64748b; }
.btn-secondary {
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.btn-secondary:hover {
  border-color: rgba(99, 102, 241, 0.45);
  background: var(--color-surface);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.08);
  transform: translateY(-1px);
}

/* Keep legacy utility classes aligned with the marketing tokens so older
   sections do not become unreadable when the theme changes. */
.marketing-shell .text-gray-900,
.marketing-shell .text-slate-900 { color: var(--marketing-ink); }
.marketing-shell .text-gray-700,
.marketing-shell .text-slate-700 { color: var(--marketing-muted); }
.theme-dark .marketing-shell .text-gray-900,
.dark .marketing-shell .text-gray-900,
.theme-dark .marketing-shell .text-slate-900,
.dark .marketing-shell .text-slate-900 { color: var(--marketing-ink); }
.marketing-shell .bg-white { background-color: var(--marketing-panel-strong); }
.theme-dark .marketing-shell .bg-white,
.dark .marketing-shell .bg-white { background-color: var(--marketing-panel-strong); }

/* Keep the editor preview and the published page in sync for mobile stacking. */
@media (max-width: 767px) {
  .campaign-page-block-stack .grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* A block colour selected in the builder must win over the renderer's
   default utility colours, while links and buttons retain their action
   contrast. The same selector is used by the editor and public page. */
.campaign-page-block[data-custom-text-color='true'] h1,
.campaign-page-block[data-custom-text-color='true'] h2,
.campaign-page-block[data-custom-text-color='true'] h3,
.campaign-page-block[data-custom-text-color='true'] h4,
.campaign-page-block[data-custom-text-color='true'] p,
.campaign-page-block[data-custom-text-color='true'] li,
.campaign-page-block[data-custom-text-color='true'] blockquote,
.campaign-page-block[data-custom-text-color='true'] figcaption,
.campaign-page-block[data-custom-text-color='true'] summary,
.campaign-page-block[data-custom-text-color='true'] span,
.campaign-page-block[data-custom-text-color='true'] strong {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}

/* Existing marketing sections can retain their layout classes while using the
   same readable contrast as the hero. Keep text-white intact for buttons,
   numbers, and gradient surfaces. */
.marketing-shell .text-gray-300 { color: var(--marketing-muted); }
.marketing-shell .text-gray-400 { color: var(--marketing-muted); }
.marketing-shell .text-gray-500 { color: var(--marketing-soft); }
.marketing-shell .text-gray-600 { color: var(--marketing-muted); }
.marketing-shell .text-indigo-300,
.marketing-shell .text-indigo-400 { color: #4338ca; }
.theme-dark .marketing-shell .text-indigo-300,
.theme-dark .marketing-shell .text-indigo-400,
.dark .marketing-shell .text-indigo-300,
.dark .marketing-shell .text-indigo-400 { color: #c4b5fd; }
.marketing-shell .border-white\/10 { border-color: var(--marketing-rule); }
.marketing-shell .bg-white\/5 { background-color: rgba(148, 163, 184, 0.08); }
.marketing-shell .marketing-primary-button,
.marketing-shell a.text-white,
.marketing-shell button.text-white,
.marketing-shell .bg-indigo-600.text-white,
.marketing-shell .bg-gradient-to-r.text-white,
.marketing-shell .bg-gradient-to-br.text-white { color: #fff !important; }

@media (max-width: 640px) {
  .marketing-hero { min-height: 100svh; display: flex; }
  .marketing-hero > .relative.z-10 { display: flex; min-height: calc(100svh - 4.5rem); align-items: stretch; padding-top: 5.5rem; padding-bottom: 2.5rem; }
  .marketing-hero-grid-layout { display: flex; width: 100%; min-height: 0; align-items: stretch; }
  .marketing-hero-copy { display: flex; width: 100%; min-height: calc(100svh - 8rem); flex-direction: column; align-items: center; justify-content: center; gap: 2.35rem; }
  .marketing-hero-copy h1 { max-width: 32rem; font-size: clamp(3.25rem, 11vw, 3.75rem); line-height: 0.98; letter-spacing: -0.055em; }
  .marketing-hero-copy h1 ~ p { max-width: 34rem; font-size: 1.35rem; line-height: 1.6; }
  .marketing-section-title { font-size: clamp(3.25rem, 11vw, 3.75rem) !important; line-height: 0.98; letter-spacing: -0.055em; }
  .marketing-hero-kicker { margin-bottom: 0; font-size: 0.75rem; }
  .marketing-hero-copy .marketing-primary-button,
  .marketing-hero-copy .marketing-secondary-button { font-size: 1.1rem; }
  .marketing-hero-product-glow { inset: 6% -14% -4%; filter: blur(20px); }
  .marketing-hero-product .marketing-product-preview { border-radius: 1.25rem; }
  .marketing-hero-product .marketing-editor-canvas { padding: 1rem; }
  .marketing-hero-product .marketing-story-card { min-height: 14rem; }
  .marketing-hero-product .marketing-dashboard-stat { min-height: 4.75rem; display: flex; flex-direction: column; justify-content: center; }
  .marketing-hero-product .marketing-dashboard-stat strong { font-size: 0.95rem; }
  .marketing-builder-showcase { gap: 1.5rem; padding: 0; }
  .marketing-builder-stage { padding: 1rem; }
  .marketing-donation-widget { margin-top: 1.25rem; padding: 1rem; }
  .marketing-feature-card { padding: 1.25rem !important; }
  .marketing-feature-card > .relative > .mb-8 { margin-bottom: 1.25rem; }
  .marketing-feature-card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
  .marketing-feature-card p { font-size: 0.95rem; line-height: 1.6; }
  .marketing-shell .marketing-section { padding-block: 5.5rem; }
  .marketing-shell .marketing-section-head { margin-bottom: 4rem; row-gap: 0.75rem; }
  .marketing-shell section { scroll-margin-top: 5rem; }
  .marketing-shell .marketing-dashboard { border-radius: 1rem; }
  .marketing-how-step { min-height: 15rem; justify-content: center; }
  .marketing-footer > .mx-auto > .mb-16.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 1.5rem; justify-items: center; text-align: center; }
  .marketing-footer > .mx-auto > .mb-16.grid > div { justify-self: center; }
}

@media (min-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ===== Base Styles ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    sans-serif;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ===== Animation Utilities ===== */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

@keyframes cta-heartbeat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
  }
  10% {
    transform: scale(1.025);
    box-shadow: 0 6px 22px rgba(168, 85, 247, 0.48);
  }
  20% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
  }
  30% {
    transform: scale(1.015);
    box-shadow: 0 5px 19px rgba(219, 39, 119, 0.38);
  }
  45%, 100% {
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
  }
}

@keyframes underline-heartbeat {
  0%, 100% { transform: scaleX(1); opacity: 0.92; }
  10% { transform: scaleX(1.035); opacity: 1; }
  20% { transform: scaleX(1); opacity: 0.92; }
  30% { transform: scaleX(1.02); opacity: 1; }
  45%, 100% { transform: scaleX(1); opacity: 0.92; }
}

@keyframes gradient-text-heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.018); }
  20% { transform: scale(1); }
  30% { transform: scale(1.01); }
  45%, 100% { transform: scale(1); }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}
.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}
.animate-slide-in-left {
  animation: slide-in-left 0.6s ease-out forwards;
}
.animate-scale-in {
  animation: scale-in 0.5s ease-out forwards;
}
.animate-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}
.btn-primary,
.marketing-cta-heartbeat {
  animation: cta-heartbeat 2.4s ease-in-out infinite;
}
.marketing-pencil-underline {
  animation: underline-heartbeat 2.4s ease-in-out infinite;
  transform-origin: center;
}
.marketing-gradient-text {
  animation: gradient-text-heartbeat 2.4s ease-in-out infinite;
  transform-origin: center;
}
.marketing-gradient-text::after,
.marketing-pencil-underline {
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .marketing-cta-heartbeat,
  .marketing-gradient-text,
  .marketing-gradient-text::after,
  .marketing-pencil-underline {
    animation: none;
  }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 5s ease infinite;
}

/* Staggered animation delays */
.animation-delay-100 {
  animation-delay: 0.1s;
}
.animation-delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-300 {
  animation-delay: 0.3s;
}
.animation-delay-400 {
  animation-delay: 0.4s;
}
.animation-delay-500 {
  animation-delay: 0.5s;
}
.animation-delay-600 {
  animation-delay: 0.6s;
}
.animation-delay-800 {
  animation-delay: 0.8s;
}
.animation-delay-1000 {
  animation-delay: 1s;
}

/* ===== Glassmorphism ===== */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dark .glass-card {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.24);
}

/* ===== Component Utilities ===== */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: inline-block;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.5);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 1rem;
}

.btn-outline:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}

.input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 0.75rem;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.input::placeholder {
  color: var(--color-text-muted);
}

.auth-field-error,
.auth-field-error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}
.auth-field-message { margin-top: 0.35rem; color: #dc2626; font-size: 0.75rem; font-weight: 700; }
.dark .auth-field-message { color: #fca5a5; }
.auth-checkbox-error { accent-color: #ef4444; outline: 2px solid #ef4444; outline-offset: 1px; }

/* ===== Gradient Text ===== */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Feature Icon Styles ===== */
.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.feature-icon:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.4);
}

/* ===== Section Divider ===== */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border),
    transparent
  );
}

/* ===== Responsive Typography ===== */
@media (max-width: 640px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 1025px) {
  html {
    font-size: 16px;
  }
}

/* ===== Hero Animations ===== */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

.animate-fade-in {
  animation: fade-in 0.6s ease forwards;
}

.animate-fade-up {
  opacity: 0;
  animation: fade-up 0.8s ease forwards;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ===== Scroll-reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Glass card ===== */
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ===== Gradient text utility ===== */
.gradient-text {
  background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Selection ===== */
::selection {
  background: rgba(99,102,241,0.4);
  color: #fff;
}

/* ===== Custom scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
html { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }

/* Keep auth surfaces intentionally darker than the surrounding shell. */
.dark .auth-shell { background-color: #020617 !important; }
.dark .auth-shell .auth-card {
  background: linear-gradient(145deg, #111827 0%, #020617 100%) !important;
  border-color: rgba(99, 102, 241, 0.42) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(129, 140, 248, 0.08) !important;
}
.auth-theme-toggle {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 52%, #db2777 100%) !important;
  color: #fff !important;
}