/* The demo reel at the top of "Book a demo": a sped-up video call of two demos.
   First (.is-auto) a dental clinic keeps its website and adds automation; then a
   new plumbing business, where the shared screen on the left goes Name -> Logo ->
   Colours -> Website, while the two people on the right talk it through.
   demo-reel.js drives data-step, data-talk and the per-element .is-* classes;
   everything that moves is a transition here.
   The screen is sized in cqw, so it scales like a video at every width. */
.dr {
  --c1: #14365F;
  --c2: #2BB3A3;
  --c3: #E7F3FA;
  margin: 0 auto clamp(26px, 3vw, 36px);
  max-width: 980px;
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 60px -36px rgba(12, 36, 84, .35);
  text-align: start;
}
.dr.is-warm { --c2: #F08A3C; }
.dr-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 27%, 248px);
  gap: 12px;
  align-items: stretch;
}

/* --- the shared screen --- */
.dr-screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10.6;
  overflow: hidden;
  border-radius: 10px;
  background: #F3F5FA;
  box-shadow: inset 0 0 0 1px var(--hair);
  font-family: var(--sans);
  color: var(--ink);
}
.dr-win-bar {
  display: flex;
  align-items: center;
  gap: .9cqw;
  height: 6.2cqw;
  padding: 0 2.2cqw;
  border-bottom: 1px solid var(--hair);
  background: #fff;
}
.dr-win-bar i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: #D8DCE6; }
.dr-win-title { margin-left: 1.6cqw; font-size: 1.75cqw; font-weight: 600; color: var(--ink-3); }
.dr-steps {
  display: flex;
  gap: 1.2cqw;
  margin: 0;
  padding: 2.4cqw 3cqw 0;
  list-style: none;
  white-space: nowrap;
}
.dr-steps li {
  display: flex;
  align-items: center;
  gap: .8cqw;
  padding: .75cqw 1.7cqw .75cqw .8cqw;
  border-radius: 99px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 1.75cqw;
  font-weight: 600;
  color: var(--ink-3);
  transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.dr-steps b {
  display: grid;
  place-items: center;
  width: 2.5cqw;
  height: 2.5cqw;
  border-radius: 50%;
  background: var(--bg-2);
  font-size: 1.45cqw;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.dr[data-step="0"] .dr-steps [data-s="0"],
.dr[data-step="1"] .dr-steps [data-s="1"],
.dr[data-step="2"] .dr-steps [data-s="2"],
.dr[data-step="3"] .dr-steps [data-s="3"],
.dr[data-step="4"] .dr-steps [data-s="4"],
.dr[data-step="5"] .dr-steps [data-s="5"],
.dr[data-step="6"] .dr-steps [data-s="6"],
.dr[data-step="7"] .dr-steps [data-s="7"],
.dr[data-step="8"] .dr-steps [data-s="8"],
.dr[data-step="9"] .dr-steps [data-s="9"] { background: var(--navy); color: var(--on-ink); box-shadow: none; }
.dr[data-step="0"] .dr-steps [data-s="0"] b,
.dr[data-step="1"] .dr-steps [data-s="1"] b,
.dr[data-step="2"] .dr-steps [data-s="2"] b,
.dr[data-step="3"] .dr-steps [data-s="3"] b,
.dr[data-step="4"] .dr-steps [data-s="4"] b,
.dr[data-step="5"] .dr-steps [data-s="5"] b,
.dr[data-step="6"] .dr-steps [data-s="6"] b,
.dr[data-step="7"] .dr-steps [data-s="7"] b,
.dr[data-step="8"] .dr-steps [data-s="8"] b,
.dr[data-step="9"] .dr-steps [data-s="9"] b { background: rgba(255, 255, 255, .18); color: #fff; }
/* each demo shows its own five steps */
.dr-steps li:nth-child(n+6),
.dr.is-auto .dr-steps li:nth-child(-n+5) { display: none; }
.dr.is-auto .dr-steps li:nth-child(n+6) { display: flex; }
/* Steps already done keep a quiet tick-mark colour. */
.dr-steps li.is-done { color: var(--navy); }
.dr-steps li.is-done b { background: rgba(12, 36, 84, .12); }

.dr-scenes { position: absolute; inset: 15.5cqw 3cqw 3cqw; }
.dr-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.2cqw);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.dr[data-step="0"] .dr-scene[data-s="0"],
.dr[data-step="1"] .dr-scene[data-s="1"],
.dr[data-step="2"] .dr-scene[data-s="2"],
.dr[data-step="3"] .dr-scene[data-s="3"],
.dr[data-step="4"] .dr-scene[data-s="3"],
.dr[data-step="5"] .dr-scene[data-s="5"],
.dr[data-step="6"] .dr-scene[data-s="5"],
.dr[data-step="7"] .dr-scene[data-s="5"],
.dr[data-step="8"] .dr-scene[data-s="5"],
.dr[data-step="9"] .dr-scene[data-s="5"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Things that arrive one by one: hidden until .is-in. */
.dr-name, .dr-logo, .dr-swatches li, .dr-b, .dr-k {
  opacity: 0;
  transform: translateY(1cqw) scale(.97);
  transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.dr .is-in { opacity: 1; transform: none; }

/* 1. Names */
.dr-names { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2cqw; }
.dr-name {
  display: grid;
  align-content: center;
  gap: .6cqw;
  padding: 0 3cqw;
  border-radius: 1.6cqw;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.dr-name b { font: 500 4.4cqw/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.dr-name span { font-size: 1.6cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* 2. Logos */
.dr-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; align-content: center; }
.dr-logo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.25;
  border-radius: 1.6cqw;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
  overflow: hidden;
}
.dr-logo svg { width: 58%; height: auto; opacity: 0; transform: scale(.7); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.dr-logo.is-made svg { opacity: 1; transform: none; }
/* "Generating": a sheen sweeps the empty card until the mark lands. */
.dr-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(72, 108, 252, .13) 50%, transparent 70%);
  transform: translateX(-100%);
}
.dr-logo.is-in:not(.is-made)::after { animation: dr-sheen 1s linear infinite; }
@keyframes dr-sheen { to { transform: translateX(100%); } }
.dr-logos.is-chosen .dr-logo:not(.is-picked) { opacity: .38; transform: scale(.96); }

/* the chosen card, in any scene */
.dr .is-picked { box-shadow: inset 0 0 0 .35cqw var(--spark), 0 1.2cqw 3cqw -1.6cqw rgba(72, 108, 252, .55); }
.dr-name.is-picked { background: #F5F7FF; }

/* 3. Colours */
.dr-colours { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; align-items: center; }
.dr-lockup {
  display: grid;
  justify-items: center;
  gap: 1.8cqw;
  padding: 4cqw 2cqw;
  border-radius: 1.6cqw;
  background: var(--c3);
}
.dr-lockup svg { width: 13cqw; height: auto; }
.dr-lockup svg path, .dr-logo svg path, .dr-logo svg circle, .dr-logo svg rect { transition: fill .6s var(--ease), stroke .6s var(--ease); }
.dr-lockup p { display: grid; justify-items: center; gap: .5cqw; margin: 0; }
.dr-lockup b { font: 500 4.2cqw/1 var(--display); color: var(--c1); }
.dr-lockup span { font-size: 1.5cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c2); transition: color .6s var(--ease); }
.dr-swatches { display: grid; gap: 1.3cqw; margin: 0; padding: 0; list-style: none; }
.dr-swatches li {
  display: grid;
  grid-template-columns: 5.4cqw 1fr auto;
  align-items: center;
  gap: 1.6cqw;
  padding: 1cqw 1.6cqw 1cqw 1cqw;
  border-radius: 1.4cqw;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 1.8cqw;
  font-weight: 600;
}
.dr-swatches i { height: 5.4cqw; border-radius: 1cqw; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(12, 36, 84, .08); transition: background .6s var(--ease); }
.dr-swatches code { font: 500 1.55cqw/1 var(--mono); color: var(--ink-3); }
.dr-hex-b, .dr.is-warm .dr-hex-a { display: none; }
.dr.is-warm .dr-hex-b { display: inline; }

/* 4. Website */
.dr-page {
  position: absolute;
  inset: 0 0 auto;
  padding-bottom: 3cqw;
  overflow: hidden;
  border-radius: 1.6cqw;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair), 0 2cqw 5cqw -3cqw rgba(12, 36, 84, .35);
}
.dr-nav { display: flex; align-items: center; gap: 1.4cqw; height: 7cqw; padding: 0 2.6cqw; border-bottom: 1px solid #EDF0F5; }
.dr-nav svg { width: 3.6cqw; height: 3.6cqw; }
.dr-nav b { margin-inline-end: auto; font: 500 2.5cqw/1 var(--display); color: var(--c1); }
.dr-nav i { width: 5cqw; height: .9cqw; border-radius: 1cqw; background: #E3E7EF; }
.dr-nav em, .dr-hero em {
  padding: 1cqw 1.8cqw;
  border-radius: 99px;
  background: var(--c2);
  color: #fff;
  font-size: 1.45cqw;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.dr-hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3cqw;
  align-items: center;
  padding: 3.2cqw 3.6cqw 2.6cqw;
  background: linear-gradient(180deg, var(--c3), #fff);
}
.dr-hero-copy { display: grid; justify-items: start; gap: 1.6cqw; }
.dr-hero h4 { margin: 0; font: 600 3.7cqw/1.08 var(--sans); letter-spacing: -.03em; color: var(--c1); }
.dr-hero p { margin: 0; font-size: 1.7cqw; color: var(--ink-2); }
.dr-hero em { padding: 1.3cqw 2.4cqw; font-size: 1.6cqw; }
.dr-hero-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1.7;
  border-radius: 2cqw;
  background: radial-gradient(circle at 30% 25%, #4FB1E3, var(--c1) 75%);
}
.dr-hero-art svg { width: 30%; }
.dr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; padding: 0 3.6cqw; }
.dr-cards span {
  padding: 2cqw 1.8cqw;
  border-radius: 1.2cqw;
  background: #F6F8FB;
  box-shadow: inset 0 3px 0 var(--c2);
  font-size: 1.55cqw;
  font-weight: 700;
  color: var(--c1);
}

/* the pointer */
.dr-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 3.4cqw;
  height: 3.4cqw;
  opacity: 0;
  transform: translate(70cqw, 40cqw);
  transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .3s;
  filter: drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .2));
  pointer-events: none;
}
.dr-cursor.is-on { opacity: 1; }
.dr-cursor path { transform-origin: 30% 20%; transition: transform .12s; }
.dr-cursor.is-click path { transform: scale(.82); }

/* --- the two people --- */
.dr-people { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-width: 0; }
.dr-person { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; }
.dr-tile {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #EEF2FD;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow .25s var(--ease);
}
.dr-person[data-who="you"] .dr-tile { background: #F9E8D4; transition: box-shadow .25s var(--ease), background .6s var(--ease); }
.dr.is-auto .dr-person[data-who="you"] .dr-tile { background: #DAF1E6; }
/* Both people are soft-3D head-and-shoulders pictures, each tile in its picture's own
   background colour: Sozou is Heng's "digital me" (build_digital_me.py), the client a
   tradie drawn to match (build_client_3d.py). */
.dr-person[data-who="sozou"] .dr-tile { background: #EFF2FA; }
.dr-tile img {
  position: absolute;
  left: 50%;
  bottom: -11%;
  width: auto;
  height: 113%;
  max-width: none;
  transform: translateX(-50%);
}
.dr-talk { visibility: hidden; }
/* the automation demo's client, a dentist (build_client2_3d.py); the two clients
   crossfade when the demo changes */
[data-who="you"] .dr-tile img { transition: opacity .6s var(--ease); }
.dr-tile .dr-dent,
.dr.is-auto [data-who="you"] .dr-tile img:not(.dr-dent) { opacity: 0; }
.dr.is-auto [data-who="you"] .dr-tile .dr-dent { opacity: 1; }
.dr[data-talk="sozou"] [data-who="sozou"] .dr-talk,
.dr[data-talk="you"] [data-who="you"] .dr-talk { visibility: visible; }
.dr[data-talk="sozou"] [data-who="sozou"] .dr-idle,
.dr[data-talk="you"] [data-who="you"] .dr-idle { visibility: hidden; }
.dr[data-talk="sozou"] [data-who="sozou"] .dr-tile,
.dr[data-talk="you"] [data-who="you"] .dr-tile { box-shadow: inset 0 0 0 2px var(--spark); }
.dr-tag {
  position: absolute;
  inset-inline-start: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(22, 24, 31, .72);
  color: #fff;
  font: 600 11.5px/1.4 var(--sans);
}
.dr-level {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--spark);
  opacity: 0;
  transition: opacity .2s;
}
.dr-level i { width: 3px; height: 4px; border-radius: 2px; background: #fff; }
.dr[data-talk="sozou"] [data-who="sozou"] .dr-level,
.dr[data-talk="you"] [data-who="you"] .dr-level { opacity: 1; }
.dr[data-talk="sozou"] [data-who="sozou"] .dr-level i,
.dr[data-talk="you"] [data-who="you"] .dr-level i { animation: dr-level .5s ease-in-out infinite alternate; }
.dr-level i:nth-child(2) { animation-delay: -.25s !important; }
.dr-level i:nth-child(3) { animation-delay: -.4s !important; }
@keyframes dr-level { to { height: 11px; } }

/* what each one last said: a speech bubble under the tile */
.dr-say {
  position: relative;
  display: grid;
  min-height: 3.2em;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--bg-2);
  font: 500 13px/1.45 var(--sans);
  color: var(--ink);
  transition: opacity .3s;
}
.dr-say::before {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}
.dr-say p {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.dr-say p.is-on { opacity: 1; transform: none; }
/* the one not speaking fades back a little */
.dr[data-talk="sozou"] [data-who="you"] .dr-say,
.dr[data-talk="you"] [data-who="sozou"] .dr-say { opacity: .55; }
.dr-say:not(:has(.is-on)) { opacity: 0; }

/* --- the player bar --- */
.dr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 0 2px;
  font: 600 12px/1 var(--sans);
  color: var(--ink-3);
}
.dr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 99px;
  background: rgba(72, 108, 252, .1);
  color: var(--spark);
  white-space: nowrap;
}
.dr-chip svg { width: 13px; height: 13px; fill: currentColor; }
.dr-clock, .dr-total { font-variant-numeric: tabular-nums; min-width: 4ch; }
.dr-clock { color: var(--ink); text-align: end; }
.dr-track {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  height: 4px;
}
.dr-track i:nth-child(6) { margin-inline-start: 5px; }
.dr-track i { border-radius: 2px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--hair); }
.dr-track b {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: 2px;
  background: var(--navy);
}
.dr-play {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.dr-play:hover { border-color: var(--ink); color: var(--ink); }
.dr-play:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.dr-play svg { width: 13px; height: 13px; fill: currentColor; }
.dr-i-play, .dr-l-play, .dr.is-paused .dr-i-pause, .dr.is-paused .dr-l-pause { display: none; }
.dr.is-paused .dr-i-play { display: block; }
.dr.is-paused .dr-l-play { display: inline; }
.dr.is-paused .dr-level i, .dr.is-paused .dr-logo::after,
.dr.is-paused .dr-call-ic, .dr.is-paused .dr-wave i { animation-play-state: paused; }

/* 4b. The same website on a phone: the desktop page steps back and a phone
   slides up beside it. */
.dr-page { transform-origin: left top; transition: transform .8s var(--ease); }
[dir="rtl"] .dr-page { transform-origin: right top; }
[dir="rtl"] .dr-chat { transform-origin: left bottom; }
.dr-site.is-mobile .dr-page { transform: scale(.84); }
.dr-phone {
  position: absolute;
  inset-inline-end: 2cqw;
  top: 0;
  z-index: 2;
  height: 100%;
  aspect-ratio: 9 / 18.5;
  padding: .8cqw;
  border-radius: 3.6cqw;
  background: #16181F;
  box-shadow: 0 2.4cqw 5cqw -2cqw rgba(12, 36, 84, .5);
  transform: translateY(115%);
  transition: transform .8s var(--ease);
}
.dr-site.is-mobile .dr-phone { transform: none; }
.dr-phone-in { height: 100%; overflow: hidden; border-radius: 2.8cqw; background: #fff; }
.dr-pnav { display: flex; align-items: center; gap: .9cqw; height: 5cqw; padding: 1cqw 1.6cqw 0; }
.dr-pnav svg { width: 2.6cqw; height: 2.6cqw; }
.dr-pnav b { margin-inline-end: auto; font: 500 1.8cqw/1 var(--display); color: var(--c1); }
.dr-burger { display: grid; gap: .4cqw; width: 2.2cqw; }
.dr-burger i { height: .3cqw; border-radius: 1cqw; background: var(--c1); }
.dr-phero { display: grid; justify-items: start; gap: 1.3cqw; padding: 2cqw 1.6cqw 1.8cqw; background: linear-gradient(180deg, var(--c3), #fff); }
.dr-ph { margin: 0; font: 600 2.35cqw/1.1 var(--sans); letter-spacing: -.03em; color: var(--c1); }
.dr-phero em { padding: .8cqw 1.4cqw; border-radius: 99px; background: var(--c2); color: #fff; font-size: 1.15cqw; font-style: normal; font-weight: 700; white-space: nowrap; }
.dr-part { display: grid; place-items: center; margin: 0 1.6cqw; aspect-ratio: 1.45; border-radius: 1.4cqw; background: radial-gradient(circle at 30% 25%, #4FB1E3, var(--c1) 75%); }
.dr-part svg { width: 30%; }
.dr-pcard { display: block; margin: 1.1cqw 1.6cqw 0; padding: 1.3cqw 1.2cqw; border-radius: 1cqw; background: #F6F8FB; box-shadow: inset 0 2px 0 var(--c2); font-size: 1.2cqw; font-weight: 700; color: var(--c1); }

/* 5. The AI assistant: a chat button on the site, then the conversation. */
.dr-launch {
  position: absolute;
  inset-inline-end: 2.4cqw;
  bottom: 1.4cqw;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 5.4cqw;
  height: 5.4cqw;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 1cqw 2.4cqw -1cqw rgba(12, 36, 84, .6);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .35s var(--ease), transform .45s cubic-bezier(.3, 1.5, .5, 1);
}
.dr-launch svg { width: 50%; }
.dr-launch.is-in { opacity: 1; transform: none; }
.dr-chat {
  position: absolute;
  inset-inline-end: 2.4cqw;
  top: 1.2cqw;
  bottom: 7.8cqw;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 36cqw;
  overflow: hidden;
  border-radius: 1.8cqw;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hair), 0 2.4cqw 6cqw -2cqw rgba(12, 36, 84, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6cqw) scale(.95);
  transform-origin: right bottom;
  transition: opacity .4s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.dr-chat.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dr-chat-head { display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 1.8cqw; background: var(--c1); color: #fff; }
.dr-chat-head i { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--c2) 19%); }
.dr-chat-head p { display: grid; gap: .3cqw; margin: 0; }
.dr-chat-head b { font: 500 1.9cqw/1 var(--display); }
.dr-chat-head span { font-size: 1.25cqw; font-weight: 600; opacity: .8; }
.dr-chat-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 1cqw; padding: 1.6cqw; overflow: hidden; }
.dr-msg {
  display: none;
  max-width: 84%;
  margin: 0;
  padding: 1.1cqw 1.5cqw;
  border-radius: 1.6cqw;
  font-size: 1.45cqw;
  line-height: 1.35;
}
.dr-msg.is-in { display: block; animation: dr-pop .35s var(--ease); }
.dr-msg-c { align-self: flex-end; border-bottom-right-radius: .4cqw; background: var(--c1); color: #fff; }
.dr-msg-a { align-self: flex-start; border-bottom-left-radius: .4cqw; background: #F0F3F8; color: var(--ink); }
.dr-typing { display: none; align-self: flex-start; gap: .5cqw; margin: 0; padding: 1.3cqw 1.5cqw; border-radius: 1.6cqw; background: #F0F3F8; }
.dr-typing.is-in { display: flex; }
.dr-typing i { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--ink-3); animation: dr-dot 1s ease-in-out infinite; }
.dr-typing i:nth-child(2) { animation-delay: .15s; }
.dr-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dr-pop { from { opacity: 0; transform: translateY(.8cqw) scale(.96); } }
@keyframes dr-dot { 50% { transform: translateY(-.5cqw); opacity: .5; } }

/* The end of the run: it stops here, on the visitor's next step. */
.dr-end {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.6cqw;
  padding: 4cqw;
  background: rgba(250, 250, 252, .86);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.dr.is-end .dr-end { opacity: 1; visibility: visible; transition-delay: 0s; }
.dr-end-title { margin: 0; font: 500 5.2cqw/1.1 var(--sans); letter-spacing: -.045em; color: var(--navy); text-wrap: balance; }
.dr-end-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dr-go, .dr-again {
  padding: 12px 22px;
  border: 1px solid var(--navy);
  border-radius: 99px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dr-go { background: var(--navy); color: var(--on-ink); box-shadow: 0 8px 30px -14px rgba(12, 36, 84, .5); }
.dr-go:hover { background: var(--navy-2); }
.dr-again { background: transparent; color: var(--navy); border-color: var(--hair-2); }
.dr-again:hover { border-color: var(--navy); }
.dr-go:focus-visible, .dr-again:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

/* ===== The automation demo: a clinic that already has a website =====
   One scene (data-s 5) for steps 5-9, in the clinic's own colours; its site reuses
   the website step's markup and look. demo-reel.js sets is-back (the site steps
   back) and is-sms on the scene, and .is-in on the switch, call, calendar, texts
   and review card. */
.dr-auto { --c1: #1D4E5F; --c2: #2FAE97; --c3: #E4F4EF; }
.dr-auto .dr-hero-art { background: radial-gradient(circle at 30% 25%, #6FD1BC, var(--c1) 75%); }
.dr-auto .dr-hero-art svg { width: 34%; }
.dr-auto.is-back .dr-page { transform: scale(.84); }

/* the switch that turns automation on, under the site */
.dr-switch {
  position: absolute;
  left: 50%;
  bottom: .6cqw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding-block: 1cqw;
  padding-inline: 2.2cqw 1.2cqw;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hair), 0 1.4cqw 3.6cqw -1.6cqw rgba(12, 36, 84, .45);
  font-size: 1.75cqw;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 1cqw);
  transition: opacity .4s var(--ease), transform .45s var(--ease), box-shadow .4s var(--ease);
}
.dr .dr-switch.is-in { opacity: 1; transform: translate(-50%, 0); }
/* its job is done once the panels come: it steps aside */
.dr .dr-auto.is-back .dr-switch { opacity: 0; }
.dr-switch i { position: relative; flex: none; width: 5.2cqw; height: 3cqw; border-radius: 99px; background: #D5DAE4; transition: background .35s var(--ease); }
.dr-switch i::after {
  content: "";
  position: absolute;
  top: .35cqw;
  inset-inline-start: .35cqw;
  width: 2.3cqw;
  height: 2.3cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .2);
  transition: transform .35s var(--ease);
}
.dr-switch.is-on { box-shadow: 0 0 0 .3cqw rgba(47, 174, 151, .35), 0 1.4cqw 3.6cqw -1.6cqw rgba(12, 36, 84, .45); }
.dr-switch.is-on i { background: var(--c2); }
.dr-switch.is-on i::after { transform: translateX(2.2cqw); }
[dir="rtl"] .dr-switch.is-on i::after { transform: translateX(-2.2cqw); }

/* panels over the site, where the chat sat: the call, then the calendar */
.dr-call, .dr-cal {
  position: absolute;
  inset-inline-end: 2.4cqw;
  top: 1.2cqw;
  bottom: 1.2cqw;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 36cqw;
  overflow: hidden;
  border-radius: 1.8cqw;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hair), 0 2.4cqw 6cqw -2cqw rgba(12, 36, 84, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6cqw) scale(.95);
  transform-origin: right bottom;
  transition: opacity .4s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
[dir="rtl"] .dr-call, [dir="rtl"] .dr-cal { transform-origin: left bottom; }
.dr .dr-call.is-in, .dr .dr-cal.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* the call: it rings, the AI receptionist picks up, and the words appear */
.dr-call-head { display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 1.8cqw; background: var(--c1); color: #fff; }
.dr-call-ic { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #E0544B; transition: background .4s var(--ease); }
.dr-call-ic svg { width: 55%; }
.dr-call.is-in:not(.is-answered) .dr-call-ic { animation: dr-ring 1s ease-in-out infinite; }
@keyframes dr-ring { 0%, 80%, to { transform: none; } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } }
.dr-call.is-answered .dr-call-ic { background: var(--c2); }
.dr-call-head p { display: grid; gap: .3cqw; flex: 1; min-width: 0; margin: 0; }
.dr-call-head b { grid-area: 1 / 1; font: 500 1.9cqw/1.1 var(--display); transition: opacity .3s var(--ease); }
.dr-call-head p span { font-size: 1.25cqw; font-weight: 600; opacity: .8; }
.dr-call-ai, .dr-call.is-answered .dr-call-ring { opacity: 0; }
.dr-call.is-answered .dr-call-ai { opacity: 1; }
.dr-wave { display: flex; align-items: center; gap: .35cqw; height: 3cqw; opacity: 0; transition: opacity .3s var(--ease); }
.dr-wave i { width: .45cqw; height: .8cqw; border-radius: 1cqw; background: #fff; }
.dr-call.is-answered .dr-wave { opacity: 1; }
.dr-call.is-answered .dr-wave i { animation: dr-wave .55s ease-in-out infinite alternate; }
.dr-wave i:nth-child(2) { animation-delay: -.2s; }
.dr-wave i:nth-child(3) { animation-delay: -.4s; }
.dr-wave i:nth-child(4) { animation-delay: -.1s; }
@keyframes dr-wave { to { height: 2.6cqw; } }

/* the calendar: the booking drops into the free 10:00 slot */
.dr-cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; padding: 1.6cqw 2cqw; border-bottom: 1px solid #EDF0F5; }
.dr-cal-head b { font: 500 2.2cqw/1 var(--display); color: var(--c1); }
.dr-cal-head span { font-size: 1.3cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dr-cal-day { display: grid; grid-template-columns: auto 1fr; grid-auto-rows: 1fr; gap: 1.1cqw 1.4cqw; padding: 1.6cqw 2cqw 2cqw; }
.dr-hour { padding-top: .3cqw; font-size: 1.35cqw; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.dr-cal-day i { position: relative; border-radius: 1cqw; font-style: normal; }
.dr-busy { background: #EEF1F6; box-shadow: inset .5cqw 0 0 #C9D1DE; }
[dir="rtl"] .dr-busy { box-shadow: inset -.5cqw 0 0 #C9D1DE; }
.dr-short { align-self: start; height: 55%; }
.dr-open { border: .2cqw dashed #D5DAE4; }
.dr-new {
  position: absolute;
  inset: -.2cqw;
  display: grid;
  align-content: center;
  gap: .4cqw;
  padding: 0 1.4cqw;
  border-radius: 1cqw;
  background: var(--c2);
  color: #fff;
  box-shadow: 0 1cqw 2.4cqw -1cqw rgba(47, 174, 151, .9);
  opacity: 0;
  transform: translateY(-3cqw) scale(.9);
  transition: opacity .35s var(--ease), transform .55s cubic-bezier(.3, 1.4, .5, 1);
}
.dr-new b { font-size: 1.55cqw; font-weight: 700; line-height: 1.1; }
.dr-new em { font-size: 1.2cqw; font-style: normal; font-weight: 600; line-height: 1.1; opacity: .92; }

/* the phone: the reminder the day before, then the review request */
.dr-sms { aspect-ratio: 9 / 17; }
.dr-auto.is-sms .dr-sms { transform: none; }
.dr-sms .dr-phone-in { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dr-sms-head { display: grid; justify-items: center; gap: .5cqw; padding: 1.8cqw 1cqw 1cqw; border-bottom: 1px solid #EDF0F5; }
.dr-sms-head svg { width: 3.4cqw; height: 3.4cqw; }
.dr-sms-head b { font: 600 1.25cqw/1 var(--sans); color: var(--ink); }
.dr-sms-log { display: flex; flex-direction: column; justify-content: flex-end; gap: .8cqw; padding: 1cqw; overflow: hidden; }
.dr-text { display: none; max-width: 88%; margin: 0; padding: .9cqw 1.1cqw; border-radius: 1.4cqw; font-size: 1.22cqw; line-height: 1.3; }
.dr-text.is-in { display: block; animation: dr-pop .35s var(--ease); }
.dr-text-in { align-self: flex-start; border-end-start-radius: .3cqw; background: #EEF1F6; color: var(--ink); }
.dr-text-out { align-self: flex-end; border-end-end-radius: .3cqw; background: #3478F6; color: #fff; }
.dr-text-ok { display: none; align-self: flex-end; align-items: center; gap: .4cqw; margin: -.2cqw 0 0; font-size: 1.1cqw; font-weight: 700; color: var(--c2); }
.dr-text-ok.is-in { display: flex; animation: dr-pop .35s var(--ease); }
.dr-text-ok svg { width: 1.3cqw; height: 1.3cqw; }
.dr-text.dr-rate.is-in { display: flex; gap: .3cqw; }
.dr-rate i, .dr-stars i {
  width: 1.6cqw;
  height: 1.6cqw;
  background: rgba(255, 255, 255, .4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dr-rate i { transition: background .2s; }
.dr-rate i.is-in { background: #FFD25A; animation: dr-pop .3s var(--ease); }

/* the review that follows, over the site */
.dr-review {
  position: absolute;
  inset-inline-start: 1.6cqw;
  bottom: 1.2cqw;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: .7cqw;
  width: 30cqw;
  padding: 1.8cqw 2cqw;
  border-radius: 1.6cqw;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hair), 0 2.4cqw 6cqw -2cqw rgba(12, 36, 84, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6cqw) scale(.95);
  transition: opacity .4s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.dr .dr-review.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dr-stars { display: flex; gap: .4cqw; }
.dr-stars i { width: 2.2cqw; height: 2.2cqw; background: #F5B300; }
.dr-review b { font: 500 1.9cqw/1.15 var(--display); color: var(--c1); }
.dr-review p { margin: 0; font-size: 1.45cqw; font-style: italic; line-height: 1.35; color: var(--ink-2); }

/* a title card over the screen at the start of each demo (data-card on the reel) */
.dr-chapter {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.6cqw;
  padding: 4cqw;
  background: rgba(250, 250, 252, .9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.dr[data-card="1"] .dr-chapter[data-card="1"],
.dr[data-card="2"] .dr-chapter[data-card="2"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.dr-chapter p { margin: 0; }
.dr-chapter-k { padding: .8cqw 1.8cqw; border-radius: 99px; background: rgba(72, 108, 252, .1); color: var(--spark); font-size: 1.6cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dr-chapter-title { font: 500 5.2cqw/1.1 var(--sans); letter-spacing: -.045em; color: var(--navy); text-wrap: balance; transform: translateY(1.2cqw); transition: transform .6s var(--ease); }
.dr[data-card="1"] [data-card="1"] .dr-chapter-title,
.dr[data-card="2"] [data-card="2"] .dr-chapter-title { transform: none; }
.dr-chapter-sub { font-size: 2.2cqw; font-weight: 500; color: var(--ink-2); text-wrap: balance; }

/* --- around the reel: what a demo costs you --- */
.bk-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font: 600 13.5px/1.4 var(--sans);
  color: var(--navy);
}
.bk-points li { display: inline-flex; align-items: center; gap: 6px; }
.bk-points li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--spark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* --- narrow: the screen on top, the two people side by side under it --- */
@media (max-width: 680px) {
  .dr { padding: 8px; border-radius: 14px; }
  .dr-stage { grid-template-columns: 1fr; gap: 8px; }
  .dr-people { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dr-tile { height: 92px; }
  .dr-tag { inset-inline-start: 5px; bottom: 5px; padding: 2px 7px; font-size: 10.5px; }
  .dr-say { font-size: 12px; min-height: 4.5em; padding: 7px 9px; }
  .dr-bar { gap: 7px; margin-top: 8px; }
  .dr-total { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dr *, .dr *::after { transition-duration: 0s !important; animation: none !important; }
}

/* In the popup the reel sits between the blurb and the Pick a time | Send a
   message toggle, and goes with the blurb when the message form is showing. */
.bk-dialog[data-tab="msg"] .dr { display: none; }

/* On a phone the screen is about 320px wide, where the desktop proportions make
   its labels 6px tall. Below 480px the words grow and the hex codes go. */
@container (max-width: 480px) {
  .dr-win-title { font-size: 2.8cqw; }
  .dr-steps { gap: 1.4cqw; }
  .dr-steps li { font-size: 2.7cqw; padding: 1cqw 2cqw 1cqw 1cqw; }
  .dr-steps b { width: 3.6cqw; height: 3.6cqw; font-size: 2.2cqw; }
  .dr-scenes { inset: 17cqw 3cqw 3cqw; }
  .dr-name b { font-size: 5.6cqw; }
  .dr-name span { font-size: 2.3cqw; }
  .dr-swatches li { grid-template-columns: 5.4cqw 1fr; font-size: 2.9cqw; }
  .dr-swatches code { display: none; }
  .dr-lockup span { font-size: 2.3cqw; }
  .dr-nav em { font-size: 2.3cqw; }
  .dr-nav i { display: none; }
  .dr-hero { padding: 2.6cqw 3.2cqw 2cqw; }
  .dr-hero h4 { font-size: 4.8cqw; }
  .dr-hero p { font-size: 2.7cqw; }
  .dr-hero em { font-size: 2.5cqw; }
  .dr-cards span { font-size: 2.5cqw; padding: 1.8cqw 1.6cqw; }
  /* five labelled steps do not fit: the ones not playing show their number */
  .dr-steps li { padding: 1cqw; }
  .dr-steps li > span { display: none; }
  .dr[data-step="0"] .dr-steps [data-s="0"],
  .dr[data-step="1"] .dr-steps [data-s="1"],
  .dr[data-step="2"] .dr-steps [data-s="2"],
  .dr[data-step="3"] .dr-steps [data-s="3"],
  .dr[data-step="4"] .dr-steps [data-s="4"],
  .dr[data-step="5"] .dr-steps [data-s="5"],
  .dr[data-step="6"] .dr-steps [data-s="6"],
  .dr[data-step="7"] .dr-steps [data-s="7"],
  .dr[data-step="8"] .dr-steps [data-s="8"],
  .dr[data-step="9"] .dr-steps [data-s="9"] { padding-inline-end: 2.2cqw; }
  .dr[data-step="0"] .dr-steps [data-s="0"] > span,
  .dr[data-step="1"] .dr-steps [data-s="1"] > span,
  .dr[data-step="2"] .dr-steps [data-s="2"] > span,
  .dr[data-step="3"] .dr-steps [data-s="3"] > span,
  .dr[data-step="4"] .dr-steps [data-s="4"] > span,
  .dr[data-step="5"] .dr-steps [data-s="5"] > span,
  .dr[data-step="6"] .dr-steps [data-s="6"] > span,
  .dr[data-step="7"] .dr-steps [data-s="7"] > span,
  .dr[data-step="8"] .dr-steps [data-s="8"] > span,
  .dr[data-step="9"] .dr-steps [data-s="9"] > span { display: inline; }
  .dr-chat { width: 64cqw; inset-inline-end: 2cqw; }
  .dr-chat-head { padding: 1.8cqw 2.4cqw; }
  .dr-chat-head b { font-size: 3cqw; }
  .dr-chat-head span { font-size: 2.1cqw; }
  .dr-chat-log { gap: 1.4cqw; padding: 2cqw; }
  .dr-msg { font-size: 2.55cqw; padding: 1.4cqw 2cqw; }
  .dr-typing i { width: 1.2cqw; height: 1.2cqw; }
  .dr-launch { width: 7cqw; height: 7cqw; }
  .dr-end-title { font-size: 7cqw; }
  /* the automation demo: the words grow and the panels widen; the clinic's cards go, so
     the switch sits under the site and not on it */
  .dr-auto .dr-cards { display: none; }
  .dr-switch { gap: 2cqw; padding-block: 1.4cqw; padding-inline: 3cqw 1.6cqw; font-size: 2.8cqw; }
  .dr-switch i { width: 7cqw; height: 4cqw; }
  .dr-switch i::after { top: .4cqw; inset-inline-start: .4cqw; width: 3.2cqw; height: 3.2cqw; }
  .dr-switch.is-on i::after { transform: translateX(3cqw); }
  [dir="rtl"] .dr-switch.is-on i::after { transform: translateX(-3cqw); }
  .dr-call, .dr-cal { width: 64cqw; inset-inline-end: 2cqw; }
  .dr-call-head { padding: 1.8cqw 2.4cqw; }
  .dr-call-ic { width: 5.4cqw; height: 5.4cqw; }
  .dr-call-head b { font-size: 3cqw; }
  .dr-call-head p span { font-size: 2.1cqw; }
  .dr-wave { gap: .5cqw; height: 4.4cqw; }
  .dr-wave i { width: .7cqw; }
  .dr-cal-head b { font-size: 3.4cqw; }
  .dr-cal-head span { font-size: 2cqw; }
  .dr-hour { font-size: 2.2cqw; }
  .dr-new b { font-size: 2.9cqw; }
  .dr-new em { font-size: 2.3cqw; }
  .dr-sms { aspect-ratio: auto; width: 42cqw; }
  .dr-sms-head svg { width: 5cqw; height: 5cqw; }
  .dr-sms-head b { font-size: 2.2cqw; }
  .dr-text { font-size: 2.45cqw; padding: 1.2cqw 1.5cqw; }
  .dr-text-ok { font-size: 2cqw; }
  .dr-text-ok svg { width: 2.2cqw; height: 2.2cqw; }
  .dr-rate i { width: 2.8cqw; height: 2.8cqw; }
  .dr-review { width: 50cqw; }
  .dr-review b { font-size: 3cqw; }
  .dr-review p { font-size: 2.6cqw; }
  .dr-stars i { width: 3.2cqw; height: 3.2cqw; }
  .dr-chapter-k { font-size: 2.4cqw; }
  .dr-chapter-title { font-size: 7cqw; }
  .dr-chapter-sub { font-size: 3.2cqw; }
}