@import url("/static/css/funnel-components-v2-controls.css");
@import url("/static/css/funnel-components-v2-surfaces.css");
@import url("/static/css/funnel-components-v2-campaign.css");
@import url("/static/css/funnel-theme.css");

/* Layout consumes the public/DB owner theme; it does not define another brand. */

#db-components {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--funnel-canvas);
  color: var(--funnel-text);
  font-family: var(--funnel-font-family);
  font-size: 1rem;
  line-height: 1.65;
}
#db-components *, #db-components *::before, #db-components *::after { box-sizing: border-box; }
#db-components [data-component] { font-family: inherit !important; }
#db-components h1, #db-components h2, #db-components h3, #db-components [data-component="headline"] {
  color: var(--funnel-heading-color, var(--funnel-text)) !important;
  font-family: var(--funnel-heading-family, inherit) !important;
  font-weight: 720 !important;
  letter-spacing: -.025em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}
#db-components [data-component="subheadline"], #db-components [data-component="subheadline"] * {
  color: var(--funnel-text-muted) !important;
}
#db-components [data-component="column"] [data-component="headline"],
#db-components [data-component="column"] [data-component="headline"] * {
  color: var(--funnel-accent) !important;
}
#db-components p, #db-components li { color: var(--funnel-text-muted); }
#db-components a { text-underline-offset: .2em; }
#db-components [data-component="section"] {
  padding-block: var(--funnel-section-space) !important;
  background: var(--funnel-canvas) !important;
}
#db-components [data-component="section"][class*="bg-gray"] {
  background: var(--funnel-surface-muted) !important;
}
#db-components [data-component="section"] > div { max-width: var(--funnel-content-width) !important; }
#db-components [data-component="row"], #db-components [data-component="grid"] { gap: clamp(1rem, 3vw, 2rem) !important; }
#db-components [data-component="divider"] { border-color: var(--funnel-border) !important; opacity: 1 !important; }

/* Shared responsive layout and motion policy for every v2 component. */
@media (max-width: 639px) {
  #db-components { font-size: .975rem; }
  #db-components [data-component] { max-width: 100%; }
  #db-components [data-component="button"] a,
  #db-components [data-component="one_click_upsell"] button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #db-components *, #db-components *::before, #db-components *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}