.demo {
  color-scheme: light;
  --navy: #06293b;
  --navy-deep: #031d2b;
  --navy-soft: #0b425b;
  --teal: #0797b4;
  --teal-soft: #4cc3d5;
  --orange: #ff6413;
  --orange-soft: #ff8c52;
  --green: #36bd78;
  --ink: #082c3f;
  --muted: #577181;
  --line: #d5e0e5;
  --paper: #f6f8f8;
  --white: #ffffff;
  font-family: Inter, "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

.waya-hero {
  min-height: 0;
  padding: 5.25rem 0 2.25rem;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 18%, rgba(7, 151, 180, .12), transparent 31%),
    radial-gradient(circle at 7% 82%, rgba(255, 100, 19, .09), transparent 27%),
    linear-gradient(135deg, #fbf6f1 0%, #f5f8f8 48%, #ebf5f7 100%);
}

.waya-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  opacity: .38;
  background-image:
    linear-gradient(rgba(6, 41, 59, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 41, 59, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to right, #000, rgba(0, 0, 0, .3));
}

.waya-hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  width: min(1500px, calc(100% - 40px));
}

.waya-home--cinema {
  padding: clamp(72px, 7vw, 104px) 0;
}

.waya-home--cinema .waya-home__inner {
  position: relative;
  z-index: 1;
  display: block;
  width: min(1500px, calc(100% - 40px));
}

.demo button {
  font: inherit;
}

.demo {
  display: grid;
  grid-template-columns: minmax(420px, .82fr) minmax(680px, 1.36fr);
  min-height: clamp(680px, calc(100vh - 86px), 840px);
  overflow: hidden;
}

.story {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 0;
  padding: clamp(34px, 4vw, 66px) clamp(34px, 4.4vw, 72px);
  flex-direction: column;
}

.story__brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--navy);
}

.story__brand-mark {
  display: grid;
  width: 44px;
  height: 42px;
  place-items: center;
  filter: drop-shadow(0 8px 15px rgba(255, 100, 19, .18));
}

.story__brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story__brand > span:last-child {
  display: grid;
  gap: 2px;
}

.story__brand strong {
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.story__brand small {
  color: #76909e;
  font-size: 11px;
}

.story__chapters {
  position: relative;
  display: grid;
  flex: 1;
  align-items: center;
}

.chapter {
  position: absolute;
  top: 50%;
  left: 0;
  width: min(510px, 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 34px));
  filter: blur(8px);
  transition:
    opacity 540ms ease,
    transform 700ms cubic-bezier(.2, .84, .2, 1),
    filter 540ms ease;
}

.chapter.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
  filter: none;
}

.chapter.is-leaving {
  opacity: 0;
  transform: translateY(calc(-50% - 30px));
  filter: blur(5px);
}

.chapter__eyebrow {
  display: flex;
  margin: 0 0 24px;
  align-items: center;
  gap: 11px;
  color: #087798;
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.chapter__eyebrow::before {
  width: 4px;
  height: 24px;
  border-radius: 99px;
  content: "";
  background: linear-gradient(var(--orange), var(--orange-soft));
  box-shadow: 0 5px 16px rgba(255, 100, 19, .25);
}

.chapter h1,
.chapter h2 {
  margin: 0;
  color: var(--navy-deep);
  font-size: clamp(48px, 4.5vw, 76px);
  font-weight: 780;
  letter-spacing: -.055em;
  line-height: .98;
}

.chapter h1 span,
.chapter h2 span {
  color: var(--orange);
}

.chapter[data-chapter="action"] h2 span {
  white-space: nowrap;
}

.chapter__lead {
  max-width: 490px;
  margin: 30px 0 0;
  color: #496575;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.55;
}

.chapter__proof {
  display: flex;
  margin: 30px 0 0;
  align-items: center;
  gap: 12px;
  color: #163f55;
  font-size: 14px;
  font-weight: 800;
}

.chapter__proof i {
  display: grid;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  place-items: center;
  background: #ffe7d8;
}

.chapter__proof i::after {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  content: "";
  transform: rotate(-45deg) translateY(-1px);
}

.chapter__cta {
  display: inline-flex;
  margin-top: 27px;
  padding: 14px 19px;
  border-radius: 999px;
  align-items: center;
  gap: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #f95408);
  box-shadow: 0 14px 30px rgba(255, 100, 19, .25);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms ease 160ms, transform 550ms cubic-bezier(.2, .8, .2, 1) 160ms, box-shadow 220ms ease;
}

.demo.is-success .chapter__cta {
  opacity: 1;
  transform: none;
}

.chapter__cta:hover {
  box-shadow: 0 17px 36px rgba(255, 100, 19, .35);
}

.chapter__cta span {
  position: relative;
  display: block;
  width: 13px;
  height: 9px;
}

.chapter__cta span::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 12px;
  height: 1px;
  content: "";
  background: currentColor;
}

