/* ============================================================
   Flat marketing overrides (2026 redesign)
   ------------------------------------------------------------
   The public pages were copy-pasted from a common "Soft Clay"
   neumorphic base — they share token names (--surface, --accent,
   --shadow-neu, …) and component classes (.plan-card, .feature-card,
   …). This sheet is included AFTER each page's own <style>, so it
   remaps those shared tokens to the flat --ds-* warm palette and
   flattens the recurring neumorphic components — turning the whole
   marketing site flat without rewriting each bespoke body.

   Mirrors the shared site-header.js approach: one file, one <link>
   per page. Page-specific component classes are added here as each
   page is brought in.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- Token remap: Soft-Clay → flat (light) ---- */
:root {
  --bg: #f6f1e8;
  --surface: #ffffff;
  --surface-alt: #fbf7f0;
  --white-hi: #fbf7f0;
  --white-top: #ffffff;
  --shadow-dark: rgba(74,58,46,.10);
  --shadow-mid: rgba(74,58,46,.08);
  --shadow-light: rgba(255,255,255,.6);
  --accent: #cc806f;
  --accent-deep: #c06c5b;
  --accent-light: #e3a594;
  --accent-grad-top: #cc806f;
  --accent-grad-bot: #cc806f;
  --orange-gradient: #cc806f;
  --accent-text: #cc806f;
  --sage: #6e9484;
  --sand: #b08646;
  --text: #3a312a;
  --text-mid: #6c6157;
  --text-soft: #6c6157;
  --text-dim: #9a8e80;
  --text-faint: #9a8e80;
  --color-text-dim: #9a8e80;
  --border: rgba(58,46,38,.10);
  --eu-blue: #5f7da6; --eu-blue-soft: #5f7da6; --eu-blue-bg: rgba(95,125,166,.10);
  /* flat shadows (replace the neumorphic multi-layer vars) */
  --shadow-neu: 0 1px 3px rgba(74,58,46,.07), 0 0 0 1px rgba(58,46,38,.09);
  --shadow-neu-hover: 0 16px 40px rgba(74,58,46,.14), 0 0 0 1px rgba(58,46,38,.10);
  --shadow-inset: inset 0 0 0 1px rgba(58,46,38,.10);
  --shadow-pop: 0 16px 40px rgba(74,58,46,.14);
  --f-brand: 'Poppins', system-ui, sans-serif;
  --f-ui: 'Figtree', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg: #1a1611;
  --surface: #241e18;
  --surface-alt: #2c251e;
  --white-hi: #2c251e;
  --white-top: #2c251e;
  --shadow-dark: rgba(0,0,0,.4);
  --shadow-mid: rgba(0,0,0,.3);
  --shadow-light: rgba(60,52,42,.12);
  --accent: #e3917c;
  --accent-deep: #e3917c;
  --accent-light: #ecae9d;
  --accent-grad-top: #e3917c;
  --accent-grad-bot: #e3917c;
  --orange-gradient: #e3917c;
  --accent-text: #e3917c;
  --sage: #a8c6b9;
  --text: #f4ede3;
  --text-mid: #cabaa9;
  --text-soft: #cabaa9;
  --text-dim: #8d8073;
  --text-faint: #8d8073;
  --color-text-dim: #8d8073;
  --border: rgba(245,236,225,.10);
  --eu-blue: #93b0d6; --eu-blue-soft: #93b0d6; --eu-blue-bg: rgba(147,176,214,.12);
  --shadow-neu: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1px rgba(245,236,225,.10);
  --shadow-neu-hover: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(245,236,225,.12);
  --shadow-inset: inset 0 0 0 1px rgba(245,236,225,.10);
  --shadow-pop: 0 18px 44px rgba(0,0,0,.5);
}

/* ---- Typography + page background ---- */
body {
  font-family: 'Figtree', system-ui, sans-serif !important;
  background: linear-gradient(180deg, #fbf8f2, #f1ebe1) !important;
}
[data-theme="dark"] body { background: linear-gradient(180deg, #1e1913, #15110d) !important; }
h1, h2, h3, .price .amount, .plan-card h3, .hero-text h1, .section-title, .logo {
  font-family: 'Poppins', system-ui, sans-serif !important;
}

/* ---- Flatten the recurring neumorphic surfaces ----
   These class names recur across the copy-pasted pages. box-shadow is
   forced flat; a hairline border + soft drop replaces the clay look. */
.plan-card, .feature-card, .price-card, .use-case-card, .step, .how-step,
.stat-item, .cta-banner, .eu-card, .demo-video-wrapper, .trial-cta,
.pricing-table, .plan-summary, .faq-item, .why-ai-wrap, .info-card,
.compare-table, .team-card, .value-card, .doc-card, .post-card,
.changelog-entry, .security-card, .demo-card, .legal-card, .card,
.what-is-wrap, .stat, footer, .site-footer {
  box-shadow: var(--shadow-neu) !important;
  border-radius: 18px;
}
.plan-card:hover, .feature-card:hover, .price-card:hover, .use-case-card:hover,
.card:hover, .value-card:hover, .doc-card:hover, .post-card:hover {
  box-shadow: var(--shadow-neu-hover) !important;
}

/* Inset / pill controls → flat */
.toggle-switch, .tier-trigger, .feature-icon, .use-case-icon, .eu-card-icon,
.how-step-num, .corner-controls, .badge, .save-badge, .eu-pricing-badge {
  box-shadow: none !important;
}
.feature-icon, .use-case-icon, .eu-card-icon { background: var(--accent-soft, rgba(204,128,111,.13)) !important; }

/* ---- Buttons → flat accent / flat outline ---- */
.btn-primary, .btn-nav, .btn.btn-primary, .ps-cta .btn, .trial-cta .btn,
button.btn-primary, a.btn-primary {
  background: var(--accent) !important;
  box-shadow: 0 6px 20px rgba(204,128,111,.18) !important;
  text-shadow: none !important;
  border-radius: 11px !important;
}
.btn-primary:hover, .btn-nav:hover, a.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 28px rgba(204,128,111,.22) !important;
}
.btn-outline, .btn-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 11px !important;
}
.btn-outline:hover, .btn-secondary:hover { background: var(--surface-alt) !important; border-color: var(--text-dim) !important; }

/* Corner controls pill (lang + theme) — flat */
.corner-controls {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-pop) !important;
}

/* Highlight / popular cards keep the accent ring, flat */
.plan-card.popular, .plan-card.highlight, .price-card.highlight {
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-pop) !important;
}