:root {
  --vex-navy: #0f1f3a;
  --vex-blue: #2f66ed;
  --vex-teal: #18b7ad;
  --vex-bg: #f3f7fd;
  --vex-surface: #ffffff;
  --vex-soft: #f7f9fd;
  --vex-line: #dfe7f2;
  --vex-muted: #687d9a;
  --vex-shadow: 0 24px 70px rgba(28, 55, 96, .14);
}

body.page-voice-experience {
  background: var(--vex-bg);
  color: var(--vex-navy);
}

body.vex-modal-open {
  overflow: hidden;
}

.vex-page [hidden] {
  display: none !important;
}

.vex-page {
  min-height: 100vh;
  color: var(--vex-navy);
  background:
    radial-gradient(circle at 90% 4%, rgba(24, 183, 173, .10), transparent 26rem),
    radial-gradient(circle at 8% 14%, rgba(47, 102, 237, .10), transparent 29rem),
    linear-gradient(180deg, #f8fbff 0%, #edf3fb 100%);
}

.vex-main {
  min-height: 100vh;
}

.vex-experience {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 1px);
  padding: 112px 22px 34px;
}

.vex-layout {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  width: min(1240px, 100%);
  margin: 0 auto;
}

.vex-intro-copy {
  max-width: 560px;
}

.vex-kicker,
.vex-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  color: #5577cb;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.vex-kicker::before {
  width: 28px;
  height: 1px;
  content: "";
  background: currentColor;
}

.vex-eyebrow .material-symbols-outlined {
  font-size: 18px;
}

.vex-intro-copy h1 {
  margin: 1.35rem 0 0;
  color: var(--vex-navy);
  font-size: clamp(3.2rem, 5.6vw, 6rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.065em;
}

.vex-intro-copy h1 span {
  display: block;
  color: var(--vex-blue);
}

.vex-intro-copy > p {
  max-width: 540px;
  margin: 1.55rem 0 0;
  color: #5e7390;
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.75;
}

.vex-mobile-start {
  display: none;
}

.vex-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: .62rem;
  margin-top: 1.65rem;
}

.vex-trust-row > span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .55rem .75rem;
  color: #234263;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid rgba(47, 102, 237, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
}

.vex-trust-row .material-symbols-outlined {
  color: var(--vex-teal);
  font-size: 16px;
}

.vex-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1.8rem;
}

.vex-proof > div {
  padding-top: .85rem;
  border-top: 1px solid rgba(15, 31, 58, .12);
}

.vex-proof strong,
.vex-proof span {
  display: block;
}

.vex-proof strong {
  margin-bottom: .3rem;
  color: var(--vex-navy);
  font-size: .82rem;
  font-weight: 900;
}

.vex-proof span {
  color: #7789a1;
  font-size: .72rem;
  line-height: 1.45;
}

.vex-console {
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(31, 61, 105, .11);
  border-radius: 30px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--vex-shadow);
}

.vex-console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--vex-line);
  background: linear-gradient(180deg, #fbfdff, #f1f6fd);
}

.vex-agent {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.vex-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vex-blue), var(--vex-teal));
  box-shadow: 0 10px 22px rgba(47, 102, 237, .23);
}

.vex-avatar::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  content: "";
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--vex-teal);
}

.vex-avatar .material-symbols-outlined {
  font-size: 22px;
}

.vex-agent strong,
.vex-agent span {
  display: block;
}

.vex-agent strong {
  color: var(--vex-navy);
  font-size: .88rem;
  font-weight: 900;
}

.vex-agent span {
  margin-top: .08rem;
  color: var(--vex-muted);
  font-size: .72rem;
  font-weight: 650;
}

.vex-private {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #284361;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vex-private .material-symbols-outlined {
  font-size: 16px;
}

.vex-stage {
  position: relative;
}

.vex-panel {
  display: none;
  min-height: 470px;
  padding: clamp(28px, 4vw, 46px);
}

.vex-panel.is-active {
  display: block;
  animation: vex-panel-in .22s ease-out;
}

@keyframes vex-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.vex-panel h2 {
  max-width: 680px;
  margin: .85rem 0 0;
  color: var(--vex-navy);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
}

.vex-panel > p,
.vex-result-head p,
.vex-in-call p,
.vex-paid p {
  max-width: 690px;
  margin: .85rem 0 0;
  color: var(--vex-muted);
  font-size: .94rem;
  line-height: 1.62;
}

.vex-panel > small {
  display: block;
  margin-top: .8rem;
  color: #8090a5;
  font-size: .72rem;
}