.chapter__cta span::after {
  position: absolute;
  top: 1px;
  right: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.story__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.story__progress {
  display: grid;
  width: min(390px, 100%);
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

.story__progress li {
  position: relative;
  display: grid;
  padding-top: 18px;
  gap: 4px;
  color: #9babb3;
  transition: color 360ms ease;
}

.story__progress li::before,
.story__progress li::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  border-radius: 99px;
  content: "";
}

.story__progress li::before {
  right: 8px;
  background: #d8e1e4;
}

.story__progress li::after {
  width: 0;
  background: linear-gradient(90deg, var(--orange), #ff9a66);
  box-shadow: 0 2px 7px rgba(255, 100, 19, .25);
}

.story__progress li.is-complete::after {
  width: calc(100% - 8px);
}

.story__progress li.is-active::after {
  animation: progress-fill var(--chapter-duration, 6000ms) linear forwards;
}

.story__progress li.is-active {
  color: var(--navy);
}

.story__progress span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.story__progress b {
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.story__replay {
  display: flex;
  padding: 10px 14px;
  border: 1px solid #cad8dd;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  color: #30566a;
  background: rgba(255, 255, 255, .58);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms ease, border-color 220ms ease;
}

.demo.is-finished .story__replay {
  opacity: 1;
  transform: none;
}

.story__replay:hover {
  border-color: var(--teal);
}

.story__replay-icon {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  border: 1.8px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-35deg);
}

.story__replay-icon::after {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 5px;
  height: 5px;
  border-bottom: 1.8px solid currentColor;
  border-left: 1.8px solid currentColor;
  content: "";
}

.product {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 3vw, 48px) clamp(24px, 3.5vw, 56px) clamp(34px, 4vw, 60px) 0;
  align-content: center;
}

.product::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 54% 46%, rgba(0, 127, 159, .13), transparent 47%);
}

.product__halo {
  position: absolute;
  top: 13%;
  right: 7%;
  bottom: 13%;
  left: 4%;
  border-radius: 50%;
  opacity: .6;
  filter: blur(60px);
  background: linear-gradient(135deg, rgba(7, 151, 180, .25), rgba(255, 100, 19, .11));
  transform: scale(.86);
  transition: transform 1200ms ease, opacity 1000ms ease;
}

.camera {
  position: relative;
  width: min(100%, calc((100vh - 130px) * 1.33));
  max-width: 910px;
  aspect-ratio: 1.33;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(126, 158, 171, .42);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 0%, rgba(79, 198, 218, .18), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(235, 243, 245, .96));
  box-shadow:
    0 34px 80px rgba(4, 40, 57, .18),
    0 10px 28px rgba(4, 40, 57, .11),
    inset 0 1px 0 #fff;
  perspective: 1400px;
}

.camera::before {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.camera__scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1120px;
  height: 700px;
  transform: translate3d(-50%, -50%, 0) scale(.72) rotateX(.5deg) rotateY(-1.3deg);
  transform-origin: 50% 50%;
  transition: transform 1450ms cubic-bezier(.18, .78, .2, 1), filter 650ms ease;
  will-change: transform;
}

.demo[data-camera="question"] .camera__scene {
  transform: translate3d(-61%, -58%, 0) scale(1.1) rotateX(.15deg) rotateY(-.35deg);
}

