#journey-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 32px 24px;
  border: 0;
  background: transparent;
  color: var(--ink, #1b261e);
  overflow: hidden;
  overscroll-behavior: contain;
}

#journey-modal:not([open]) { display: none; }
#journey-modal[open] { display: grid; place-items: center; }
#journey-modal::backdrop { background: rgb(9 24 18 / 78%); }
#journey-modal[open]::backdrop { animation: journey-backdrop-in .62s ease both; }
#journey-modal[data-state='closing']::backdrop { animation: journey-backdrop-out .42s ease both; }
@keyframes journey-backdrop-in { from { background: rgb(9 24 18 / 0%); } to { background: rgb(9 24 18 / 78%); } }
@keyframes journey-backdrop-out { from { background: rgb(9 24 18 / 78%); } to { background: rgb(9 24 18 / 0%); } }
.journey-card:not(.is-expanded) .journey-salient-list { display: none; }

#journey-modal .journey-modal-close {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 88px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--ink, #1b261e);
  border-radius: 999px;
  background: var(--cream, #f5f1e6);
  color: var(--ink, #1b261e);
  font-family: var(--body, sans-serif);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#journey-modal .journey-modal-close > span { font-size: 22px; line-height: 1; }
#journey-modal .journey-modal-close:hover { background: var(--yellow, #f5c64e); }
#journey-modal :focus-visible { outline: 3px solid var(--orange, #ff792d); outline-offset: 3px; }

#journey-modal .journey-modal-slot {
  position: relative;
  width: min(940px, 100%);
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow: visible;
}

.journey-card-placeholder {
  box-sizing: border-box;
  min-width: 0;
  align-self: stretch;
  visibility: hidden;
  pointer-events: none;
  overflow-anchor: none;
}

#journey-modal .journey-card.is-expanded {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: min(780px, calc(100dvh - 64px));
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--ink, #1b261e);
  border-radius: 18px;
  background: var(--cream, #f5f1e6);
  color: var(--ink, #1b261e);
  box-shadow: 0 24px 90px rgb(0 0 0 / 28%);
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  cursor: default;
  transition: none;
}

#journey-modal .is-expanded .journey-card-trigger { display: none; }
#journey-modal .is-expanded::before,
#journey-modal .is-expanded::after { pointer-events: none; }
#journey-modal .is-expanded > .journey-card-summary { display: block; height: 100%; min-width: 0; min-height: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#journey-modal .journey-card-summary h3 { margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; }
#journey-modal .journey-card-summary p,
#journey-modal .journey-card-summary .route-description { display: block; font-size: 15px; line-height: 1.55; }
#journey-modal .journey-card-summary .journey-preview,
#journey-modal .journey-card-summary .journey-card-preview,
#journey-modal .journey-card-summary .journey-card-result { display: none; }
#journey-modal .journey-salient-list { display: grid; gap: 14px; list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line, #cfd2c4); }
#journey-modal .journey-salient-list li { position: relative; padding-left: 25px; font-size: 14px; line-height: 1.5; }
#journey-modal .journey-salient-list li::before { content: '\2197'; position: absolute; left: 0; color: var(--green, #145c45); font-weight: 700; }
#journey-modal .journey-salient-list strong,
#journey-modal .journey-salient-list span { display: block; }
#journey-modal .journey-salient-list span { margin-top: 3px; color: var(--muted, #5b6257); font-size: 13px; }
#journey-modal .journey-card-summary > p,
#journey-modal .journey-salient-list { transition: opacity .22s ease; }
#journey-modal[data-state='opening'] .journey-card-summary > p,
#journey-modal[data-state='opening'] .journey-salient-list,
#journey-modal[data-state='closing'] .journey-card-summary > p,
#journey-modal[data-state='closing'] .journey-salient-list { opacity: 0; }

#journey-modal .is-expanded > .journey-demo {
  position: static;
  top: auto;
  width: 100%;
  max-width: 440px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  justify-self: center;
  opacity: 1;
  transition: opacity .16s linear;
}

#journey-modal[data-state='opening'] .journey-demo,
#journey-modal[data-state='closing'] .journey-demo { opacity: 0; pointer-events: none; }
#journey-modal[data-state='opening'] .is-expanded,
#journey-modal[data-state='closing'] .is-expanded { overflow: hidden; will-change: transform; }
#journey-modal .demo-caption { gap: 8px; margin: 0 0 10px; }
#journey-modal .demo-caption > span { font-size: 11px; letter-spacing: .06em; }
#journey-modal .replay-button { flex: none; min-width: 76px; min-height: 44px; padding: 8px; font-size: 14px; }
#journey-modal .journey-phone { border: 4px solid var(--ink, #1b261e); border-radius: 19px; box-shadow: 5px 5px 0 var(--sage, #d9e1ce); }
#journey-modal .journey-phone .phone-header { gap: 10px; padding: 14px; background: #075e54; }
#journey-modal .phone-header img { width: 34px; height: 34px; }
#journey-modal .phone-header strong { font-size: 16px; }
#journey-modal .phone-header > div > span { margin-top: 3px; font-size: 12px; line-height: 1.4; opacity: 1; }
#journey-modal .conversation {
  gap: 9px;
  height: clamp(160px, calc(100vh - 400px), 420px);
  height: clamp(160px, calc(100dvh - 400px), 420px);
  min-height: 0;
  padding: 16px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#journey-modal .conversation > * { flex-shrink: 0; }
#journey-modal .conversation > .is-pending { display: none; }
#journey-modal .conversation .message { max-width: 94%; padding: 10px 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
#journey-modal .recommendation { gap: 10px; width: 94%; }
#journey-modal .recommendation > svg { width: 45px; height: 52px; }
#journey-modal .recommendation strong { font-size: 14px; }
#journey-modal .recommendation span { margin-top: 4px; font-size: 12px; }
#journey-modal .demo-action { width: 94%; padding: 10px; gap: 8px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
#journey-modal .demo-outcome { min-height: 0; gap: 9px; padding: 13px 11px; }
#journey-modal .demo-outcome strong { font-size: 11px; letter-spacing: .02em; }
#journey-modal .demo-outcome p { font-size: 12px; line-height: 1.5; }
#journey-modal .demo-note { max-width: none; margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
#journey-modal .journey-phone.wa-phone { display: flex; flex-direction: column; height: 100%; min-height: 0; border: 1px solid #c7ccc8; border-radius: 14px; box-shadow: none; }
#journey-modal .journey-phone.wa-phone .wa-header { flex: none; min-height: 60px; padding: 12px 14px; background: #f7f8f8; color: #111b21; }
#journey-modal .wa-phone .wa-header strong { font-size: 15px; }
#journey-modal .wa-phone .wa-header-status { color: #667781; font-size: 12px; }
#journey-modal .wa-phone .wa-messages { flex: 1 1 0; min-height: 0; height: auto; overflow-y: auto; padding: 14px 12px; }
#journey-modal .wa-phone .wa-bubble { font-size: 14px; line-height: 1.45; }
#journey-modal .wa-phone .wa-composer { flex: none; }
#journey-modal .journey-demo-details { margin-top: 14px; }
#journey-modal .journey-demo-details .chat-demo-note { font-size: 12px; line-height: 1.5; margin: 0; }
#journey-modal .journey-demo-details .demo-tools { margin-top: 8px; gap: 18px; }
#journey-modal .journey-demo-details .demo-tools > button { font-size: 12px; min-width: 0; padding: 6px 0; min-height: 38px; }
#journey-modal #journey-panel > .demo-outcome { display: block; margin-top: 12px; padding: 0; border: 0; min-height: 0; background: transparent; }
#journey-modal #journey-panel > .demo-outcome > span { display: none; }

@media (max-width: 680px) {
  #journey-modal .journey-card.is-expanded { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .38fr) minmax(0, .62fr); gap: 16px; padding: 18px; border-radius: 14px; }
  #journey-modal .is-expanded > .journey-card-summary { padding-top: 0; }
  #journey-modal .journey-card-summary h3 { margin: 8px 0 12px; font-size: 28px; }
  #journey-modal .journey-card-summary p,
  #journey-modal .journey-card-summary .route-description { font-size: 15px; line-height: 1.5; }
  #journey-modal .journey-phone .phone-header { padding: 12px 10px; }
  #journey-modal .conversation {
    height: clamp(160px, calc(100vh - 540px), 320px);
    height: clamp(160px, calc(100dvh - 540px), 320px);
    padding: 14px 10px;
  }
  #journey-modal .conversation .message { max-width: 96%; }
  #journey-modal .journey-phone.wa-phone { height: 100%; }
  #journey-modal .journey-salient-list { margin-top: 20px; padding-top: 18px; gap: 14px; }
}

@media (max-width: 380px) {
  #journey-modal .journey-card.is-expanded { padding-inline: 12px; }
  #journey-modal .conversation { padding-inline: 8px; }
  #journey-modal .conversation .message { padding-inline: 9px; }
  #journey-modal .demo-caption > span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #journey-modal[open]::backdrop { animation: none; }
  #journey-modal .journey-card-summary > p,
  #journey-modal .journey-salient-list { transition: none; }
  #journey-modal .journey-demo,
  #journey-modal .conversation > * { transition: none; }
  #journey-modal .conversation .is-pending { opacity: 1; transform: none; }
}