/* AF247 Platform logos — inline SVG via mask-image, recolorable via currentColor.
 *
 * 2026-05-17 part 13. Drop-in CSS for putting platform brand logos onto
 * source pills, chips, and chart cards. Each logo uses CSS mask-image so
 * the color follows the parent's color property — keeps them brand-
 * consistent and accessible (high contrast against the violet pills).
 *
 * Usage:
 *   <span class="v2-logo v2-logo--meta"></span>      → Meta/Facebook M
 *   <span class="v2-logo v2-logo--google"></span>    → Google G
 *   <span class="v2-logo v2-logo--instagram"></span> → Instagram camera
 *   <span class="v2-logo v2-logo--xero"></span>      → Xero X
 *   <span class="v2-logo v2-logo--whatsapp"></span>  → WhatsApp
 *   <span class="v2-logo v2-logo--membr"></span>     → Membr (M)
 *   <span class="v2-logo v2-logo--ezypay"></span>    → Ezypay (E)
 *   <span class="v2-logo v2-logo--postgres"></span>  → Postgres elephant
 *
 * Or as inline-block icon next to text:
 *   <span class="v2-logo-chip v2-logo-chip--meta">Meta · Lead Ads</span>
 */

.v2-logo {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: -2px;
  flex-shrink: 0;
}
.v2-logo--lg { width: 24px; height: 24px; vertical-align: -5px; }
.v2-logo--xl { width: 40px; height: 40px; vertical-align: -10px; }
.v2-logo--hero { width: 64px; height: 64px; vertical-align: middle; }

/* ─────────── Meta / Facebook ─────────── */
.v2-logo--meta {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 17.6V11h2.2V8.4c0-2.2 1.3-3.4 3.3-3.4l1.9.2v2.2h-1.3c-1 0-1.3.6-1.3 1.3V11h2.5l-.4 2.2h-2.1v6.4z'/><circle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 17.6V11h2.2V8.4c0-2.2 1.3-3.4 3.3-3.4l1.9.2v2.2h-1.3c-1 0-1.3.6-1.3 1.3V11h2.5l-.4 2.2h-2.1v6.4z'/><circle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>");
}

/* ─────────── Google ─────────── */
.v2-logo--google {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 11v2.5h3.8c-.2.9-.7 1.7-1.5 2.3l2.4 1.9c1.4-1.3 2.2-3.2 2.2-5.4 0-.5 0-1-.1-1.5H12zm0 7c-1.6 0-3-.5-4-1.5l-2.5 1.9C7.2 19.8 9.5 21 12 21c2.6 0 4.8-.9 6.4-2.3l-2.4-1.9c-.7.5-1.6.7-2.5.7-2 0-3.7-1.4-4.3-3.2H4.6v2c1.6 3.2 4.9 5.4 8.4 5.4zM7.7 13.3c-.2-.5-.3-1.1-.3-1.6 0-.6.1-1.2.3-1.7V8H4.6c-.7 1.3-1.1 2.8-1.1 4.4s.4 3 1.1 4.4l3.1-2.4zm4.3-5c1.1 0 2.1.4 2.9 1.1l2.1-2.1C15.7 5.9 14 5 12 5 8.5 5 5.6 7 4.6 8l3.1 2.4c.6-1.8 2.3-3.2 4.3-3.2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 11v2.5h3.8c-.2.9-.7 1.7-1.5 2.3l2.4 1.9c1.4-1.3 2.2-3.2 2.2-5.4 0-.5 0-1-.1-1.5H12zm0 7c-1.6 0-3-.5-4-1.5l-2.5 1.9C7.2 19.8 9.5 21 12 21c2.6 0 4.8-.9 6.4-2.3l-2.4-1.9c-.7.5-1.6.7-2.5.7-2 0-3.7-1.4-4.3-3.2H4.6v2c1.6 3.2 4.9 5.4 8.4 5.4zM7.7 13.3c-.2-.5-.3-1.1-.3-1.6 0-.6.1-1.2.3-1.7V8H4.6c-.7 1.3-1.1 2.8-1.1 4.4s.4 3 1.1 4.4l3.1-2.4zm4.3-5c1.1 0 2.1.4 2.9 1.1l2.1-2.1C15.7 5.9 14 5 12 5 8.5 5 5.6 7 4.6 8l3.1 2.4c.6-1.8 2.3-3.2 4.3-3.2z'/></svg>");
}

