:root {
  --bg-0: #12091f;
  --bg-1: #18102d;
  --bg-2: #21143b;
  --bg-3: #302052;
  --ember-300: #f6b3dc;
  --ember-400: #f01992;
  --ember-500: #bd1575;
  --ember-soft: rgba(240,25,146,.13);
  --mist-300: #9beaf4;
  --mist-400: #22d3ee;
  --mist-soft: rgba(34,211,238,.12);
  --text-hi: #fff;
  --text-mid: rgba(255,255,255,.74);
  --text-low: rgba(255,255,255,.49);
  --text-on-ember: #fff;
}

body.bua-anchor-app {
  position: relative;
  overflow-x: hidden;
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 4%, rgba(240,25,146,.20), transparent 32rem),
    radial-gradient(circle at 94% 32%, rgba(34,211,238,.13), transparent 34rem),
    linear-gradient(145deg, #12091f 0%, #20103b 48%, #0c1730 100%);
  background-attachment: fixed;
}

body.bua-anchor-app::before,
body.bua-anchor-app::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 50%;
}

body.bua-anchor-app::before { width: 39rem; height: 12rem; top: 11%; right: -18rem; transform: rotate(-20deg); }
body.bua-anchor-app::after { width: 31rem; height: 9rem; bottom: 8%; left: -17rem; transform: rotate(18deg); }

.bua-anchor-app .wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 76rem);
  max-width: none;
}

.bua-anchor-app .chathead {
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(#12091f 68%, transparent);
}

.bua-anchor-app .chathead .who b { letter-spacing: .02em; }

.bua-anchor-app .doorway {
  min-height: min(43rem, calc(100vh - 6rem));
  padding: clamp(1.5rem, 4vh, 3.5rem) 0 2rem;
}

.bua-anchor-app .anchor-door-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(25rem, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
  width: 100%;
}

.bua-anchor-app .anchor-door-copy { position: relative; z-index: 2; }

.bua-anchor-app .hook,
.bua-anchor-app .prechat h1 {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  color: #fff;
  font-size: clamp(3.2rem, 6vw, 5.7rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.065em;
  background: linear-gradient(100deg, #fff 18%, #f6b3dc 48%, #94e9f3 75%, #fff 92%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bua-anchor-app .hooksub {
  max-width: 35rem;
  margin: 1.1rem 0 1.7rem;
  color: rgba(255,255,255,.72);
  font-size: clamp(1rem,1.6vw,1.12rem);
  line-height: 1.65;
}

.bua-anchor-app .doors { gap: 1rem; }

.bua-anchor-app .door {
  min-height: 7.2rem;
  padding: 1.25rem 1.35rem;
  border-color: rgba(255,255,255,.12);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 18px 42px rgba(0,0,0,.18);
}

.bua-anchor-app .door--listen {
  background: radial-gradient(circle at 8% 0%, rgba(240,25,146,.13), transparent 58%), rgba(255,255,255,.04);
}

.bua-anchor-app .door--work {
  background: radial-gradient(circle at 8% 0%, rgba(34,211,238,.12), transparent 58%), rgba(255,255,255,.04);
}

.bua-anchor-app .door-title {
  color: #fff;
  font-size: clamp(1.08rem,1.7vw,1.28rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.bua-anchor-app .door--listen .door-ico { background: rgba(240,25,146,.13); }
.bua-anchor-app .door--listen .door-ico svg { stroke: #f6b3dc; }
.bua-anchor-app .door--work .door-ico { background: rgba(34,211,238,.12); }
.bua-anchor-app .door--work .door-ico svg { stroke: #9beaf4; }
.bua-anchor-app .door--listen .door-cta { color: #f6b3dc; }
.bua-anchor-app .door--work .door-cta { color: #9beaf4; }

.bua-anchor-app .anchor-door-visual {
  position: relative;
  min-width: 0;
  margin: 0;
}

.bua-anchor-app .anchor-door-visual::before {
  content: "";
  position: absolute;
  inset: 10% 5%;
  border: 1px solid rgba(34,211,238,.16);
  border-radius: 48% 52% 44% 56%;
}

.bua-anchor-app .anchor-door-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 43rem);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.34));
}

.bua-anchor-app .anchor-door-visual figcaption {
  position: relative;
  z-index: 2;
  margin-top: -1rem;
  color: rgba(255,255,255,.48);
  font-size: .76rem;
  font-style: italic;
  text-align: center;
}

.bua-anchor-app #view-confirm,
.bua-anchor-app #view-connecting,
.bua-anchor-app #view-chat {
  width: min(100%, 620px);
  margin-inline: auto;
}

.bua-anchor-app .prechat h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); }
.bua-anchor-app .btn { color: #fff; background: linear-gradient(115deg,#c9197b,#f01992 50%,#8c42d7); }
.bua-anchor-app .bubble.me { background: rgba(240,25,146,.12); border-color: rgba(240,25,146,.22); }
.bua-anchor-app .composer .row:focus-within { border-color: rgba(34,211,238,.42); }
.bua-anchor-app .sendbtn { color: #fff; background: linear-gradient(135deg,#f01992,#8c42d7); }

@media (max-width: 760px) {
  .bua-anchor-app .wrap { width: min(100% - 1.1rem,76rem); }
  .bua-anchor-app .anchor-door-grid { grid-template-columns: 1fr; gap: 0; }
  .bua-anchor-app .hook { font-size: clamp(2.9rem,14vw,4.2rem); }
  .bua-anchor-app .anchor-door-visual { max-height: none; margin: 0; overflow: visible; }
  .bua-anchor-app .anchor-door-visual img { width: min(100%, 30rem); margin: 0 auto; }
  .bua-anchor-app .anchor-door-visual figcaption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bua-anchor-app *, .bua-anchor-app *::before, .bua-anchor-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}