/* ═══════════════════════════════════════════════════════════════════════════
   WishPilot marketing site — v2 look (2026)
   Loaded only on marketing pages (body.marketing-body), after styles.css.
   Everything is scoped so the dashboard / auth / admin screens are untouched.
   Rollback: remove the <link> to this file from views/partials/head.ejs.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

body.marketing-body {
  --m-ink: #0a1410;
  --m-ink-2: #3d4a43;
  --m-mute: #6b7a72;
  --m-line: rgba(10, 20, 16, 0.08);
  --m-green: #1fd367;
  --m-green-d: #0f9d58;
  --m-deep: #07130d;
  --m-deep-2: #0c1f16;
  --m-card: #ffffff;
  --m-soft: #f4f7f5;
  --m-r: 24px;
  --m-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  background: #fbfcfb;
  color: var(--m-ink);
}
body.marketing-body .container { width: min(1180px, calc(100% - 48px)); }
body.marketing-body h1,
body.marketing-body h2,
body.marketing-body h3,
body.marketing-body .step-title,
body.marketing-body .industry-name,
body.marketing-body .plan-name { font-family: var(--m-head); letter-spacing: -0.03em; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
body.marketing-body .btn {
  border-radius: 999px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
body.marketing-body .btn-primary {
  background: linear-gradient(180deg, #2be077 0%, #14b955 100%);
  color: #04180d;
  border: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 24px -6px rgba(31,211,103,.55);
}
body.marketing-body .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 30px -6px rgba(31,211,103,.65); }
body.marketing-body .btn-secondary,
body.marketing-body .btn-outline {
  background: rgba(255,255,255,.7);
  color: var(--m-ink);
  border: 1px solid var(--m-line);
  backdrop-filter: blur(8px);
}
body.marketing-body .btn-secondary:hover,
body.marketing-body .btn-outline:hover { background: #fff; transform: translateY(-2px); border-color: rgba(10,20,16,.18); }
body.marketing-body .btn-lg { padding: 15px 30px; font-size: 15px; }

/* ─── Floating pill nav ───────────────────────────────────────────────── */
body.marketing-body .mkt-nav {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 28px));
  height: 62px;
  padding: 0 10px 0 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(8, 22, 15, .62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.35);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.marketing-body .mkt-nav.scrolled {
  height: 62px;
  background: rgba(8, 22, 15, .86);
  box-shadow: 0 14px 44px -10px rgba(0,0,0,.45);
}
body.marketing-body .mkt-logo img { width: 34px; height: 34px; object-fit: contain; }
body.marketing-body .mkt-logo-text { color: #fff; font-family: var(--m-head); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
body.marketing-body .mkt-links { gap: 4px; }
body.marketing-body .mkt-link {
  color: rgba(255,255,255,.72);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 500;
}
body.marketing-body .mkt-link:hover { color: #fff; background: rgba(255,255,255,.1); }
body.marketing-body .mkt-nav .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.22); }
body.marketing-body .mkt-nav .btn-secondary:hover { background: rgba(255,255,255,.1); }
body.marketing-body .mkt-hamburger { color: #fff; }

/* Inner pages (blog, policies…) have no dark hero: give the pill a light skin */
body.marketing-body.mkt-light .mkt-nav { background: rgba(255,255,255,.8); border-color: var(--m-line); }
body.marketing-body.mkt-light .mkt-logo-text,
body.marketing-body.mkt-light .mkt-link { color: var(--m-ink); }
body.marketing-body.mkt-light .mkt-nav .btn-secondary { color: var(--m-ink); border-color: var(--m-line); }

/* ─── Hero: dark aurora ───────────────────────────────────────────────── */
body.marketing-body .hero-section {
  position: relative;
  isolation: isolate;
  text-align: left;
  padding: 150px 0 110px;
  color: #fff;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(31,211,103,.28), transparent 70%),
    radial-gradient(45% 45% at 10% 90%, rgba(56,189,248,.16), transparent 70%),
    radial-gradient(40% 40% at 55% 0%, rgba(139,92,246,.18), transparent 70%),
    var(--m-deep);
  overflow: hidden;
}
body.marketing-body .hero-section::before {      /* dot grid */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
}
body.marketing-body .hero-section::after {       /* fade into page */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--m-deep));
}
body.marketing-body .hero-shell { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
body.marketing-body .hero-copy { max-width: 640px; }
body.marketing-body .hero-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: #b9f5d2;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  padding: 7px 16px 7px 12px;
  backdrop-filter: blur(8px);
}
body.marketing-body .hero-pill i { color: var(--m-green); }
body.marketing-body .hero-h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.045em;
  color: #fff;
  margin-bottom: 22px;
}
body.marketing-body .hero-h1 span {
  background: linear-gradient(95deg, #5dffa3 0%, #1fd367 40%, #7be8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body.marketing-body .hero-sub { color: rgba(255,255,255,.7); font-size: 1.1rem; line-height: 1.7; max-width: 560px; }
body.marketing-body .hero-section .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
body.marketing-body .hero-section .btn-secondary:hover { background: rgba(255,255,255,.16); }
body.marketing-body .hero-trust { color: rgba(255,255,255,.6); }
body.marketing-body .hero-trust-avatars span { border: 2px solid var(--m-deep); }

/* glass floating stat cards */
body.marketing-body .float-card {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.5);
  animation: mFloat 6s ease-in-out infinite;
}
body.marketing-body .float-card-2 { animation-delay: -2s; }
body.marketing-body .float-card-3 { animation-delay: -4s; }
body.marketing-body .float-stat { color: #fff; font-family: var(--m-head); }
body.marketing-body .float-label { color: rgba(255,255,255,.65); }
body.marketing-body .float-tag { color: #b9f5d2; }
@keyframes mFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* phones: soft glow */
body.marketing-body .phone-frame { box-shadow: 0 40px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 80px -10px rgba(31,211,103,.35); }
body.marketing-body .hero-visual::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,211,103,.35), transparent 65%);
  filter: blur(30px); z-index: 0;
}
body.marketing-body .phone-frame { position: relative; z-index: 1; }

/* ─── Trust strip → marquee-ish dark band ─────────────────────────────── */
body.marketing-body .trust-strip {
  background: var(--m-deep);
  border: 0;
  padding: 0 0 34px;
}
body.marketing-body .trust-strip-inner { gap: 10px 14px; justify-content: center; }
body.marketing-body .trust-strip-item {
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
}
body.marketing-body .trust-strip-item i { color: var(--m-green); }

/* ─── Stats ribbon ────────────────────────────────────────────────────── */
body.marketing-body .stats-ribbon { background: var(--m-deep); padding: 10px 0 90px; border: 0; }
body.marketing-body .stats-grid-dark {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 34px 10px;
}
body.marketing-body .stat-dark { border-color: rgba(255,255,255,.1); text-align: center; }
body.marketing-body .stat-dark-value {
  font-family: var(--m-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff, #9ff0c3);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.marketing-body .stat-dark-label { color: rgba(255,255,255,.6); }

/* ─── Section headings ────────────────────────────────────────────────── */
body.marketing-body .marketing-section { padding: 112px 0; background: transparent; }
body.marketing-body .marketing-section.alt { background: var(--m-soft); }
body.marketing-body .section-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(31,211,103,.12);
  color: var(--m-green-d);
  font-size: 12px; letter-spacing: .08em;
}
body.marketing-body .section-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 0 4px rgba(31,211,103,.2); }
body.marketing-body .section-h2,
body.marketing-body .feature-showcase-h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--m-ink);
}
body.marketing-body .section-sub,
body.marketing-body .feature-showcase-sub { color: var(--m-ink-2); font-size: 1.05rem; line-height: 1.7; }