/* ─────────── Instagram ─────────── */
.v2-logo--instagram {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='currentColor' stroke-width='1.7'/><circle cx='12' cy='12' r='4' fill='none' stroke='currentColor' stroke-width='1.7'/><circle cx='17.5' cy='6.5' r='1' fill='currentColor'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='currentColor' stroke-width='1.7'/><circle cx='12' cy='12' r='4' fill='none' stroke='currentColor' stroke-width='1.7'/><circle cx='17.5' cy='6.5' r='1' fill='currentColor'/></svg>");
}

/* ─────────── WhatsApp ─────────── */
.v2-logo--whatsapp {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 14.4c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.8.2-.2.3-.8 1-1 1.2-.2.2-.4.3-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.5.1-.2.2-.3.3-.5.1-.2.1-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7 0 1.6 1.2 3.1 1.3 3.3.2.2 2.3 3.5 5.5 4.9.8.3 1.4.5 1.9.7.8.3 1.5.2 2.1.1.6-.1 1.8-.7 2.1-1.4.3-.7.3-1.3.2-1.4 0-.2-.3-.3-.6-.5z'/><path d='M20.5 3.5C18.4 1.4 15.5 0 12.5 0 6 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.1-1.6c1.7.9 3.7 1.4 5.7 1.4h.1c6.5 0 11.7-5.3 11.7-11.8 0-3.2-1.2-6.1-3.1-8.5zm-8 18.1c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.4 4.5-9.8 10-9.8 2.7 0 5.2 1 7.1 2.9 1.9 1.9 2.9 4.4 2.9 7-.1 5.4-4.5 9.8-10.2 9.8z' fill='currentColor'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 14.4c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.8.2-.2.3-.8 1-1 1.2-.2.2-.4.3-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.5.1-.2.2-.3.3-.5.1-.2.1-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7 0 1.6 1.2 3.1 1.3 3.3.2.2 2.3 3.5 5.5 4.9.8.3 1.4.5 1.9.7.8.3 1.5.2 2.1.1.6-.1 1.8-.7 2.1-1.4.3-.7.3-1.3.2-1.4 0-.2-.3-.3-.6-.5z'/><path d='M20.5 3.5C18.4 1.4 15.5 0 12.5 0 6 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.1-1.6c1.7.9 3.7 1.4 5.7 1.4h.1c6.5 0 11.7-5.3 11.7-11.8 0-3.2-1.2-6.1-3.1-8.5zm-8 18.1c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.4 4.5-9.8 10-9.8 2.7 0 5.2 1 7.1 2.9 1.9 1.9 2.9 4.4 2.9 7-.1 5.4-4.5 9.8-10.2 9.8z' fill='currentColor'/></svg>");
}

/* ─────────── Xero ─────────── */
.v2-logo--xero {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='currentColor'/><path d='M9.6 12L7.4 9.8l-1 1L8.6 13l-2.2 2.2 1 1L9.6 14l2.2 2.2 1-1L10.6 13l2.2-2.2-1-1L9.6 12z' fill='white'/><circle cx='15.4' cy='13' r='1.8' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='currentColor'/><path d='M9.6 12L7.4 9.8l-1 1L8.6 13l-2.2 2.2 1 1L9.6 14l2.2 2.2 1-1L10.6 13l2.2-2.2-1-1L9.6 12z' fill='white'/><circle cx='15.4' cy='13' r='1.8' fill='white'/></svg>");
}

/* ─────────── Membr — circle with M ─────────── */
.v2-logo--membr {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='1.6'/><path d='M6.5 16V8h2l3 5 3-5h2v8h-2v-5l-2.5 4h-1L8.5 11v5z' fill='currentColor'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='1.6'/><path d='M6.5 16V8h2l3 5 3-5h2v8h-2v-5l-2.5 4h-1L8.5 11v5z' fill='currentColor'/></svg>");
}