.demo[data-camera="answer"] .camera__scene {
  transform: translate3d(-59%, -48%, 0) scale(.97) rotateX(.25deg) rotateY(-.6deg);
}

.demo[data-camera="context"] .camera__scene {
  transform: translate3d(-50%, -50%, 0) scale(.72) rotateX(.4deg) rotateY(-1deg);
}

.demo[data-camera="evidence"] .camera__scene {
  transform: translate3d(-45%, -51%, 0) scale(.86) rotateX(.3deg) rotateY(-.6deg);
}

.demo[data-camera="confirm"] .camera__scene {
  transform: translate3d(-59%, -50%, 0) scale(.99) rotateX(.2deg) rotateY(-.5deg);
}

.demo[data-camera="success"] .camera__scene {
  transform: translate3d(-50%, -50%, 0) scale(.73) rotateX(.35deg) rotateY(-.8deg);
}

.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #aebfc7;
  border-radius: 17px;
  color: #233f4d;
  background: #fff;
  box-shadow: 0 28px 55px rgba(2, 28, 40, .27);
  font-family: "Segoe UI", Inter, sans-serif;
}

.app__bar {
  display: flex;
  height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid #ccd8dd;
  align-items: center;
  justify-content: space-between;
  color: #1e4051;
  background: #fff;
}

.app__brand,
.app__environment {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
}

.app__brand img {
  width: 23px;
  height: 23px;
}

.app__environment {
  color: #6e818b;
}

.app__environment i,
.waya__header i {
  width: 9px;
  height: 9px;
  border: 2px solid #d8f4e5;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px #e4f8ed;
}

.app__body {
  display: grid;
  height: calc(100% - 58px);
  grid-template-columns: 56px minmax(0, 1fr) 440px;
}

.app__rail {
  display: flex;
  padding: 18px 12px;
  border-right: 1px solid #d3dee2;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: #f8fafb;
}

.app__rail span {
  position: relative;
  width: 23px;
  height: 23px;
  border: 1px solid #93aab5;
  border-radius: 7px;
}

.app__rail span::before,
.app__rail span::after {
  position: absolute;
  left: 5px;
  width: 11px;
  height: 1px;
  content: "";
  background: #8199a5;
}

.app__rail span::before { top: 7px; }
.app__rail span::after { top: 12px; }

.app__rail span.is-active {
  border-color: var(--teal);
  background: #e8f8fb;
  box-shadow: 0 0 0 4px rgba(7, 151, 180, .08);
}

.workspace {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #f7f9fa;
}

.workspace__list,
.workspace__detail {
  position: absolute;
  inset: 0;
  padding: 16px;
  opacity: 1;
  transform: none;
  transition: opacity 550ms ease, transform 800ms cubic-bezier(.2, .8, .2, 1);
}

.workspace__detail {
  opacity: 0;
  pointer-events: none;
  transform: translateX(45px);
}

.demo.is-detail .workspace__list {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-42px);
}

