/* Blissgrowth "Connect with us" form — visual match of the Typeform embed it
   replaces (theme: Crimson Text, #3B365E on #FAF0E5, small corners, centered).
   Sizes are the Typeform's computed values at desktop / mobile (<768px). */
.bgf {
  --bgf-ink: #3b365e;
  --bgf-bg: #faf0e5;
  --bgf-muted: #615b79;
  --bgf-placeholder: #c1b8bd;
  --bgf-choice: rgba(59, 54, 94, 0.07);
  --bgf-choice-hover: rgba(59, 54, 94, 0.13);
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: var(--bgf-bg);
  color: var(--bgf-ink);
  font-family: "Crimson Text", Georgia, serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.bgf *, .bgf *::before, .bgf *::after { box-sizing: border-box; }
/* Webflow's stylesheet sets fonts/sizes on h2, p etc. directly; keep the form's own */
.bgf h2, .bgf p, .bgf a, .bgf button, .bgf input, .bgf textarea, .bgf select { font-family: inherit; }

.bgf-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 10% 40px; /* Typeform sits content ~16px above true centre */
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.bgf-screen::before, .bgf-screen::after { content: ""; flex: 1 0 0; } /* vertical centering that still scrolls */
.bgf-screen.is-entering { opacity: 0; transform: translateY(40px); }
.bgf-screen.is-entering.is-back { transform: translateY(-40px); }
.bgf-screen.is-leaving { opacity: 0; transform: translateY(-40px); pointer-events: none; }
.bgf-screen.is-leaving.is-back { transform: translateY(40px); }
.bgf-inner { width: 100%; max-width: 720px; margin: 0 auto; }

/* welcome + endings */
.bgf-hero-title { margin: 0; font-size: 32px; line-height: 40px; letter-spacing: -0.75px; font-weight: 400; white-space: pre-line; }
.bgf-hero-desc { margin: 8px 0 0; font-size: 18px; line-height: 24px; color: var(--bgf-muted); white-space: pre-line; }

/* question */
.bgf-q-title { margin: 0; font-size: 26px; line-height: 34px; letter-spacing: -0.5px; font-weight: 400; }
.bgf-num {
  display: inline-block; vertical-align: 7px; margin-right: 10px;
  min-width: 16px; padding: 0 4px; border-radius: 5px 3px;
  background: var(--bgf-ink); color: var(--bgf-bg);
  font-size: 11px; line-height: 19px; font-weight: 700; letter-spacing: 0;
}
.bgf-req { padding-left: 2px; }
.bgf-q-desc { margin: 8px 0 0; font-size: 18px; line-height: 24px; color: var(--bgf-muted); white-space: pre-line; }
.bgf-q-desc a { color: inherit; text-decoration: underline; }
.bgf-field { margin-top: 32px; }

.bgf-input, .bgf-textarea {
  display: block; width: 100%; margin: 0;
  border: 0; border-radius: 0; outline: 0; background: transparent;
  color: var(--bgf-ink); font: inherit; font-size: 26px; line-height: 34px; letter-spacing: -0.5px;
  padding: 8px 0; text-align: left;
  box-shadow: rgba(59, 54, 94, 0.6) 0 1px 0 0;
  transition: box-shadow 0.15s ease;
}
.bgf-textarea { padding: 6px 0; resize: none; overflow: hidden; min-height: 46px; }
.bgf-input:focus, .bgf-textarea:focus { box-shadow: var(--bgf-ink) 0 2px 0 0; }
.bgf-input::placeholder, .bgf-textarea::placeholder { color: var(--bgf-placeholder); opacity: 1; }

.bgf-phone { display: flex; gap: 12px; align-items: stretch; }
.bgf-country {
  flex: 0 0 auto; max-width: 42%; border: 0; border-radius: 0; background: transparent; color: var(--bgf-ink);
  font: inherit; font-size: 22px; padding: 8px 4px 8px 0; box-shadow: rgba(59, 54, 94, 0.6) 0 1px 0 0; outline: 0; cursor: pointer;
}
.bgf-country:focus { box-shadow: var(--bgf-ink) 0 2px 0 0; }

/* choices */
.bgf-choices { display: inline-flex; flex-direction: column; gap: 8px; width: max-content; min-width: 168px; max-width: 100%; text-align: left; }
.bgf-choice {
  display: flex; align-items: flex-start; gap: 4px; width: 100%; min-height: 44px; margin: 0;
  padding: 6px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--bgf-choice); box-shadow: rgba(59, 54, 94, 0.1) 0 0 0 1px;
  font: inherit; color: var(--bgf-ink); text-align: left;
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
}
.bgf-choice:hover { background: var(--bgf-choice-hover); }
.bgf-choice:focus-visible { outline: 2px solid var(--bgf-ink); outline-offset: 2px; }
.bgf-choice[aria-checked="true"] { box-shadow: var(--bgf-ink) 0 0 0 2px; }
.bgf-choice[aria-checked="true"].is-blink { animation: bgf-blink 0.25s steps(2) 2; }
@keyframes bgf-blink { 50% { background: var(--bgf-choice-hover); } }
.bgf-key {
  flex: 0 0 24px; height: 24px; margin-top: 4px; /* lines up with the first line of the label */
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(59, 54, 94, 0.24); border-radius: 4px; background: rgba(250, 240, 229, 0.4);
  font-size: 12px; line-height: 16px; font-weight: 600;
}
.bgf-choice[aria-checked="true"] .bgf-key { background: var(--bgf-ink); border-color: var(--bgf-ink); color: var(--bgf-bg); }
.bgf-choice-label { padding: 4px; font-size: 18px; line-height: 24px; opacity: 0.9; }
.bgf-other-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--bgf-ink);
  font: inherit; font-size: 18px; line-height: 24px; padding: 4px; box-shadow: rgba(59, 54, 94, 0.6) 0 1px 0 0;
}