/* ─────────── Ezypay — circle with $ ─────────── */
.v2-logo--ezypay {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='1.6'/><path d='M13 5v2.2c-.7.1-1.3.3-1.8.6-1 .6-1.5 1.5-1.5 2.7 0 .8.3 1.5.8 2 .5.5 1.3.8 2.4 1.1l.9.3c.6.2 1.1.4 1.4.6.3.2.4.5.4.9 0 .4-.2.7-.5 1-.4.2-.8.4-1.4.4-.6 0-1.2-.1-1.7-.4-.5-.3-1-.7-1.4-1.2l-1.4 1.6c.5.6 1.2 1.1 2 1.4.4.2.8.3 1.2.4V19h2v-2.2c.9-.1 1.7-.4 2.3-.9.9-.7 1.4-1.6 1.4-2.8 0-.9-.3-1.6-.8-2.1-.5-.5-1.4-.9-2.5-1.2l-1-.3c-.6-.2-1-.4-1.3-.6-.3-.2-.4-.5-.4-.8 0-.4.2-.7.5-.9.3-.2.7-.3 1.2-.3.5 0 1 .1 1.4.4.4.2.8.6 1.2 1l1.4-1.6c-.5-.5-1-1-1.7-1.3-.4-.2-.8-.3-1.2-.4V5z' fill='currentColor'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='1.6'/><path d='M13 5v2.2c-.7.1-1.3.3-1.8.6-1 .6-1.5 1.5-1.5 2.7 0 .8.3 1.5.8 2 .5.5 1.3.8 2.4 1.1l.9.3c.6.2 1.1.4 1.4.6.3.2.4.5.4.9 0 .4-.2.7-.5 1-.4.2-.8.4-1.4.4-.6 0-1.2-.1-1.7-.4-.5-.3-1-.7-1.4-1.2l-1.4 1.6c.5.6 1.2 1.1 2 1.4.4.2.8.3 1.2.4V19h2v-2.2c.9-.1 1.7-.4 2.3-.9.9-.7 1.4-1.6 1.4-2.8 0-.9-.3-1.6-.8-2.1-.5-.5-1.4-.9-2.5-1.2l-1-.3c-.6-.2-1-.4-1.3-.6-.3-.2-.4-.5-.4-.8 0-.4.2-.7.5-.9.3-.2.7-.3 1.2-.3.5 0 1 .1 1.4.4.4.2.8.6 1.2 1l1.4-1.6c-.5-.5-1-1-1.7-1.3-.4-.2-.8-.3-1.2-.4V5z' fill='currentColor'/></svg>");
}

/* ─────────── Postgres elephant ─────────── */
.v2-logo--postgres {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 4c2 0 4 .5 5.5 1.5l.2 2c-.5 0-1 .5-1 1 0 .5 0 .8.5 1 .5 0 1 .5 1 1.2 0 .5-.4 1-.5 1.2-.5 0-1 .8-1 1.2 0 0 .5 1 .5 2 0 1.2-1 2.5-2 2.5-1.5 0-1.5-1.5-2-1.5l-.5.5c0 .5 0 1 .2 1.5.3.5 1 1 1 2 0 .5-.5 1-1 1-1 0-1.5-1-2-1.5-.5-1-.5-2-1-2.5-.5 0-1 0-1.5.5-.5 0-1 .5-2 .5-.7 0-1.2-.2-1.7-.5-1-.5-2-1.5-2.5-3-.5-1.5-.5-3.5 0-5 .5-1.5 1.5-2.5 3-3 1-.5 2.5-.5 3.5-.5z' fill='currentColor'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 4c2 0 4 .5 5.5 1.5l.2 2c-.5 0-1 .5-1 1 0 .5 0 .8.5 1 .5 0 1 .5 1 1.2 0 .5-.4 1-.5 1.2-.5 0-1 .8-1 1.2 0 0 .5 1 .5 2 0 1.2-1 2.5-2 2.5-1.5 0-1.5-1.5-2-1.5l-.5.5c0 .5 0 1 .2 1.5.3.5 1 1 1 2 0 .5-.5 1-1 1-1 0-1.5-1-2-1.5-.5-1-.5-2-1-2.5-.5 0-1 0-1.5.5-.5 0-1 .5-2 .5-.7 0-1.2-.2-1.7-.5-1-.5-2-1.5-2.5-3-.5-1.5-.5-3.5 0-5 .5-1.5 1.5-2.5 3-3 1-.5 2.5-.5 3.5-.5z' fill='currentColor'/></svg>");
}