.demo.is-detail .workspace__detail {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.workspace__heading,
.pdl__heading {
  display: flex;
  min-height: 65px;
  padding: 12px 15px;
  border: 1px solid #d5e0e4;
  border-radius: 10px 10px 0 0;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.workspace__heading > span {
  display: grid;
  gap: 4px;
}

.workspace__heading small,
.pdl__heading small {
  color: #8799a3;
  font-size: 10px;
}

.workspace__heading strong,
.pdl__heading strong {
  color: #153b4f;
  font-size: 18px;
}

.workspace__tools {
  display: flex;
  gap: 7px;
}

.workspace__tools i {
  width: 28px;
  height: 27px;
  border: 1px solid #c7d5da;
  border-radius: 6px;
  background: linear-gradient(#fff, #f4f7f8);
}

.table__header,
.table__rows > div {
  display: grid;
  grid-template-columns: 100px 1.8fr 1fr 70px 72px;
}

.table__header {
  padding: 10px 12px;
  border-right: 1px solid #d5e0e4;
  border-left: 1px solid #d5e0e4;
  color: #778c97;
  background: #edf2f4;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.table__rows {
  border: 1px solid #d5e0e4;
  border-radius: 0 0 10px 10px;
  background: #fff;
}

.table__rows > div {
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid #e5ebee;
  align-items: center;
  color: #4e6673;
  font-size: 10px;
}

.table__rows > div:nth-child(even) {
  background: #fafcfc;
}

.table__rows > div.is-alert {
  position: relative;
  color: #163d50;
  background: #fff7f2;
  box-shadow: inset 4px 0 0 var(--orange);
}

.table__rows b {
  color: #238457;
  font-weight: 600;
}

.table__rows em {
  padding: 3px 6px;
  border-radius: 999px;
  color: #258158;
  background: #ebf8f1;
  font-style: normal;
}

.table__rows .is-alert em {
  color: #bd4311;
  background: #ffe9dc;
}

.pdl__heading {
  justify-content: flex-start;
  gap: 12px;
}

.pdl__heading > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.pdl__heading em {
  color: #66808e;
  font-size: 9px;
  font-style: normal;
}

.pdl__drop {
  display: grid;
  width: 35px;
  height: 35px;
  border-radius: 9px;
  place-items: center;
  background: #e8f7fb;
}

.pdl__drop img {
  width: 22px;
  height: 22px;
}

.pdl__status {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: #247b54;
  background: #e9f7f0;
  font-size: 9px;
}

.pdl__alerts {
  display: grid;
  margin-top: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.pdl__alerts article {
  display: flex;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ffc9ae;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  background: #fff7f2;
}

.pdl__alerts article > span:last-child {
  display: grid;
  gap: 2px;
}

.pdl__alerts small {
  color: #c34b19;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pdl__alerts strong {
  color: #163d50;
  font-size: 11px;
}

.pdl__alerts em {
  color: #7d8e97;
  font-size: 8px;
  font-style: normal;
}

.alert__icon {
  display: grid;
  width: 28px;
  height: 28px;
  border: 1px solid #ffb993;
  border-radius: 50%;
  flex: 0 0 auto;
  place-items: center;
  color: var(--orange);
  background: #fff;
  font-weight: 900;
}

.pdl__facts {
  display: grid;
  margin-top: 10px;
  border: 1px solid #d5e0e4;
  border-radius: 9px;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background: #fff;
}

.pdl__facts span {
  display: grid;
  padding: 10px 11px;
  gap: 4px;
}

.pdl__facts span + span {
  border-left: 1px solid #dfe7ea;
}

.pdl__facts small,
.consumption small {
  color: #8798a1;
  font-size: 8px;
}

.pdl__facts strong,
.consumption strong {
  color: #183f52;
  font-size: 10px;
}

.pdl__lower {
  display: grid;
  height: 310px;
  margin-top: 10px;
  grid-template-columns: .95fr 1.05fr;
  gap: 10px;
}

.pdl__address,
.map {
  overflow: hidden;
  border: 1px solid #d5e0e4;
  border-radius: 9px;
  background: #fff;
}

.pdl__address {
  padding: 13px;
}

.pdl__address header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #173e51;
  font-size: 10px;
}

.pdl__address header span {
  color: #6e8793;
  font-size: 8px;
}

.pdl__address > p {
  margin: 16px 0 22px;
  color: #57717e;
  font-size: 10px;
  line-height: 1.6;
}

.consumption {
  display: grid;
  padding-top: 12px;
  border-top: 1px solid #e1e8eb;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.consumption > span {
  display: grid;
  gap: 4px;
}

.consumption__bars {
  display: flex;
  height: 84px;
  margin-top: 8px;
  grid-column: 1 / -1;
  align-items: end;
  gap: 6px;
}

.consumption__bars i {
  width: 18px;
  border-radius: 3px 3px 0 0;
  background: #1ba2bd;
}

.consumption__bars i:nth-child(1) { height: 25%; }
.consumption__bars i:nth-child(2) { height: 32%; }
.consumption__bars i:nth-child(3) { height: 30%; }
.consumption__bars i:nth-child(4) { height: 34%; }
.consumption__bars i:nth-child(5) { height: 38%; }
.consumption__bars i:nth-child(6) { height: 45%; }
.consumption__bars i:nth-child(7) { height: 55%; }
.consumption__bars i:nth-child(8) { height: 96%; background: var(--orange); }

.map {
  position: relative;
  background: #e7dfc8 url("assets/waya-map-14-rue-saint-pierre.webp") center / cover no-repeat;
}

.map__pin {
  position: absolute;
  top: 48%;
  left: 53%;
  display: grid;
  width: 44px;
  height: 44px;
  border: 4px solid #fff;
  border-radius: 50% 50% 50% 4px;
  place-items: center;
  background: var(--teal);
  box-shadow: 0 8px 20px rgba(6, 41, 59, .25);
  transform: rotate(-45deg);
}

.map__pin img {
  width: 23px;
  filter: brightness(0) invert(1);
  transform: rotate(45deg);
}

.waya {
  position: relative;
  display: grid;
  min-width: 0;
  border-left: 1px solid #cbd8dd;
  grid-template-rows: 58px minmax(0, 1fr) 75px;
  background: #f4f7f8;
}

.waya__header {
  display: flex;
  padding: 0 15px;
  border-bottom: 1px solid #cedadf;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.waya__header > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.waya__header img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.waya__header strong {
  color: #183d50;
  font-size: 14px;
}

.waya__model {
  padding: 4px 7px;
  border: 1px solid #f2cdb9;
  border-radius: 999px;
  color: #7b8d96;
  font-size: 8px;
}

.conversation {
  position: relative;
  min-height: 0;
  padding: 14px 14px 18px;
  overflow: hidden;
}

.conversation__delegation {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #d5e0e4;
  border-radius: 8px;
  color: #607783;
  background: #fff;
  font-size: 9px;
}

.message--user {
  max-width: 340px;
  min-height: 0;
  margin: 12px 0 0 auto;
  padding: 10px 12px;
  border-radius: 12px 12px 2px 12px;
  color: #fff;
  background: #073e57;
  box-shadow: 0 7px 16px rgba(6, 41, 59, .13);
  font-size: 10px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity 350ms ease, transform 500ms cubic-bezier(.2, .8, .2, 1);
}

.demo.is-sent .message--user,
.demo[data-phase="priority"] .message--user,
.demo[data-phase="context"] .message--user,
.demo[data-phase="action"] .message--user {
  opacity: 1;
  transform: none;
}

.thinking {
  display: flex;
  margin-top: 13px;
  align-items: center;
  gap: 8px;
  color: #7a909a;
  font-size: 9px;
  opacity: 0;
  transition: opacity 300ms ease;
}

.thinking i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(54, 189, 120, .11);
  animation: status-pulse 900ms ease-in-out infinite;
}

.demo.is-thinking .thinking {
  opacity: 1;
}

.answer,
.context-summary,
.confirmation,
.success {
  position: absolute;
  right: 14px;
  left: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1);
}

.answer {
  top: 128px;
}

.demo[data-phase="priority"] .answer {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.answer > p:first-child {
  margin: 0 0 9px;
  color: #5f7682;
  font-size: 9px;
}

.priority-card {
  position: relative;
  padding: 13px 13px 12px 16px;
  overflow: hidden;
  border: 1px solid #ffd0b7;
  border-radius: 9px;
  background: #fff8f3;
}

.priority-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--orange);
}