.vex-primary,
.vex-secondary,
.vex-edit-trigger {
  font-family: inherit;
  cursor: pointer;
}

.vex-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  margin-top: 1.35rem;
  padding: .85rem 1.2rem;
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--vex-blue), var(--vex-teal));
  box-shadow: 0 15px 32px rgba(47, 102, 237, .22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.vex-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(47, 102, 237, .26);
}

.vex-primary:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.vex-primary .material-symbols-outlined {
  font-size: 19px;
}

.vex-loader-orb {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 1.7rem auto 1.2rem;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vex-blue), var(--vex-teal));
  box-shadow: 0 16px 42px rgba(47, 102, 237, .24);
  animation: vex-loader-pulse 1.7s ease-in-out infinite;
}

.vex-loader-orb .material-symbols-outlined {
  font-size: 35px;
}

@keyframes vex-loader-pulse {
  50% { transform: scale(1.06); box-shadow: 0 22px 48px rgba(47, 102, 237, .28); }
}

.vex-progress-list {
  display: grid;
  gap: .55rem;
  max-width: 390px;
  margin: 0 auto;
}

.vex-progress-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .85rem;
  color: #72849c;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid var(--vex-line);
  border-radius: 12px;
  background: var(--vex-soft);
}

.vex-progress-list .material-symbols-outlined {
  color: #b7c4d4;
  font-size: 18px;
}

.vex-progress-list > div.is-complete {
  color: #214161;
  border-color: rgba(24, 183, 173, .18);
  background: rgba(24, 183, 173, .07);
}

.vex-progress-list > div.is-complete .material-symbols-outlined {
  color: var(--vex-teal);
}

.vex-call-card {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: .8rem;
  margin-top: 1.35rem;
}

.vex-call-card > div {
  padding: .9rem 1rem;
  border: 1px solid var(--vex-line);
  border-radius: 16px;
  background: var(--vex-soft);
}

.vex-call-card span,
.vex-call-card a,
.vex-call-card strong {
  display: block;
}

.vex-call-card span {
  margin-bottom: .25rem;
  color: #71849e;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.vex-call-card a {
  color: var(--vex-navy);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -.03em;
}

.vex-call-card strong {
  color: var(--vex-blue);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.vex-in-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 375px;
  text-align: center;
}

.vex-canvas-orb {
  position: relative;
  width: clamp(168px, 19vw, 220px);
  aspect-ratio: 1;
  margin: .35rem auto 1.15rem;
  border-radius: 50%;
  isolation: isolate;
}

.vex-canvas-orb::before {
  position: absolute;
  inset: 9%;
  z-index: -1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 111, 238, .21), rgba(91, 78, 245, .08) 48%, transparent 72%);
  filter: blur(24px);
  transform: scale(1.2);
  animation: vex-canvas-orb-aura 4.4s ease-in-out infinite;
}

.vex-canvas-orb__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 24px 34px rgba(45, 87, 186, .18));
}

.vex-canvas-orb__fallback {
  position: absolute;
  inset: 19%;
  z-index: -1;
  border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
  background:
    radial-gradient(circle at 32% 27%, rgba(255,255,255,.9), transparent 10%),
    radial-gradient(circle at 38% 35%, rgba(255,255,255,.24), transparent 30%),
    conic-gradient(from 205deg, #1f70ef, #6757f4, #14b8a6, #35c8ff, #1f70ef);
  box-shadow: 0 19px 54px rgba(37, 99, 235, .28);
  animation: vex-canvas-orb-fallback 7s ease-in-out infinite;
}

.vex-canvas-orb.is-canvas-ready .vex-canvas-orb__fallback {
  opacity: 0;
}

@keyframes vex-canvas-orb-aura {
  0%, 100% { opacity: .72; transform: scale(1.12); }
  50% { opacity: 1; transform: scale(1.28); }
}

@keyframes vex-canvas-orb-fallback {
  0%, 100% { transform: rotate(-4deg) scale(1); border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; }
  50% { transform: rotate(5deg) scale(1.045); border-radius: 54% 46% 45% 55% / 46% 54% 47% 53%; }
}

@media (prefers-reduced-motion: reduce) {
  .vex-canvas-orb::before,
  .vex-canvas-orb__fallback {
    animation: none;
  }
}

.vex-call-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.4rem;
  padding: .55rem .78rem;
  color: #244b72;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  border: 1px solid rgba(24, 183, 173, .18);
  border-radius: 999px;
  background: rgba(24, 183, 173, .08);
}

