.experience {
  --experience-blue: #0081cc;
  position: relative;
  isolation: isolate;
  background: #141618;
  color: #f4f3ef;
  font-family: "Inter", Arial, sans-serif;
}

.experience ::selection { background: #0081cc; color: #fff; }

.experience-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.experience-atmosphere::before,
.experience-atmosphere::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 140px;
}

.experience-atmosphere::before { top: 0; background: linear-gradient(#141618, #14161800); }
.experience-atmosphere::after { bottom: 0; background: linear-gradient(#14161800, #141618); }

.experience-atmosphere-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  contain: paint;
  background:
    radial-gradient(ellipse 46% 52% at 74% 44%, #0d4f7a66, transparent 70%),
    radial-gradient(ellipse 70% 60% at 30% 90%, #0c324d40, transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 0%, #0f263866, transparent 70%);
}

.experience-shader {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.has-shader .experience-atmosphere-scene { background: none; }
.has-shader .experience-motes { visibility: hidden; }

.experience-atmosphere-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #141618e6, #141618a6 32%, #14161800 72%),
    linear-gradient(#14161899, #14161800 35%, #14161800 78%, #14161866);
}

.experience-motes { position: absolute; inset: 0; }
.experience-motes::before,
.experience-motes::after {
  content: "";
  position: absolute;
  inset: -4% 0;
  opacity: .55;
  background:
    radial-gradient(circle at 8% 24%, #afe3ff 1px, transparent 2px),
    radial-gradient(circle at 38% 15%, #83c8ed .7px, transparent 1.5px),
    radial-gradient(circle at 62% 34%, #b4e5ff 1px, transparent 2px),
    radial-gradient(circle at 91% 19%, #83c8ed .8px, transparent 1.8px),
    radial-gradient(circle at 85% 59%, #afe3ff 1px, transparent 2px),
    radial-gradient(circle at 53% 83%, #83c8ed .7px, transparent 1.5px),
    radial-gradient(circle at 95% 85%, #b4e5ff 1px, transparent 2px);
}

.experience-motes::after {
  opacity: .35;
  background:
    radial-gradient(circle at 17% 72%, #83c8ed .7px, transparent 1.5px),
    radial-gradient(circle at 48% 39%, #afe3ff 1px, transparent 2px),
    radial-gradient(circle at 68% 8%, #83c8ed .7px, transparent 1.5px),
    radial-gradient(circle at 76% 74%, #b4e5ff .9px, transparent 1.8px),
    radial-gradient(circle at 96% 43%, #afe3ff 1px, transparent 2px);
}

@media (prefers-reduced-motion: no-preference) {
  .experience-motes::before,
  .experience-motes::after {
    animation: experience-mote-drift 18s ease-in-out -4s infinite alternate paused;
  }
  .experience-motes::after { animation-duration: 27s; animation-delay: -17s; }
  .is-atmosphere-active .experience-motes::before,
  .is-atmosphere-active .experience-motes::after { animation-play-state: running; }
}

@keyframes experience-mote-drift {
  from { transform: translate3d(0, 12px, 0); opacity: .3; }
  to { transform: translate3d(-10px, -18px, 0); opacity: .75; }
}

.experience-arrival-ripple {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.experience-arrival-ripple .arrival-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
}

.experience-arrival-ripple .arrival-scene > canvas {
  position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

.experience-arrival-ripple .arrival-sheen { mix-blend-mode: screen; }
.has-arrival-ripple { transform: translateZ(0); }

@media (prefers-reduced-motion: reduce), (forced-colors: active), (max-width: 760px), (pointer: coarse) {
  .experience-arrival-ripple { display: none; }
}

.experience-stage {
  position: relative;
  z-index: 1;
  --phone-width: min(350px, 30vw, calc((100svh - 144px) * .48));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-content: center;
  column-gap: clamp(48px, 7vw, 112px);
  row-gap: clamp(48px, 5.5vh, 72px);
  max-width: 1440px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 72px clamp(24px, 6vw, 96px);
}

.experience-intro {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 112px) 24px 0;
  text-align: center;
}
.experience-intro .section-label { color: #9ba6ad; margin-bottom: 24px; }

.experience-intro h2 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.experience-intro h2 > span { display: block; }
.experience-story { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; }
.experience-features { display: grid; gap: 40px; }
.experience-feature { min-width: 0; }

.experience-feature-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: #9ba6ad;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.experience-feature h3 {
  max-width: 12ch;
  margin: 0 0 14px;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(38px, 4.15vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.experience-feature > p:not(.experience-feature-label) {
  max-width: 38ch;
  margin: 0;
  color: #b0b6b9;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  text-wrap: pretty;
}

.experience-banner {
  --experience-banner-title-size: clamp(36px, 3.6vw, 52px);
  margin-top: 24px;
  color: #fff;
  /* Deepen the brand blue slightly to keep small white text readable. */
  background: #0077bc;
  border-bottom: 1px solid #ffffff26;
}

.experience-banner-inner {
  /* The empty end column sets the copy's width and position. */
  --experience-banner-end-width: 144px;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) var(--experience-banner-end-width);
  grid-template-rows: auto auto;
  grid-template-areas: "label . ." "title description .";
  align-content: start;
  align-items: start;
  gap: 12px clamp(24px, 3vw, 48px);
  max-width: 1440px;
  min-height: clamp(160px, 14vw, 200px);
  margin: 0 auto;
  padding: 40px clamp(24px, 6vw, 96px);
  text-align: left;
}

.experience-banner-label {
  grid-area: label;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.experience-banner h4 {
  grid-area: title;
  max-width: 20ch;
  min-height: 2lh;
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: var(--experience-banner-title-size);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  white-space: normal;
  text-wrap: balance;
}

.experience-banner-description {
  grid-area: description;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  text-wrap: pretty;
}

.experience-banner-description span { display: block; text-wrap: balance; }

.experience-banner--safety { background: #b42332; }

.experience.is-enhanced .experience-banner--vibe .experience-banner-inner {
  /* Equal side columns keep the copy centred; 6.4em fits the headline's longest line. */
  --vibe-side-min: calc(var(--experience-banner-title-size) * 6.4);
}

.experience.is-enhanced .experience-banner--vibe .experience-banner-description {
  width: 100%;
  justify-self: center;
}

.experience:not(.is-enhanced) .experience-banner-inner {
  --experience-banner-end-width: 44px;
  grid-template-columns: minmax(0, 1fr) var(--experience-banner-end-width);
  grid-template-rows: auto auto auto;
  grid-template-areas: "label ." "title ." "description description";
  gap: 8px 16px;
  padding: 20px;
}

.experience.is-enhanced .experience-banner {
  position: fixed;
  z-index: 3;
  inset: 0 0 auto;
  min-height: var(--experience-banner-height, 0px);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-100% - 1px));
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1), opacity 240ms ease, visibility 0s 420ms;
}

.experience.is-enhanced .experience-banner.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-duration: 720ms, 420ms, 0s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1), ease, linear;
  transition-delay: 100ms, 100ms, 0s;
}

/* A direct feature jump must not overlay the outgoing and incoming messages. */
.experience.is-enhanced:has(.experience-banner.is-visible) .experience-banner:not(.is-visible) {
  visibility: hidden;
  transition: none;
}

.experience.is-enhanced:not(.is-atmosphere-active) .experience-banner { visibility: hidden; transition: none; }

.experience-progress {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 36px;
}

.experience-progress > span {
  width: 32px;
  height: 2px;
  background: #3b4349;
  transition: background 350ms ease;
}

.experience-progress > span.is-active { background: var(--experience-blue); }

.experience-phone-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-items: center;
  justify-items: center;
  align-self: center;
  min-width: 0;
}

.experience-phone-stage::before {
  content: "";
  position: absolute;
  width: calc(var(--phone-width) * 1.45);
  height: 95%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #0081cc0b, #0081cc00 68%);
  pointer-events: none;
}

.experience-phone {
  position: relative;
  width: var(--phone-width);
  height: calc(var(--phone-width) / .48);
  padding: .6em;
  border: 1px solid #d5dce1;
  border-radius: 3.5em;
  background: linear-gradient(110deg, #fff, #e3e8ec 12%, #f9fbfc 88%, #ccd6de);
  box-shadow: inset 0 0 0 2px #ffffffb3, 0 30px 70px -24px #00000099, 0 8px 18px -8px #00000066;
  font-size: calc(var(--phone-width) / 25);
}

.experience-phone::before,
.experience-phone::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: #c6cfd5;
}

.experience-phone::before { left: -2px; top: 22%; height: 13%; }
.experience-phone::after { right: -2px; top: 29%; height: 9%; }

.experience-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.9em;
  background: #f6f8f8;
  color: #1a2b36;
  box-shadow: 0 0 0 1px #b8c5cf66;
  -webkit-mask-image: linear-gradient(#000, #000);
}

.experience-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 3.5em;
  padding: .15em 2.15em 0;
  font-size: .83em;
  font-weight: 500;
}

.experience-status-icons { display: flex; align-items: center; gap: .4em; }
.experience-status-icons svg { width: 2.25em; height: 1em; }
.experience-battery { width: 1.5em; height: .72em; border: 1px solid currentColor; border-radius: .2em; padding: 1px; }
.experience-battery::before { content: ""; display: block; width: 88%; height: 100%; border-radius: .1em; background: currentColor; }
.experience-island { position: absolute; top: .73em; left: 36%; width: 28%; height: 1.15em; border-radius: 2em; background: #13191d; }

.experience-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 3.6em;
  padding: 0 1.55em .7em;
}

.experience-app-wordmark { font-size: 2.05em; font-weight: 500; line-height: 1; letter-spacing: -.1em; color: #102b3c; }
.experience-app-avatar { display: grid; place-items: center; width: 2.5em; height: 2.5em; border: 1px solid #c5dce9; border-radius: 50%; background: #eaf2f6; color: #487087; font-size: .7em; }
.experience-scenes { position: relative; flex: 1; min-height: 0; margin: .45em 1.55em 1.25em; }

.experience-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1em);
  transition: opacity 500ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1), visibility 0s 650ms;
}

.experience-scene.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.experience-app-heading { margin: 0 0 .15em; }
.experience-app-eyebrow { margin: 0 0 .85em; color: #69808e; font-size: .64em; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.experience-app-heading h4 { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 2.08em; font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.experience-app-heading > p:last-child { margin: .85em 0 0; color: #7a8790; font-size: .73em; line-height: 1.5; }
.experience-app-caption { display: block; color: #768691; font-size: .69em; line-height: 1.4; }

.experience-intention-card,
.experience-prompt-card,
.experience-checkin-card {
  border: 1px solid #e0e7ea;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: 0 .35em 1.2em -.8em #32546a26;
}

.experience-intention-card { padding: 1.1em; border-color: #bedbea; background: linear-gradient(115deg, #f1f8fc, #fff); }
.experience-selected-answer { display: flex; align-items: center; gap: .7em; margin-top: .9em; font-size: .82em; font-weight: 500; }
.experience-check { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--experience-blue); color: #fff; }
.experience-check svg { width: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.experience-prompt-card { padding: 1.15em; }
.experience-prompt-card > p { margin: .6em 0 .9em; font-family: "Newsreader", Georgia, serif; font-size: 1.3em; line-height: 1.25; letter-spacing: -.02em; }
.experience-prompt-line { display: block; width: 2em; height: 2px; background: #0081cc6b; }
.experience-values > div { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .75em; }
.experience-values > div > span { padding: .65em .9em; border: 1px solid #dce5e9; border-radius: 2em; color: #5c717e; font-size: .66em; }

.experience-app-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-top: auto;
  padding: 1.1em 1.45em;
  border-radius: 2em;
  color: #fff;
  background: #0081cc;
  box-shadow: 0 .45em 1.2em -.7em #0081cc66;
  font-size: .78em;
  font-weight: 500;
}

.experience-app-action > span { font-size: 1.35em; line-height: 1; }
.experience-app-note { margin: 0; text-align: center; color: #81909b; font-size: .69em; line-height: 1.6; }

.experience-phone.is-introduction .experience-phone-screen { background: #f8fbfd; color: #1a3445; }
.experience-phone.is-introduction .experience-app-header,
.experience-phone.is-introduction .experience-app-tabs { display: none; }
.experience-phone.is-introduction .experience-scenes { margin: .85em 1.4em 1.8em; }
.experience-scene--compatibility { gap: 0; }
.introduction-profile { display: grid; grid-template-columns: clamp(34px, 3.8em, 44px) minmax(0, 1fr); align-items: center; flex-shrink: 0; gap: .9em; margin-bottom: 1.35em; padding-bottom: 1.35em; border-bottom: 1px solid #dfe8ed; }
.introduction-profile img { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; object-position: 50% 45%; }
.introduction-profile h4 { margin: 0; color: #1a3445; font: 600 max(17px, 1.8em)/1.25 "Inter", Arial, sans-serif; letter-spacing: -.025em; }
.introduction-profile p { margin: .4em 0 0; color: #526876; font-size: max(11px, 1.05em); line-height: 1.5; }
.introduction-profile p span { white-space: nowrap; }
.introduction-report {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #b7c8d1 transparent;
  scrollbar-gutter: stable;
  padding-right: .55em;
  color: #425868;
  font-size: max(13px, 1.13em);
  line-height: 1.6;
}
.introduction-report:focus-visible { outline: 2px solid #0081cc; outline-offset: -2px; }
.introduction-report h5 { margin: 0 0 1em; color: #1a3445; font-size: 1.18em; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.introduction-report h6 { margin: 0 0 .4em; color: #1a3445; font-size: 1em; font-weight: 600; line-height: 1.5; }
.introduction-report p { margin: 0; }
.introduction-reason + .introduction-reason { margin-top: 1.35em; }
.introduction-report .introduction-consideration { margin-top: 1.5em; padding-top: 1.4em; border-top: 1px solid #dfe8ed; }
.introduction-report strong { color: #1a3445; font-weight: 600; }
.introduction-report blockquote { margin: 1.5em 0 .5em; padding-left: 1em; border-left: 2px solid #b9d6e5; }
.introduction-action { min-height: 44px; margin-top: 1em; padding: .9em 1.1em; font-size: max(12px, 1.05em); box-shadow: none; }

.experience-room-player {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transform: translateY(1em);
  transition: opacity 500ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1);
}
.experience-phone.is-room .experience-room-player { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.experience-room-player > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.experience-room-player > iframe {
  position: absolute;
  inset: 0 auto auto 0;
  width: 360px;
  height: var(--room-height, 770px);
  border: 0;
  opacity: 0;
  transform: scale(var(--room-scale, 1));
  transform-origin: top left;
}
.experience-room-player.is-ready > iframe { opacity: 1; }

.experience-checkin-card { padding: 1.35em 1em; text-align: center; }
.experience-checkin-icon { display: grid; place-items: center; width: 3.5em; height: 3.5em; margin: 0 auto 1em; border-radius: 50%; background: #eaf4fb; color: var(--experience-blue); }
.experience-checkin-icon svg { width: 1.7em; height: 1.7em; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.experience-checkin-card > p { margin: 0 0 .7em; color: #89949a; font-size: .64em; }
.experience-checkin-card > strong { font-size: .84em; font-weight: 500; }
.experience-feelings { display: flex; justify-content: center; gap: .45em; margin-top: 1.3em; }
.experience-feelings > span { padding: .7em .8em; border: 1px solid #e2e8eb; border-radius: 2em; color: #81909a; font-size: .64em; }
.experience-feelings > .is-selected { border-color: #0081cc; background: #edf6fc; color: #0081cc; }
.experience-reflection { position: relative; padding: 1.1em; min-height: 5.7em; border: 1px solid #c9dfea; border-radius: 1em; background: #f0f6f9; }
.experience-reflection > p { display: inline-block; margin: 1em 0 0; color: #657c8a; font-size: .73em; }
.experience-reflection-cursor { display: inline-block; height: .8em; margin-left: .25em; border-left: 1px solid #0081cc; vertical-align: -.1em; }

.experience-app-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 4.9em;
  padding: .85em .7em 1.5em;
  border-top: 1px solid #e5eaed;
  background: #fff;
}

.experience-app-tabs > span { display: flex; flex-direction: column; align-items: center; gap: .5em; min-width: 5em; color: #a0aab0; font-size: .59em; transition: color 400ms ease; }
.experience-app-tabs > .is-active { color: #0081cc; }
.experience-app-tabs svg { width: 1.8em; height: 1.8em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.experience-home-indicator { position: absolute; right: 34%; bottom: .5em; left: 34%; height: .27em; border-radius: 1em; background: #14242f; }

.voice-transcript-viewport { flex: 0 1 18em; min-height: 0; margin-block: auto; overflow: hidden; mask-image: linear-gradient(transparent, #000 1em, #000); transition: opacity 650ms ease; }
.voice-demo:not([data-voice-turn]) .voice-transcript-viewport { display: flex; flex-direction: column; justify-content: flex-end; }
.voice-demo:not([data-voice-turn]) .voice-transcript { margin-block: auto; }
.voice-transcript { display: flex; flex-direction: column; flex-shrink: 0; gap: 1.65em; margin: 0; padding: 1em 0 0; list-style: none; text-align: center; transition: transform 750ms cubic-bezier(.22, 1, .36, 1); }
.voice-transcript > li { opacity: .28; transition: opacity 500ms ease; }
.voice-transcript > li[hidden] { display: none; }
.voice-transcript > li.is-previous { opacity: .58; }
.voice-transcript > li.is-speaking { opacity: 1; }
.voice-transcript > li > span { display: block; margin-bottom: .65em; color: #617783; font-size: .64em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.voice-transcript > li[data-speaker="pod"] > span { color: #0081cc; }
.voice-transcript p { position: relative; margin: 0; color: #1a3445; font-size: max(11px, 1.1em); line-height: 1.6; letter-spacing: -.02em; }
.voice-transcript > li[data-speaker="you"] p { color: #456779; }
.voice-transcript li.is-speaking p::before { content: ""; position: absolute; top: .7em; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #0081cc; box-shadow: 0 0 10px #0081cc55; opacity: 0; transition: opacity 300ms ease; }
.experience-scene--voice[data-voice-state="thinking"] .voice-transcript li.is-speaking p::before { opacity: 1; }
.voice-word { position: relative; opacity: 0; transition: opacity 220ms ease; }
.voice-word.is-spoken { opacity: 1; }
.voice-word.is-cursor::after { content: ""; position: absolute; top: calc(50% - 2px); left: calc(100% + 5px); width: 4px; height: 4px; border-radius: 50%; background: #0081cc; box-shadow: 0 0 8px #0081cc55; }
.voice-demo.is-restarting .voice-transcript-viewport { opacity: 0; }

.experience-phone-screen { transition: background 600ms ease, color 600ms ease; }
.experience-phone.is-voice .experience-phone-screen { color: #1a3445; background: #f8fbfd; }
.experience-phone.is-voice .experience-app-header,
.experience-phone.is-voice .experience-app-tabs { opacity: 0; visibility: hidden; }
.experience-scene--voice { inset: 3.2em 0 1.5em; z-index: 1; gap: 0; padding: 1.6em 1.6em 1em; color: #1a3445; }
.voice-call-heading { flex-shrink: 0; text-align: center; }
.voice-call-heading > span { font-size: 1.65em; font-weight: 400; letter-spacing: -.05em; }
.voice-call-heading > p { display: flex; align-items: center; justify-content: center; gap: .6em; margin: .85em 0 0; color: #647b8a; font-size: .66em; letter-spacing: .025em; }
.voice-call-heading i { width: .45em; height: .45em; border-radius: 50%; background: #0081cc; box-shadow: 0 0 .7em #0081cc55; }
.voice-aura { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 34%, #0081cc2e, #0081cc00 62%), radial-gradient(ellipse at 85% 72%, #0081cc14, #0081cc00 55%); filter: blur(1.6em); opacity: .4; pointer-events: none; }
.voice-call-state { flex-shrink: 0; margin: 0 0 2em; text-align: center; color: #647b8a; font-size: .66em; letter-spacing: .025em; }
.voice-call-controls { display: flex; align-items: center; justify-content: center; gap: .8em; flex-shrink: 0; }
.voice-mic-meter { display: grid; place-items: center; width: 10em; height: 3.2em; padding: 0 .65em; border: 1px solid #0081cc47; border-radius: 2em; background: #0081cc0a; }
.voice-mic-meter svg { width: 100%; fill: none; stroke: #0081cc; stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 3px #0081cc55); }
.voice-call-icon { display: grid; place-items: center; width: 3.2em; height: 3.2em; border: 1px solid #dae6ed; border-radius: 50%; background: #f0f6fa; color: #547085; }
.voice-call-icon svg { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.voice-call-end { color: #b1465a; border-color: #edd2d8; background: #fbedef; }

.experience.is-enhanced .experience-track { min-height: 340svh; }
.experience.is-enhanced .experience-stage {
  --experience-top-space: max(72px, calc(var(--experience-banner-height, 0px) + clamp(24px, 4svh, 40px)));
  --phone-width: min(350px, 30vw, calc((100svh - var(--experience-top-space) - 72px) * .48));
  position: sticky;
  top: 0;
  padding-top: var(--experience-top-space);
}
.experience.is-enhanced .experience-features { gap: 0; }
.experience.is-enhanced .experience-feature {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 400ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.experience.is-enhanced .experience-feature.is-active { opacity: 1; transform: none; }
.experience.is-enhanced .experience-progress { display: flex; }

@media (min-width: 900px) {
  .experience-feature:not(:first-child) h3 { max-width: 16ch; }
  .experience-feature:not(:first-child) > p:not(.experience-feature-label) { max-width: 42ch; }
  .experience-banner-description {
    max-width: 56ch;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
  }
  .experience-banner-description span + span { margin-top: 2px; }
  .experience.is-enhanced .experience-banner--vibe .experience-banner-inner {
    grid-template-columns: minmax(var(--vibe-side-min), 1fr) minmax(0, 1.8fr) minmax(var(--vibe-side-min), 1fr);
  }
}

@media (min-width: 900px) and (max-width: 1199px), (min-width: 900px) and (max-height: 750px) {
  .experience-banner-inner {
    gap: 8px 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .experience-banner-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--experience-banner-end-width);
  }
}

@media (min-width: 900px) and (max-height: 750px) {
  .experience-banner-inner { min-height: 0; padding-top: 16px; padding-bottom: 16px; }
}

@media (max-width: 899px) {
  .experience-atmosphere-scene::after {
    background: linear-gradient(#141618e6, #14161899 28%, #14161800 65%, #14161866);
  }

  .experience-stage {
    --phone-width: clamp(176px, calc((100svh - 270px) * .48), 300px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    gap: 18px;
    padding: 16px 24px;
  }

  .experience-intro { padding-top: 64px; }
  .experience-intro .section-label { margin-bottom: 14px; font-size: 10px; }
  .experience-intro h2 { font-size: clamp(28px, 7.8vw, 38px); line-height: 1.06; }
  .experience-story { grid-column: 1; grid-row: 1; width: 100%; max-width: 440px; text-align: center; }
  .experience-feature-label { justify-content: center; margin-bottom: 9px; font-size: 9px; gap: 10px; }
  .experience-feature h3 { max-width: none; margin-bottom: 9px; font-size: clamp(28px, 7vw, 34px); }
  .experience-feature > p:not(.experience-feature-label) { max-width: 40ch; margin: 0 auto; font-size: 13px; line-height: 1.55; }
  .experience-banner-inner {
    --experience-banner-end-width: 108px;
    grid-template-columns: minmax(0, 1fr) var(--experience-banner-end-width);
    grid-template-rows: auto auto auto;
    grid-template-areas: "label ." "title ." "description description";
    gap: 5px 14px;
    min-height: 0;
    padding: 12px 24px;
  }
  .experience-banner-label { font-size: 10px; }
  .experience-banner { --experience-banner-title-size: clamp(22px, 6vw, 30px); }
  .experience-banner-description { font-size: 12px; line-height: 1.5; }
  .experience-progress { justify-content: center; margin-top: 16px; }
  .experience-progress > span { width: 22px; }
  .experience-phone-stage { grid-column: 1; grid-row: 2; }
  .experience-phone-stage::before { width: 125%; }
  .experience.is-enhanced .experience-stage {
    --experience-top-space: calc(var(--experience-banner-height, 0px) + 10px);
    --phone-width: clamp(150px, calc((100svh - var(--experience-story-height, 250px) - var(--experience-top-space) - 20px) * .46), 300px);
    gap: 10px;
    padding-bottom: 10px;
  }

  .experience:not(.is-enhanced) .experience-stage { padding-top: 64px; padding-bottom: 64px; gap: 40px; }
  .experience:not(.is-enhanced) .experience-phone-stage { grid-row: 1; }
  .experience:not(.is-enhanced) .experience-story { grid-row: 2; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .experience-banner-inner {
    --experience-banner-end-width: 44px;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr) var(--experience-banner-end-width);
    grid-template-rows: auto auto;
    grid-template-areas: "label . ." "title description .";
    gap: 4px 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .experience-banner { --experience-banner-title-size: clamp(24px, 3.75vw, 30px); }
  .experience.is-enhanced .experience-banner--vibe .experience-banner-inner {
    grid-template-columns: var(--vibe-side-min) minmax(0, 1fr) var(--vibe-side-min);
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .experience.is-enhanced .experience-banner { transition: none; }
  .experience.is-enhanced .experience-feature,
  .experience-scene, .experience-room-player { transition: none; transform: none; }
  .experience-progress > span,
  .experience-app-tabs > span { transition: none; }
  .voice-transcript, .voice-transcript > li, .voice-word, .voice-transcript-viewport,
  .voice-transcript li.is-speaking p::before, .experience-phone-screen { transition: none; }
  .voice-word.is-cursor::after { display: none; }
}

@media (max-width: 380px) {
  .experience:not(.is-enhanced) .experience-stage { gap: 16px; padding-top: 16px; padding-bottom: 16px; }
  .experience-banner-inner {
    --experience-banner-end-width: 44px;
    gap: 5px 8px;
    padding: 10px 16px;
  }
  .experience-banner-label { font-size: 8px; letter-spacing: .03em; }
  .experience-banner { --experience-banner-title-size: 19px; }
  .experience-banner-description { font-size: 11px; }
}

.experience.is-walkthrough > .experience-track { display: none; }
.experience.is-walkthrough .experience-intro { padding: 72px 24px 8px; }
.experience.is-walkthrough .experience-intro .section-label { font-size: 11px; }
.experience.is-walkthrough .experience-intro h2 { font-size: clamp(36px, 9.5vw, 44px); line-height: 1.1; }
.experience-walkthrough { position: relative; z-index: 1; }
.experience-walkthrough-step {
  --phone-width: min(calc(100vw - 40px), 380px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 95svh;
  padding: 56px 20px;
}
.experience.is-walkthrough .experience-feature { width: 100%; max-width: 430px; text-align: left; }
.experience.is-walkthrough .experience-feature-label {
  justify-content: flex-start;
  margin-bottom: 16px;
  font-size: 11px;
  gap: 12px;
}
.experience.is-walkthrough .experience-feature h3 {
  max-width: 16ch;
  margin-bottom: 16px;
  font-size: clamp(34px, 9vw, 42px);
  line-height: 1.08;
}
.experience.is-walkthrough .experience-feature > p:not(.experience-feature-label) {
  max-width: 40ch;
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
}
.experience.is-walkthrough .experience-phone-stage { width: var(--phone-width); }
.experience.is-walkthrough .experience-phone-stage::before { width: 100%; }
.experience.is-walkthrough .experience-scene { transition: none; }
.experience.is-walkthrough .introduction-report { overscroll-behavior-y: auto; }
.experience.is-walkthrough .experience-banner {
  --experience-banner-title-size: clamp(34px, 9vw, 42px);
  margin: 16px 0;
}
.experience.is-walkthrough .experience-banner-inner {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "title" "description";
  gap: 16px;
  max-width: 480px;
  min-height: 0;
  padding: 44px 24px;
}
.experience.is-walkthrough .experience-banner-label { font-size: 11px; letter-spacing: .07em; }
.experience.is-walkthrough .experience-banner h4 { min-height: 0; }
.experience.is-walkthrough .experience-banner-description { font-size: 16px; line-height: 1.65; }
.experience.is-walkthrough .experience-banner-description span { text-wrap: pretty; }
.experience.is-walkthrough .experience-banner-description span + span { margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .experience.is-walkthrough .experience-phone-stage {
    transition: opacity 600ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1);
  }
  .experience.is-walkthrough .experience-phone-stage.is-pending { opacity: 0; transform: translateY(20px); }
}

@media (forced-colors: active) {
  .experience-atmosphere { display: none; }
  .experience { background: Canvas; color: CanvasText; }
  .experience-phone-stage::before { display: none; }
  .experience-phone { border: 2px solid CanvasText; }
  .experience-banner { color: CanvasText; background: Canvas; border-color: CanvasText; }
}