/* Snaply marketing site — design tokens + components
   Minimal, playful, Wise/Apple-inspired system.
   Brand accent sampled from the original Snaply logo = #635BFF. */

:root {
  color-scheme: light;

  /* --- Brand accent (identical in both themes) --- */
  --color-accent: #635BFF;
  --color-accent-hover: #5248E5;
  --color-accent-deep: #4338CA;

  --grad-accent: linear-gradient(135deg, #818CF8 0%, #635BFF 55%, #3730A3 100%);
  --grad-text: linear-gradient(100deg, #171412 0%, #4338CA 55%, #5248E5 100%);
  --grad-accent-soft: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%);

  --color-success: #15803d;
  --color-success-soft: #f0fdf4;

  /* Per-card accent gradients (warm family, assigned by nth-child) */
  --card-grad: var(--grad-accent);
  --card-glow: rgba(99, 91, 255, 0.18);

  /* --- Radius --- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Fonts --- */
  --font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;

  --container: 1180px;
  --section-y: clamp(60px, 8vw, 112px);

  /* ===================== LIGHT THEME (default) ===================== */
  --color-bg: #f7f4ef;
  --color-bg-2: #efe9e0;
  --color-surface: #ffffff;
  --color-text: #1a140d;
  --color-text-muted: #655c50;
  --color-text-faint: #948a7d;
  --color-border: #ece5db;
  --color-border-strong: #ddd2c4;

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.80);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-blur: saturate(180%) blur(20px);

  --header-bg: rgba(247, 244, 239, 0.72);
  --header-border: rgba(255, 255, 255, 0.5);

  --accent-soft: #ffede7;
  --accent-soft-border: #ffc9b8;
  --accent-soft-text: #a81800;

  --subtle-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(239, 233, 224, 0.5));
  --grad-ink: linear-gradient(155deg, #241b12 0%, #17110b 60%, #0f0b07 100%);
  --ink-border: rgba(255, 255, 255, 0.08);

  /* Creative background */
  --grid-line: rgba(26, 20, 13, 0.05);
  --mesh-1: rgba(99, 91, 255, 0.20);
  --mesh-2: rgba(255, 138, 90, 0.20);
  --mesh-3: rgba(244, 114, 182, 0.14);
  --mesh-4: rgba(245, 158, 11, 0.16);
  --noise-opacity: 0.5;

  --shadow-sm: 0 1px 2px rgba(26, 20, 13, 0.04), 0 2px 8px rgba(26, 20, 13, 0.05);
  --shadow-md: 0 12px 32px -10px rgba(26, 20, 13, 0.16), 0 4px 12px -6px rgba(26, 20, 13, 0.08);
  --shadow-lg: 0 32px 64px -20px rgba(26, 20, 13, 0.26), 0 12px 28px -14px rgba(26, 20, 13, 0.12);
}

/* ===================== DARK THEME ===================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #000B22;
  --color-bg-2: #051230;
  --color-surface: #0a1a40;
  --color-text: #f6efe6;
  --color-text-muted: #b4a99a;
  --color-text-faint: #877d6f;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  --glass-bg: rgba(40, 31, 23, 0.48);
  --glass-bg-strong: rgba(44, 34, 25, 0.66);
  --glass-border: rgba(255, 255, 255, 0.10);

  --header-bg: rgba(14, 11, 8, 0.72);
  --header-border: rgba(255, 255, 255, 0.08);

  --accent-soft: rgba(99, 91, 255, 0.15);
  --accent-soft-border: rgba(99, 91, 255, 0.34);
  --accent-soft-text: #ffb59e;

  --subtle-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.045));
  --grad-ink: linear-gradient(155deg, #271d14 0%, #1a130c 60%, #140e09 100%);
  --ink-border: rgba(255, 255, 255, 0.10);

  --grid-line: rgba(255, 255, 255, 0.045);
  --mesh-1: rgba(99, 91, 255, 0.26);
  --mesh-2: rgba(255, 110, 60, 0.16);
  --mesh-3: rgba(244, 114, 182, 0.10);
  --mesh-4: rgba(245, 158, 11, 0.10);
  --noise-opacity: 0.35;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 36px -12px rgba(0, 0, 0, 0.62), 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 36px 72px -22px rgba(0, 0, 0, 0.72), 0 14px 30px -14px rgba(0, 0, 0, 0.55);
}

/* Follow the OS preference until the user picks a theme (JS sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #000B22;
    --color-bg-2: #051230;
    --color-surface: #0a1a40;
    --color-text: #f6efe6;
    --color-text-muted: #b4a99a;
    --color-text-faint: #877d6f;
    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.18);
    --glass-bg: rgba(40, 31, 23, 0.48);
    --glass-bg-strong: rgba(44, 34, 25, 0.66);
    --glass-border: rgba(255, 255, 255, 0.10);
    --header-bg: rgba(14, 11, 8, 0.72);
    --header-border: rgba(255, 255, 255, 0.08);
    --accent-soft: rgba(99, 91, 255, 0.15);
    --accent-soft-border: rgba(99, 91, 255, 0.34);
    --accent-soft-text: #ffb59e;
    --subtle-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.045));
    --grad-ink: linear-gradient(155deg, #271d14 0%, #1a130c 60%, #140e09 100%);
    --ink-border: rgba(255, 255, 255, 0.10);
    --grid-line: rgba(255, 255, 255, 0.045);
    --mesh-1: rgba(99, 91, 255, 0.26);
    --mesh-2: rgba(255, 110, 60, 0.16);
    --mesh-3: rgba(244, 114, 182, 0.10);
    --mesh-4: rgba(245, 158, 11, 0.10);
    --noise-opacity: 0.35;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 36px -12px rgba(0, 0, 0, 0.62), 0 4px 14px -6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 36px 72px -22px rgba(0, 0, 0, 0.72), 0 14px 30px -14px rgba(0, 0, 0, 0.55);
  }
}

/* Money / order-value figures use tabular monospace — true to the subject. */
.figure { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Smooth theme cross-fade — only active for ~500ms while toggling. */
html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color 450ms ease, color 400ms ease, border-color 450ms ease, box-shadow 450ms ease, fill 450ms ease !important;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* guard against decorative absolute elements */
  position: relative;
}

/* Creative "blueprint" line grid + embossed grain texture. Fixed, static. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    repeating-linear-gradient(45deg, var(--grid-line) 0 1px, transparent 1px 26px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  background-size: 48px 48px, 48px 48px, 100% 100%, 180px 180px;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.14;
  margin: 0 0 0.5em;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.35rem, 4.7vw, 3.7rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--color-text-muted); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: var(--section-y) 0; position: relative; }
/* Seamless sections — no visible band edge / shadow between them. */
.section-subtle { background: transparent; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-soft-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--accent-soft-border);
  box-shadow: var(--shadow-sm);
}

.section-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { font-size: 1.075rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  min-height: 44px;
  touch-action: manipulation;
}
.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(200, 34, 4, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(200, 34, 4, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.24); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--color-text);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: var(--accent-soft-border); color: var(--color-accent-hover); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--color-text);
}
.btn-ghost:hover { color: var(--color-accent); }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-block { width: 100%; }

/* Header — frosted glass */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.4);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
  flex-shrink: 0;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 4px 12px -3px rgba(99, 91, 255, 0.45); }
.brand:hover { color: var(--color-text); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.9375rem;
}
.nav-links a:hover { color: var(--color-accent); }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* Day / night theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease, color 200ms ease;
  overflow: hidden;
  position: relative;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent-soft-border); color: var(--color-accent); }
.theme-toggle svg { width: 20px; height: 20px; transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease; position: absolute; }
.theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-70deg) scale(0.4); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(70deg) scale(0.4); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { opacity: 0; transform: rotate(70deg) scale(0.4); }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
}

.nav-toggle {
  display: none;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  flex-shrink: 0;
}

/* Hero */
.hero {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(44px, 6vw, 80px);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-copy, .hero-visual { min-width: 0; }
.hero-copy h1 { margin-bottom: 22px; }
.hero-copy .lede {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  max-width: 47ch;
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.875rem;
  color: var(--color-text-faint);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }

/* ---- Hero signature: a live storefront cart. Illustrative (hand-built). ---- */
.hero-visual { position: relative; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -12% -8% -18% -8%;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 70% 30%, rgba(99, 91, 255, 0.5), transparent 70%),
    radial-gradient(55% 50% at 25% 80%, rgba(244, 114, 182, 0.3), transparent 70%);
  filter: blur(36px);
  pointer-events: none;
}
.cart-card {
  position: relative;
  z-index: 1;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
}
.cart-head .cart-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; }
.cart-head .cart-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* Goal bar — the signature element */
.goal {
  padding: 18px 22px;
  background: linear-gradient(0deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--color-border);
}
.goal-label { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--accent-soft-text); margin-bottom: 10px; }
.goal-label svg { width: 15px; height: 15px; }
.goal-track { height: 10px; border-radius: var(--radius-pill); background: var(--color-bg-2); border: 1px solid var(--accent-soft-border); overflow: hidden; }
.goal-fill {
  height: 100%;
  width: 84%;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(99, 91, 255, 0.5);
  animation: goal-grow 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes goal-grow { from { width: 12%; } to { width: 84%; } }
@media (prefers-reduced-motion: reduce) { .goal-fill { animation: none; } }

.cart-lines { padding: 8px 22px; }
.cart-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.cart-line:last-child { border-bottom: none; }
.cart-thumb { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); flex-shrink: 0; display: grid; place-items: center; }
.cart-thumb svg { width: 22px; height: 22px; color: var(--color-accent); }
.cart-line-main { flex: 1; min-width: 0; }
.cart-line-name { font-size: 0.875rem; font-weight: 600; }
.cart-line-sub { font-size: 0.75rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.cart-line-price { font-size: 0.875rem; font-weight: 600; }
.bundle-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-accent);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.was { color: var(--color-text-faint); text-decoration: line-through; margin-right: 6px; font-weight: 500; }
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 22px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-2);
}
.cart-total .label { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; color: var(--color-text); }
.cart-total .value { font-family: var(--font-mono); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--color-text); }