.vex-call-pill .material-symbols-outlined {
  color: var(--vex-teal);
  font-size: 17px;
}

.vex-in-call h2 {
  margin-top: .9rem;
}

.vex-keep-open {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
  padding: .58rem .82rem;
  color: #526a86;
  font-size: .78rem;
  font-weight: 750;
  border: 1px solid rgba(47, 102, 237, .11);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 26px rgba(31, 66, 112, .06);
  backdrop-filter: blur(8px);
}

.vex-keep-open .material-symbols-outlined {
  color: var(--vex-blue);
  font-size: 17px;
}

/* Result mode: full width, no commercial column, compact summary */
.vex-page.is-result-mode .vex-layout {
  grid-template-columns: minmax(0, 1fr);
  width: min(1160px, 100%);
}

.vex-page.is-result-mode .vex-intro-copy {
  display: none;
}

.vex-page.is-result-mode .vex-console {
  width: 100%;
}

.vex-page.is-result-mode .vex-panel {
  min-height: 0;
}

.vex-panel--result {
  padding: 24px 28px 26px;
}

.vex-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
}

.vex-result-head h2 {
  margin-top: .45rem;
  font-size: clamp(1.8rem, 3.3vw, 2.85rem);
}

.vex-result-head p {
  margin-top: .4rem;
  font-size: .83rem;
}

.vex-edit-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex: 0 0 auto;
  min-height: 42px;
  padding: .65rem .85rem;
  color: #244464;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(47, 102, 237, .16);
  border-radius: 12px;
  background: #fff;
}

.vex-edit-trigger:hover {
  border-color: rgba(47, 102, 237, .3);
  background: #f8fbff;
}

.vex-edit-trigger .material-symbols-outlined {
  color: var(--vex-blue);
  font-size: 17px;
}

.vex-summary {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: .72rem;
  margin-top: 1rem;
}

.vex-summary-card {
  min-width: 0;
  padding: .78rem .85rem;
  border: 1px solid var(--vex-line);
  border-radius: 14px;
  background: var(--vex-soft);
}

.vex-summary-card--wide {
  grid-column: span 2;
}

.vex-summary-card--result {
  grid-column: span 1;
}

.vex-summary-card > span {
  display: block;
  margin-bottom: .25rem;
  color: #6b80a0;
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.vex-summary-card strong {
  display: block;
  overflow: hidden;
  color: var(--vex-navy);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vex-summary-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: .25rem 0 0;
  color: #687d98;
  font-size: .72rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vex-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
}

.vex-tags span {
  padding: .35rem .55rem;
  color: #244865;
  font-size: .62rem;
  font-weight: 800;
  border: 1px solid rgba(24, 183, 173, .14);
  border-radius: 999px;
  background: rgba(24, 183, 173, .07);
}

.vex-inline-feedback {
  margin-top: .7rem;
  padding: .65rem .8rem;
  color: #11605a;
  font-size: .75rem;
  font-weight: 750;
  border: 1px solid rgba(24, 183, 173, .18);
  border-radius: 11px;
  background: rgba(24, 183, 173, .08);
}

.vex-inline-feedback.is-error {
  color: #991b1b;
  border-color: rgba(239, 68, 68, .18);
  background: rgba(239, 68, 68, .08);
}

.vex-activation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-top: .8rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(47, 102, 237, .13);
  border-radius: 16px;
  background:
    radial-gradient(circle at 80% 30%, rgba(24, 183, 173, .10), transparent 15rem),
    linear-gradient(135deg, #f8fbff, #eef5ff);
}

.vex-price > span,
.vex-price > strong,
.vex-price > small {
  display: block;
}

.vex-price > span {
  color: #315273;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vex-price > strong {
  margin-top: .12rem;
  color: var(--vex-navy);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.035em;
}

.vex-price > strong small {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0;
}

.vex-price > small {
  margin-top: .12rem;
  color: #71829a;
  font-size: .64rem;
}

.vex-primary--checkout {
  min-width: 220px;
  margin: 0;
}

.vex-checkout-note {
  grid-column: 1 / -1;
  margin: -.25rem 0 0;
  color: #7d8fa6;
  font-size: .67rem;
}

.vex-panel--checkout {
  padding: 24px 28px 28px;
}

.vex-checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.vex-checkout-head h2 {
  margin-top: .4rem;
  font-size: 2rem;
}

.vex-checkout-head button {
  padding: .6rem .75rem;
  color: #37516f;
  font: inherit;
  font-size: .7rem;
  font-weight: 850;
  border: 1px solid var(--vex-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.vex-checkout-loading {
  padding: 2rem;
  color: #71839b;
  text-align: center;
}

.vex-checkout-error {
  display: none;
  margin: .7rem 0;
  padding: .75rem;
  color: #991b1b;
  font-size: .78rem;
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 10px;
  background: rgba(239,68,68,.07);
}

.vex-checkout-error.is-visible {
  display: block;
}

.vex-paid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  text-align: center;
}

.vex-paid__icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 1rem;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vex-blue), var(--vex-teal));
}