.priority-card small {
  color: #dc4e0d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.priority-card > strong {
  display: block;
  margin-top: 5px;
  color: #123c51;
  font-size: 14px;
}

.priority-card > p {
  margin: 5px 0 8px;
  color: #536d79;
  font-size: 9px;
  line-height: 1.35;
}

.priority-card mark {
  padding: 1px 3px;
  border-radius: 3px;
  color: #bd3f09;
  background: #ffe5d7;
  font-weight: 800;
}

.priority-card dl,
.confirmation dl {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.priority-card dl > div {
  display: grid;
  padding: 6px;
  border-radius: 5px;
  gap: 2px;
  background: rgba(255, 255, 255, .76);
}

.priority-card dt,
.confirmation dt {
  color: #86969e;
  font-size: 7px;
}

.priority-card dd,
.confirmation dd {
  margin: 0;
  color: #173e51;
  font-size: 8px;
  font-weight: 800;
}

.answer__why {
  margin: 9px 0 0;
  color: #617985;
  font-size: 8px;
  line-height: 1.4;
}

.answer__open {
  display: flex;
  margin: 11px 0 0 auto;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: #0680a4;
  box-shadow: 0 7px 15px rgba(6, 128, 164, .19);
  font-size: 8px;
  font-weight: 800;
}

.answer__open span {
  position: relative;
  display: block;
  width: 11px;
  height: 8px;
}

.answer__open span::before {
  position: absolute;
  top: 3px;
  left: 0;
  width: 10px;
  height: 1px;
  content: "";
  background: currentColor;
}

.answer__open span::after {
  position: absolute;
  top: 1px;
  right: 0;
  width: 4px;
  height: 4px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.context-summary {
  top: 128px;
  padding: 12px;
  border: 1px solid #d2dfe4;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(6, 41, 59, .06);
}

.demo[data-phase="context"] .context-summary {
  opacity: 1;
  transform: none;
}

.context-summary p {
  margin: 0;
  color: #58717d;
  font-size: 9px;
  line-height: 1.4;
}

.context-summary p:last-child {
  margin-top: 10px;
  color: #174359;
  font-weight: 700;
}

.context-summary ul {
  display: grid;
  margin: 10px 0;
  padding: 0;
  gap: 5px;
  list-style: none;
}

.context-summary li {
  display: flex;
  padding: 7px 8px;
  border-radius: 5px;
  justify-content: space-between;
  color: #617985;
  background: #f2f6f7;
  font-size: 8px;
}

.context-summary li strong {
  color: #173e51;
}

.confirmation {
  top: 124px;
  padding: 13px;
  border: 1px solid #f2b28e;
  border-left: 4px solid var(--orange);
  border-radius: 9px;
  background: #fffaf6;
  box-shadow: 0 12px 25px rgba(100, 49, 20, .09);
}

.demo[data-phase="action"] .confirmation:not(.is-confirmed) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.confirmation > small {
  color: #d64d0e;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.confirmation > strong {
  display: block;
  margin: 4px 0 10px;
  color: #143e53;
  font-size: 14px;
}

.confirmation dl {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.confirmation dl > div {
  display: flex;
  justify-content: space-between;
}

.confirmation > p {
  margin: 11px 0;
  padding: 8px;
  border-radius: 5px;
  color: #5b727e;
  background: #fff;
  font-size: 8px;
}

.confirmation > div:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.confirmation button {
  padding: 7px 9px;
  border: 1px solid #d5dfe3;
  border-radius: 6px;
  color: #637985;
  background: #fff;
  font-size: 8px;
}

.confirmation .confirmation__accept {
  border-color: #79b9ca;
  color: #075d78;
  background: #eaf8fb;
  font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.demo.is-confirming .confirmation__accept {
  background: #cceff5;
  box-shadow: 0 0 0 5px rgba(7, 151, 180, .12);
  transform: scale(.96);
}

.success {
  top: 124px;
  display: flex;
  padding: 15px;
  border: 1px solid #b9e5ce;
  border-radius: 9px;
  align-items: flex-start;
  gap: 11px;
  background: #f1fbf6;
  box-shadow: 0 11px 25px rgba(32, 126, 80, .11);
}

.demo.is-success .success {
  opacity: 1;
  transform: none;
}

.success__check {
  position: relative;
  display: grid;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--green);
}

.success__check::after {
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  transform: rotate(-45deg) translateY(-1px);
}

.success > span:last-child {
  display: grid;
  gap: 3px;
}

.success small {
  color: #278056;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.success strong {
  color: #153e52;
  font-size: 15px;
}

.success em {
  color: #607985;
  font-size: 8px;
  font-style: normal;
}

.composer {
  position: relative;
  display: flex;
  height: 51px;
  margin: 12px 14px;
  padding: 0 50px 0 13px;
  border: 1px solid #c8d6dc;
  border-radius: 10px;
  align-items: center;
  overflow: hidden;
  color: #476370;
  background: #fff;
  box-shadow: 0 4px 11px rgba(6, 41, 59, .05);
  font-size: 9px;
}

.composer__placeholder {
  color: #9aacb4;
}

.composer__text {
  position: absolute;
  inset: 0 50px 0 13px;
  display: flex;
  align-items: center;
  line-height: 1.25;
}

.composer.is-typing .composer__placeholder,
.composer.is-typed .composer__placeholder {
  opacity: 0;
}

.composer__caret {
  display: none;
  width: 1px;
  height: 14px;
  margin-left: 1px;
  background: var(--teal);
  animation: caret 750ms steps(1) infinite;
}

.composer.is-typing .composer__caret {
  display: block;
}

.composer button {
  position: absolute;
  right: 8px;
  display: grid;
  width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  place-items: center;
  color: #fff;
  background: var(--navy-soft);
}

.composer button::before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid currentColor;
  content: "";
  transform: translateX(1px);
}

.demo.is-sent .composer__text {
  opacity: 0;
}

.camera__shine {
  position: absolute;
  top: -25%;
  left: -45%;
  z-index: 4;
  width: 44%;
  height: 145%;
  opacity: .24;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: skewX(-18deg);
  animation: shine 11s ease-in-out infinite;
}

.product__caption {
  position: relative;
  display: flex;
  width: min(100%, calc((100vh - 130px) * 1.33));
  max-width: 880px;
  margin: 15px 0 0 auto;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
  color: #67818e;
  font-size: 10px;
  letter-spacing: .04em;
}

.product__caption span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.product__caption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(54, 189, 120, .1);
}

.product__caption b {
  color: #31576a;
  font-size: 10px;
  text-transform: uppercase;
  transition: opacity 250ms ease;
}

@keyframes progress-fill {
  from { width: 0; }
  to { width: calc(100% - 8px); }
}

@keyframes status-pulse {
  50% { opacity: .45; transform: scale(.8); }
}

@keyframes caret {
  50% { opacity: 0; }
}

@keyframes shine {
  0%, 68% { transform: translateX(0) skewX(-18deg); }
  90%, 100% { transform: translateX(390%) skewX(-18deg); }
}

@media (max-width: 1180px) {
  .demo {
    grid-template-columns: minmax(360px, .8fr) minmax(580px, 1.25fr);
  }

  .story {
    padding-right: 34px;
    padding-left: 34px;
  }

  .chapter h1,
  .chapter h2 {
    font-size: clamp(44px, 4.5vw, 60px);
  }
}

@media (max-width: 900px) {
  .waya-hero {
    padding-top: 4.75rem;
  }

  .demo {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .story {
    min-height: 56svh;
    padding: 28px 24px 24px;
  }

  .story__chapters {
    min-height: 360px;
  }

  .chapter {
    width: 100%;
  }

  .chapter h1,
  .chapter h2 {
    font-size: clamp(46px, 12vw, 68px);
  }

  .chapter__lead {
    max-width: 620px;
    font-size: 17px;
  }

  .product {
    min-height: 54svh;
    padding: 16px 16px 40px;
  }

  .camera {
    width: 100%;
    margin: auto;
  }

  .product__caption {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .story__brand small,
  .story__progress b,
  .product__caption b {
    display: none;
  }

  .story__chapters {
    min-height: 410px;
  }

  .chapter__lead {
    margin-top: 22px;
  }

  .story__footer {
    align-items: center;
  }

  .product {
    min-height: 420px;
  }

  .camera {
    border-radius: 18px;
  }

  .camera__scene {
    transform: translate3d(-50%, -50%, 0) scale(.43);
  }

  .demo[data-camera="question"] .camera__scene,
  .demo[data-camera="answer"] .camera__scene,
  .demo[data-camera="confirm"] .camera__scene {
    transform: translate3d(-59%, -50%, 0) scale(.58);
  }

  .demo[data-camera="context"] .camera__scene,
  .demo[data-camera="success"] .camera__scene {
    transform: translate3d(-50%, -50%, 0) scale(.43);
  }

  .demo[data-camera="evidence"] .camera__scene {
    transform: translate3d(-45%, -50%, 0) scale(.5);
  }
}

@media (max-width: 360px) {
  .chapter[data-chapter="action"] h2 span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo *,
  .demo *::before,
  .demo *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}