/* ===========================================================
   FiwiMail® — Design tokens + utilities (ported from React/Tailwind app)
   =========================================================== */

:root {
  --radius: 0.75rem;

  --navy: oklch(0.22 0.04 245);
  --navy-deep: oklch(0.16 0.035 245);
  --silver: oklch(0.94 0.002 247);
  --cta: oklch(0.72 0.17 158);
  --cta-foreground: oklch(0.16 0.035 245);

  --background: oklch(1 0 0);
  --foreground: oklch(0.22 0.04 245);
  --card: oklch(1 0 0);
  --primary: oklch(0.22 0.04 245);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.66 0.15 160);
  --secondary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.97 0.003 247);
  --muted-foreground: oklch(0.45 0.02 245);
  --accent: oklch(0.96 0.02 160);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.92 0.005 247);
  --ring: oklch(0.66 0.15 160);
}

html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1,h2,h3,h4 { font-family: 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em; }

/* ----- Color helpers (used as Tailwind arbitrary-class fallbacks) ----- */
.bg-navy        { background: var(--navy); }
.bg-navy-deep   { background: var(--navy-deep); }
.bg-cta         { background: var(--cta); }
.bg-card        { background: var(--card); }
.bg-muted       { background: var(--muted); }
.bg-background  { background: var(--background); }
.text-secondary { color: var(--secondary); }
.text-cta       { color: var(--cta); }
.text-navy      { color: var(--navy); }
.text-navy-deep { color: var(--navy-deep); }
.text-foreground{ color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-destructive { color: var(--destructive); }
.bg-destructive-10 { background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.bg-secondary-10 { background: color-mix(in oklab, var(--secondary) 10%, transparent); }
.bg-secondary-15 { background: color-mix(in oklab, var(--secondary) 15%, transparent); }
.bg-secondary-20 { background: color-mix(in oklab, var(--secondary) 20%, transparent); }
.border-border  { border-color: var(--border); }
.border-secondary-40 { border-color: color-mix(in oklab, var(--secondary) 40%, transparent); }
.border-cta     { border-color: var(--cta); }
.divide-border > * + * { border-top: 1px solid var(--border); }

/* ----- Buttons ----- */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.5rem; border-radius: 9999px;
  background: var(--cta); color: var(--cta-foreground);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--cta) 60%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px color-mix(in oklab, var(--cta) 70%, transparent); }

.btn-ghost-light {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.5rem; border-radius: 9999px;
  border: 1px solid color-mix(in oklab, white 25%, transparent);
  color: #fff; font-weight: 500; font-size: .95rem; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.btn-ghost-light:hover { background: color-mix(in oklab, white 8%, transparent); border-color: color-mix(in oklab, white 50%, transparent); }

.btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.5rem; border-radius: 9999px;
  border: 1px solid var(--border); color: var(--foreground);
  font-weight: 500; font-size: .95rem; text-decoration: none;
}
.btn-ghost-dark:hover { background: var(--muted); }

/* ----- Eyebrows ----- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem; border-radius: 9999px;
  background: color-mix(in oklab, var(--secondary) 12%, transparent);
  color: var(--secondary);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow-light {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem; border-radius: 9999px;
  background: color-mix(in oklab, white 8%, transparent);
  color: color-mix(in oklab, white 80%, transparent);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid color-mix(in oklab, white 12%, transparent);
}

.section-pad { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }

/* ----- Scroll-reveal animation (replaces framer-motion whileInView) ----- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Hero entry animation (replaces framer-motion initial/animate) */
@keyframes fmFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fmFadeUpLg { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fmFadeInX { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fmPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

.fm-hero      { animation: fmFadeUp .7s ease-out both; }
.fm-hero-visual { animation: fmFadeUpLg .8s ease-out both; }
.fm-msg       { animation: fmFadeInX .4s ease-out both; }
.fm-badge     { animation: fmPop .5s ease-out both; }

/* Hero gradients */
.hero-radials {
  background:
    radial-gradient(ellipse at top left, oklch(0.66 0.15 160 / .18), transparent 55%),
    radial-gradient(ellipse at bottom right, oklch(0.72 0.17 158 / .12), transparent 55%);
}
.hero-fade { background: linear-gradient(to bottom, transparent, oklch(0.16 0.035 245 / .6)); }
.no-tracking-radial { background: radial-gradient(circle at 30% 20%, oklch(0.66 0.15 160 / .15), transparent 50%); }
.final-cta-radial   { background: radial-gradient(ellipse at center, oklch(0.72 0.17 158 / .18), transparent 60%); }

/* Cards */
.card-base { border: 1px solid var(--border); background: var(--card); border-radius: 1rem; }
.feature-card { transition: border-color .2s, box-shadow .2s; }
.feature-card:hover { border-color: color-mix(in oklab, var(--secondary) 40%, transparent); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .1); }

/* FAQ */
.faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.5rem; background: transparent; border: 0; cursor: pointer; font: inherit; }
.faq-item button:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.faq-item .faq-answer { padding: 0 1.5rem 1.5rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.7; display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-item .icon-plus, .faq-item .icon-minus { display: none; }
.faq-item .icon-plus { display: inline; }
.faq-item.open .icon-plus { display: none; }
.faq-item.open .icon-minus { display: inline; color: var(--secondary); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(20px); background: color-mix(in oklab, var(--background) 75%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.site-header .logo img { height: 100%; width: auto; object-fit: contain; display: block; }

/* Footer chips */
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 9999px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); font-size: .75rem; color: rgb(255 255 255 / .8); }

/* Legal */
.legal-prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 2.5rem; color: var(--foreground); }
.legal-prose p, .legal-prose li { color: var(--muted-foreground); line-height: 1.7; }
.legal-prose ul { list-style: disc; padding-left: 1.5rem; margin-top: .75rem; }
.legal-prose li + li { margin-top: .5rem; }
.legal-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose strong { color: var(--foreground); }

/* WooCommerce nudges to match brand */
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--cta); color: var(--cta-foreground); border-radius: 9999px; font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: color-mix(in oklab, var(--cta) 90%, black); }
.woocommerce ul.products li.product .price { color: var(--secondary); font-weight: 700; }