.vex-paid .vex-primary {
  margin-top: 1.2rem;
}

/* Compact edit modal */
.vex-modal[hidden] {
  display: none;
}

.vex-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.vex-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 45, .58);
  backdrop-filter: blur(8px);
}

.vex-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(860px, 100%);
  max-height: min(84vh, 720px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 35px 110px rgba(7, 22, 44, .34);
}

.vex-modal__head,
.vex-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 18px 22px;
}

.vex-modal__head {
  border-bottom: 1px solid var(--vex-line);
}

.vex-modal__head h2 {
  margin: .25rem 0 0;
  color: var(--vex-navy);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.035em;
}

.vex-modal__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #47617f;
  border: 1px solid var(--vex-line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

.vex-modal__body {
  display: grid;
  gap: .9rem;
  max-height: calc(min(84vh, 720px) - 154px);
  overflow: auto;
  padding: 18px 22px;
}

.vex-form-grid {
  display: grid;
  gap: .72rem;
}

.vex-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vex-form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vex-field-full {
  grid-column: 1 / -1;
}

.vex-form-grid label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.vex-form-grid label > span {
  color: #405b79;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.vex-form-grid input {
  width: 100%;
  min-height: 44px;
  padding: .7rem .8rem;
  color: var(--vex-navy);
  font: inherit;
  font-size: .84rem;
  border: 1px solid var(--vex-line);
  border-radius: 11px;
  background: #fbfdff;
  outline: none;
}

.vex-form-grid input:focus {
  border-color: rgba(47,102,237,.32);
  box-shadow: 0 0 0 3px rgba(47,102,237,.09);
  background: #fff;
}

.vex-modal__actions {
  justify-content: flex-end;
  border-top: 1px solid var(--vex-line);
  background: #f8fbff;
}

.vex-modal__actions .vex-primary,
.vex-modal__actions .vex-secondary {
  min-height: 44px;
  margin: 0;
}

.vex-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1rem;
  color: #35516f;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--vex-line);
  border-radius: 12px;
  background: #fff;
}

.vex-toast {
  position: fixed;
  z-index: 140;
  right: 22px;
  bottom: 22px;
  max-width: min(360px, calc(100% - 44px));
  padding: .85rem 1rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 750;
  border-radius: 12px;
  background: #10233f;
  box-shadow: 0 18px 42px rgba(8, 24, 47, .22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}

.vex-toast.is-visible {
  opacity: 1;
  transform: none;
}

.vex-noscript {
  padding: 1rem;
  color: #fff;
  background: #991b1b;
  text-align: center;
}

@media (max-width: 1020px) {
  .vex-experience {
    align-items: flex-start;
  }

  .vex-layout {
    grid-template-columns: 1fr;
  }

  .vex-intro-copy {
    max-width: 760px;
  }

  .vex-intro-copy h1 {
    font-size: clamp(3.2rem, 10vw, 5.7rem);
  }

  .vex-console {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .vex-experience {
    padding: 98px 12px 24px;
  }

  .vex-intro-copy {
    padding: 0 5px;
  }

  .vex-intro-copy h1 {
    font-size: clamp(3rem, 14vw, 4.6rem);
  }

  .vex-mobile-start {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.25rem;
    padding: .78rem 1rem;
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--vex-blue), var(--vex-teal));
  }

  .vex-proof {
    grid-template-columns: 1fr;
  }

  .vex-panel {
    min-height: 420px;
    padding: 24px 20px;
  }

  .vex-panel--result {
    padding: 20px;
  }

  .vex-result-head {
    flex-direction: column;
  }

  .vex-edit-trigger {
    width: 100%;
  }

  .vex-summary {
    grid-template-columns: 1fr;
  }

  .vex-summary-card--wide,
  .vex-summary-card--result {
    grid-column: auto;
  }

  .vex-activation {
    grid-template-columns: 1fr;
  }

  .vex-primary--checkout {
    width: 100%;
  }

  .vex-call-card {
    grid-template-columns: 1fr;
  }

  .vex-form-grid--3,
  .vex-form-grid--2 {
    grid-template-columns: 1fr;
  }

  .vex-field-full {
    grid-column: auto;
  }
}