/* ─────────── Google Drive ─────────── */
.v2-logo--drive {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 3l8 14h-8L4 10l4-7zm8 0l8 14h-8l-4-7 4-7zM6 17l-2 4h12L20 17H6z' fill='currentColor'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 3l8 14h-8L4 10l4-7zm8 0l8 14h-8l-4-7 4-7zM6 17l-2 4h12L20 17H6z' fill='currentColor'/></svg>");
}

/* Aliases for source-pill class names used in the templates */
.v2-logo--bookkeeper { -webkit-mask-image: var(--lg-bookkeeper); mask-image: var(--lg-bookkeeper); }
.v2-logo--sheets    { -webkit-mask-image: var(--lg-drive); mask-image: var(--lg-drive); }
.v2-logo--bank      { -webkit-mask-image: var(--lg-bank); mask-image: var(--lg-bank); }
.v2-logo--gbp       { -webkit-mask-image: var(--lg-google); mask-image: var(--lg-google); }

:root {
  --lg-bookkeeper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 4h10l4 4v12H5V4zm9 0v4h4M8 12h8M8 16h8M8 8h4' fill='none' stroke='currentColor' stroke-width='1.6'/></svg>");
  --lg-drive: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3l-6 11 3 5h6L3 14m18 0l-6-11h-6l6 11m-6 0l-3 5h12l3-5z' fill='currentColor'/></svg>");
  --lg-bank: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l10 5v2H2V8l10-5zM4 11h2v8H4v-8zm5 0h2v8H9v-8zm5 0h2v8h-2v-8zm5 0h2v8h-2v-8zM2 20h20v2H2v-2z' fill='currentColor'/></svg>");
  --lg-google: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 11v2.5h3.8c-.2.9-.7 1.7-1.5 2.3l2.4 1.9c1.4-1.3 2.2-3.2 2.2-5.4 0-.5 0-1-.1-1.5H12zm0 7c-1.6 0-3-.5-4-1.5l-2.5 1.9C7.2 19.8 9.5 21 12 21c2.6 0 4.8-.9 6.4-2.3l-2.4-1.9c-.7.5-1.6.7-2.5.7-2 0-3.7-1.4-4.3-3.2H4.6v2c1.6 3.2 4.9 5.4 8.4 5.4zM7.7 13.3c-.2-.5-.3-1.1-.3-1.6 0-.6.1-1.2.3-1.7V8H4.6c-.7 1.3-1.1 2.8-1.1 4.4s.4 3 1.1 4.4l3.1-2.4zm4.3-5c1.1 0 2.1.4 2.9 1.1l2.1-2.1C15.7 5.9 14 5 12 5 8.5 5 5.6 7 4.6 8l3.1 2.4c.6-1.8 2.3-3.2 4.3-3.2z' fill='currentColor'/></svg>");
}

/* ─────────── Generic API/Webhook ─────────── */
.v2-logo--api {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 8h6v2H5V8zm0 4h6v2H5v-2zm0 4h4v2H5v-2zm10-8h4v10h-4V8zm-2 0v10h-1V8h1z' fill='currentColor'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 8h6v2H5V8zm0 4h6v2H5v-2zm0 4h4v2H5v-2zm10-8h4v10h-4V8zm-2 0v10h-1V8h1z' fill='currentColor'/></svg>");
}