/* Floating "AOV up" chip */
.aov-chip {
  position: absolute;
  top: -22px;
  right: -14px;
  z-index: 2;
  background: var(--grad-ink);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--ink-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.aov-chip .aov-arrow { width: 36px; height: 36px; border-radius: 11px; background: var(--grad-accent); display: grid; place-items: center; box-shadow: 0 6px 14px -4px rgba(99, 91, 255, 0.7); }
.aov-chip .aov-arrow svg { width: 18px; height: 18px; color: #fff; }
.aov-chip .aov-text small { display: block; font-size: 0.6875rem; color: rgba(255,255,255,0.65); }
.aov-chip .aov-text strong { font-family: var(--font-mono); font-size: 1.075rem; }

/* Trust strip — glass band */
.trust-strip { padding: 22px 0; margin: 0 auto; }
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: center;
  align-items: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px 32px;
  box-shadow: var(--shadow-sm);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.trust-item svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

/* Feature grid — colour-gradient glass cards */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature-card {
  position: relative;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 34px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 65%;
  height: 80%;
  background: radial-gradient(circle, var(--card-glow), transparent 68%);
  pointer-events: none;
  transition: opacity 260ms ease;
  opacity: 0.9;
}
.feature-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent-soft-border); transform: translateY(-4px); }
.feature-card:hover::before { opacity: 1.25; }
.feature-card:nth-child(1) { --card-grad: linear-gradient(135deg, #ffb347, #f97316); --card-glow: rgba(249, 115, 22, 0.22); }
.feature-card:nth-child(2) { --card-grad: linear-gradient(135deg, #fb7185, #ef4444); --card-glow: rgba(244, 63, 94, 0.20); }
.feature-card:nth-child(3) { --card-grad: linear-gradient(135deg, #ff8a5c, #635BFF); --card-glow: rgba(99, 91, 255, 0.22); }
.feature-card:nth-child(4) { --card-grad: linear-gradient(135deg, #f472b6, #f97316); --card-glow: rgba(244, 114, 182, 0.20); }

.feature-icon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--card-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 10px 22px -8px var(--card-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.feature-icon svg { width: 26px; height: 26px; color: #fff; }
.feature-card h3 { position: relative; z-index: 1; margin-bottom: 10px; }
.feature-card > p { position: relative; z-index: 1; margin-bottom: 18px; }
.feature-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--color-text); }
.feature-list svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--grad-accent);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 3px 8px -3px rgba(99, 91, 255, 0.6);
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px -6px rgba(99, 91, 255, 0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}
.step h3 { margin-bottom: 8px; }

/* Why grid */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card {
  position: relative;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-card:nth-child(1) { --card-grad: linear-gradient(135deg, #ffb347, #f97316); --card-glow: rgba(249, 115, 22, 0.22); }
.why-card:nth-child(2) { --card-grad: linear-gradient(135deg, #ff8a5c, #635BFF); --card-glow: rgba(99, 91, 255, 0.22); }
.why-card:nth-child(3) { --card-grad: linear-gradient(135deg, #f472b6, #f97316); --card-glow: rgba(244, 114, 182, 0.20); }
.why-card .feature-icon { background: var(--card-grad); }

/* Pricing */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 5px;
  margin: 0 auto 40px;
  box-shadow: var(--shadow-sm);
}
.billing-toggle button {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.billing-toggle button.is-active { background: var(--grad-accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(99, 91, 255, 0.6); }
.billing-toggle .save-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-soft);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
}
.billing-toggle button.is-active .save-pill { color: #fff; background: rgba(255,255,255,0.22); }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.plan-card {
  position: relative;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan-card.is-featured {
  border-color: transparent;
  box-shadow: var(--shadow-md), 0 0 0 1.5px rgba(221, 40, 7, 0.45);
}
.plan-card.is-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-accent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.4;
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--grad-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px -6px rgba(99, 91, 255, 0.65);
}
.plan-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.075rem; margin-bottom: 4px; }
.plan-cap { font-size: 0.8125rem; color: var(--color-text-faint); margin-bottom: 18px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.plan-price .amount { font-family: var(--font-heading); font-size: 2.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); }
.plan-price .period { font-size: 0.875rem; color: var(--color-text-faint); }
.plan-billed { font-size: 0.75rem; font-weight: 600; color: var(--accent-soft-text); margin-bottom: 2px; }
.plan-price-note { font-size: 0.8125rem; color: var(--color-text-faint); margin-bottom: 22px; min-height: 18px; }
.plan-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; color: var(--color-text); }
.plan-list svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; margin-top: 3px; }
.plan-list .muted { color: var(--color-text-faint); }
.plan-list .muted svg { color: var(--color-border-strong); }

/* Free 1-hour onboarding call banner (on every paid plan) */
.onboard-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  margin-bottom: 16px;
  line-height: 1.3;
}
.onboard-banner svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-accent); }
.enterprise-band .onboard-banner {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  margin-top: 14px;
  margin-bottom: 0;
}
.enterprise-band .onboard-banner svg { color: #ffb59e; }

.enterprise-band {
  position: relative;
  margin-top: 24px;
  background: var(--grad-ink);
  border-radius: var(--radius-xl);
  padding: 44px;
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 32px;
  align-items: center;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-border);
}
.enterprise-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 120% at 100% 0%, rgba(99, 91, 255, 0.4), transparent 60%),
    radial-gradient(40% 120% at 0% 100%, rgba(244, 114, 182, 0.22), transparent 60%);
  pointer-events: none;
}
.enterprise-band > * { position: relative; z-index: 1; }
.enterprise-band h3 { color: #fff; margin-bottom: 8px; }
.enterprise-band p { color: rgba(255, 255, 255, 0.75); margin-bottom: 0; }
.enterprise-band .plan-list li { color: rgba(255, 255, 255, 0.92); }
.enterprise-band .plan-list svg { color: #ffb59e; }
.enterprise-price { text-align: left; }
.enterprise-price .amount { color: #fff; }
.enterprise-price .period { color: rgba(255, 255, 255, 0.6); }
.enterprise-price .plan-billed { color: #ffb59e; }

.trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: var(--grad-accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--color-accent-hover);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 15px 22px;
  border-radius: var(--radius-md);
  margin-bottom: 40px;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .trial-banner { color: var(--accent-soft-text); background: var(--accent-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .trial-banner { color: var(--accent-soft-text); background: var(--accent-soft); } }
.trial-banner svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Compare table */
.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
}
table.compare { width: 100%; border-collapse: collapse; min-width: 760px; }
table.compare th, table.compare td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; }
table.compare th:first-child, table.compare td:first-child { text-align: left; color: var(--color-text-muted); }
table.compare thead th { font-family: var(--font-heading); background: var(--color-bg-2); color: var(--color-text); font-weight: 700; }
table.compare tbody tr { transition: background-color 150ms ease; }
table.compare tbody tr:hover { background: var(--accent-soft); }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare svg.yes { width: 18px; height: 18px; color: var(--color-success); }
table.compare svg.no { width: 18px; height: 18px; color: var(--color-border-strong); }

/* FAQ */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
.faq-item[data-open="true"] { box-shadow: var(--shadow-md); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  padding: 19px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
}
.faq-question svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-faint); transition: transform 220ms ease, color 220ms ease; }
.faq-item[data-open="true"] .faq-question svg { transform: rotate(180deg); color: var(--color-accent); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms ease; }
.faq-item[data-open="true"] .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; padding: 0 24px; }
.faq-item[data-open="true"] .faq-answer-inner { padding: 0 24px 20px; }
.faq-answer p { margin: 0; font-size: 0.9375rem; }

/* Final CTA */
.final-cta {
  position: relative;
  background: var(--grad-ink);
  border-radius: var(--radius-xl);
  padding: clamp(44px, 6vw, 80px);
  text-align: center;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-border);
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 90% at 82% 8%, rgba(99, 91, 255, 0.5), transparent 60%),
    radial-gradient(50% 90% at 12% 96%, rgba(244, 114, 182, 0.3), transparent 60%);
  pointer-events: none;
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255, 255, 255, 0.74); max-width: 52ch; margin-left: auto; margin-right: auto; }
.final-cta .hero-actions { justify-content: center; }

/* Newsletter */
.footer-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  flex-wrap: wrap;
  padding: 34px 40px;
  margin-bottom: 44px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.footer-news .news-copy { min-width: 240px; flex: 1 1 300px; }
.footer-news h3 { margin-bottom: 6px; }
.footer-news p { margin: 0; font-size: 0.9375rem; }
.news-form { display: flex; gap: 10px; flex: 1 1 360px; max-width: 460px; flex-wrap: wrap; }
.news-form .news-field { flex: 1 1 220px; min-width: 0; }
.news-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 13px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 46px;
}
.news-input::placeholder { color: var(--color-text-faint); }
.news-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); }
.news-form .btn { flex: 0 0 auto; }
.news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.news-msg { flex-basis: 100%; margin: 4px 2px 0; font-size: 0.85rem; font-weight: 600; min-height: 1.1em; }
.news-msg.is-ok { color: var(--color-success); }
.news-msg.is-err { color: var(--color-accent); }

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); padding: 60px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 40px; }
.footer-brand p { font-size: 0.875rem; max-width: 32ch; }
.footer-col h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--color-text-muted); font-size: 0.9375rem; }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-faint);
}

/* Legal pages */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 { margin-top: 2em; font-size: 1.375rem; }
.legal-content h3 { font-size: 1.0625rem; margin-top: 1.5em; }
.legal-content ul { color: var(--color-text-muted); }
.legal-content li { margin-bottom: 6px; }
.legal-updated { color: var(--color-text-faint); font-size: 0.875rem; margin-bottom: 40px; }
.legal-hero { padding-bottom: 8px; }

/* ============ Order-flow demo: one order growing through every feature ============ */
.order-flow {
  position: relative;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 30px 40px 46px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.of-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.of-head-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--color-text); }