@media (max-height: 760px) and (min-width: 1021px) {
  .vex-experience {
    align-items: flex-start;
    padding-top: 96px;
    padding-bottom: 18px;
  }

  .vex-page.is-result-mode .vex-panel--result {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .vex-page.is-result-mode .vex-result-head h2 {
    font-size: 2.3rem;
  }

  .vex-page.is-result-mode .vex-summary-card {
    padding: .65rem .75rem;
  }

  .vex-page.is-result-mode .vex-activation {
    padding: .7rem .9rem;
  }
}

/* 2026-07-29: dedicated in-call mode, inline editing and reset */
body.vex-call-active {
  overflow: hidden;
}

body.vex-call-active > header,
body.vex-call-active > footer {
  display: none !important;
}

.vex-page.is-call-mode {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 46%, rgba(47, 102, 237, .14), transparent 24rem),
    radial-gradient(circle at 55% 54%, rgba(24, 183, 173, .10), transparent 22rem),
    #f5f8fd;
}

.vex-page.is-call-mode .vex-main,
.vex-page.is-call-mode .vex-experience {
  min-height: 100vh;
}

.vex-page.is-call-mode .vex-experience {
  display: block;
  padding: 0;
}

.vex-page.is-call-mode .vex-layout {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

.vex-page.is-call-mode .vex-intro-copy,
.vex-page.is-call-mode .vex-console-bar {
  display: none !important;
}

.vex-page.is-call-mode .vex-console {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vex-page.is-call-mode .vex-panel {
  min-height: 100vh;
  padding: 0;
}

.vex-page.is-call-mode .vex-in-call {
  display: flex;
  min-height: 100vh;
  padding: 24px;
}

.vex-page.is-call-mode .vex-in-call h2 {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 4vw, 3.35rem);
  text-align: center;
}

.vex-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.vex-reset-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: fit-content;
  margin-top: .8rem;
  color: #5f7390;
  font-size: .68rem;
  font-weight: 850;
  text-decoration: none;
}

.vex-reset-link:hover {
  color: var(--vex-blue);
}

.vex-reset-link .material-symbols-outlined {
  font-size: 16px;
}

.vex-summary-view {
  min-width: 0;
}

.vex-summary-edit {
  display: none;
  gap: .45rem;
}

.vex-page.is-editing .vex-summary-view {
  display: none;
}

.vex-page.is-editing .vex-summary-edit {
  display: grid;
}

.vex-page.is-editing .vex-activation {
  display: none;
}

.vex-summary-edit label {
  display: grid;
  gap: .22rem;
  min-width: 0;
}

.vex-summary-edit label > span {
  color: #607792;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vex-summary-edit input,
.vex-summary-edit textarea {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: .5rem .62rem;
  color: var(--vex-navy);
  font: inherit;
  font-size: .74rem;
  line-height: 1.35;
  border: 1px solid #d7e1ee;
  border-radius: 9px;
  background: #fff;
  resize: vertical;
}

.vex-summary-edit textarea {
  min-height: 52px;
}

.vex-summary-edit input:focus,
.vex-summary-edit textarea:focus {
  outline: none;
  border-color: rgba(47, 102, 237, .42);
  box-shadow: 0 0 0 3px rgba(47, 102, 237, .10);
}

.vex-page.is-editing .vex-summary-card {
  background: #fbfdff;
  border-color: rgba(47, 102, 237, .18);
}

.vex-inline-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .75rem;
}

.vex-inline-edit-actions .vex-primary,
.vex-inline-edit-actions .vex-secondary {
  min-height: 40px;
  margin: 0;
  padding: .65rem .9rem;
}

.vex-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .65rem .9rem;
  color: #3c5572;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--vex-line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

@media (max-width: 760px) {
  .vex-result-actions {
    width: 100%;
  }

  .vex-edit-trigger,
  .vex-reset-link--button {
    flex: 1 1 auto;
  }

  .vex-inline-edit-actions {
    align-items: stretch;
  }

  .vex-inline-edit-actions .vex-primary,
  .vex-inline-edit-actions .vex-secondary {
    flex: 1 1 0;
  }
}