/* ═════════════════ Brand chip — bigger, more dimensional ═════════════════ */
.v2-platform-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(110, 56, 213, 0.04) 0%, rgba(20, 23, 42, 0.4) 100%);
  border: 1px solid var(--border, rgba(110, 56, 213, 0.2));
  font-family: 'Inter', system-ui, sans-serif;
  transition: transform 240ms cubic-bezier(0.19, 1, 0.22, 1),
              border-color 220ms ease,
              box-shadow 280ms ease;
}
.v2-platform-card:hover {
  transform: translateY(-2px);
  border-color: var(--v2-violet-glow, rgba(110, 56, 213, 0.35));
  box-shadow: 0 8px 24px rgba(110, 56, 213, 0.15);
}
.v2-platform-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-platform-card__icon .v2-logo { width: 22px; height: 22px; vertical-align: 0; }

.v2-platform-card__meta { display: flex; flex-direction: column; gap: 2px; }
.v2-platform-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #fff);
  letter-spacing: -0.01em;
}
.v2-platform-card__sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3, rgba(255,255,255,0.5));
}

/* Platform-specific accent colors for the icon container backgrounds.
 * Each one represents an actual brand color so the user instantly recognises. */
.v2-logo-bg--meta      { background: linear-gradient(135deg, #4267B2 0%, #1877F2 100%); color: #fff; }
.v2-logo-bg--facebook  { background: linear-gradient(135deg, #1877F2 0%, #0866FF 100%); color: #fff; }
.v2-logo-bg--google    { background: linear-gradient(135deg, #4285F4 0%, #34A853 30%, #FBBC05 60%, #EA4335 100%); color: #fff; }
.v2-logo-bg--instagram { background: linear-gradient(135deg, #FEDA77 0%, #F58529 25%, #DD2A7B 50%, #8134AF 75%, #515BD4 100%); color: #fff; }
.v2-logo-bg--whatsapp  { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: #fff; }
.v2-logo-bg--xero      { background: linear-gradient(135deg, #13B5EA 0%, #006FBA 100%); color: #fff; }
.v2-logo-bg--membr     { background: linear-gradient(135deg, #6E38D5 0%, #A42AF9 100%); color: #fff; }
.v2-logo-bg--ezypay    { background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%); color: #fff; }
.v2-logo-bg--postgres  { background: linear-gradient(135deg, #336791 0%, #1F4E73 100%); color: #fff; }
.v2-logo-bg--drive     { background: linear-gradient(135deg, #34A853 0%, #FBBC05 50%, #4285F4 100%); color: #fff; }
.v2-logo-bg--sheets    { background: linear-gradient(135deg, #34A853 0%, #0F9D58 100%); color: #fff; }
.v2-logo-bg--bank      { background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%); color: #fff; }
.v2-logo-bg--bookkeeper { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); color: #fff; }
.v2-logo-bg--api       { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); color: #fff; }


/* ═════════════════ v2-source pill — replace dot with logo ═════════════════ */
.v2-source__pill {
  /* enlarge slightly to fit logo */
  gap: 7px;
  padding: 4px 11px;
  font-weight: 700;
}
.v2-source__pill .v2-logo {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
}
.v2-source__pill::before {
  display: none;   /* replaced by .v2-logo inside the span */
}

/* ─────────── Marketing platform grid — 4-up ─────────── */
.v2-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

/* ═════════════════ ECharts container animations ═════════════════ */
.v2-chart-card [id^="chart-"],
.v2-chart-card [id^="ebitda-"],
.v2-chart-card [id^="waterfall-"],
.v2-chart-card [id^="apm_"],
.v2-chart-card [id^="dept_"],
.v2-chart-card [id^="sh_"],
.v2-chart-card [id^="rev_"],
.v2-chart-card [id^="be_"] {
  animation: v2-chart-in 700ms cubic-bezier(0.19, 1, 0.22, 1) both;
}
@keyframes v2-chart-in {
  from { opacity: 0; transform: translateY(20px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-chart-card [id^="chart-"],
  .v2-chart-card [id^="ebitda-"],
  .v2-chart-card [id^="waterfall-"],
  .v2-chart-card [id^="apm_"],
  .v2-chart-card [id^="dept_"],
  .v2-chart-card [id^="sh_"],
  .v2-chart-card [id^="rev_"],
  .v2-chart-card [id^="be_"] {
    animation: none;
  }
}