.of-head-label .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.5); animation: of-dot 2.4s ease-out infinite; }
@keyframes of-dot { 0% { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(99, 91, 255, 0); } }
.of-live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--grad-ink); color: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--ink-border); }
.of-live small { font-size: 0.7rem; color: rgba(255, 255, 255, 0.62); }
.of-total { display: inline-block; height: 1.2em; overflow: hidden; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: #fff; }
.of-reel { display: flex; flex-direction: column; animation: of-reel 10s ease-in-out infinite; }
.of-reel span { height: 1.2em; line-height: 1.2em; display: block; }
/* Each number is 1.2em tall; slide up one number-height per step (a slot-machine
   roll), holding each value ~1.6s so it lines up with the stations lighting. */
@keyframes of-reel {
  0%, 16%   { transform: translateY(0); }
  20%, 36%  { transform: translateY(-1.2em); }
  40%, 56%  { transform: translateY(-2.4em); }
  60%, 76%  { transform: translateY(-3.6em); }
  80%, 96%  { transform: translateY(-4.8em); }
  100%      { transform: translateY(-6em); }
}

.of-track { position: relative; }
.of-line { position: absolute; left: 3%; right: 3%; top: 27px; height: 4px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; z-index: 0; }
.of-line-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(1); background: var(--grad-accent); animation: of-fill 10s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes of-fill { 0% { transform: scaleX(0.02); } 92%, 100% { transform: scaleX(1); } }

.of-runner { position: absolute; left: 0; right: 0; top: 6px; height: 0; z-index: 2; pointer-events: none; }
.of-chip { position: absolute; top: 0; left: 3%; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--grad-accent); color: #fff; box-shadow: 0 10px 22px -8px rgba(99, 91, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); animation: of-run 10s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.of-chip svg { width: 22px; height: 22px; }
@keyframes of-run { 0% { left: 3%; } 100% { left: calc(97% - 44px); } }

.of-stations { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
.of-station { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.of-meta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.of-node { position: relative; width: 56px; height: 56px; border-radius: 16px; background: var(--card-grad); display: grid; place-items: center; box-shadow: 0 10px 22px -8px var(--card-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4); animation: of-bump 10s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.of-node svg { width: 26px; height: 26px; color: #fff; }
.of-node::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid var(--color-accent); opacity: 0; animation: of-ring 10s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes of-bump { 0%, 100% { transform: translateY(0); } 5% { transform: translateY(-7px); } 13% { transform: translateY(0); } }
@keyframes of-ring { 0%, 100% { opacity: 0; transform: scale(0.85); } 5% { opacity: 0.9; transform: scale(1); } 13% { opacity: 0; transform: scale(1.2); } }
.of-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--color-text); }
.of-badge { font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-soft-text); border: 1px solid var(--accent-soft-border); animation: of-badge 10s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes of-badge { 0%, 100% { transform: scale(0.96); opacity: 0.55; } 5% { transform: scale(1.06); opacity: 1; } 24% { opacity: 1; } 36% { transform: scale(1); opacity: 0.62; } }
.of-goalmini { width: 82px; height: 6px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.of-goalmini span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(1); background: var(--grad-accent); animation: of-mini 10s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes of-mini { 0% { transform: scaleX(0.12); } 7% { transform: scaleX(1); } 100% { transform: scaleX(1); } }

.of-station:nth-child(1) { --card-grad: linear-gradient(135deg, #ffb347, #f97316); --card-glow: rgba(249, 115, 22, 0.22); }
.of-station:nth-child(2) { --card-grad: linear-gradient(135deg, #fb7185, #ef4444); --card-glow: rgba(244, 63, 94, 0.20); }
.of-station:nth-child(3) { --card-grad: linear-gradient(135deg, #ff8a5c, #635BFF); --card-glow: rgba(99, 91, 255, 0.22); }
.of-station:nth-child(4) { --card-grad: linear-gradient(135deg, #f472b6, #f97316); --card-glow: rgba(244, 114, 182, 0.20); }
.of-station:nth-child(5) { --card-grad: linear-gradient(135deg, #fbbf24, #f59e0b); --card-glow: rgba(245, 158, 11, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .of-chip, .of-runner { display: none; }
  .of-badge { opacity: 1 !important; }
}

/* Scroll reveal (progressive enhancement — active only when JS adds .reveal-on) */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; }
}

/* Responsive */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { order: -1; width: 100%; max-width: 420px; margin: 0 auto; min-width: 0; }
  .cart-card { max-width: 100%; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .why-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .enterprise-band { grid-template-columns: 1fr; text-align: left; }
  .enterprise-price { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-links, .header-actions .btn-secondary { display: none; }
  .nav-toggle { display: inline-flex; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .aov-chip { right: 0; top: -16px; padding: 10px 12px; }
  .aov-chip .aov-arrow { width: 30px; height: 30px; }
  .trust-strip .container { padding: 20px 22px; }

  .order-flow { padding: 24px 20px 28px; }
  .of-head { margin-bottom: 26px; }
  .of-runner, .of-line { display: none; }
  .of-stations { flex-direction: column; gap: 22px; }
  .of-station { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; text-align: left; }
  .of-node { flex-shrink: 0; }
  .of-meta { align-items: flex-start; }

  .footer-news { padding: 26px 22px; flex-direction: column; align-items: stretch; }
  .news-form { max-width: none; }
}

@media (max-width: 560px) {
  .header-actions .btn-primary { display: none; }
  .site-header .container { padding: 0 18px; gap: 8px; }
}

body.nav-open .nav-links {
  display: flex;
  position: absolute;
  top: 74px;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--glass-border);
  padding: 20px 24px;
  gap: 18px;
  box-shadow: var(--shadow-md);
}
body.nav-open .header-actions .btn-secondary { display: inline-flex; }

/* ==========================================================
   Snaply v7 visual refresh baseline — minimal, playful, Wise/Apple-ish
   ========================================================== */

:root {
  color-scheme: light;

  --color-accent: #635BFF;
  --color-accent-hover: #5248E5;
  --color-accent-deep: #4338CA;
  --color-accent-ink: #FFFFFF;

  --color-bg: #F7F5EF;
  --color-bg-2: #ECE9DF;
  --color-surface: #FFFFFF;
  --color-text: #111411;
  --color-text-muted: #5E645D;
  --color-text-faint: #838A82;
  --color-border: #E1DED3;
  --color-border-strong: #CECABD;

  --color-success: #15803D;
  --color-success-soft: #F0FDF4;

  --accent-soft: #EEF2FF;
  --accent-soft-border: #C7D2FE;
  --accent-soft-text: #4338CA;

  --grad-accent: linear-gradient(135deg, #818CF8 0%, #635BFF 54%, #3730A3 100%);
  --grad-text: linear-gradient(92deg, #111411 0%, #111411 48%, #635BFF 49%, #5248E5 100%);
  --grad-accent-soft: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%);
  --grad-ink: linear-gradient(145deg, #1B1512 0%, #2A1711 100%);

  --glass-bg: rgba(255, 255, 255, 0.74);
  --glass-bg-strong: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(17, 20, 17, 0.08);
  --glass-blur: saturate(140%) blur(18px);

  --header-bg: rgba(247, 245, 239, 0.82);
  --header-border: rgba(17, 20, 17, 0.08);

  --grid-line: rgba(17, 20, 17, 0.045);
  --mesh-1: rgba(99, 91, 255, 0.12);
  --mesh-2: rgba(255, 180, 64, 0.12);
  --mesh-3: rgba(99, 91, 255, 0.06);
  --mesh-4: rgba(255, 255, 255, 0.45);
  --noise-opacity: 0.34;

  --font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 40px;

  --shadow-sm: 0 1px 2px rgba(17, 20, 17, 0.04), 0 10px 24px rgba(17, 20, 17, 0.04);
  --shadow-md: 0 18px 46px -28px rgba(17, 20, 17, 0.32), 0 12px 24px -20px rgba(17, 20, 17, 0.18);
  --shadow-lg: 0 34px 82px -44px rgba(17, 20, 17, 0.34), 0 16px 34px -28px rgba(17, 20, 17, 0.18);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #000B22;
  --color-bg-2: #051230;
  --color-surface: #0a1a40;
  --color-text: #F4FFF8;
  --color-text-muted: #B8C6BC;
  --color-text-faint: #8EA096;
  --color-border: rgba(244, 255, 248, 0.10);
  --color-border-strong: rgba(244, 255, 248, 0.18);

  --glass-bg: rgba(20, 32, 25, 0.58);
  --glass-bg-strong: rgba(20, 32, 25, 0.78);
  --glass-border: rgba(244, 255, 248, 0.10);
  --header-bg: rgba(11, 18, 15, 0.84);
  --header-border: rgba(244, 255, 248, 0.08);

  --accent-soft: rgba(99, 91, 255, 0.14);
  --accent-soft-border: rgba(99, 91, 255, 0.34);
  --accent-soft-text: #C7D2FE;

  --grid-line: rgba(244, 255, 248, 0.04);
  --mesh-1: rgba(99, 91, 255, 0.18);
  --mesh-2: rgba(255, 180, 64, 0.10);
  --mesh-3: rgba(99, 91, 255, 0.10);
  --mesh-4: rgba(255, 255, 255, 0.02);
  --noise-opacity: 0.18;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.38), 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 20px 54px -30px rgba(0, 0, 0, 0.72), 0 12px 28px -22px rgba(0, 0, 0, 0.62);
  --shadow-lg: 0 38px 88px -46px rgba(0, 0, 0, 0.82), 0 18px 38px -30px rgba(0, 0, 0, 0.64);
}

.skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 1000;
  transform: translateY(-140%);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 700;
}
.skip-link:focus-visible { transform: translateY(0); }

html { background: var(--color-bg); }
body {
  color: var(--color-text);
  background:
    radial-gradient(circle at 12% 8%, var(--mesh-1), transparent 28%),
    radial-gradient(circle at 88% 10%, var(--mesh-2), transparent 24%),
    linear-gradient(180deg, var(--color-bg) 0%, #FFFFFF 48%, var(--color-bg) 100%);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 8%, var(--mesh-1), transparent 28%),
    radial-gradient(circle at 88% 10%, var(--mesh-2), transparent 24%),
    linear-gradient(180deg, var(--color-bg) 0%, #0E1712 48%, var(--color-bg) 100%);
}
body::after {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
}

h1, h2, h3, h4 { text-wrap: balance; }
/* Heading tracking is deliberately close to normal. It was -0.065em/-0.05em,
   which at these display sizes closed the counters up and made long headings
   read as one mass. Outfit is already fairly tight by default, so a small
   negative value is enough to keep headings feeling set rather than typed. */
h1 {
  font-size: clamp(3rem, 7.2vw, 6.8rem);
  /* 0.95 set the lines closer together than the type is tall, so on a heading
     that wraps to three lines — the hero — descenders ran into the line below.
     1.05 leaves the leading visible without turning a display heading into a
     paragraph. */
  line-height: 1.05;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
p { color: var(--color-text-muted); }

.gradient-text {
  background: none;
  color: var(--color-accent-deep);
  -webkit-text-fill-color: currentColor;
}

.mobile-only { display: none; }

.site-header {
  background: var(--header-bg);
  border-bottom-color: var(--header-border);
  box-shadow: none;
}
.site-header .container { height: 78px; }
.brand {
  color: var(--color-text);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.brand img {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: 0 10px 24px -14px rgba(99, 91, 255, 0.9);
}
.nav-links { gap: 24px; }
.nav-links a {
  color: var(--color-text-muted);
  font-weight: 700;
}
.nav-links a:hover { color: var(--color-text); }

.btn,
.theme-toggle,
.nav-toggle {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn {
  min-height: 46px;
  padding: 12px 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: color-mix(in srgb, var(--color-accent) 76%, #000 24%);
  box-shadow: 0 14px 30px -18px rgba(159, 33, 8, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -20px rgba(159, 33, 8, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.btn-secondary,
.theme-toggle,
.nav-toggle {
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-text);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .nav-toggle {
  background: rgba(20, 32, 25, 0.82);
}
.btn-secondary:hover {
  color: var(--color-text);
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
}
.btn-ghost { color: var(--color-text); }
.btn-ghost:hover { color: var(--color-accent-deep); }

.eyebrow {
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
  box-shadow: none;
  letter-spacing: 0.04em;
}

.hero {
  padding-top: clamp(72px, 10vw, 138px);
}
.hero .container {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
  gap: clamp(36px, 6vw, 86px);
}
.hero-copy .lede {
  max-width: 50ch;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
}
.hero-actions { gap: 12px; }
.hero-meta {
  gap: 12px;
  color: var(--color-text-muted);
}
.hero-meta span {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.58);
}
:root[data-theme="dark"] .hero-meta span { background: rgba(20, 32, 25, 0.58); }
.hero-meta svg { color: var(--color-accent-deep); }

.hero-visual::before {
  inset: -18% -10%;
  background:
    radial-gradient(48% 44% at 70% 20%, rgba(99, 91, 255, 0.18), transparent 70%),
    radial-gradient(42% 40% at 16% 86%, rgba(255, 180, 64, 0.16), transparent 70%);
  filter: blur(30px);
}
.cart-card,
.order-flow,
.feature-card,
.why-card,
.step,
.plan-card,
.compare-wrap,
.footer-news,
.faq-item {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cart-card {
  border-radius: 34px;
  overflow: hidden;
}
.cart-head,
.goal,
.cart-total {
  border-color: var(--color-border);
}
.goal {
  background: var(--accent-soft);
}
.goal-track {
  height: 12px;
  background: rgba(17, 20, 17, 0.08);
  border-color: var(--accent-soft-border);
}
:root[data-theme="dark"] .goal-track { background: rgba(244, 255, 248, 0.12); }
.goal-fill {
  width: 100%;
  background: var(--color-accent);
  box-shadow: none;
  transform: scaleX(0.84);
  transform-origin: left;
  animation: goal-slide 900ms ease-out both;
}
@keyframes goal-slide { from { transform: scaleX(0.22); } to { transform: scaleX(0.84); } }
.cart-thumb {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
}
.cart-thumb svg { color: var(--color-accent-deep); }
.bundle-pill,
.tag {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: none;
}
.cart-total { background: var(--color-bg-2); }
.aov-chip {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: none;
  box-shadow: 0 18px 36px -24px rgba(159, 33, 8, 0.9);
}
.aov-chip .aov-arrow {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}
.aov-chip .aov-arrow svg { color: var(--color-accent-ink); }
.aov-chip .aov-text small { color: rgba(255, 255, 255, 0.76); }

.trust-strip .container {
  background: var(--color-text);
  color: var(--color-bg);
  border: none;
  box-shadow: none;
}
.trust-item { color: rgba(255, 255, 255, 0.78); }
.trust-item svg { color: var(--color-accent); }

.feature-grid { gap: 18px; }
.feature-card,
.why-card,
.step,
.plan-card {
  border-radius: var(--radius-lg);
}
.feature-card::before { opacity: 0; }
.feature-card:hover,
.why-card:hover,
.plan-card:hover {
  border-color: var(--accent-soft-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.feature-card:nth-child(1),
.why-card:nth-child(1),
.of-station:nth-child(1) { --card-grad: linear-gradient(135deg, #FFF2D4, #FFE3B5); --card-glow: rgba(249, 115, 22, 0.16); }
.feature-card:nth-child(2),
.why-card:nth-child(2),
.of-station:nth-child(2) { --card-grad: linear-gradient(135deg, #FFE6DD, #FFD0C2); --card-glow: rgba(99, 91, 255, 0.18); }
.feature-card:nth-child(3),
.why-card:nth-child(3),
.of-station:nth-child(3) { --card-grad: linear-gradient(135deg, #E8F6FF, #D6EDFF); --card-glow: rgba(62, 142, 221, 0.13); }
.feature-card:nth-child(4),
.of-station:nth-child(4),
.of-station:nth-child(5) { --card-grad: linear-gradient(135deg, #FFF7CF, #F6EDB2); --card-glow: rgba(207, 179, 52, 0.12); }
.feature-icon {
  background: var(--card-grad);
  box-shadow: inset 0 0 0 1px rgba(17, 20, 17, 0.05);
}
.feature-icon svg { color: var(--color-accent-deep); }
.feature-list svg,
.plan-list svg,
table.compare svg.yes { color: var(--color-accent-deep); }

.order-flow {
  padding: 34px;
}
.of-live {
  background: var(--color-text);
  color: var(--color-bg);
}
.of-line-fill,
.of-chip,
.of-node,
.of-node::after,
.of-badge,
.of-goalmini span {
  animation: none;
}
.of-line-fill { transform: scaleX(1); background: var(--color-accent); }
.of-chip {
  left: calc(97% - 44px);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: none;
}
.of-badge {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
  color: var(--accent-soft-text);
  opacity: 1;
}

.billing-toggle {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.billing-toggle button.is-active {
  background: var(--color-text);
  color: var(--color-bg);
  box-shadow: none;
}
.billing-toggle .save-pill {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
}
.plan-card.is-featured {
  border-color: var(--color-text);
  box-shadow: var(--shadow-md);
}
.plan-card.is-featured::before {
  background: none;
  opacity: 0;
}
.plan-badge {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: none;
}
.onboard-banner,
.trial-banner {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
  color: var(--accent-soft-text);
  box-shadow: none;
}
.enterprise-band,
.final-cta {
  background:
    radial-gradient(circle at 82% 0%, rgba(99, 91, 255, 0.22), transparent 34%),
    var(--grad-ink);
  box-shadow: var(--shadow-lg);
}
.enterprise-band::before,
.final-cta::before {
  background: none;
}

.compare-wrap {
  border-radius: var(--radius-lg);
}
table.compare thead th { background: var(--color-bg-2); }
table.compare tbody tr:hover { background: var(--accent-soft); }

.faq-question svg { color: var(--color-accent-deep); }

.contact-section {
  padding-top: 0;
}
.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.contact-card h2 {
  max-width: 720px;
}
.contact-card p {
  max-width: 58ch;
  margin-bottom: 0;
}
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.contact-email {
  color: var(--color-text);
  font-weight: 800;
  word-break: break-word;
}
.contact-email:hover {
  color: var(--color-accent-deep);
}

.news-input {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.news-msg.is-err { color: #B42318; }

.site-footer {
  border-top-color: var(--color-border);
}

@media (max-width: 960px) {
  .hero .container {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-visual {
    order: 0;
    max-width: 560px;
  }
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  #primary-nav { display: none; }
  body.nav-open #primary-nav { display: block; }
  .site-header .container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
  }
  .header-actions {
    justify-self: end;
    margin-left: 0;
  }
  .nav-toggle {
    display: inline-flex !important;
    justify-self: end;
  }
  .hero-copy,
  .hero-copy .lede,
  .hero-actions,
  .hero-meta {
    width: min(100%, 34rem);
    max-width: min(100%, calc(100vw - 36px));
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: min(100%, calc(100vw - 36px));
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 720px) {
  h1 {
    font-size: clamp(2.95rem, 13.4vw, 4.05rem);
    letter-spacing: -0.03em;
  }
  h2 { font-size: clamp(2.15rem, 10vw, 3.35rem); }
  .site-header .container { height: 72px; }
  #primary-nav { display: none; }
  body.nav-open #primary-nav { display: block; }
  .header-actions { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
  .site-header .container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
  }
  #primary-nav {
    grid-column: 1 / -1;
  }
  .header-actions {
    justify-self: end;
    margin-left: 0;
  }
  .nav-toggle {
    display: inline-flex !important;
    justify-self: end;
  }
  .nav-links,
  .header-actions .btn-secondary { display: none; }
  .nav-toggle { display: inline-flex; }
  body.nav-open .nav-links {
    top: 72px;
    background: var(--color-surface);
    border-color: var(--color-border);
    gap: 8px;
    padding: 16px;
  }
  :root[data-theme="dark"] body.nav-open .nav-links { background: var(--color-surface); }
  body.nav-open .nav-links a {
    display: flex;
    justify-content: center;
    min-height: 46px;
    align-items: center;
    border-radius: var(--radius-pill);
  }
  body.nav-open .nav-links a:hover {
    background: var(--accent-soft);
  }
  body.nav-open .mobile-only { display: list-item; }
  body.nav-open .mobile-only a {
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-weight: 900;
  }
  body.nav-open .header-actions .btn-secondary { display: none; }
  .hero { padding-top: 48px; }
  .hero-copy,
  .hero-copy .lede,
  .hero-actions,
  .hero-meta {
    width: min(100%, 34rem);
    max-width: min(100%, calc(100vw - 36px));
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: min(100%, calc(100vw - 36px));
    max-width: 100%;
    white-space: normal;
  }
  .hero-meta span { width: 100%; }
  .pricing-grid { grid-template-columns: 1fr; }
  .contact-actions { width: 100%; }
  .contact-actions .btn { width: 100%; }
  .footer-news { padding: 26px 22px; }
}

@media (max-width: 560px) {
  .header-actions .btn-primary { display: none; }
  .container { padding: 0 18px; }
  .hero-copy,
  .hero-copy .lede,
  .hero-actions,
  .hero-meta {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
  }
  .hero-actions .btn {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
    white-space: normal;
  }
  .cart-card { border-radius: 28px; }
}

/* ==========================================================
   Snaply v8 — white canvas, original logo/accent, feature motion
   ========================================================== */

:root {
  color-scheme: light;

  --color-accent: #635BFF;
  --color-accent-hover: #5248E5;
  --color-accent-deep: #4338CA;
  --color-accent-ink: #FFFFFF;

  --color-bg: #FFFFFF;
  --color-bg-2: #FAF8F4;
  --color-surface: #FFFFFF;
  --color-text: #171412;
  --color-text-muted: #625B55;
  --color-text-faint: #8C837B;
  --color-border: #ECE7DF;
  --color-border-strong: #D9D1C7;

  --accent-soft: #EEF2FF;
  --accent-soft-border: #C7D2FE;
  --accent-soft-text: #4338CA;

  --color-success: #15803D;
  --color-success-soft: #F0FDF4;

  --grad-accent: linear-gradient(135deg, #818CF8 0%, #635BFF 48%, #3730A3 100%);
  --grad-text: linear-gradient(100deg, #171412 0%, #171412 44%, #635BFF 45%, #5248E5 100%);
  --grad-accent-soft: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%);
  --grad-ink: linear-gradient(145deg, #1B1512 0%, #2A1711 100%);

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-strong: #FFFFFF;
  --glass-border: rgba(23, 20, 18, 0.08);
  --header-bg: rgba(255, 255, 255, 0.88);
  --header-border: rgba(23, 20, 18, 0.08);

  --mesh-1: rgba(99, 91, 255, 0.07);
  --mesh-2: rgba(255, 180, 64, 0.08);
  --mesh-3: rgba(99, 91, 255, 0.035);
  --mesh-4: rgba(255, 255, 255, 0.8);
  --grid-line: rgba(23, 20, 18, 0.035);
  --noise-opacity: 0.22;

  --shadow-sm: 0 1px 2px rgba(23, 20, 18, 0.04), 0 10px 24px rgba(23, 20, 18, 0.04);
  --shadow-md: 0 18px 46px -30px rgba(23, 20, 18, 0.34), 0 8px 20px -18px rgba(23, 20, 18, 0.16);
  --shadow-lg: 0 34px 82px -48px rgba(23, 20, 18, 0.36), 0 16px 34px -30px rgba(23, 20, 18, 0.18);
}

:root[data-theme="dark"] {
  --color-bg: #000B22;
  --color-bg-2: #051230;
  --color-surface: #0a1a40;
  --color-text: #FFF8F4;
  --color-text-muted: #CDBFB5;
  --color-text-faint: #9F9188;
  --color-border: rgba(255, 248, 244, 0.11);
  --color-border-strong: rgba(255, 248, 244, 0.18);
  --glass-bg: rgba(34, 24, 18, 0.62);
  --glass-bg-strong: rgba(34, 24, 18, 0.88);
  --glass-border: rgba(255, 248, 244, 0.10);
  --header-bg: rgba(18, 13, 11, 0.84);
  --header-border: rgba(255, 248, 244, 0.10);
  --accent-soft: rgba(99, 91, 255, 0.16);
  --accent-soft-border: rgba(99, 91, 255, 0.36);
  --accent-soft-text: #C7D2FE;
  --grid-line: rgba(255, 248, 244, 0.04);
  --mesh-1: rgba(99, 91, 255, 0.12);
  --mesh-2: rgba(255, 180, 64, 0.08);
  --mesh-3: rgba(99, 91, 255, 0.07);
}

html { background: var(--color-bg); }
body {
  background:
    radial-gradient(circle at 10% 14%, var(--mesh-1), transparent 24rem),
    radial-gradient(circle at 88% 16%, var(--mesh-2), transparent 22rem),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 14%, var(--mesh-1), transparent 24rem),
    radial-gradient(circle at 88% 16%, var(--mesh-2), transparent 22rem),
    var(--color-bg);
}
body::after {
  opacity: var(--noise-opacity);
  background-image:
    radial-gradient(circle, var(--grid-line) 1px, transparent 1.5px),
    linear-gradient(var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px, 100% 96px;
}

.site-header {
  background: var(--header-bg);
  border-bottom-color: var(--header-border);
}
.brand img {
  box-shadow: 0 10px 24px -14px rgba(99, 91, 255, 0.95);
}
.gradient-text {
  color: var(--color-accent-deep);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 38%, rgba(99, 91, 255, 0.055), transparent 22rem),
    radial-gradient(circle at 24% 80%, rgba(255, 180, 64, 0.08), transparent 20rem);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  border: 1px solid var(--accent-soft-border);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-sm);
}
.hero::before {
  width: 136px;
  height: 44px;
  right: 8%;
  top: 18%;
  transform: rotate(-8deg);
  animation: float-offer 7s ease-in-out infinite;
}
.hero::after {
  width: 84px;
  height: 84px;
  left: 4%;
  bottom: 10%;
  opacity: 0.72;
  animation: float-offer 8s ease-in-out infinite reverse;
}
.hero .container { position: relative; z-index: 1; }
.hero-visual::before {
  background:
    radial-gradient(50% 46% at 70% 24%, rgba(99, 91, 255, 0.14), transparent 70%),
    radial-gradient(44% 42% at 16% 86%, rgba(255, 180, 64, 0.12), transparent 70%);
}
@keyframes float-offer {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(-4deg); }
}

.btn-primary,
.bundle-pill,
.tag,
.plan-badge,
.of-chip {
  background: var(--grad-accent);
  color: #FFFFFF;
}
.btn-primary:hover {
  background: var(--color-accent-hover);
}
.eyebrow {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
  color: var(--accent-soft-text);
}

.cart-card,
.feature-card,
.why-card,
.step,
.plan-card,
.order-flow,
.compare-wrap,
.footer-news,
.faq-item,
.contact-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.goal {
  background:
    linear-gradient(90deg, var(--accent-soft), rgba(255, 255, 255, 0.95));
}
.goal-fill {
  width: 84%;
  transform: none;
  background:
    linear-gradient(90deg, #635BFF 0%, #A5B4FC 48%, #635BFF 100%);
  background-size: 180% 100%;
  box-shadow: 0 0 18px rgba(99, 91, 255, 0.22);
  animation: goal-grow 1200ms cubic-bezier(0.22, 1, 0.36, 1) both, goal-shimmer 2.8s ease-in-out 1.2s infinite;
}
@keyframes goal-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.aov-chip {
  background: var(--grad-accent);
  color: #fff;
  animation: aov-pop 3.8s ease-in-out infinite;
}
.aov-chip .aov-arrow {
  background: rgba(255, 255, 255, 0.2);
}
.aov-chip .aov-arrow svg,
.aov-chip .aov-text small { color: rgba(255,255,255,0.78); }
@keyframes aov-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-4px) scale(1.02); }
}

.trust-strip .container {
  background: var(--grad-ink);
}
.trust-item svg { color: #A5B4FC; }

.feature-card {
  position: relative;
  isolation: isolate;
}
.feature-card::before {
  opacity: 1;
  top: auto;
  right: 24px;
  bottom: 22px;
  width: 76px;
  height: 76px;
  border-radius: 28px;
  background: var(--card-grad);
  filter: none;
  transform: rotate(8deg);
  z-index: 0;
}
.feature-card:nth-child(1) { --card-grad: linear-gradient(135deg, #FFF2D4, #FFE3B5); --card-glow: rgba(249, 115, 22, 0.16); }
.feature-card:nth-child(2) { --card-grad: linear-gradient(135deg, #FFE6DD, #FFD0C2); --card-glow: rgba(99, 91, 255, 0.18); }
.feature-card:nth-child(3) { --card-grad: linear-gradient(135deg, #F1F6FF, #DDEBFF); --card-glow: rgba(59, 130, 246, 0.12); }
.feature-card:nth-child(4) { --card-grad: linear-gradient(135deg, #FFF7D9, #FFEFB0); --card-glow: rgba(245, 158, 11, 0.14); }
.feature-icon {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.feature-icon svg {
  color: var(--color-accent);
}
.feature-card:nth-child(1) .feature-icon { animation: bundle-stack 4.2s ease-in-out infinite; }
.feature-card:nth-child(2) .feature-icon { animation: discount-flip 4.4s ease-in-out infinite; }
.feature-card:nth-child(3) .feature-icon { animation: upsell-rise 4.6s ease-in-out infinite; }
.feature-card:nth-child(4) .feature-icon { animation: booster-pulse 4.8s ease-in-out infinite; }
@keyframes bundle-stack {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-5px) rotate(-3deg); }
}
@keyframes discount-flip {
  0%, 100% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(-6deg) scale(1.04); }
}
@keyframes upsell-rise {
  0%, 100% { transform: translate(0, 0); }
  45% { transform: translate(5px, -7px); }
}
@keyframes booster-pulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow-sm); }
  45% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(99, 91, 255, 0.08); }
}

.of-line-fill {
  transform-origin: left;
  transform: scaleX(1);
  background: var(--grad-accent);
  animation: of-fill 10s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.of-chip {
  left: 3%;
  box-shadow: 0 10px 22px -8px rgba(99, 91, 255, 0.7);
  animation: of-run 10s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.of-node {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  animation: of-bump 10s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2s);
}
.of-node svg {
  color: var(--color-accent);
}
.of-node::after {
  animation: of-ring 10s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2s);
}
.of-badge {
  animation: of-badge 10s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2s);
}
.of-goalmini span {
  background: var(--grad-accent);
  animation: of-mini 10s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 2s);
}

.enterprise-band,
.final-cta {
  background:
    radial-gradient(circle at 82% 0%, rgba(99, 91, 255, 0.28), transparent 34%),
    var(--grad-ink);
}
.contact-section {
  background: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .goal-fill,
  .aov-chip,
  .feature-card .feature-icon,
  .of-line-fill,
  .of-chip,
  .of-node,
  .of-node::after,
  .of-badge,
  .of-goalmini span {
    animation: none !important;
  }
}

/* ==========================================================
   Snaply v11 — theme-aware icon/decor system
   ========================================================== */

:root {
  --design-ink: #FFFFFF;
  --design-ink-2: #FFF6F1;
  --design-ink-3: #F3ECE6;
  --design-ink-border: rgba(99, 91, 255, 0.16);
  --design-ink-text: #4338CA;
  --design-ink-muted: #625B55;
  --design-ink-shadow: 0 16px 34px -28px rgba(27, 21, 18, 0.28);
  --design-hero-decor-opacity: 0.72;
  --design-card-decor-opacity: 0.82;
}

:root[data-theme="dark"] {
  --design-ink: #1B1512;
  --design-ink-2: #2A1711;
  --design-ink-3: #3A1D13;
  --design-ink-border: rgba(99, 91, 255, 0.28);
  --design-ink-text: #FFF8F4;
  --design-ink-muted: rgba(255, 248, 244, 0.72);
  --design-ink-shadow: 0 18px 38px -26px rgba(0, 0, 0, 0.72);
  --design-hero-decor-opacity: 0.34;
  --design-card-decor-opacity: 0.96;
}

.hero::before,
.hero::after {
  background: linear-gradient(135deg, var(--design-ink) 0%, var(--design-ink-2) 100%);
  border-color: var(--design-ink-border);
  box-shadow: var(--design-ink-shadow);
  opacity: var(--design-hero-decor-opacity);
}

.feature-card:nth-child(1),
.why-card:nth-child(1),
.of-station:nth-child(1) {
  --card-grad: linear-gradient(135deg, #FFF8F2 0%, #F1E7DD 100%);
  --card-glow: rgba(27, 21, 18, 0.08);
}
.feature-card:nth-child(2),
.why-card:nth-child(2),
.of-station:nth-child(2) {
  --card-grad: linear-gradient(135deg, #FFF2EC 0%, #EFE4DE 100%);
  --card-glow: rgba(99, 91, 255, 0.10);
}
.feature-card:nth-child(3),
.why-card:nth-child(3),
.of-station:nth-child(3) {
  --card-grad: linear-gradient(135deg, #FAF8F4 0%, #EAE4DE 100%);
  --card-glow: rgba(27, 21, 18, 0.08);
}
.feature-card:nth-child(4),
.of-station:nth-child(4),
.of-station:nth-child(5) {
  --card-grad: linear-gradient(135deg, #FFF7ED 0%, #ECE2D8 100%);
  --card-glow: rgba(27, 21, 18, 0.08);
}

:root[data-theme="dark"] .feature-card:nth-child(1),
:root[data-theme="dark"] .why-card:nth-child(1),
:root[data-theme="dark"] .of-station:nth-child(1) {
  --card-grad: linear-gradient(135deg, #201713 0%, #3A1A10 100%);
  --card-glow: rgba(27, 21, 18, 0.34);
}
:root[data-theme="dark"] .feature-card:nth-child(2),
:root[data-theme="dark"] .why-card:nth-child(2),
:root[data-theme="dark"] .of-station:nth-child(2) {
  --card-grad: linear-gradient(135deg, #1A1412 0%, #35170F 100%);
  --card-glow: rgba(27, 21, 18, 0.34);
}
:root[data-theme="dark"] .feature-card:nth-child(3),
:root[data-theme="dark"] .why-card:nth-child(3),
:root[data-theme="dark"] .of-station:nth-child(3) {
  --card-grad: linear-gradient(135deg, #15171A 0%, #26242A 100%);
  --card-glow: rgba(21, 23, 26, 0.34);
}
:root[data-theme="dark"] .feature-card:nth-child(4),
:root[data-theme="dark"] .of-station:nth-child(4),
:root[data-theme="dark"] .of-station:nth-child(5) {
  --card-grad: linear-gradient(135deg, #21160E 0%, #37200F 100%);
  --card-glow: rgba(27, 21, 18, 0.34);
}

.feature-card::before {
  background: var(--card-grad);
  border: 1px solid var(--design-ink-border);
  box-shadow: var(--design-ink-shadow), inset 0 1px 0 rgba(255, 248, 244, 0.08);
  opacity: var(--design-card-decor-opacity);
}
.feature-card > *,
.why-card > * {
  position: relative;
  z-index: 1;
}

.feature-icon,
.why-card .feature-icon,
.cart-thumb,
.of-node,
.aov-chip .aov-arrow,
.of-live,
.btn-secondary,
.theme-toggle,
.nav-toggle {
  background: linear-gradient(145deg, var(--design-ink) 0%, var(--design-ink-2) 100%);
  border: 1px solid var(--design-ink-border);
  box-shadow: var(--design-ink-shadow), inset 0 1px 0 rgba(255, 248, 244, 0.08);
}
.feature-icon svg,
.why-card .feature-icon svg,
.cart-thumb svg,
.of-node svg,
.aov-chip .aov-arrow svg {
  color: var(--design-ink-text);
}

.of-live,
.of-total {
  color: var(--design-ink-text);
}
.of-live small {
  color: var(--design-ink-muted);
}

.btn-secondary,
.theme-toggle,
.nav-toggle {
  color: var(--color-text);
}
.btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--color-accent-deep);
}

.billing-toggle button.is-active {
  background: var(--grad-accent);
  color: #FFFFFF;
  box-shadow: 0 10px 22px -14px rgba(99, 91, 255, 0.68);
}
.billing-toggle button.is-active .save-pill {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

.of-badge {
  background: linear-gradient(145deg, var(--design-ink) 0%, var(--design-ink-2) 100%);
  border-color: var(--design-ink-border);
  color: var(--design-ink-text);
  box-shadow: 0 10px 22px -18px rgba(27, 21, 18, 0.72);
}
.of-node::after {
  border-color: rgba(99, 91, 255, 0.58);
}

:root[data-theme="dark"] .contact-section {
  background: var(--color-bg);
}
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .footer-news {
  background: linear-gradient(145deg, var(--design-ink) 0%, var(--design-ink-2) 100%);
  border-color: rgba(255, 248, 244, 0.12);
}

/* ==========================================================
   Snaply v13 — remove extra decorative pills
   ========================================================== */

.hero::before,
.hero::after,
.feature-card::before {
  display: none;
}

.eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-accent-deep);
  letter-spacing: 0.08em;
}

:root[data-theme="dark"] .eyebrow {
  color: #A5B4FC;
}

.trust-strip .container {
  border-radius: var(--radius-md);
}

/* ==========================================================
   UI/UX Pro Max — Motion Graphics, Interactive Widgets & Animations
   ========================================================== */

/* Ambient Glowing Background Orbs */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before,
.hero::after {
  content: "";
  display: block !important;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.45;
  transition: opacity 500ms ease;
}
.hero::before {
  width: 340px;
  height: 340px;
  top: 5%;
  right: 15%;
  background: radial-gradient(circle, rgba(99, 91, 255, 0.45) 0%, rgba(129, 140, 248, 0.15) 70%, transparent 100%);
  animation: orb-drift-1 14s ease-in-out infinite alternate;
}
.hero::after {
  width: 280px;
  height: 280px;
  bottom: 10%;
  left: 5%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.35) 0%, rgba(99, 91, 255, 0.12) 70%, transparent 100%);
  animation: orb-drift-2 18s ease-in-out infinite alternate;
}
:root[data-theme="dark"] .hero::before { opacity: 0.65; }
:root[data-theme="dark"] .hero::after { opacity: 0.55; }

@keyframes orb-drift-1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.12); }
  100% { transform: translate(25px, -20px) scale(0.95); }
}
@keyframes orb-drift-2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -35px) scale(1.15); }
  100% { transform: translate(-20px, 30px) scale(0.9); }
}

/* Scroll-Triggered Reveal Animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Interactive Hero Cart Demo & Unlocked Animations */
.cart-demo-action {
  padding: 12px 0 6px;
}
.btn-demo-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px dashed var(--color-accent);
  color: var(--color-accent-deep);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 250ms ease;
  box-shadow: 0 2px 8px rgba(99, 91, 255, 0.12);
}
.btn-demo-add:hover {
  background: var(--grad-accent);
  color: #ffffff;
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 91, 255, 0.35);
}
:root[data-theme="dark"] .btn-demo-add {
  color: #A5B4FC;
}
:root[data-theme="dark"] .btn-demo-add:hover {
  color: #ffffff;
}

.cart-line.is-new-item {
  animation: line-fly-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  background: rgba(99, 91, 255, 0.08);
  border-radius: var(--radius-sm);
}
@keyframes line-fly-in {
  0% { opacity: 0; transform: translateY(-16px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.goal.is-unlocked .goal-fill {
  background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}
.goal.is-unlocked .goal-label {
  color: #059669;
}
:root[data-theme="dark"] .goal.is-unlocked .goal-label {
  color: #34D399;
}

/* Interactive AOV Calculator Section */
.calculator-section {
  padding: var(--section-y) 0;
}
.calc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.calc-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; width: 300px; height: 300px;
  background: radial-gradient(circle at 100% 0%, rgba(99, 91, 255, 0.12), transparent 70%);
  pointer-events: none;
}
.calc-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 36px;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 860px) {
  .calc-grid { grid-template-columns: 1fr; gap: 28px; }
}

.calc-field {
  margin-bottom: 28px;
}
.calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.calc-label-row label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
.calc-val-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--color-accent-deep);
  font-weight: 700;
  font-size: 0.9rem;
}
:root[data-theme="dark"] .calc-val-badge {
  color: #A5B4FC;
}

.calc-slider {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  outline: none;
  -webkit-appearance: none;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.4);
  cursor: pointer;
  transition: transform 150ms ease;
}
.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18);
}
.calc-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin-top: 8px;
}

.calc-result-box {
  background: var(--grad-ink);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 16px 36px -12px rgba(99, 91, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.calc-res-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 8px;
}
.calc-res-amount {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  text-shadow: 0 2px 20px rgba(99, 91, 255, 0.5);
}
.calc-res-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 24px;
  line-height: 1.4;
}

/* Cursor Spotlight & 3D Tilt Card Effects */
.feature-card,
.why-card,
.step,
.plan-card {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease, border-color 300ms ease;
}
.feature-card:hover,
.why-card:hover,
.step:hover,
.plan-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-soft-border);
  box-shadow: 0 20px 40px -15px rgba(99, 91, 255, 0.16), var(--shadow-md);
}


/* ==========================================================================
   Support / knowledge base (support.html)
   Token-driven only — no hardcoded light/dark values, so both themes follow
   the shared variables like every other component.
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Head --- */
.kb-head { max-width: 900px; margin: 0 auto; }
.kb-lede {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 720px;
  margin-bottom: 26px;
}
.kb-crumbs { margin-bottom: 18px; }
.kb-crumbs ol {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0;
  font-size: 0.8125rem; color: var(--color-text-faint);
}
.kb-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--color-border-strong); }
.kb-crumbs a { color: var(--color-text-muted); }

.kb-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.kb-quick a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.kb-quick a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

/* --- Two-column layout --- */
.kb-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.kb-body { min-width: 0; max-width: 760px; }

/* --- Sticky table of contents --- */
.kb-toc { position: sticky; top: 96px; font-size: 0.875rem; }
.kb-toc-title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 14px;
}
.kb-toc ol { list-style: none; padding: 0; margin: 0; }
.kb-toc ol ol { padding-left: 14px; margin-top: 6px; }
.kb-toc li { margin-bottom: 9px; }
.kb-toc a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid var(--color-border);
  padding-left: 12px;
  display: block;
  line-height: 1.35;
  transition: color 150ms ease, border-color 150ms ease;
}
.kb-toc a:hover { color: var(--color-accent); border-left-color: var(--color-accent); }

/* --- Article typography --- */
.kb-body h2 {
  font-size: 1.5rem;
  margin-top: 2.4em;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 96px;
}
.kb-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.kb-body h3 { font-size: 1.125rem; margin-top: 1.9em; scroll-margin-top: 96px; }
.kb-body h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 6px;
  color: var(--color-text);
}
.kb-body p, .kb-body li { color: var(--color-text-muted); }
.kb-body ul, .kb-body ol { padding-left: 22px; margin-bottom: 18px; }
.kb-body li { margin-bottom: 8px; }
.kb-body dfn { font-style: normal; font-weight: 700; color: var(--color-text); }

/* Direct-answer paragraph — the snippet-eligible summary under a heading */
.kb-answer {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text) !important;
  border-left: 3px solid var(--color-accent);
  padding-left: 18px;
  margin-bottom: 22px;
}

.kb-note {
  font-size: 0.875rem;
  color: var(--color-text-faint) !important;
  border-left: 2px solid var(--color-border-strong);
  padding-left: 14px;
  margin-top: 18px;
}
.kb-body .compare-wrap { margin: 22px 0; }

.kb-callout {
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 20px 0;
}

/* Plan requirement chip */
.kb-plan {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.kb-plan-soon {
  border-color: var(--color-border-strong);
  background: var(--color-bg-2);
  color: var(--color-text-faint);
}

/* --- KB tables (reuse .compare-wrap for the scroll shell) --- */
table.kb-table { width: 100%; border-collapse: collapse; min-width: 560px; }
table.kb-table th, table.kb-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  vertical-align: top;
}
table.kb-table thead th {
  font-family: var(--font-heading);
  background: var(--color-bg-2);
  color: var(--color-text);
  font-weight: 700;
}
table.kb-table tbody tr:last-child td { border-bottom: none; }
table.kb-table tbody tr:hover { background: var(--accent-soft); }

/* --- Glossary --- */
.kb-glossary { margin: 20px 0; }
.kb-glossary dt {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  margin-top: 18px;
  font-size: 0.9375rem;
}
.kb-glossary dd {
  margin: 5px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --- Contact card --- */
.kb-contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
}
.kb-contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* --- Responsive --- */
@media (max-width: 980px) {
  .kb-layout { grid-template-columns: 1fr; gap: 32px; }
  .kb-toc {
    position: static;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    background: var(--color-surface);
  }
  .kb-toc ol ol { display: none; }
  .kb-body { max-width: none; }
}

/* ==========================================================================
   CONTACT PAGE (/contact/) — July 31, 2026

   Token-driven only, so light/dark follow the shared variables like every
   other component. Inputs reuse `.news-input` from the newsletter form and
   only override what a full-width multi-line form needs (square-ish radius
   instead of the pill, textarea sizing, select chevron).
   ========================================================================== */
.contact-page { padding: 8px 0 72px; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 3.5vw, 38px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.cf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-field label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}
.cf-req { color: var(--color-accent); }
.cf-optional {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-text-faint);
}

/* The pill radius reads fine on a lone newsletter input; on a stacked form it
   fights the card. Square these off and let them fill the column. */
.cf-input {
  border-radius: var(--radius-md);
  border-color: var(--color-border-strong);
}
.cf-textarea {
  border-radius: var(--radius-md);
  min-height: 160px;
  padding: 14px 18px;
  line-height: 1.6;
  resize: vertical;
}
.cf-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  /* Chevron drawn from `currentColor` so it inverts with the theme; a
     hardcoded dark SVG disappeared against the dark canvas. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.cf-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.cf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.cf-actions .btn { flex: 0 0 auto; }
.cf-msg { flex: 1 1 240px; margin: 0; min-height: 1.1em; }

.contact-aside { display: flex; flex-direction: column; gap: 16px; }
.contact-aside-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
}
.contact-aside-card h2 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.contact-aside-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

@media (max-width: 980px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   APPS SWITCHER — the site-level app menu in the header.

   One nav item ("Apps") opening a panel of app rows, so the header scales to
   however many apps ship without turning into a row of product names competing
   with the page's own section links.

   Token-driven only — every colour, radius and shadow below is an existing
   variable, so both themes follow the shared system. The mobile half of this
   component lives in the authoritative MOBILE block at the end of the file,
   where the panel is rendered inline inside the slide-in menu.
   ========================================================================== */

.nav-apps { position: relative; }

.nav-apps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
}
.nav-apps-toggle:hover,
.nav-apps[data-open="true"] .nav-apps-toggle { color: var(--color-accent); }
.nav-apps-toggle svg { width: 13px; height: 13px; transition: transform 0.18s ease; }
.nav-apps[data-open="true"] .nav-apps-toggle svg { transform: rotate(180deg); }

.nav-apps-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: -19px; /* pulls the panel's inner padding flush with the toggle text */
  width: 366px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 120;
}
.nav-apps[data-open="true"] .nav-apps-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-app {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px;
  border-radius: var(--radius-sm);
}
a.nav-app:hover { background: var(--accent-soft); }
.nav-app.is-soon { cursor: default; }

.nav-app-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft-border);
  display: grid;
  place-items: center;
}
.nav-app-icon svg { width: 19px; height: 19px; color: var(--color-accent-deep); }

.nav-app-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.3;
}
.nav-app-desc {
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.nav-app-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-soft-text);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav-app.is-soon .nav-app-name,
.nav-app.is-soon .nav-app-desc { color: var(--color-text-muted); }

/* The app you are currently on. Marked with aria-current="page" in the markup,
   so the highlight and the accessible state are the same fact, not two that
   can drift apart. */
.nav-app[aria-current="page"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}
.nav-app[aria-current="page"] .nav-app-name { color: var(--color-accent-deep); }
.nav-app[aria-current="page"] .nav-app-desc { color: var(--color-text); }

.nav-apps-all {
  display: block;
  margin: 4px 3px 1px;
  padding: 10px 8px 4px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
}

@media (min-width: 901px) {
  .nav-apps-label { display: none; }
}

/* ==========================================================================
   MOBILE — authoritative header/nav + responsive fixes (July 31, 2026)

   This block is last on purpose: it supersedes the earlier, conflicting
   mobile rules (the duplicated max-width 900/720/560 blocks above, which
   defined the header three times with different grids and offsets).

   Fixes:
   - the open menu became a SECOND GRID ROW inside the header
     (`#primary-nav { grid-column: 1 / -1 }`), expanding the header and
     pushing the theme/hamburger buttons underneath the panel;
   - hero/CTA buttons sized with `calc(100vw - 36px)` overflowed inside
     padded parents (the final-CTA block ran 27px past the viewport);
   - tap targets below the 44px minimum.
   ========================================================================== */

@media (max-width: 900px) {

  /* ---------- Header shell: brand left, controls right ---------- */
  .site-header .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 68px;
    position: relative;
  }
  .brand { font-size: 1.05rem; }
  .brand img { width: 30px; height: 30px; }

  .header-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    justify-self: auto;
  }
  .header-actions .btn-secondary { display: none !important; }

  /* Keep the primary CTA visible — it is the conversion action. Compact,
     and only dropped on very narrow screens where the brand would collide. */
  .header-actions .btn-primary {
    display: inline-flex !important;
    padding: 0 14px;
    height: 40px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  /* Pages WITH a hamburger can drop the header CTA on very narrow screens —
     the menu carries a full-width one and the hero has its own. Pages without
     a hamburger (.is-simple: support, privacy, terms) must keep it, or their
     mobile header is reduced to a logo and a theme toggle. */
  @media (max-width: 430px) {
    .site-header:not(.is-simple) .header-actions .btn-primary { display: none !important; }
    .site-header.is-simple .header-actions .btn-primary {
      display: inline-flex !important;
      padding: 0 12px;
      height: 38px;
      font-size: 0.75rem;
    }
  }

  /* Theme + hamburger: identical 44px squares, same radius, sat together */
  .theme-toggle,
  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .theme-toggle { display: inline-flex !important; }
  .nav-toggle {
    display: inline-flex !important;
    order: 99;               /* always the last control on the right */
    justify-self: auto;
    margin: 0;
  }
  .theme-toggle svg { width: 20px; height: 20px; }
  .nav-toggle svg { width: 22px; height: 22px; }

  /* ---------- The dropdown panel ----------
     Taken out of the header's layout entirely: fixed to the viewport just
     below the header, so it can never resize the header or overlap it. */
  #primary-nav {
    display: block !important;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 90;
    grid-column: auto;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }
  body.nav-open #primary-nav {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links,
  body.nav-open .nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 10px;
    top: auto;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-links li { list-style: none; }
  .nav-links a,
  body.nav-open .nav-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 50px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
  }
  .nav-links a:hover,
  body.nav-open .nav-links a:hover,
  .nav-links a:focus-visible { background: var(--accent-soft); color: var(--color-accent-deep); }

  /* In-menu CTA: full width, unmistakably the primary action */
  .mobile-only { display: none; }
  body.nav-open .mobile-only { display: list-item; }
  .nav-links .mobile-only a,
  body.nav-open .mobile-only a {
    margin-top: 6px;
    justify-content: center;
    background: var(--grad-accent);
    color: #fff;
    font-weight: 800;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
  }
  body.nav-open .mobile-only a:hover { color: #fff; }

  /* Backdrop behind the panel */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 68px 0 0;
    background: rgba(10, 8, 20, 0.42);
    z-index: 80;
  }
  /* Page must not scroll behind the open menu */
  body.nav-open { overflow: hidden; }

  /* ---------- Overflow fixes ----------
     `calc(100vw - 36px)` is wrong inside any padded parent (100vw ignores
     the parent's box). Let the parent do the constraining instead. */
  .hero-copy,
  .hero-copy .lede,
  .hero-actions,
  .hero-meta,
  .hero-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
  }
  .final-cta .hero-actions { width: 100% !important; }
  .final-cta .hero-actions .btn { width: 100% !important; }

  /* ---------- Anchors clear the sticky header ---------- */
  :target { scroll-margin-top: 84px; }
  section[id], h2[id], h3[id] { scroll-margin-top: 84px; }
}

/* ---------- Tap targets & small-screen polish ---------- */
@media (max-width: 720px) {
  .footer-col ul a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .billing-toggle button { min-height: 44px; padding: 0 18px; }
  .faq-question { min-height: 56px; }

  /* Range inputs: 8px tall is unusable on touch — pad the hit area out to 44 */
  .calc-slider {
    height: 44px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
  }
  .calc-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg-2);
  }
  .calc-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg-2);
  }
  .calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px; height: 26px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }
  .calc-slider::-moz-range-thumb {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  .contact-email { min-height: 44px; display: inline-flex; align-items: center; word-break: break-word; }
  .news-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .news-input, .news-form .btn { width: 100%; min-height: 48px; }
}