body.vex-call-active #ic-cookie-banner,
body.vex-call-active #ic-cookie-settings,
body.vex-call-active #ic-cookie-reopen {
  display: none !important;
}

@media (max-width: 640px) {
}

/* Continuity flow for interrupted or incomplete calls */
.vex-call-live-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.vex-call-live-state[hidden],
.vex-continuity[hidden],
.vex-continuity-actions[hidden],
.vex-continuity-form[hidden],
.vex-continuity-success[hidden],
.vex-call-help[hidden] {
  display: none !important;
}

.vex-call-help {
  margin-top: .85rem;
  padding: .35rem .4rem;
  color: #71839b;
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  border: 0;
  border-bottom: 1px solid rgba(47, 102, 237, .16);
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.vex-call-help:hover {
  color: var(--vex-blue);
  border-color: rgba(47, 102, 237, .38);
}

.vex-continuity {
  width: min(720px, calc(100vw - 36px));
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(47, 102, 237, .13);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 0%, rgba(24, 183, 173, .10), transparent 16rem),
    linear-gradient(160deg, rgba(255,255,255,.98), rgba(244,248,255,.98));
  box-shadow: 0 26px 80px rgba(32, 68, 121, .14);
  text-align: left;
}

.vex-continuity h2 {
  margin: .55rem 0 0;
  color: var(--vex-navy);
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-align: left !important;
}

.vex-continuity > p {
  max-width: 600px;
  margin: .7rem 0 0;
  color: #667b96;
  font-size: .92rem;
  line-height: 1.58;
}

.vex-continuity-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: .65rem;
  margin-top: 1.25rem;
}

.vex-continuity-actions .vex-primary,
.vex-continuity-actions .vex-secondary {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: .72rem .8rem;
  font-size: .75rem;
}

.vex-continuity-form {
  margin-top: 1.2rem;
  padding: 1rem;
  border: 1px solid var(--vex-line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
}

.vex-continuity-form > strong {
  display: block;
  color: var(--vex-navy);
  font-size: 1rem;
  font-weight: 900;
}

.vex-rating {
  display: flex;
  gap: .35rem;
  margin: .8rem 0 .9rem;
}

.vex-rating button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #c6d0dc;
  border: 1px solid rgba(40, 68, 105, .10);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
}

.vex-rating button:hover,
.vex-rating button.is-selected {
  color: #f5a623;
  border-color: rgba(245, 166, 35, .24);
  background: rgba(245, 166, 35, .08);
  transform: translateY(-1px);
}

.vex-rating .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
  font-size: 23px;
}

.vex-continuity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .85rem;
}

.vex-continuity-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.vex-continuity-field > span {
  color: #536b88;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.vex-continuity-field input,
.vex-continuity-field textarea,
.vex-continuity-field select {
  width: 100%;
  min-height: 44px;
  padding: .68rem .75rem;
  color: var(--vex-navy);
  font: inherit;
  font-size: .82rem;
  border: 1px solid rgba(40, 68, 105, .12);
  border-radius: 11px;
  background: #fff;
  outline: none;
}

.vex-continuity-field textarea {
  min-height: 74px;
  resize: vertical;
}

.vex-continuity-field input:focus,
.vex-continuity-field textarea:focus,
.vex-continuity-field select:focus {
  border-color: rgba(47, 102, 237, .38);
  box-shadow: 0 0 0 3px rgba(47, 102, 237, .09);
}

.vex-continuity-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  margin-top: .85rem;
}

.vex-primary--small {
  min-height: 42px;
  margin: 0;
  padding: .65rem .85rem;
  font-size: .76rem;
}

.vex-text-button {
  padding: .55rem .2rem;
  color: #647894;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.vex-text-button:hover {
  color: var(--vex-blue);
}

.vex-text-button--center {
  display: block;
  margin: .75rem auto 0;
}

.vex-continuity-success {
  margin-top: .85rem;
  padding: .72rem .8rem;
  color: #0f665f;
  font-size: .78rem;
  font-weight: 750;
  border: 1px solid rgba(24, 183, 173, .18);
  border-radius: 12px;
  background: rgba(24, 183, 173, .08);
}

.vex-continuity-success.is-error {
  color: #991b1b;
  border-color: rgba(239, 68, 68, .18);
  background: rgba(239, 68, 68, .07);
}

@media (max-width: 720px) {
  .vex-continuity {
    width: min(100%, calc(100vw - 24px));
    padding: 20px;
    border-radius: 22px;
  }

  .vex-continuity-actions,
  .vex-continuity-grid {
    grid-template-columns: 1fr;
  }

  .vex-continuity h2 {
    font-size: 1.9rem !important;
  }

  .vex-continuity-form-actions {
    justify-content: space-between;
  }
}

