@import url('/brand-fonts/v1/fonts.css');
/* Opt in only for versioned brands. Legacy packet renderers retain their original styles. */
.studio-brand-surface {
  background: var(--studio-page) !important;
  color: var(--studio-body) !important;
  font-family: var(--studio-body-font) !important;
}
.studio-brand-surface :is(h1, h2, h3, h4) {
  font-family: var(--studio-heading-font) !important;
  color: var(--studio-heading) !important;
}
.studio-brand-surface :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  font-family: var(--studio-body-font);
  color: var(--studio-body);
  background: var(--studio-surface);
  border: var(--studio-field-width) solid var(--studio-border);
  border-radius: var(--studio-radius);
  min-height: 44px;
}
.studio-brand-surface :is(button[type='submit'], .studio-brand-button) {
  background: var(--studio-button-bg) !important;
  color: var(--studio-button-fg) !important;
  border: 1px solid var(--studio-button);
  border-radius: var(--studio-radius);
  min-height: 44px;
}
.studio-brand-surface .studio-brand-card {
  background: var(--studio-surface) !important;
  border-color: var(--studio-border) !important;
  border-radius: var(--studio-radius) !important;
}
.studio-brand-surface a:not(.studio-brand-button) {
  color: var(--studio-link);
}
.studio-brand-surface :is(.text-stone-500, .text-stone-600, footer) {
  color: var(--studio-muted) !important;
}
.studio-brand-surface :is(.text-stone-700, .text-stone-800) {
  color: var(--studio-body) !important;
}
.studio-brand-surface :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid var(--studio-link);
  outline-offset: 3px;
}

.studio-brand-surface [data-brand-action='true']:not([role='checkbox']) {
  background: var(--studio-button-bg) !important;
  color: var(--studio-button-fg) !important;
  border: 1px solid var(--studio-button);
  border-radius: var(--studio-radius);
  min-height: 44px;
}
.studio-brand-surface [data-brand-card='true'] {
  background: var(--studio-surface) !important;
  border-color: var(--studio-border) !important;
  border-radius: var(--studio-radius) !important;
}
.studio-brand-surface .focusflow-crm-form {
  background: var(--studio-surface) !important;
  color: var(--studio-body) !important;
  font-family: var(--studio-body-font) !important;
  border-radius: var(--studio-radius) !important;
  max-width: none;
}
.studio-brand-surface
  :is(.focusflow-crm-form small, .focusflow-crm-description, .focusflow-crm-privacy, .intro, .footer) {
  color: var(--studio-muted) !important;
}
.studio-brand-surface .focusflow-form-header {
  font-family: var(--studio-body-font);
}