/* ---------- Support page on mobile ---------- */
@media (max-width: 720px) {
  .kb-quick a { min-height: 44px; display: inline-flex; align-items: center; }
  .kb-toc a { min-height: 40px; display: flex; align-items: center; }
  .kb-body h2 { font-size: 1.3rem; }
  .kb-body h3 { font-size: 1.0625rem; }
  .kb-answer { font-size: 1rem; padding-left: 14px; }
  .kb-contact-card { flex-direction: column; align-items: stretch; padding: 22px; }
  .kb-contact-actions { width: 100%; }
  .kb-contact-actions .btn { width: 100%; justify-content: center; }
  .kb-glossary dd { font-size: 0.9375rem; }
  .kb-plan { white-space: normal; }
}

/* ---------- Contact page on mobile ---------- */
@media (max-width: 720px) {
  /* Two-up name/email and topic/store collapse — at this width each column is
     narrower than its own placeholder text. */
  .cf-row { grid-template-columns: 1fr; gap: 18px; }
  .cf-input { min-height: 48px; }
  .cf-textarea { min-height: 150px; }
  .cf-actions { flex-direction: column; align-items: stretch; }
  .cf-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
  .cf-msg { flex: 1 1 auto; }
  .contact-aside-card { padding: 20px; }
  .contact-aside-card .btn { width: 100%; justify-content: center; min-height: 44px; }
  .contact-aside-card .contact-email { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Very small phones */
@media (max-width: 380px) {
  .site-header .container { gap: 6px; padding: 0 14px; }
  .brand { font-size: 0.95rem; gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  .container { padding: 0 14px; }
}

/* ==========================================================================
   APPS SWITCHER on mobile — the panel renders inline inside the slide-in menu
   rather than as a nested dropdown, so there is no second interaction model.

   WHY THESE SELECTORS ARE SHAPED LIKE THIS: the open mobile menu styles every
   anchor inside .nav-links as a centred pill —

     body.nav-open .nav-links a { display:flex; justify-content:center;
                                  align-items:center; min-height:46px; }

   — which is specificity 0,2,2 and therefore also lands on the app rows,
   centring each icon against its row and collapsing the two-line rows into one
   another. Source order cannot fix that: a bare `.nav-app` is 0,1,0 and loses
   wherever it sits in this file. The overrides below deliberately match the
   same shape (0,3,2) and restate the layout. Do NOT "simplify" them back down
   to `.nav-app` — the rows silently collapse again.
   ========================================================================== */

@media (max-width: 900px) {
  .nav-apps { width: 100%; }
  .nav-apps-toggle { display: none; }

  .nav-apps-panel {
    position: static;
    width: 100%;
    /* Matches the `padding: 0 16px` the sibling nav links carry, so the app
       rows, the label and "See all" share their text baseline instead of
       sitting 16px further left. */
    padding: 0 16px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .nav-apps-label {
    display: block;
    /* Sits outside .nav-apps-panel, so it needs the 16px inset of its own. */
    padding-left: 16px;
    margin: 2px 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-faint);
  }

  body.nav-open .nav-links .nav-app {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 9px 0;
    border-radius: var(--radius-sm);
  }
  body.nav-open .nav-links a.nav-app:hover { background: none; }
  /* The current-app highlight has to survive the mobile hover reset above,
     which is why it repeats at the same specificity. */
  body.nav-open .nav-links a.nav-app[aria-current="page"] {
    background: var(--accent-soft);
    padding: 9px 11px;
  }

  body.nav-open .nav-links a.nav-apps-all {
    justify-content: flex-start;
    align-items: center;
    min-height: 44px;          /* tap target — 44px floor, per the mobile notes */
    margin: 4px 0 2px;
    padding: 0;
    border-radius: 0;
  }
}

/* ==========================================================================
   SUPPORT — app selector.

   /support/ is the single support area for every app: the Bundles knowledge
   base sits at /support/ itself (it is indexed and must not move) and each
   further app gets a child, e.g. /support/product-feeds/. This control is how
   a merchant moves between them.

   Built from the same pill vocabulary as .kb-quick directly above, with a
   selected state, so it reads as part of the page rather than a new widget.
   ========================================================================== */

.kb-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  width: fit-content;
  max-width: 100%;
}
.kb-apps a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.kb-apps a:hover { color: var(--color-text); background: var(--accent-soft); }
.kb-apps a[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-accent-ink, #fff);
}
.kb-apps a[aria-current="page"]:hover { background: var(--color-accent); }
.kb-apps svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 560px) {
  /* Full width, one pill per row, so neither label truncates on a phone. */
  .kb-apps { width: 100%; flex-direction: column; border-radius: var(--radius-md); }
  .kb-apps a { width: 100%; min-height: 44px; justify-content: flex-start; }
}

/* ==========================================================================
   HERO APP STACK — the suite home's hero visual.

   The three apps as a rotating card stack: the front card is the active app,
   the two behind it are offset and dimmed for depth. Position is driven by a
   `data-pos` attribute that main.js rotates, so the CSS holds the geometry and
   the JS holds only the index.

   Token-driven, and built from the same glass-card vocabulary as the Bundles
   hero cart directly above it in this file. Decorative: the markup is
   aria-hidden and every claim it makes is also stated in text on the page.
   ========================================================================== */

.app-stack {
  position: relative;
  z-index: 1;
  min-height: 428px;
}

.app-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* Depth ladder. Only the front card is fully opaque; the rest read as a deck. */
.app-slide[data-pos="0"] { opacity: 1;    transform: translateY(0)    scale(1);     z-index: 3; }
.app-slide[data-pos="1"] { opacity: 0.5;  transform: translateY(18px) scale(0.952); z-index: 2; }
.app-slide[data-pos="2"] { opacity: 0.24; transform: translateY(34px) scale(0.904); z-index: 1; }

/* --- Card head --- */
.as-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.as-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}
.as-icon svg { width: 18px; height: 18px; color: var(--color-accent-deep); }
.as-name { font-weight: 700; font-size: 0.9375rem; color: var(--color-text); }
.as-tag {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-soft-text);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.as-tag.is-live {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}
.as-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* --- Shared bits --- */
.as-thumb {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #C7D2FE, #EEF2FF);
  box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}