/* Partial result shown when the caller hangs up before Paula completes the flow. */
.vex-interrupted-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(218, 154, 36, .28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 249, 234, .98), rgba(255, 255, 255, .98));
  box-shadow: 0 14px 34px rgba(128, 91, 24, .08);
}

.vex-interrupted-summary[hidden] {
  display: none !important;
}

.vex-interrupted-summary__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: #9a640b;
  background: rgba(236, 177, 61, .16);
}

.vex-interrupted-summary__icon .material-symbols-outlined {
  font-size: 23px;
}

.vex-interrupted-summary__content strong {
  display: block;
  color: #2b2f38;
  font-size: 14px;
  line-height: 1.4;
}

.vex-interrupted-summary__content p {
  margin: 4px 0 0;
  color: #697386;
  font-size: 12px;
  line-height: 1.55;
}

.vex-interrupted-summary__actions {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vex-secondary--compact {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
}

.vex-interrupted-summary__actions button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
}

.vex-interrupted-summary__actions .material-symbols-outlined {
  font-size: 18px;
}

@media (max-width: 760px) {
  .vex-interrupted-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vex-interrupted-summary__actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .vex-interrupted-summary__actions button {
    flex: 1 1 150px;
    justify-content: center;
  }
}

/* 2026-07-30 · Hybrid desktop/PSTN and mobile/WebRTC experience */
.vex-permission-note {
  display: flex;
  align-items: center;
  gap: .42rem;
  max-width: 390px;
  margin-top: .85rem;
  color: #71839b;
  font-size: .74rem;
  line-height: 1.45;
}

.vex-permission-note .material-symbols-outlined {
  color: var(--vex-blue);
  font-size: 17px;
}

.vex-call-mode-copy {
  max-width: 480px;
  margin: .55rem auto 0;
  color: #667b96;
  font-size: .9rem;
  line-height: 1.55;
}

.vex-webrtc-controls {
  display: flex;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.15rem;
}

.vex-webrtc-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 48px;
  padding: .72rem 1rem;
  color: #274361;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  border: 1px solid rgba(47, 102, 237, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px rgba(34, 69, 119, .08);
  cursor: pointer;
}

.vex-webrtc-controls button.is-muted {
  color: #a33a2d;
  border-color: rgba(206, 70, 52, .16);
  background: rgba(255, 245, 243, .9);
}

.vex-webrtc-controls button.is-end {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #e45548, #cc2f3f);
}

.vex-webrtc-controls .material-symbols-outlined {
  font-size: 20px;
}

.vex-panel--fallback {
  align-content: center;
  text-align: center;
}

.vex-panel--fallback > p,
.vex-panel--fallback > small {
  max-width: 570px;
  margin-right: auto;
  margin-left: auto;
}

.vex-fallback-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1.35rem;
}

.vex-fallback-actions .vex-primary,
.vex-fallback-actions .vex-secondary {
  width: 100%;
  min-height: 52px;
  margin: 0;
}

.vex-canvas-orb {
  transition: transform .12s linear, filter .2s ease;
  transform: scale(var(--vex-orb-scale, 1));
}

.vex-canvas-orb[data-voice-mode="speaking"] {
  filter: saturate(1.16) brightness(1.04);
}

.vex-canvas-orb[data-voice-mode="listening"] {
  filter: saturate(1.04);
}

.vex-canvas-orb[data-voice-mode="finalizing"] {
  filter: saturate(.78) opacity(.88);
}

.vex-page.is-mobile-experience .vex-layout {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
  width: min(720px, 100%);
}

.vex-page.is-mobile-experience .vex-intro-copy {
  display: none;
}

.vex-page.is-mobile-experience .vex-console {
  width: 100%;
}

.vex-page.is-mobile-experience .vex-experience {
  align-items: flex-start;
  padding-top: 94px;
}

.vex-page.is-mobile-experience .vex-panel[data-panel="intro"] {
  min-height: 430px;
  align-content: center;
}

