/* Hero logo strips: CSS backgrounds load with the stylesheet, not when a clipped <img> enters view. */
.logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html[data-theme="light"] .logo-mark-mono { filter: brightness(0); }
html[data-theme="dark"] .logo-mark-mono { filter: brightness(0) invert(1); opacity: 0.92; }
html[data-theme="light"] .brand-logo-img.brand-logo-invert { filter: brightness(0); }
html[data-theme="dark"] .brand-logo-img.brand-logo-invert {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.logo-mark-snowflake { background-image: url("/assets/integrations/snowflake.svg"); }
.logo-mark-postgres { background-image: url("/assets/integrations/postgres.svg"); }
.logo-mark-bigquery { background-image: url("/assets/integrations/bigquery.svg"); }
.logo-mark-databricks { background-image: url("/assets/integrations/databricks.svg"); }
.logo-mark-mysql { background-image: url("/assets/integrations/mysql.svg"); }
.logo-mark-mongodb { background-image: url("/assets/integrations/mongodb.svg"); }
.logo-mark-redshift {
  background-color: #8C4FFF;
  background-image: none;
  -webkit-mask: url("/assets/integrations/redshift.svg") center / contain no-repeat;
  mask: url("/assets/integrations/redshift.svg") center / contain no-repeat;
}
.logo-mark-clickhouse { background-image: url("/assets/integrations/clickhouse.svg"); }
.logo-mark-supabase { background-image: url("/assets/integrations/supabase.svg"); }
.logo-mark-athena { background-image: url("/assets/integrations/athena.svg"); }
.logo-mark-trino { background-image: url("/assets/integrations/trino.svg"); }
.logo-mark-s3 { background-image: url("/assets/integrations/s3.svg"); }
.logo-mark-youtube { background-image: url("/assets/integrations/youtube.svg"); }
.logo-mark-instagram { background-image: url("/assets/integrations/instagram.svg"); }
.logo-mark-facebook { background-image: url("/assets/integrations/facebook.svg"); }
.logo-mark-tiktok { background-image: url("/assets/integrations/tiktok.svg"); }
.logo-mark-x { background-image: url("/assets/integrations/x.svg"); }
.logo-mark-googleanalytics { background-image: url("/assets/integrations/googleanalytics.svg"); }
.logo-mark-googleads { background-image: url("/assets/integrations/googleads.svg"); }
.logo-mark-stripe { background-image: url("/assets/integrations/stripe.svg"); }
.logo-mark-hubspot { background-image: url("/assets/integrations/hubspot.svg"); }
.logo-mark-shopify { background-image: url("/assets/integrations/shopify.svg"); }
.logo-mark-mixpanel { background-image: url("/assets/integrations/mixpanel.svg"); }
.logo-mark-kafka { background-image: url("/assets/integrations/kafka.svg"); }
.logo-mark-fivetran {
  background-color: #0073FF;
  background-image: none;
  -webkit-mask: url("/assets/integrations/fivetran.svg") center / contain no-repeat;
  mask: url("/assets/integrations/fivetran.svg") center / contain no-repeat;
}
.logo-mark-airbyte { background-image: url("/assets/integrations/airbyte.svg"); }
.logo-mark-dbt { background-image: url("/assets/integrations/dbt.svg"); }
.logo-mark-airflow { background-image: url("/assets/integrations/apacheairflow.svg"); }
.logo-mark-looker { background-image: url("/assets/integrations/looker.svg"); }
.logo-mark-tableau {
  background-color: #E97627;
  background-image: none;
  -webkit-mask: url("/assets/integrations/tableau.svg") center / contain no-repeat;
  mask: url("/assets/integrations/tableau.svg") center / contain no-repeat;
}
.logo-mark-github { background-image: url("/assets/integrations/github.svg"); }

.hero-logo-strips .logo-pill.glow-card {
  overflow: visible;
}