.as-thumb-2 { background: linear-gradient(135deg, #FBCFE8, #FCE7F3); }
.as-thumb-3 { background: linear-gradient(135deg, #FDE68A, #FEF3C7); }
.as-line-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.as-line-copy strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.as-line-copy small { font-size: 0.6875rem; color: var(--color-text-faint); }
.as-price {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

/* --- Slide 1: Bundles --- */
.as-goal {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-soft-text);
}
.as-goal svg { width: 15px; height: 15px; flex-shrink: 0; }
.as-track {
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-2);
  border: 1px solid var(--accent-soft-border);
  overflow: hidden;
}
.as-fill {
  display: block;
  height: 100%;
  width: 72%;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
}
.as-lines { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.as-lines li { display: flex; align-items: center; gap: 11px; }
.as-upsell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: auto 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px dashed var(--color-accent);
  color: var(--color-accent-deep);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
}
.as-upsell svg { width: 15px; height: 15px; flex-shrink: 0; }

.as-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.as-total strong {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* --- Slide 2: Product Feeds --- */
.as-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.as-rows li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}
.as-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
}
.as-wire {
  position: relative;
  height: 46px;
  margin: 6px 0 2px;
}
.as-wire span {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
}
.as-channels { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.as-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}
.as-channel i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-style: normal;
}
.as-channel i svg { width: 100%; height: 100%; display: block; }
/* TikTok's mark is black, which disappears on the dark theme. Lift only that
   one — Google and Meta carry their own colours in both themes. */
:root[data-theme="dark"] .as-channel i svg path[fill="#000"] { fill: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .as-channel i svg path[fill="#000"] { fill: #ffffff; }
}
.as-channel svg {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--color-success);
  opacity: 0;
}

/* --- Slide 3: Socials Feeds --- */
.as-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.as-tile {
  /* NOT 1:1 — square tiles scale with the card's width, and in the hero column
     that made two rows tall enough to push the tagged-product row out of the
     bottom of the card. */
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: linear-gradient(135deg, #E0E7FF, #F5F3FF);
  box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}
.as-tile:nth-child(2) { background: linear-gradient(135deg, #FCE7F3, #FDF2F8); }
.as-tile:nth-child(3) { background: linear-gradient(135deg, #FEF3C7, #FFFBEB); }
.as-tile:nth-child(4) { background: linear-gradient(135deg, #DBEAFE, #EFF6FF); }
.as-tile:nth-child(5) { background: linear-gradient(135deg, #E0E7FF, #EEF2FF); }
.as-tile:nth-child(6) { background: linear-gradient(135deg, #FAE8FF, #FDF4FF); }
.as-pin {
  position: absolute;
  left: 34%;
  top: 41%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.22);
  opacity: 0;
}
.as-shop {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: auto 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   HERO APP STACK — motion.

   Every animation is scoped to `[data-pos="0"]`, so only the front card
   animates. A card that scrolls to the back stops, and restarts from frame one
   when it returns to the front — which is what makes the rotation feel
   deliberate rather than like three loops running out of phase.
   ========================================================================== */

.app-slide[data-pos="0"] .as-fill { animation: as-fill 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes as-fill { from { width: 18%; } to { width: 72%; } }

.app-slide[data-pos="0"] .as-lines li { animation: as-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.app-slide[data-pos="0"] .as-lines li:nth-child(1) { animation-delay: 260ms; }
.app-slide[data-pos="0"] .as-lines li:nth-child(2) { animation-delay: 620ms; }
@keyframes as-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.app-slide[data-pos="0"] .as-upsell { animation: as-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) 980ms backwards; }

.app-slide[data-pos="0"] .as-rows li { animation: as-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.app-slide[data-pos="0"] .as-rows li:nth-child(1) { animation-delay: 160ms; }
.app-slide[data-pos="0"] .as-rows li:nth-child(2) { animation-delay: 340ms; }
.app-slide[data-pos="0"] .as-rows li:nth-child(3) { animation-delay: 520ms; }

/* Packets travelling from the validated catalogue down to the channels. */
.app-slide[data-pos="0"] .as-wire span { animation: as-send 2.1s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.app-slide[data-pos="0"] .as-wire span:nth-child(2) { animation-delay: 0.7s; }
.app-slide[data-pos="0"] .as-wire span:nth-child(3) { animation-delay: 1.4s; }
@keyframes as-send {
  0%   { opacity: 0; transform: translate(0, -18px); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(230px, 20px); }
}

.app-slide[data-pos="0"] .as-channel svg { animation: as-tick 520ms ease forwards; }
.app-slide[data-pos="0"] .as-channel:nth-child(1) svg { animation-delay: 1.0s; }
.app-slide[data-pos="0"] .as-channel:nth-child(2) svg { animation-delay: 1.6s; }
.app-slide[data-pos="0"] .as-channel:nth-child(3) svg { animation-delay: 2.2s; }
@keyframes as-tick { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }

.app-slide[data-pos="0"] .as-tile { animation: as-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.app-slide[data-pos="0"] .as-tile:nth-child(1) { animation-delay: 80ms; }
.app-slide[data-pos="0"] .as-tile:nth-child(2) { animation-delay: 160ms; }
.app-slide[data-pos="0"] .as-tile:nth-child(3) { animation-delay: 240ms; }
.app-slide[data-pos="0"] .as-tile:nth-child(4) { animation-delay: 320ms; }
.app-slide[data-pos="0"] .as-tile:nth-child(5) { animation-delay: 400ms; }
.app-slide[data-pos="0"] .as-tile:nth-child(6) { animation-delay: 480ms; }
@keyframes as-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }

.app-slide[data-pos="0"] .as-pin { animation: as-ping 620ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards; }
@keyframes as-ping {
  from { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.25); }
  to   { opacity: 1; transform: scale(1); }
}

.app-slide[data-pos="0"] .as-shop { animation: as-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) 1.25s backwards; }

/* --- Progress dots --- */
.app-dots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.app-dots button {
  width: 26px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background-color 260ms ease, width 260ms ease;
}
.app-dots button.is-on { width: 40px; background: var(--color-accent); }

/* --- Mobile: the stack sits above the copy and loses some height --- */
@media (max-width: 900px) {
  .app-stack { min-height: 396px; }
  .app-slide { padding: 20px; }
}

/* Respect the OS setting: hold the front card still and show it complete,
   rather than animating into it. The rotation is stopped in main.js too. */
@media (prefers-reduced-motion: reduce) {
  .app-slide,
  .app-slide[data-pos="0"] * {
    transition: none !important;
    animation: none !important;
  }
  .app-slide[data-pos="0"] .as-channel svg,
  .app-slide[data-pos="0"] .as-pin { opacity: 1; }
}

/* ==========================================================================
   HOME — clickable app cards.

   The whole card is a click target, implemented as a "stretched link": the
   card is the positioning context and the existing CTA anchor grows an
   invisible overlay across it. Done this way rather than wrapping the card in
   an <a> because that would nest anchors, which is invalid and costs the CTA
   its own semantics. Screen readers still hear one link with the CTA's label.

   Scoped to .app-card, which only the cards in #apps carry — the "Why Snaply"
   cards have nowhere to go.
   ========================================================================== */

.app-card { position: relative; }
.app-card-foot { margin-top: 18px; }

/* The click target. It sits ABOVE the card's content (which is z-index:1 via
   .feature-card's own rules) so a click anywhere lands here, and BELOW nothing
   else — the card has no other interactive parts.

   This is a real anchor, not a ::after on the CTA, so it supports middle-click
   and open-in-new-tab. The first attempt did use ::after, and it silently
   clamped to the button: .btn-secondary carries a backdrop-filter, and any
   backdrop-filter other than `none` makes an element a containing block for
   absolutely positioned descendants. */
.app-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-lg);
}
/* Keep the card's own text selectable, and let the lift-on-hover read as
   "this is a target" rather than decoration. */
.app-card:hover { cursor: pointer; }
.app-card:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}