@media (max-width: 760px) {
  .vex-page.is-mobile-experience .vex-experience {
    min-height: 100svh;
    padding: 82px 10px 18px;
  }

  .vex-page.is-mobile-experience .vex-console {
    border-radius: 24px;
  }

  .vex-page.is-mobile-experience .vex-console-bar {
    min-height: 60px;
    padding: 10px 14px;
  }

  .vex-page.is-mobile-experience .vex-private {
    font-size: .58rem;
  }

  .vex-page.is-mobile-experience .vex-panel[data-panel="intro"] {
    min-height: calc(100svh - 178px);
    padding: 28px 22px;
  }

  .vex-page.is-mobile-experience .vex-panel[data-panel="intro"] h2 {
    font-size: clamp(2.1rem, 10vw, 3.4rem);
  }

  .vex-page.is-mobile-experience .vex-panel[data-panel="intro"] .vex-primary {
    width: 100%;
    min-height: 58px;
    margin-top: 1.4rem;
    font-size: .9rem;
  }

  .vex-fallback-actions {
    grid-template-columns: 1fr;
  }

  .vex-webrtc-controls {
    width: min(360px, 100%);
  }

  .vex-webrtc-controls button {
    flex: 1 1 0;
    padding: .72rem .7rem;
  }

  .vex-page.is-call-mode .vex-in-call {
    padding: 20px 16px;
  }

  .vex-page.is-call-mode .vex-canvas-orb {
    width: min(48vw, 190px);
  }
}


/* 2026-07-30 · Mobile runtime detection and permission recovery */
.vex-page.is-mobile-experience [data-mode-only="desktop"],
.vex-page.is-desktop-experience [data-mode-only="mobile"] {
  display: none !important;
}

.vex-page [data-mode-only="mobile"] > .vex-primary,
.vex-page [data-mode-only="desktop"] > .vex-primary {
  width: fit-content;
}

#vex-webrtc-stuck {
  margin-top: .8rem;
  color: #526a86;
  border: 1px solid rgba(47, 102, 237, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

#vex-webrtc-stuck:hover {
  color: var(--vex-blue);
  background: #fff;
}

@media (max-width: 760px) {
  .vex-page [data-mode-only="mobile"] > .vex-primary,
  .vex-page [data-mode-only="desktop"] > .vex-primary {
    width: 100%;
  }
}


/* 2026-07-30 · Mobile header contrast and two-action WebRTC recovery */
body.page-voice-experience #mobile-menu-button {
  width: 42px !important;
  height: 42px !important;
  color: #0f1f3a !important;
  border-color: rgba(255, 255, 255, .72) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
}

body.page-voice-experience #mobile-menu-button .material-symbols-outlined {
  color: currentColor !important;
  opacity: 1 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

body.page-voice-experience #mobile-menu-button:hover,
body.page-voice-experience #mobile-menu-button:focus-visible {
  color: #ffffff !important;
  border-color: #2f66ed !important;
  background: #2f66ed !important;
  outline: none !important;
}

body.page-voice-experience #mobile-menu-button[aria-expanded="true"] {
  color: #ffffff !important;
  border-color: #2f66ed !important;
  background: #2f66ed !important;
}

.vex-fallback-actions {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}


/* 2026-08-07: Paula result converts the completed experience into a 14-day trial invitation. */
.vex-trial-invitation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(47, 102, 237, .18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 20%, rgba(24, 183, 173, .12), transparent 14rem),
    linear-gradient(135deg, #f7f9ff, #eef5ff);
  box-shadow: 0 16px 36px rgba(34, 69, 122, .08);
}

.vex-trial-invitation__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--vex-blue), var(--vex-teal));
  box-shadow: 0 12px 24px rgba(47, 102, 237, .2);
}

.vex-trial-invitation__icon .material-symbols-outlined {
  font-size: 24px;
}

.vex-trial-invitation__copy > span {
  display: block;
  color: #526f95;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vex-trial-invitation__copy h3 {
  margin: 3px 0 0;
  color: var(--vex-navy);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 900;
  letter-spacing: -.02em;
}

.vex-trial-invitation__copy p {
  max-width: 710px;
  margin: 4px 0 0;
  color: #657b97;
  font-size: .72rem;
  line-height: 1.5;
}

.vex-trial-invitation__copy small {
  display: block;
  margin-top: 5px;
  color: #244865;
  font-size: .64rem;
  font-weight: 850;
}

.vex-page.is-editing .vex-trial-invitation {
  display: none;
}

.vex-primary--trial {
  min-width: 215px;
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 860px) {
  .vex-trial-invitation {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vex-primary--trial {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .vex-trial-invitation {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .vex-trial-invitation__icon {
    width: 42px;
    height: 42px;
  }

  .vex-trial-invitation__copy p {
    font-size: .7rem;
  }
}