/* actions */
.bgf-actions { margin-top: 32px; }
.bgf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--bgf-ink); color: #fff; text-decoration: none;
  font: inherit; font-size: 18px; line-height: 24px; font-weight: 600;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.bgf-btn:hover { background: #4a446f; color: #fff; }
.bgf-btn:focus-visible { outline: 2px solid var(--bgf-ink); outline-offset: 3px; }
.bgf-btn[disabled] { cursor: progress; opacity: 0.68; }
.bgf-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: bgf-spin .7s linear infinite; }
@keyframes bgf-spin { to { transform: rotate(360deg); } }

/* error pill */
.bgf-error {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 24px;
  padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(248, 205, 216, 0.7);
  background: rgba(248, 228, 227, 0.6); color: #913b21;
  font-size: 14px; line-height: 18px; text-align: left;
}
.bgf-error[hidden] { display: none; }
/* desktop: like Typeform, the error message takes the OK button's place until the answer changes */
@media (min-width: 768px) {
  .bgf-field.has-error + .bgf-actions { display: none; }
}
.bgf-error svg { flex: 0 0 auto; }

.bgf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bgf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* mobile: badge above title, smaller type, full-width button pinned to the bottom */
@media (max-width: 767px) {
  .bgf-screen { padding: 24px 32px 90px; }
  .bgf-screen.is-plain { padding-bottom: 24px; }
  .bgf-hero-title { font-size: 26px; line-height: 32px; letter-spacing: -0.5px; }
  .bgf-hero-desc { font-size: 16px; line-height: 22px; }
  .bgf-q-title { font-size: 20px; line-height: 26px; letter-spacing: -0.25px; }
  .bgf-num { display: table; margin: 0 auto 12px; vertical-align: baseline; }
  .bgf-q-desc { font-size: 16px; line-height: 22px; }
  .bgf-field { margin-top: 24px; }
  .bgf-input, .bgf-textarea { font-size: 20px; line-height: 26px; letter-spacing: -0.25px; }
  .bgf-country { font-size: 18px; }
  .bgf-choices { display: flex; width: 100%; }
  .bgf-actions { position: absolute; left: 32px; right: 32px; bottom: 24px; margin: 0; }
  /* long choice lists fade out above the pinned button, as in Typeform */
  .bgf-actions::before {
    content: ""; position: absolute; left: -32px; right: -32px; bottom: -24px; height: 120px; z-index: -1;
    background: linear-gradient(rgba(250, 240, 229, 0), var(--bgf-bg) 60%); pointer-events: none;
  }
  .bgf-actions { z-index: 1; }
  .bgf-actions .bgf-btn { width: 100%; height: 42px; font-size: 20px; line-height: 26px; letter-spacing: -0.25px; }
  .bgf-screen.is-plain .bgf-actions { position: static; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bgf-screen { transition: none; }
  .bgf-choice[aria-checked="true"].is-blink { animation: none; }
}