/* ─── Bento steps ─────────────────────────────────────────────────────── */
body.marketing-body .steps-grid { gap: 20px; margin-top: 48px; }
body.marketing-body .step-card {
  position: relative; overflow: hidden;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r);
  padding: 34px 30px;
  box-shadow: 0 1px 2px rgba(10,20,16,.04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.marketing-body .step-card::after {
  content: ""; position: absolute; inset: auto -20% -60% auto; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,211,103,.18), transparent 70%);
  transition: transform .4s ease;
}
body.marketing-body .step-card:hover { transform: translateY(-6px); border-color: rgba(31,211,103,.4); box-shadow: 0 24px 50px -18px rgba(10,60,30,.25); }
body.marketing-body .step-card:hover::after { transform: scale(1.4); }
body.marketing-body .step-number {
  font-family: var(--m-head); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(10,20,16,.14);
}
body.marketing-body .step-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(145deg, #2be077, #0f9d58);
  color: #fff; display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 10px 24px -8px rgba(15,157,88,.6);
}
body.marketing-body .step-title { font-weight: 700; font-size: 1.2rem; }
body.marketing-body .step-desc { color: var(--m-ink-2); }

/* ─── Platform tabs ───────────────────────────────────────────────────── */
body.marketing-body .platform-tabs { background: #eef2ef; border: 1px solid var(--m-line); border-radius: 999px; padding: 6px; }
body.marketing-body .platform-tab { border-radius: 999px; border: 0; background: transparent; color: var(--m-ink-2); font-weight: 600; }
body.marketing-body .platform-tab.active { background: #fff; color: var(--m-ink); box-shadow: 0 4px 14px rgba(10,20,16,.1); }
body.marketing-body .platform-tab.active i { color: var(--m-green-d); }
body.marketing-body .platform-tab-panels {
  border-radius: 28px; border: 1px solid var(--m-line); background: #fff; padding: 12px;
  box-shadow: 0 40px 80px -30px rgba(10,60,30,.25);
}
body.marketing-body .platform-tab-panel img { border-radius: 18px; }

/* ─── Feature showcases ───────────────────────────────────────────────── */
body.marketing-body .feature-showcase { padding: 112px 0; background: transparent; }
body.marketing-body .feature-showcase-alt { background: var(--m-soft); }
body.marketing-body .feature-showcase-inner { gap: 80px; }
body.marketing-body .feature-showcase-badge {
  border-radius: 999px; font-weight: 600; border: 1px solid var(--m-line); background: #fff;
  box-shadow: 0 2px 8px rgba(10,20,16,.05);
}
body.marketing-body .feature-bullets li { color: var(--m-ink-2); }
body.marketing-body .feature-bullets li i {
  background: rgba(31,211,103,.15); color: var(--m-green-d);
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px;
}
body.marketing-body .showcase-phone-wrap {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(31,211,103,.35), transparent 70%),
    linear-gradient(160deg, var(--m-deep-2), var(--m-deep));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 36px;
  box-shadow: 0 40px 80px -30px rgba(7,19,13,.6);
  max-width: 420px;
  padding: 48px 32px 30px;
}
body.marketing-body .showcase-phone-wrap .phone-frame { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
body.marketing-body .phone-badge { backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.4); font-weight: 600; }

/* ─── Official API block ──────────────────────────────────────────────── */
body.marketing-body .api-trust-section {
  background: linear-gradient(160deg, var(--m-deep-2), var(--m-deep));
  color: #fff;
  border-radius: 36px;
  padding: 56px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 90px -40px rgba(7,19,13,.7);
  position: relative; overflow: hidden;
}
body.marketing-body .api-trust-section::before {
  content: ""; position: absolute; top: -120px; right: -80px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,211,103,.3), transparent 70%);
}
body.marketing-body .api-trust-section > * { position: relative; }
body.marketing-body .api-trust-section .feature-showcase-h2 { color: #fff; }
body.marketing-body .api-trust-section .feature-showcase-sub { color: rgba(255,255,255,.7); }
body.marketing-body .api-trust-section .feature-showcase-badge { background: rgba(255,255,255,.08); color: #b9f5d2; border-color: rgba(255,255,255,.15); box-shadow: none; }
body.marketing-body .api-trust-badge { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 999px; }
body.marketing-body .api-trust-badge i { color: var(--m-green); }
body.marketing-body .api-feature-item {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  backdrop-filter: blur(8px);
}
body.marketing-body .api-feature-item i { color: var(--m-green); }
body.marketing-body .api-feature-item strong { color: #fff; }
body.marketing-body .api-feature-item p { color: rgba(255,255,255,.65); }

/* ─── Comparison table ────────────────────────────────────────────────── */
body.marketing-body .compare-table-wrap {
  border-radius: 28px; border: 1px solid var(--m-line); background: #fff; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(10,60,30,.2);
}
body.marketing-body .compare-table { border: 0; }
body.marketing-body .compare-table thead th { background: #f4f7f5; font-family: var(--m-head); }
body.marketing-body .compare-table .compare-col-wp { background: rgba(31,211,103,.07); }
body.marketing-body .compare-table thead .compare-col-wp { background: linear-gradient(180deg, #2be077, #14b955); color: #04180d; }
body.marketing-body .compare-col-manual i { color: #ef4444; }
body.marketing-body .compare-col-wp i { color: var(--m-green-d); }

/* ─── Industries ──────────────────────────────────────────────────────── */
body.marketing-body .industries-grid { gap: 16px; margin-top: 48px; }
body.marketing-body .industry-card {
  background: #fff; border: 1px solid var(--m-line); border-radius: 22px; padding: 26px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.marketing-body .industry-card:hover { transform: translateY(-5px); border-color: rgba(31,211,103,.45); box-shadow: 0 22px 44px -20px rgba(10,60,30,.28); }
body.marketing-body .industry-emoji { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--m-soft); font-size: 26px; margin-bottom: 14px; }
body.marketing-body .industry-name { font-weight: 700; }
body.marketing-body .industry-desc { color: var(--m-mute); }

/* ─── Pricing (marketing only; dashboard billing keeps old cards) ─────── */
body.marketing-body .wishpilot-plans .plan-card {
  background: #fff; border: 1px solid var(--m-line); border-radius: 28px; padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(10,20,16,.04);
  transition: transform .3s ease, box-shadow .3s ease;
}
body.marketing-body .wishpilot-plans .plan-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(10,60,30,.3); }
body.marketing-body .wishpilot-plans .plan-card.featured {
  background: linear-gradient(165deg, var(--m-deep-2), var(--m-deep));
  color: #fff; border: 1px solid rgba(31,211,103,.5);
  box-shadow: 0 0 0 4px rgba(31,211,103,.12), 0 40px 80px -30px rgba(7,19,13,.7);
}
body.marketing-body .wishpilot-plans .plan-card.featured .plan-price,
body.marketing-body .wishpilot-plans .plan-card.featured .plan-name,
body.marketing-body .wishpilot-plans .plan-card.featured .plan-feature { color: #fff; }
body.marketing-body .wishpilot-plans .plan-card.featured .text-muted { color: rgba(255,255,255,.6) !important; }
body.marketing-body .wishpilot-plans .plan-card.featured .btn-primary { color: #04180d; }
body.marketing-body .wishpilot-plans .plan-price { font-family: var(--m-head); font-weight: 800; letter-spacing: -.04em; }
body.marketing-body .wishpilot-plans .plan-feature i.fa-check { color: var(--m-green-d); }
body.marketing-body .wishpilot-plans .plan-card.featured .plan-feature i.fa-check { color: var(--m-green); }
body.marketing-body .wishpilot-plans .badge { border-radius: 999px; }

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
body.marketing-body .faq-item {
  background: #fff; border: 1px solid var(--m-line); border-radius: 20px; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.marketing-body .faq-item:hover { border-color: rgba(31,211,103,.4); }
body.marketing-body .faq-question { font-family: var(--m-head); font-weight: 700; letter-spacing: -.01em; }
body.marketing-body .faq-question.active { color: var(--m-green-d); }

/* ─── CTA banner ──────────────────────────────────────────────────────── */
body.marketing-body .cta-banner { background: transparent; padding: 40px 0 112px; }
body.marketing-body .cta-banner-inner {
  position: relative; overflow: hidden;
  border-radius: 40px; padding: 64px;
  background:
    radial-gradient(60% 90% at 90% 0%, rgba(31,211,103,.45), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(56,189,248,.2), transparent 70%),
    var(--m-deep);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 90px -40px rgba(7,19,13,.8);
}
body.marketing-body .cta-title { color: #fff; font-family: var(--m-head); font-weight: 800; letter-spacing: -.04em; }
body.marketing-body .cta-sub { color: rgba(255,255,255,.7); }
body.marketing-body .cta-banner .policy-badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #b9f5d2; }
body.marketing-body .cta-banner .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }

/* ─── Contact ─────────────────────────────────────────────────────────── */
body.marketing-body .contact-panel {
  border-radius: 36px; overflow: hidden; border: 1px solid var(--m-line);
  box-shadow: 0 40px 80px -40px rgba(10,60,30,.3);
}
body.marketing-body .contact-side { background: linear-gradient(165deg, var(--m-deep-2), var(--m-deep)); }
body.marketing-body .contact-form { background: #fff; }
body.marketing-body .contact-form .form-control {
  border-radius: 14px; background: #f7faf8; border: 1px solid var(--m-line); padding: 12px 14px;
}
body.marketing-body .contact-form .form-control:focus { background: #fff; border-color: var(--m-green); box-shadow: 0 0 0 4px rgba(31,211,103,.15); outline: 0; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
body.marketing-body .marketing-footer { background: var(--m-deep); border: 0; padding: 36px 0; color: rgba(255,255,255,.6); }
body.marketing-body .marketing-footer a { color: rgba(255,255,255,.7); }
body.marketing-body .marketing-footer a:hover { color: var(--m-green); }

/* ─── WhatsApp float ──────────────────────────────────────────────────── */
body.marketing-body .wa-float-btn { box-shadow: 0 14px 34px -6px rgba(37,211,102,.6); }

/* ─── Scroll reveal: smoother ─────────────────────────────────────────── */
body.marketing-body .reveal-init { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.marketing-body .hero-section { padding: 120px 0 80px; }
  body.marketing-body .hero-shell { grid-template-columns: 1fr; text-align: left; }
  body.marketing-body .feature-showcase-inner { gap: 40px; }
  body.marketing-body .api-trust-section { padding: 32px 22px; border-radius: 28px; }
  body.marketing-body .cta-banner-inner { padding: 36px 24px; border-radius: 30px; }
  body.marketing-body .marketing-section,
  body.marketing-body .feature-showcase { padding: 72px 0; }
}
@media (max-width: 640px) {
  body.marketing-body .container { width: calc(100% - 32px); }
  body.marketing-body .mkt-nav { top: 10px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  body.marketing-body .float-card { animation: none; }
  body.marketing-body * { transition-duration: .01ms !important; }
}

/* Pages without the dark hero (blog, policies…) need room for the fixed nav */
body.marketing-body:not(:has(.hero-section)) { padding-top: 92px; }

/* ─── Polish pass ─────────────────────────────────────────────────────── */
body.marketing-body h1, body.marketing-body h2, body.marketing-body h3,
body.marketing-body .step-title, body.marketing-body .industry-name, body.marketing-body .plan-name { letter-spacing: -0.02em; }
body.marketing-body .hero-h1 { letter-spacing: -0.035em; word-spacing: .04em; }
body.marketing-body .section-h2, body.marketing-body .feature-showcase-h2 { letter-spacing: -0.03em; word-spacing: .04em; }
body.marketing-body .step-title, body.marketing-body .faq-question, body.marketing-body .stat-dark-value { letter-spacing: -0.01em; }
body.marketing-body .steps-grid { background: transparent; border: 0; }
body.marketing-body .float-tag { background: rgba(31,211,103,.18); color: #b9f5d2; border-radius: 999px; padding: 6px 12px; }
body.marketing-body .mkt-logo img { background: #fff; border-radius: 10px; padding: 3px; }
body.marketing-body .faq-question, body.marketing-body .step-title, body.marketing-body .industry-name, body.marketing-body .plan-name { font-family: "Inter", system-ui, sans-serif; font-weight: 700; word-spacing: 0; }
body.marketing-body .wishpilot-plans .plan-card.featured .plan-price span { color: #fff; }
body.marketing-body .wishpilot-plans .plan-card.featured [data-plan-period] { color: rgba(255,255,255,.6); }

/* ─── Full-width layout ───────────────────────────────────────────────── */
body.marketing-body .container { width: calc(100% - 96px); max-width: none; }
body.marketing-body .mkt-nav { width: calc(100% - 48px); }
body.marketing-body .hero-copy { max-width: 720px; }
body.marketing-body .section-sub, body.marketing-body .feature-showcase-sub { max-width: 760px; }
@media (max-width: 900px) { body.marketing-body .container { width: calc(100% - 40px); } body.marketing-body .mkt-nav { width: calc(100% - 20px); } }
body.marketing-body .hero-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.marketing-body .hero-visual { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
body.marketing-body .hero-h1 { font-size: clamp(2.5rem, 5vw, 5.4rem); }
body.marketing-body .hero-sub { max-width: 640px; }
body.marketing-body .hero-copy { max-width: 820px; }

/* ─── Max content width 1500px ────────────────────────────────────────── */
body.marketing-body .container { width: min(1500px, calc(100% - 96px)); }
body.marketing-body .mkt-nav { width: min(1500px, calc(100% - 48px)); }
@media (max-width: 900px) { body.marketing-body .container { width: calc(100% - 40px); } body.marketing-body .mkt-nav { width: calc(100% - 20px); } }
body.marketing-body .hero-h1 { font-size: clamp(2.5rem, 4.4vw, 4.6rem); }

/* ─── Max content width 1600px ────────────────────────────────────────── */
body.marketing-body .container { width: min(1600px, calc(100% - 96px)); }
body.marketing-body .mkt-nav { width: min(1600px, calc(100% - 48px)); }
@media (max-width: 900px) { body.marketing-body .container { width: calc(100% - 40px); } body.marketing-body .mkt-nav { width: calc(100% - 20px); } }

/* ═══ Corporate / editorial refinement ═══════════════════════════════════ */
body.marketing-body { --m-r: 20px; }

/* Split section headers: label on top, headline left, intro right */
body.marketing-body #features > .container,
body.marketing-body #platform > .container,
body.marketing-body #compare > .container,
body.marketing-body #industries > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 72px;
  align-items: end;
}
body.marketing-body #features > .container > *,
body.marketing-body #platform > .container > *,
body.marketing-body #compare > .container > *,
body.marketing-body #industries > .container > * { grid-column: 1 / -1; }
body.marketing-body #features > .container > .section-h2,
body.marketing-body #platform > .container > .section-h2,
body.marketing-body #compare > .container > .section-h2,
body.marketing-body #industries > .container > .section-h2 { grid-column: 1; grid-row: 2; margin: 14px 0 0; }
body.marketing-body #features > .container > .section-sub,
body.marketing-body #platform > .container > .section-sub,
body.marketing-body #compare > .container > .section-sub,
body.marketing-body #industries > .container > .section-sub { grid-column: 2; grid-row: 2; margin: 0; padding-left: 24px; border-left: 2px solid var(--m-green); }
body.marketing-body #features > .container > .section-label,
body.marketing-body #platform > .container > .section-label,
body.marketing-body #compare > .container > .section-label,
body.marketing-body #industries > .container > .section-label { grid-row: 1; justify-self: start; }

/* Section eyebrow: flat, uppercase, with rule — less "pill", more editorial */
body.marketing-body .section-label {
  background: none; padding: 0; border-radius: 0; color: var(--m-green-d);
  letter-spacing: .14em; font-size: 12px; font-weight: 700;
}
body.marketing-body .section-label::before { width: 28px; height: 2px; border-radius: 0; box-shadow: none; background: var(--m-green); }

/* Blueprint grid on alt sections */
body.marketing-body .marketing-section.alt,
body.marketing-body .feature-showcase-alt {
  background-color: #f3f6f4;
  background-image:
    linear-gradient(rgba(10,20,16,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,20,16,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line);
}

/* Steps: connected process with top accent */
body.marketing-body .steps-grid { position: relative; counter-reset: s; }
body.marketing-body .step-card {
  border-radius: 16px; padding: 36px 32px 34px; border-top: 3px solid var(--m-ink);
  box-shadow: 0 1px 0 var(--m-line), 0 20px 40px -30px rgba(10,20,16,.25);
}
body.marketing-body .step-card:nth-child(2) { border-top-color: var(--m-green-d); }
body.marketing-body .step-card:nth-child(3) { border-top-color: var(--m-green); }
body.marketing-body .step-card:not(:last-child)::before {
  content: "\2192"; position: absolute; right: -19px; top: 50%; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--m-ink); color: #fff; font-size: 16px; box-shadow: 0 8px 18px rgba(10,20,16,.25);
}
body.marketing-body .step-icon { border-radius: 12px; width: 48px; height: 48px; }
body.marketing-body .step-number { position: absolute; top: 22px; right: 28px; font-size: 3rem; }

/* Platform tabs shell: browser-window frame */
body.marketing-body .platform-tab-panels { border-radius: 16px; padding: 0; overflow: hidden; border: 1px solid rgba(10,20,16,.14); }
body.marketing-body .platform-tab-panels::before {
  content: ""; display: block; height: 38px; border-bottom: 1px solid var(--m-line);
  background:
    radial-gradient(circle at 20px 19px, #ff5f57 5px, transparent 5.5px),
    radial-gradient(circle at 40px 19px, #febc2e 5px, transparent 5.5px),
    radial-gradient(circle at 60px 19px, #28c840 5px, transparent 5.5px),
    #f4f6f5;
}
body.marketing-body .platform-tab-panel img { border-radius: 0; display: block; width: 100%; }
body.marketing-body .platform-tabs { margin-bottom: 28px; }

/* Feature showcases: ruled bullet list, quieter badge */
body.marketing-body .feature-showcase-badge {
  border-radius: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; padding: 7px 12px;
}
body.marketing-body .feature-bullets { margin-top: 28px; border-top: 1px solid var(--m-line); }
body.marketing-body .feature-bullets li {
  padding: 13px 0; border-bottom: 1px solid var(--m-line); margin: 0; display: flex; gap: 12px; align-items: center;
}
body.marketing-body .feature-showcase-copy { position: relative; }
body.marketing-body .feature-showcase-copy .btn-lg { border-radius: 12px; }
body.marketing-body .showcase-phone-wrap { border-radius: 28px; }
body.marketing-body .feature-showcase + .feature-showcase:not(.feature-showcase-alt) { border-top: 1px solid var(--m-line); }

/* Industries: horizontal corporate tiles */
body.marketing-body .industry-card {
  border-radius: 14px; padding: 24px 24px 22px; position: relative; overflow: hidden; border: 1px solid var(--m-line);
}
body.marketing-body .industry-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--m-green);
  transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
body.marketing-body .industry-card:hover::after { transform: scaleY(1); }
body.marketing-body .industry-emoji { border-radius: 12px; background: #eef3f0; }

/* Compare table: tighter, more tabular */
body.marketing-body .compare-table-wrap { border-radius: 16px; }
body.marketing-body .compare-table thead th { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; padding: 18px 20px; }
body.marketing-body .compare-table td { padding: 18px 20px; }

/* Pricing / FAQ / API / CTA: sharper radii */
body.marketing-body .wishpilot-plans .plan-card { border-radius: 20px; }
body.marketing-body .faq-item { border-radius: 14px; }
body.marketing-body .api-trust-section { border-radius: 28px; }
body.marketing-body .api-feature-item { border-radius: 14px; }
body.marketing-body .cta-banner-inner { border-radius: 28px; }
body.marketing-body .contact-panel { border-radius: 24px; }

/* Trust strip → one divided row */
body.marketing-body .trust-strip-inner { gap: 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
body.marketing-body .trust-strip-item { background: none; border: 0; border-radius: 0; padding: 18px 28px; border-right: 1px solid rgba(255,255,255,.1); }
body.marketing-body .trust-strip-item:last-child { border-right: 0; }
body.marketing-body .trust-strip { padding-bottom: 40px; }

@media (max-width: 900px) {
  body.marketing-body #features > .container,
  body.marketing-body #platform > .container,
  body.marketing-body #compare > .container,
  body.marketing-body #industries > .container { display: block; }
  body.marketing-body #features > .container > .section-sub,
  body.marketing-body #platform > .container > .section-sub,
  body.marketing-body #compare > .container > .section-sub,
  body.marketing-body #industries > .container > .section-sub { margin-top: 16px; padding-left: 16px; }
  body.marketing-body .step-card:not(:last-child)::before { display: none; }
  body.marketing-body .trust-strip-inner { border: 0; }
  body.marketing-body .trust-strip-item { border: 0; padding: 10px 14px; }
}
body.marketing-body .step-card:not(:last-child)::before { right: 18px; top: auto; bottom: 18px; width: 32px; height: 32px; font-size: 14px; }
body.marketing-body .industry-card { text-align: left; align-items: flex-start; }
body.marketing-body .industry-name { font-size: 1.05rem; }
body.marketing-body .pricing-section-head { margin-bottom: 8px; }
body.marketing-body .pricing-section-head .section-sub { max-width: 640px; }

/* ─── Feature showcase v2: balanced two-column, light visual panel ────── */
body.marketing-body .feature-showcase { padding: 96px 0; }
body.marketing-body .feature-showcase-inner { gap: 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
body.marketing-body .feature-showcase-copy { align-self: center; max-width: 620px; }
body.marketing-body .feature-showcase-inner-reverse .feature-showcase-copy { justify-self: end; }
body.marketing-body .feature-showcase-h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin: 18px 0 14px; }
body.marketing-body .feature-showcase-visual { align-items: stretch; }
body.marketing-body .showcase-phone-wrap {
  max-width: none; width: 100%; height: 100%; justify-content: center;
  padding: 48px 32px 32px; border-radius: 24px;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(31,211,103,.22), transparent 70%),
    linear-gradient(rgba(10,20,16,.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(10,20,16,.045) 1px, transparent 1px) 0 0 / 32px 32px,
    #eef4f0;
  border: 1px solid var(--m-line);
  box-shadow: none;
}
body.marketing-body .showcase-phone-wrap .phone-frame { box-shadow: 0 30px 60px -24px rgba(7,19,13,.55), 0 0 0 1px rgba(10,20,16,.1); }
body.marketing-body .feature-showcase-alt .showcase-phone-wrap { background-color: #fff; }
@media (max-width: 900px) {
  body.marketing-body .feature-showcase-inner { grid-template-columns: 1fr; }
  body.marketing-body .feature-showcase-inner-reverse .feature-showcase-copy { justify-self: start; }
}
body.marketing-body .feature-showcase-inner-reverse .feature-showcase-copy { justify-self: start; max-width: 680px; }

/* ═══ WhatsApp Calling section ═══════════════════════════════════════════ */
body.marketing-body .wacall-section {
  position: relative; isolation: isolate; overflow: hidden; padding: 112px 0; color: #fff;
  background:
    radial-gradient(50% 60% at 15% 20%, rgba(31,211,103,.22), transparent 70%),
    radial-gradient(40% 50% at 90% 80%, rgba(56,189,248,.14), transparent 70%),
    var(--m-deep);
}
body.marketing-body .wacall-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
body.marketing-body .wacall-head { max-width: 860px; margin-bottom: 56px; }
body.marketing-body .wacall-eyebrow {
  display: inline-flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8ff0b8;
}
body.marketing-body .wacall-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--m-green); }
body.marketing-body .wacall-h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; margin: 16px 0 16px; color: #fff; }
body.marketing-body .wacall-h2 span { background: linear-gradient(95deg, #5dffa3, #7be8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.marketing-body .wacall-sub { color: rgba(255,255,255,.7); font-size: 1.06rem; line-height: 1.7; max-width: 720px; }

body.marketing-body .wacall-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }

/* call card */
body.marketing-body .wacall-visual { position: relative; display: flex; justify-content: center; padding: 20px 0; }
body.marketing-body .wacall-visual::before {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(31,211,103,.3), transparent 65%); filter: blur(30px); z-index: 0;
}
body.marketing-body .wacall-card {
  position: relative; z-index: 1; width: min(400px, 100%); padding: 26px 24px 22px; border-radius: 28px;
  background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
body.marketing-body .wacall-card-top { display: flex; gap: 14px; align-items: center; }
body.marketing-body .wacall-avatar-ring { width: 62px; height: 62px; border-radius: 50%; background: rgba(31,211,103,.2); display: grid; place-items: center; animation: wacallRing 2s ease-in-out infinite; flex: none; }
body.marketing-body .wacall-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, #e91e63, #ff6f91); color: #fff; }
body.marketing-body .wacall-name { font-family: var(--m-head); font-weight: 700; font-size: 1.1rem; }
body.marketing-body .wacall-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #8ff0b8; margin-top: 2px; }
body.marketing-body .wacall-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m-green); animation: wacallBlink 1.2s ease-in-out infinite; }
body.marketing-body .wacall-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 44px; margin: 20px 0 16px; }
body.marketing-body .wacall-wave span { width: 4px; border-radius: 99px; background: linear-gradient(180deg, #5dffa3, #1fd367); animation: wacallWave 1.1s ease-in-out infinite; }
body.marketing-body .wacall-wave span:nth-child(odd) { height: 30px; }
body.marketing-body .wacall-wave span:nth-child(even) { height: 16px; }
body.marketing-body .wacall-wave span:nth-child(3n) { height: 40px; animation-delay: .15s; }
body.marketing-body .wacall-wave span:nth-child(4n) { animation-delay: .3s; }
body.marketing-body .wacall-wave span:nth-child(5n) { animation-delay: .45s; }
body.marketing-body .wacall-transcript { display: flex; flex-direction: column; gap: 8px; }
body.marketing-body .wacall-line { font-size: 13.5px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; max-width: 92%; }
body.marketing-body .wacall-line b { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
body.marketing-body .wacall-line.ai { background: rgba(31,211,103,.14); border: 1px solid rgba(31,211,103,.25); color: #e8fff1; border-top-left-radius: 4px; }
body.marketing-body .wacall-line.cu { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); align-self: flex-end; border-top-right-radius: 4px; }
body.marketing-body .wacall-actions { display: flex; justify-content: center; gap: 18px; margin-top: 20px; }
body.marketing-body .wacall-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
body.marketing-body .wacall-btn.end { background: #ef4444; color: #fff; }
body.marketing-body .wacall-chip {
  position: absolute; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(8,22,15,.85); border: 1px solid rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(10px);
  box-shadow: 0 16px 30px -10px rgba(0,0,0,.6); animation: mFloat 6s ease-in-out infinite;
}
body.marketing-body .wacall-chip i { color: var(--m-green); }
body.marketing-body .wacall-chip.c1 { top: 8%; right: 0; }
body.marketing-body .wacall-chip.c2 { bottom: 6%; left: 0; animation-delay: -3s; }

/* right column */
body.marketing-body .wacall-flow { display: grid; gap: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.04); }
body.marketing-body .wacall-step { display: flex; gap: 16px; padding: 20px 22px; align-items: flex-start; }
body.marketing-body .wacall-step + .wacall-step { border-top: 1px solid rgba(255,255,255,.1); }
body.marketing-body .wacall-step-n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(145deg, #2be077, #0f9d58); color: #04180d; }
body.marketing-body .wacall-step strong { display: block; font-family: var(--m-head); font-size: 1.05rem; margin-bottom: 2px; }
body.marketing-body .wacall-step p { color: rgba(255,255,255,.65); font-size: .95rem; line-height: 1.55; margin: 0; }
body.marketing-body .wacall-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 32px; padding: 0; }
body.marketing-body .wacall-points li { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: border-color .25s, transform .25s; }
body.marketing-body .wacall-points li:hover { border-color: rgba(31,211,103,.5); transform: translateY(-3px); }
body.marketing-body .wacall-points li > i { color: var(--m-green); font-size: 18px; margin-top: 3px; }
body.marketing-body .wacall-points strong { display: block; font-size: .98rem; margin-bottom: 2px; }
body.marketing-body .wacall-points span { color: rgba(255,255,255,.62); font-size: .88rem; line-height: 1.5; }
body.marketing-body .wacall-cta { display: flex; flex-wrap: wrap; gap: 12px; }
body.marketing-body .wacall-cta .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }

@keyframes wacallWave { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }
@keyframes wacallBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes wacallRing { 0%,100% { box-shadow: 0 0 0 0 rgba(31,211,103,.35); } 50% { box-shadow: 0 0 0 14px rgba(31,211,103,0); } }
@media (max-width: 1000px) {
  body.marketing-body .wacall-grid { grid-template-columns: 1fr; gap: 40px; }
  body.marketing-body .wacall-section { padding: 72px 0; }
}
@media (max-width: 560px) {
  body.marketing-body .wacall-points { grid-template-columns: 1fr; }
  body.marketing-body .wacall-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.marketing-body .wacall-wave span, body.marketing-body .wacall-avatar-ring, body.marketing-body .wacall-dot, body.marketing-body .wacall-chip { animation: none; } }

/* ═══ Real WhatsApp look inside phone mockups ═══════════════════════════ */
body.marketing-body .phone-screen {
  background-color: #efeae2; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22 fill=%22none%22 stroke=%22%230b141a%22 stroke-opacity=%22.07%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%227%22/%3E%3Cpath d=%22M62 16l4 8 9 1-6.5 6 1.7 9-8.2-4.3-8.2 4.3 1.7-9L49 25l9-1z%22/%3E%3Cpath d=%22M108 20c-5-8-16-1-9 7l9 9 9-9c7-8-4-15-9-7z%22/%3E%3Crect x=%2214%22 y=%2262%22 width=%2218%22 height=%2214%22 rx=%223%22/%3E%3Cpath d=%22M14 66l9 6 9-6%22/%3E%3Cpath d=%22M70 64a10 10 0 1 0 12 12%22/%3E%3Cpath d=%22M104 62v16M96 70h16%22/%3E%3Cpath d=%22M24 108q8-12 16 0t16 0%22/%3E%3Ccircle cx=%2292%22 cy=%22112%22 r=%229%22/%3E%3Cpath d=%22M88 110h.01M96 110h.01M88 115q4 3 8 0%22/%3E%3Cpath d=%22M122 100l8 8M130 100l-8 8%22/%3E%3C/svg%3E"); background-size: 140px 140px;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
}
body.marketing-body .phone-screen::after {
  content: ""; display: block; height: 56px; flex: none; margin-top: 4px;
  background: #f0f2f5 url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22270%22 height=%2256%22 viewBox=%220 0 270 56%22%3E%3Crect x=%228%22 y=%228%22 width=%22212%22 height=%2240%22 rx=%2220%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2226%22 cy=%2228%22 r=%227.5%22 fill=%22none%22 stroke=%22%2354656f%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M23 29.5q3 3 6 0M23.5 25.5h.01M28.5 25.5h.01%22 stroke=%22%2354656f%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Ctext x=%2244%22 y=%2233%22 font-family=%22Helvetica,Arial,sans-serif%22 font-size=%2213.5%22 fill=%22%238696a0%22%3EMessage%3C/text%3E%3Ccircle cx=%22244%22 cy=%2228%22 r=%2219%22 fill=%22%2300a884%22/%3E%3Crect x=%22241%22 y=%2219%22 width=%226%22 height=%2212%22 rx=%223%22 fill=%22%23fff%22/%3E%3Cpath d=%22M237.5 28a6.5 6.5 0 0 0 13 0M244 34.5v3.5%22 stroke=%22%23fff%22 stroke-width=%221.6%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / 270px 56px no-repeat;
}
body.marketing-body .wa-header { background: #008069; padding: 10px 12px; gap: 10px; align-items: center; }
body.marketing-body .wa-header::before { content: "\f053"; font: 900 13px "Font Awesome 6 Free"; color: #fff; margin-right: -2px; }
body.marketing-body .wa-header::after { content: "\f03d\00a0\00a0\00a0\f095\00a0\00a0\00a0\f142"; font: 900 12.5px "Font Awesome 6 Free"; color: #fff; white-space: nowrap; }
body.marketing-body .wa-avatar { width: 34px; height: 34px; font-size: 13px; }
body.marketing-body .wa-name { font-size: 14.5px; font-weight: 600; letter-spacing: 0; }
body.marketing-body .wa-status { font-size: 11.5px; color: rgba(255,255,255,.75); }
body.marketing-body .wa-body { gap: 3px; padding: 12px 10px 10px; flex: 1; }
body.marketing-body .wa-date-chip {
  align-self: center; margin: 2px 0 8px; padding: 5px 12px; border-radius: 8px;
  background: rgba(255,255,255,.95); color: #54656f; font-size: 11.5px; font-weight: 500;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
}
body.marketing-body .wa-bubble {
  position: relative; max-width: 86%; padding: 6px 8px 5px 9px; border-radius: 8px;
  background: #fff; box-shadow: 0 1px .5px rgba(11,20,26,.13); color: #111b21;
}
body.marketing-body .wa-bubble.wa-bubble-sent { background: #d9fdd3; border-radius: 8px; }
body.marketing-body .wa-bubble p { font-size: 13.5px; line-height: 1.38; color: #111b21; }
body.marketing-body .wa-bubble p strong { font-weight: 600; }
body.marketing-body .wa-emoji { font-size: 26px; margin-bottom: 2px; }
body.marketing-body .wa-time { margin-top: 1px; font-size: 11px; color: #667781; text-align: right; }
body.marketing-body .wa-bubble-sent .wa-time::after { content: "\2713\2713"; margin-left: 4px; letter-spacing: -4px; color: #53bdeb; font-weight: 700; }
/* consecutive spacing + tails on first bubble of each group */
body.marketing-body .wa-bubble + .wa-bubble { margin-top: 0; }
body.marketing-body .wa-bubble:not(.wa-bubble-sent) + .wa-bubble-sent,
body.marketing-body .wa-bubble-sent + .wa-bubble:not(.wa-bubble-sent) { margin-top: 8px; }
body.marketing-body .wa-bubble:not(.wa-bubble-sent):first-child,
body.marketing-body .wa-date-chip + .wa-bubble:not(.wa-bubble-sent),
body.marketing-body .wa-bubble-sent + .wa-bubble:not(.wa-bubble-sent) { border-top-left-radius: 0; }
body.marketing-body .wa-bubble.wa-bubble-sent:first-child,
body.marketing-body .wa-date-chip + .wa-bubble-sent,
body.marketing-body .wa-bubble:not(.wa-bubble-sent) + .wa-bubble-sent { border-top-right-radius: 0; }
body.marketing-body .wa-bubble:not(.wa-bubble-sent):first-child::before,
body.marketing-body .wa-date-chip + .wa-bubble:not(.wa-bubble-sent)::before,
body.marketing-body .wa-bubble-sent + .wa-bubble:not(.wa-bubble-sent)::before {
  content: ""; position: absolute; top: 0; left: -7px; border: 0 solid transparent; border-top: 9px solid #fff; border-left: 8px solid transparent; width: 0; height: 0;
}
body.marketing-body .wa-bubble.wa-bubble-sent:first-child::before,
body.marketing-body .wa-date-chip + .wa-bubble-sent::before,
body.marketing-body .wa-bubble:not(.wa-bubble-sent) + .wa-bubble-sent::before {
  content: ""; position: absolute; top: 0; right: -7px; width: 0; height: 0; border-top: 9px solid #d9fdd3; border-right: 8px solid transparent; transform: scaleX(-1);
}
body.marketing-body .wa-coupon { border-radius: 6px; margin: 4px 0 2px; }
body.marketing-body .wa-coupon .label { font-size: 11px; }
/* quick-reply buttons like WhatsApp */
body.marketing-body .wa-btn-group { display: block; margin: 6px -8px 0; border-top: 1px solid #e9edef; }
body.marketing-body .wa-btn-option {
  display: block; width: auto; padding: 8px 6px; text-align: center; background: none; border: 0; border-top: 1px solid #e9edef; border-radius: 0;
  color: #027eb5; font-size: 13.5px; font-weight: 500;
}
body.marketing-body .wa-btn-option:first-child { border-top: 0; }
body.marketing-body .wa-header::after { content: "\f095\00a0\00a0\00a0\f142"; }
body.marketing-body .wa-info { min-width: 0; flex: 1; }
body.marketing-body .wa-name, body.marketing-body .wa-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
body.marketing-body .wa-name { font-size: 14px; }

/* ─── FAQ accordion fix ───────────────────────────────────────────────── */
body.marketing-body .faq-list { gap: 12px; }
body.marketing-body .faq-item,
body.marketing-body .faq-item:first-child { border: 1px solid var(--m-line); border-radius: 16px; background: #fff; }
body.marketing-body .faq-item:has(.faq-answer.open) { border-color: rgba(31,211,103,.5); box-shadow: 0 18px 36px -22px rgba(10,60,30,.3); }
body.marketing-body .faq-question { padding: 22px 26px; align-items: center; gap: 20px; font-size: 1.02rem; line-height: 1.4; }
body.marketing-body .faq-chevron {
  width: 30px; height: 30px; margin: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--m-soft); font-size: 11px; transition: transform .25s, background .2s, color .2s;
}
body.marketing-body .faq-question.active .faq-chevron { background: var(--m-green); color: #04180d; }
body.marketing-body .faq-answer { padding: 0 26px; }
body.marketing-body .faq-answer.open { padding-bottom: 24px; }
body.marketing-body .faq-answer p { color: var(--m-ink-2); }
@media (max-width: 640px) { body.marketing-body .faq-question { padding: 18px 18px; } body.marketing-body .faq-answer { padding: 0 18px; } }

/* ─── Navigation always pinned ────────────────────────────────────────── */
body.marketing-body .mkt-nav { position: fixed !important; top: 14px !important; left: 50% !important; z-index: 1000 !important; }
@media (max-width: 640px) { body.marketing-body .mkt-nav { top: 10px !important; } }
html:has(body.marketing-body) { scroll-padding-top: 96px; scroll-behavior: smooth; }

/* ═══ Platform tabs: compact app-window mockups ══════════════════════════ */
body.marketing-body .platform-tabs { max-width: 560px; margin-left: auto; margin-right: auto; }
body.marketing-body .platform-tab-panels { max-width: 1020px; margin: 0 auto; background: #fff; }
body.marketing-body .platform-tab-panels::before { content: none; }
.pf-app { display: grid; grid-template-columns: 196px 1fr; min-height: 420px; text-align: left; font-family: "Inter", system-ui, sans-serif; color: #0a1410; background: #f6f8f7; }
.pf-app::before {
  content: ""; grid-column: 1 / -1; height: 38px; border-bottom: 1px solid rgba(10,20,16,.08);
  background:
    radial-gradient(circle at 20px 19px, #ff5f57 5px, transparent 5.5px),
    radial-gradient(circle at 40px 19px, #febc2e 5px, transparent 5.5px),
    radial-gradient(circle at 60px 19px, #28c840 5px, transparent 5.5px), #eef1ef;
}
.pf-side { grid-row: 2; background: #07130d; color: rgba(255,255,255,.7); padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; }
.pf-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: #fff; font-size: 15px; letter-spacing: -.01em; }
.pf-logo { width: 28px; height: 28px; border-radius: 8px; background: #fff; display: grid; place-items: center; }
.pf-logo img { width: 22px; height: 22px; object-fit: contain; }
.pf-nav { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 500; }
.pf-nav span { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 9px; }
.pf-nav span i { width: 16px; text-align: center; font-size: 12.5px; opacity: .8; }
.pf-nav span.on { background: rgba(31,211,103,.16); color: #fff; }
.pf-nav span.on i { color: #25d366; opacity: 1; }
.pf-main { grid-row: 2; padding: 22px 24px; min-width: 0; }
.pf-av { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.pf-av.g { background: linear-gradient(135deg,#25d366,#0f9d58); } .pf-av.b { background: #3b82f6; } .pf-av.p { background: #8b5cf6; } .pf-av.o { background: #f59e0b; }
.pf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.pf-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pf-top small { color: #6b7a72; font-size: 12.5px; }
.pf-btn { padding: 8px 14px; border-radius: 9px; background: #0a1410; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* inbox */
.pf-inbox { display: grid; grid-template-columns: 250px 1fr; gap: 0; padding: 0; }
.pf-list { border-right: 1px solid rgba(10,20,16,.08); background: #fff; padding: 16px 12px; }
.pf-h { font-weight: 800; font-size: 15px; padding: 2px 8px 12px; display: flex; justify-content: space-between; align-items: center; }
.pf-h em { font-style: normal; font-size: 11px; font-weight: 600; background: rgba(31,211,103,.15); color: #0f9d58; padding: 3px 9px; border-radius: 99px; }
.pf-conv { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 12px; }
.pf-conv.on { background: #eaf8f0; }
.pf-conv div { min-width: 0; flex: 1; } .pf-conv b { display: block; font-size: 13px; } .pf-conv small { display: block; font-size: 11.5px; color: #6b7a72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-conv i { font-style: normal; font-size: 10.5px; color: #8a978f; align-self: flex-start; margin-top: 4px; }
.pf-chat { display: flex; flex-direction: column; background: #efeae2; }
.pf-chat-h { display: flex; gap: 10px; align-items: center; padding: 12px 18px; background: #fff; border-bottom: 1px solid rgba(10,20,16,.08); }
.pf-chat-h div { flex: 1; } .pf-chat-h b { display: block; font-size: 14px; } .pf-chat-h small { font-size: 11.5px; color: #6b7a72; }
.pf-tag { font-size: 11px; font-weight: 600; background: rgba(31,211,103,.15); color: #0f9d58; padding: 4px 10px; border-radius: 99px; }
.pf-msgs { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.pf-m { max-width: 68%; padding: 8px 12px 6px; border-radius: 9px; font-size: 13px; line-height: 1.45; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.pf-m i { display: block; font-style: normal; text-align: right; font-size: 10.5px; color: #667781; margin-top: 2px; }
.pf-m.in { background: #fff; align-self: flex-start; border-top-left-radius: 0; }
.pf-m.out { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 0; }
.pf-compose { margin: 0 14px 14px; padding: 6px 6px 6px 18px; background: #fff; border-radius: 99px; display: flex; justify-content: space-between; align-items: center; color: #8a978f; font-size: 12.5px; }
.pf-compose b { background: #00a884; color: #fff; padding: 9px 20px; border-radius: 99px; font-size: 12.5px; }
/* crm */
.pf-table { background: #fff; border: 1px solid rgba(10,20,16,.08); border-radius: 14px; overflow: hidden; }
.pf-tr { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: center; padding: 13px 18px; font-size: 13px; border-top: 1px solid rgba(10,20,16,.06); }
.pf-tr.pf-th { border-top: 0; background: #f4f7f5; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7a72; padding: 11px 18px; }
.pf-tr .nm { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pf-tr em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 99px; }
.seg.vip { background: #fef3c7; color: #92400e; } .seg.loyal { background: #dbeafe; color: #1d4ed8; } .seg.offer { background: #ede9fe; color: #6d28d9; }
.st.ready { background: rgba(31,211,103,.15); color: #0f9d58; } .st.sent { background: #e5e7eb; color: #374151; }
/* automation */
.pf-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #0f9d58; background: rgba(31,211,103,.15); padding: 6px 12px; border-radius: 99px; }
.pf-live i { width: 7px; height: 7px; border-radius: 50%; background: #1fd367; animation: wacallBlink 1.2s infinite; }
.pf-flow { display: flex; align-items: stretch; gap: 0; margin: 8px 0 22px; }
.pf-node { flex: 1; background: #fff; border: 1px solid rgba(10,20,16,.1); border-radius: 14px; padding: 14px; box-shadow: 0 8px 20px -14px rgba(10,60,30,.4); min-width: 0; }
.pf-node .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg,#2be077,#0f9d58); color: #fff; font-size: 14px; margin-bottom: 10px; }
.pf-node small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7a72; }
.pf-node b { display: block; font-size: 13px; margin-top: 2px; }
.pf-arrow { flex: 0 0 26px; align-self: center; height: 2px; background: repeating-linear-gradient(90deg,#9fb3a8 0 4px,transparent 4px 8px); position: relative; }
.pf-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid #9fb3a8; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pf-kpis div { background: #fff; border: 1px solid rgba(10,20,16,.08); border-radius: 14px; padding: 14px 16px; }
.pf-kpis small { display: block; font-size: 11.5px; color: #6b7a72; font-weight: 600; }
.pf-kpis b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0; }
.pf-kpis span { font-size: 11.5px; color: #0f9d58; font-weight: 600; }
@media (max-width: 760px) {
  .pf-app { grid-template-columns: 1fr; }
  .pf-side { display: none; } .pf-main { grid-row: 2; padding: 16px; }
  .pf-inbox { grid-template-columns: 1fr; } .pf-list { display: none; }
  .pf-tr { grid-template-columns: 2fr 1fr 1fr; padding: 12px 14px; } .pf-tr span:nth-child(2) { display: none; }
  .pf-flow { flex-direction: column; gap: 6px; } .pf-arrow { width: 2px; height: 18px; align-self: center; flex-basis: 18px; background: repeating-linear-gradient(180deg,#9fb3a8 0 4px,transparent 4px 8px); } .pf-arrow::after { display: none; }
  .pf-kpis { grid-template-columns: 1fr; }
}
.pf-app { grid-template-rows: 38px 1fr; }
body.marketing-body .platform-tabs { max-width: none; width: fit-content; }
@media (max-width: 760px) { body.marketing-body .platform-tabs { width: 100%; } }

/* ─── Alternating section backgrounds (no two neighbours alike) ───────── */
body.marketing-body #features.marketing-section.alt,
body.marketing-body #chatbot.feature-showcase-alt {
  background: transparent; border-top: 0; border-bottom: 0;
}
body.marketing-body #platform.marketing-section,
body.marketing-body #industries.marketing-section {
  background-color: #f3f6f4;
  background-image:
    linear-gradient(rgba(10,20,16,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,20,16,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line);
}


/* ─── Flow Builder showcase ───────────────────────────────────────────── */
body.marketing-body .flowb-section { padding: 104px 0; background: var(--m-soft); border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); }
body.marketing-body .flowb-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
body.marketing-body .flowb-head .feature-showcase-sub { margin: 0 auto; }
body.marketing-body .flowb-frame {
  margin: 0; border-radius: 20px; overflow: hidden; background: #fff;
  border: 1px solid var(--m-line); box-shadow: 0 30px 70px -28px rgba(10,20,16,.30), 0 2px 6px rgba(10,20,16,.06);
}
body.marketing-body .flowb-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #f6f8f7; border-bottom: 1px solid var(--m-line); }
body.marketing-body .flowb-dots { display: inline-flex; gap: 7px; }
body.marketing-body .flowb-dots i { width: 11px; height: 11px; border-radius: 50%; background: #d5dbd8; display: block; }
body.marketing-body .flowb-dots i:nth-child(1) { background: #ff6159; }
body.marketing-body .flowb-dots i:nth-child(2) { background: #ffbd2e; }
body.marketing-body .flowb-dots i:nth-child(3) { background: #28c940; }
body.marketing-body .flowb-bar-title { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--m-ink-2); letter-spacing: -.01em; }
body.marketing-body .flowb-bar-title i { color: var(--m-green-d); margin-right: 6px; }
body.marketing-body .flowb-bar-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--m-green-d); }
body.marketing-body .flowb-bar-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 0 3px rgba(31,211,103,.2); display: block; }
body.marketing-body .flowb-shot { display: block; line-height: 0; cursor: zoom-in; }
body.marketing-body .flowb-shot img { width: 100%; height: auto; display: block; }
body.marketing-body .flowb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; }
body.marketing-body .flowb-item { background: #fff; border: 1px solid var(--m-line); border-radius: 18px; padding: 20px 20px 18px; box-shadow: 0 1px 3px rgba(10,20,16,.04); }
body.marketing-body .flowb-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; color: #fff; font-size: 16px; background: linear-gradient(135deg, var(--m-green), var(--m-green-d)); box-shadow: 0 6px 14px rgba(31,211,103,.28); }
body.marketing-body .flowb-item b { display: block; font-family: var(--m-head); font-size: 15px; letter-spacing: -.02em; margin-bottom: 4px; }
body.marketing-body .flowb-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--m-ink-2); }
body.marketing-body .flowb-cta { text-align: center; margin-top: 36px; }
body.marketing-body .flowb-cta .btn-lg { border-radius: 12px; }
@media (max-width: 960px) { body.marketing-body .flowb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  body.marketing-body .flowb-section { padding: 64px 0; }
  body.marketing-body .flowb-grid { grid-template-columns: 1fr; }
  body.marketing-body .flowb-bar-live { display: none; }
  body.marketing-body .flowb-bar-title { text-align: left; }
}


/* ─── Flow Builder: AI assistant block (highlighted USP panel) ──────────── */
body.marketing-body .flowb-ai {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin: 56px 0 8px;
  position: relative; overflow: hidden; padding: 56px; border-radius: 32px; color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(31,211,103,.30), transparent 42%),
    radial-gradient(circle at 6% 100%, rgba(15,157,88,.28), transparent 45%),
    linear-gradient(135deg, #07130d 0%, #0c1f16 55%, #0f3a26 100%);
  border: 1px solid rgba(31,211,103,.32);
  box-shadow: 0 40px 90px -34px rgba(7,19,13,.65), 0 0 0 6px rgba(31,211,103,.07);
}
body.marketing-body .flowb-ai::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(100deg, transparent 5%, #000 75%); mask-image: linear-gradient(100deg, transparent 5%, #000 75%);
}
body.marketing-body .flowb-ai > * { position: relative; z-index: 1; }
body.marketing-body .flowb-ai-copy { justify-self: start; max-width: 620px; }
body.marketing-body .flowb-ai .feature-showcase-badge { background: rgba(31,211,103,.14); color: #b9f5d2; border-color: rgba(31,211,103,.38); box-shadow: 0 0 24px rgba(31,211,103,.22); }
body.marketing-body .flowb-ai-h3 { font-family: var(--m-head); font-size: clamp(1.7rem, 2.6vw, 2.35rem); letter-spacing: -0.03em; line-height: 1.12; margin: 18px 0 14px; color: #fff; }
body.marketing-body .flowb-ai-h3 span { color: #4ade80; }
body.marketing-body .flowb-ai .feature-showcase-sub { color: rgba(255,255,255,.74); }
body.marketing-body .flowb-ai .feature-bullets li { color: rgba(255,255,255,.9); }
body.marketing-body .flowb-ai .feature-bullets li i { color: #4ade80; }
body.marketing-body .flowb-ai-note { margin: 20px 0 0; font-size: 13px; color: rgba(255,255,255,.58); display: flex; align-items: center; gap: 8px; }
body.marketing-body .flowb-ai-note i { color: #4ade80; }
/* Screenshot column: spans its half of the container; the shot floats on a soft glass card. */
body.marketing-body .flowb-ai-shot {
  margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 36px 24px; border-radius: 24px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.marketing-body .flowb-ai-shot picture { display: block; width: min(100%, 400px); line-height: 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 70px -18px rgba(0,0,0,.65), 0 0 0 5px rgba(31,211,103,.12); background: #fff; }
body.marketing-body .flowb-ai-shot img { width: 100%; height: auto; display: block; }
@media (max-width: 960px) {
  body.marketing-body .flowb-ai { grid-template-columns: 1fr; gap: 30px; margin-top: 44px; padding: 36px 24px; border-radius: 26px; }
  body.marketing-body .flowb-ai-copy { max-width: 680px; }
  body.marketing-body .flowb-ai-shot { padding: 26px 14px; }
}
@media (max-width: 560px) { body.marketing-body .flowb-ai { padding: 28px 16px; } }
body.marketing-body .flowb-ai .feature-bullets { border-top-color: rgba(255,255,255,.16); }
body.marketing-body .flowb-ai .feature-bullets li { border-bottom-color: rgba(255,255,255,.12); }