@font-face {
  font-family: "Alice Display";
  src: url("../../assets/fonts/alice-display/AliceDisplay-Heavy.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* r153 — the exact original curved tablet render and its true display opening
   share one fixed 1960×1103 coordinate system. */
.alice-homepage .tablet-pc-section {
  overflow: hidden;
  padding: clamp(62px, 7vw, 108px) 0 clamp(18px, 3vw, 46px);
  background: #f2f3f1;
  color: #090909;
}

.alice-homepage .tablet-pc-inner {
  width: min(100%, 1600px);
  margin: 0 auto;
}

.alice-homepage .tablet-pc-section h2 {
  margin: 0;
  padding: 0 clamp(18px, 4vw, 64px);
  font-family: "Alice Manrope", "Manrope", sans-serif;
  font-size: clamp(30px, 4.15vw, 56px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;
}

.alice-homepage .tablet-pc-figure {
  margin: clamp(18px, 2.8vw, 40px) 0 0;
}

.alice-homepage .tablet-pc-stage {
  --tablet-pc-scale: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 1960 / 1103;
  overflow: hidden;
  contain: layout paint;
}

.alice-homepage .tablet-pc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.alice-homepage .tablet-pc-photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.alice-homepage .tablet-pc-camera-module {
  position: absolute;
  z-index: 4;
  top: calc(133px * var(--tablet-pc-scale));
  left: calc(99px * var(--tablet-pc-scale));
  display: block;
  width: calc(96px * var(--tablet-pc-scale));
  height: calc(96px * var(--tablet-pc-scale));
  object-fit: contain;
  pointer-events: none;
}

.alice-homepage .tablet-pc-screen {
  position: absolute;
  z-index: 2;
  top: calc(349px * var(--tablet-pc-scale));
  left: calc(168px * var(--tablet-pc-scale));
  width: calc(811px * var(--tablet-pc-scale));
  height: calc(609px * var(--tablet-pc-scale));
  overflow: hidden;
  border-radius: calc(18px * var(--tablet-pc-scale));
  background: #0d0b0a;
  clip-path: inset(0 round calc(18px * var(--tablet-pc-scale)));
  isolation: isolate;
  transform: translateZ(0);
}

.alice-homepage .tablet-pc-screen-clip {
  position: absolute;
  top: calc(3px * var(--tablet-pc-scale));
  left: calc(3px * var(--tablet-pc-scale));
  width: calc(805px * var(--tablet-pc-scale));
  height: calc(603px * var(--tablet-pc-scale));
  overflow: hidden;
  border-radius: calc(14px * var(--tablet-pc-scale));
  background: #0d0b0a;
  clip-path: inset(.5px round calc(14px * var(--tablet-pc-scale)));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: linear-gradient(#fff, #fff);
  contain: strict;
  isolation: isolate;
  transform: translateZ(0);
}

.alice-homepage .tablet-pc-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 500%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.alice-homepage .tablet-pc-stage.is-ready .tablet-pc-track {
  animation: tablet-pc-swipe-r153 14s cubic-bezier(.65, 0, .35, 1) infinite;
}

.alice-homepage .tablet-pc-track img {
  display: block;
  width: 20%;
  height: 100%;
  flex: 0 0 20%;
  object-fit: cover;
  object-position: center;
}

@keyframes tablet-pc-swipe-r153 {
  0%, 20% { transform: translate3d(0, 0, 0); }
  25%, 45% { transform: translate3d(-20%, 0, 0); }
  50%, 70% { transform: translate3d(-40%, 0, 0); }
  75%, 95% { transform: translate3d(-60%, 0, 0); }
  100% { transform: translate3d(-80%, 0, 0); }
}

@media (max-width: 760px) {
  .alice-homepage .tablet-pc-section {
    padding-top: 54px;
    padding-bottom: 14px;
  }

  .alice-homepage .tablet-pc-section h2 {
    font-size: clamp(28px, 8.2vw, 34px);
    letter-spacing: -.04em;
  }

  .alice-homepage .tablet-pc-figure {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .tablet-pc-stage.is-ready .tablet-pc-track {
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}

@font-face {
  font-family: "Alice Manrope";
  src: url("/assets/alice-manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --yellow: #fff0b2;
  /* ⛔ The NAME is historical. Jase swapped the bright pink for green
     site-wide on 2026-08-19 ("too pink"); the variable is still called
     --magenta so the ~50 usages did not all have to be touched, and so
     going back is one line. Value = the green already used by the
     "PAID" toast. */
  --magenta: #00a63f;
  --blue: #3b42c4;
  --purple: #7b34ce;
  --alice-main-btn-gradient: linear-gradient(135deg, #8b5cf6 0%, #5b5ff5 52%, #0ea5e9 100%);
  --alice-main-btn-gradient-hover: linear-gradient(135deg, #7c3aed 0%, #4f46e5 52%, #0284c7 100%);
  --alice-main-btn-shadow: 0 14px 26px rgba(91, 95, 245, .28), 0 4px 10px rgba(14, 165, 233, .16), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(49, 46, 129, .22);
  --alice-main-btn-shadow-hover: 0 18px 34px rgba(91, 95, 245, .32), 0 6px 14px rgba(14, 165, 233, .2), inset 0 1px 0 rgba(255, 255, 255, .44), inset 0 -1px 0 rgba(30, 41, 129, .26);
  --green: #00843d;
  --green-soft: #9fd3b4;
  --red: #e8402c;
  --red-deep: #b42318;
  /* FREE story only: a light sky-blue field that carries the blue-sky owner photo
     into the product screens without competing with the coloured feature flags. */
  --sky-pale: #ddf3ff;
  --yellow-bright: #fff100;
  --off-white: #edf2ed;
  --lavender: #ceb0dc;
  --line-dark: rgba(0, 0, 0, .1);
  --line-light: rgba(255, 255, 255, .14);
  --display: "Figtree", Arial, sans-serif;
  --headline: "Alice Display", "Arial Black", "Figtree", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --page-pad: clamp(20px, 3.25vw, 64px);
  --header-height: 78px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* ⛔ TWO DECLARATIONS, BOTH DELIBERATE. `hidden` clips but still leaves the
     viewport a scroll container, which is why Jase could drag the page sideways
     on his iPhone with nothing to see. `clip` cannot be scrolled at all. The
     `hidden` line stays first as the fallback for browsers without `clip`.
     ⛔ AND IT MUST STAY ON `body`, NEVER `html` - see the comment further down
     this file. On html it propagates differently and unsticks every pinned
     section on the page. */
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--white);
  color: var(--black);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.35;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  translate: 0 -150%;
  background: var(--white);
  color: var(--black);
  font-family: var(--mono);
  text-transform: uppercase;
}

.skip-link:focus {
  translate: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: 100%;
  padding: 18px var(--page-pad) 0;
  pointer-events: none;
}

.nav-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  min-height: var(--header-height);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 26px;
  color: var(--white);
  transition: min-height .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
  pointer-events: auto;
}

.site-header.is-past-hero-cta .nav-shell {
  min-height: 64px;
  border-color: rgba(255, 255, 255, .32);
  background: linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 217, 244, .72));
  box-shadow: 0 16px 50px rgba(0, 0, 0, .09);
  color: var(--black);
  backdrop-filter: blur(18px) saturate(1.2);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
}

.brand-dot {
  width: 14px;
  height: 14px;
  margin-left: -4px;
  object-fit: contain;
}

.brand-dot {
  translate: 0 13px;
}

.site-header .brand-dot {
  width: 28px;
  height: 28px;
  margin-left: 0;
  translate: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 48px;
  font-size: 60px;
  font-style: italic;
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.12em;
  text-transform: lowercase;
}

.desktop-nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  gap: clamp(24px, 3vw, 56px);
}

.header-actions {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1;
  align-items: center;
  gap: 24px;
  justify-self: end;
}

.header-login {
  display: inline-grid;
  min-height: 52px;
  padding: 10px 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 500 14px/1 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
  white-space: nowrap;
}

.header-login:hover {
  background: rgba(255, 255, 255, .16);
}

.header-cta {
  display: inline-grid;
  min-width: 168px;
  min-height: 52px;
  place-items: center;
  border-radius: 999px;
  background: var(--alice-main-btn-gradient);
  color: var(--white);
  font: 500 13px/1 var(--mono);
  letter-spacing: .02em;
  opacity: 0;
  text-transform: uppercase;
  translate: 0 -8px;
  transition: opacity .25s ease, translate .25s ease, visibility .25s;
  visibility: hidden;
  pointer-events: none;
}

.header-cta:hover {
  background: var(--alice-main-btn-gradient-hover);
}

.site-header.is-past-hero-cta .header-cta {
  opacity: 1;
  translate: 0;
  visibility: visible;
  pointer-events: auto;
}

.desktop-nav a,
.nav-actions a,
.menu-button {
  font: 500 14px/1 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.desktop-nav a,
.nav-actions > a:not(.nav-cta) {
  position: relative;
  padding: 10px 0;
}

.desktop-nav a::after,
.nav-actions > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  scale: 0 1;
  transform-origin: right;
  transition: scale .25s ease;
}

.desktop-nav a:hover::after,
.nav-actions > a:not(.nav-cta):hover::after {
  scale: 1 1;
  transform-origin: left;
}

.desktop-nav a[aria-current="page"]::after {
  scale: 1 1;
  transform-origin: center;
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.nav-cta {
  display: inline-grid;
  place-items: center;
  min-width: 154px;
  min-height: 52px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.menu-button,
.mobile-menu {
  display: none;
}

.hero {
  position: relative;
  display: flex;
  min-height: max(760px, 100svh);
  overflow: hidden;
  flex-direction: column;
  background: #1b1b16;
  color: var(--white);
}

.hero-photo,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo {
  object-fit: cover;
  object-position: center;
  scale: 1.002;
}

.hero-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .32) 58%, rgba(0, 0, 0, .62)),
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .46) 78%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(1100px, calc(100% - (var(--page-pad) * 2)));
  margin: auto;
  padding: 130px var(--page-pad) 230px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.eyebrow {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, .72);
  font: 500 12px/1.2 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.hero h1,
.section-intro h2,
.before-after > h2,
.demo-scene-source .section-intro h2,
.steps > h2,
.faq h2,
.social-content h2 {
  font-weight: 900;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.hero h1 {
  max-width: 1080px;
  margin-bottom: 34px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: .84;
}

/* Static-site adaptation of 21st.dev's Liquid Text: blurred layers pass
   through an alpha threshold so only the role morphs while Alice stays fixed. */
@keyframes liquid-assistant {
  0%, 20% { filter: blur(0); opacity: 1; }
  25%, 95% { filter: blur(18px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}

@keyframes liquid-receptionist {
  0%, 20% { filter: blur(18px); opacity: 0; }
  25%, 45% { filter: blur(0); opacity: 1; }
  50%, 100% { filter: blur(18px); opacity: 0; }
}

@keyframes liquid-agency {
  0%, 45% { filter: blur(18px); opacity: 0; }
  50%, 70% { filter: blur(0); opacity: 1; }
  75%, 100% { filter: blur(18px); opacity: 0; }
}

@keyframes liquid-family {
  0%, 70% { filter: blur(18px); opacity: 0; }
  75%, 95% { filter: blur(0); opacity: 1; }
  100% { filter: blur(18px); opacity: 0; }
}

/* Benefit headline (Jase 2026-08-19), deliberately oversized. MUST keep the
   .hero-headline class: plain `.hero h1` is clamp(20px,2vw,28px) and two later
   `.hero h1` blocks shrink it further, so an unclassed h1 renders as body text. */
.hero h1.hero-headline {
  max-width: 13ch;
  margin-bottom: 20px;
  font-family: var(--headline);
  font-size: clamp(41.6px, 6.9vw, 99px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.05em;
  color: var(--white);
  text-wrap: balance;
}

.hero h1.hero-liquid-title {
  display: flex;
  max-width: none;
  margin-bottom: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .18em;
  font-family: var(--headline);
  font-size: clamp(41.6px, 5.6vw, 83.2px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .9;
}

.liquid-prefix,
.liquid-role {
  color: var(--white);
}

.liquid-role {
  display: grid;
  min-width: 0;
  filter: url("#liquid-text-threshold");
}

.liquid-word {
  grid-area: 1 / 1;
  width: max-content;
  max-width: 100%;
  transform-origin: left center;
  will-change: filter, opacity;
}

.liquid-word-assistant {
  animation: liquid-assistant 8s ease-in-out infinite;
}

.liquid-word-receptionist {
  animation: liquid-receptionist 8s ease-in-out infinite;
}

.liquid-word-agency {
  animation: liquid-agency 8s ease-in-out infinite;
}

.liquid-word-family {
  animation: liquid-family 8s ease-in-out infinite;
}

.liquid-filter {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Header wordmark (Jase 2026-08-19): the hero's liquid morph, shrunk to brand
   size and cut to the two names Alice is sold as. Its OWN threshold filter id,
   so the hero h1 changing cannot take the header down with it. Blur is 6px, not
   the hero's 18px - 18px on 15px text erases the word instead of melting it. */
@keyframes liquid-brand-assistant {
  0%, 40% { filter: blur(0); opacity: 1; }
  46%, 94% { filter: blur(6px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}

@keyframes liquid-brand-receptionist {
  0%, 40% { filter: blur(6px); opacity: 0; }
  46%, 88% { filter: blur(0); opacity: 1; }
  94%, 100% { filter: blur(6px); opacity: 0; }
}

.site-header .brand-liquid {
  align-items: baseline;
  gap: 0 .22em;
  font-family: var(--headline);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  /* inherit, NOT var(--white): .nav-shell flips white -> black at
     .is-past-hero-cta, and a hardcoded white wordmark vanishes on the glass bar. */
  color: inherit;
  text-decoration: none;
}

.brand-liquid-role {
  display: grid;
  min-width: 0;
  filter: url("#liquid-brand-threshold");
}

.brand-liquid-word {
  grid-area: 1 / 1;
  width: max-content;
  transform-origin: left center;
  will-change: filter, opacity;
}

.brand-liquid-word-assistant { animation: liquid-brand-assistant 7s ease-in-out infinite; }
.brand-liquid-word-receptionist { animation: liquid-brand-receptionist 7s ease-in-out infinite; }

@keyframes job-roll-vertical {
  to {
    translate: 0 var(--destination);
  }
}

.hero-job-roll {
  overflow: hidden;
  width: max-content;
  max-width: 100%;
  height: 3.3em;
  margin-bottom: 22px;
  color: var(--yellow);
  font: 500 clamp(20px, 2vw, 28px)/1.1 var(--mono);
  letter-spacing: .04em;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 43.69%, #000 56%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 43.69%, #000 56%, rgba(0, 0, 0, 0) 100%);
}

.job-roll-track {
  position: relative;
  display: block;
  height: 100%;
}

.job-roll-track > span {
  --origin: calc((var(--count) - var(--index)) * 100%);
  --destination: calc((var(--index) + 1) * -100%);
  --duration: calc(var(--count) * 2.2s);
  --delay: calc((var(--duration) / var(--count)) * var(--index) - var(--duration));
  display: flex;
  height: 1.1em;
  align-items: center;
  translate: 0 var(--origin);
  animation: job-roll-vertical var(--duration) var(--delay) infinite linear;
  white-space: nowrap;
}

@keyframes first-screen-cue-bob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(4px); }
}

.hero-scroll-cue {
  position: absolute;
  z-index: 60;
  bottom: 24px;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--white);
  opacity: .92;
  translate: -50% 0;
  animation: first-screen-cue-bob 1.55s cubic-bezier(.45, 0, .25, 1) infinite;
  transition: opacity .2s ease, scale .24s cubic-bezier(.2, .75, .2, 1), visibility 0s linear 0s;
}

.hero-scroll-cue.is-scroll-hidden {
  opacity: 0;
  scale: .82;
  visibility: hidden;
  pointer-events: none;
  animation-play-state: paused;
  transition-delay: 0s, 0s, .22s;
}

.hero-scroll-cue::before {
  content: "";
  grid-area: 1 / 1;
  width: 30px;
  height: 30px;
  border: 1.2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(5px);
}

.hero-scroll-cue:hover {
  opacity: 1;
}

.hero-scroll-cue:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.hero-scroll-cue svg {
  z-index: 1;
  grid-area: 1 / 1;
  width: 16.8px;
  height: 16.8px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@media (max-width: 760px) {
  .hero h1.hero-liquid-title {
    display: block;
    max-width: calc(100vw - 44px);
    font-size: clamp(35.2px, 9.6vw, 46.4px);
  }

  .hero h1.hero-headline {
    max-width: calc(100vw - 44px);
    font-size: clamp(35.2px, 10.6vw, 50px);
    line-height: .86;
  }

  .liquid-role {
    margin-top: .08em;
  }

  .hero-job-roll {
    margin-bottom: 14px;
    font-size: clamp(17px, 4.4vw, 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-role {
    filter: none;
  }

  .liquid-word-assistant {
    animation: none;
    opacity: 1;
  }

  .liquid-word-receptionist,
  .liquid-word-agency,
  .liquid-word-family {
    display: none;
    animation: none;
  }

  /* Header wordmark settles on "Alice Assistant" - no morph, no threshold. */
  .brand-liquid-role { filter: none; }
  .brand-liquid-word-assistant { animation: none; opacity: 1; }
  .brand-liquid-word-receptionist { display: none; animation: none; }

  .job-roll-track > span {
    animation: none;
    opacity: 0;
  }

  .job-roll-track > span:first-child {
    opacity: 1;
    translate: 0 100%;
  }

  .hero-scroll-cue {
    animation: none;
  }
}

/* A small, low smile removes the nose/snout reading without changing the
   original Bloub silhouette, eyes or motion. */
.alice-homepage .bloub-smile {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5px;
}

.hero-lede {
  max-width: 760px;
  margin-bottom: 30px;
  font-size: clamp(20px, 1.65vw, 27px);
  line-height: 1.26;
}

.business-finder {
  width: min(1640px, calc(100vw - clamp(64px, 8vw, 160px)));
  max-width: none;
  flex: none;
  align-self: center;
}

.finder-kicker {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .85);
  font: 600 12px/1.2 var(--mono);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.business-finder-shell {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
  color: var(--black);
  gap: 10px;
  position: relative;
}

.business-finder-icon {
  width: 22px;
  margin-left: 10px;
  fill: none;
  stroke: #777;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.business-finder input {
  width: 100%;
  min-width: 0;
  padding: 18px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--black);
  font-size: 23px;
}

.business-finder input::placeholder {
  color: #777;
  opacity: 1;
}

.business-finder button {
  position: relative;
  min-width: 300px;
  min-height: 84px;
  padding: 16px 50px;
  border: 0;
  border-radius: 999px;
  justify-self: end;
  background: var(--alice-main-btn-gradient);
  box-shadow: var(--alice-main-btn-shadow);
  color: var(--white);
  cursor: pointer;
  font: 500 14px/1 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: translate .2s ease, box-shadow .2s ease;
  isolation: isolate;
  overflow: visible;
}

.hero-cta-pointer-cue {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: -2px;
  display: block;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .22));
  pointer-events: none;
  transform-origin: 48% 18%;
  animation: hero-cta-pointer-tap 1.65s ease-in-out infinite;
}

.hero-cta-pointer-cue svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--white);
  stroke: var(--black);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.hero-cta-pointer-cue .hero-cta-pointer-detail {
  fill: none;
  stroke-width: 2.7;
}

@keyframes hero-cta-pointer-tap {
  0%, 100% { transform: translate(17px, 14px) rotate(-23deg) scale(.92); }
  50% { transform: translate(-3px, -7px) rotate(-23deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-pointer-cue {
    display: none;
    animation: none;
  }
}

.business-finder button:hover {
  background: var(--alice-main-btn-gradient-hover);
  translate: 0 -2px;
  box-shadow: var(--alice-main-btn-shadow-hover);
}

.business-finder-note,
.business-finder-status {
  margin: 11px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  text-align: center;
}

.business-finder-status {
  display: none;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .58);
  color: var(--white);
  text-align: center;
}

.business-finder-status.is-visible {
  display: block;
}

.pill {
  display: inline-grid;
  place-items: center;
  min-width: 205px;
  min-height: 64px;
  padding: 14px 30px;
  border: 0;
  border-radius: 999px;
  font: 500 14px/1 var(--mono);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  transition: translate .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.pill:hover,
.mega-pill:hover,
.nav-cta:hover {
  translate: 0 -2px;
}

.pill-magenta {
  background: var(--magenta);
  color: var(--white);
}

.pill-black {
  background: var(--black);
  color: var(--white);
}

.pill-white {
  background: var(--white);
  color: var(--black);
}

.pill-outline {
  border: 1px solid var(--black);
  background: transparent;
  color: var(--black);
}

.pill-green {
  background: var(--green);
  color: var(--white);
}

.hero-bubbles {
  position: absolute;
  z-index: 3;
  right: 6%;
  bottom: 34px;
  display: flex;
  width: min(280px, 74vw);
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.bubble {
  --bubble-pad: 10px;
  width: max-content;
  max-width: 100%;
  padding: var(--bubble-pad) 14px;
  overflow: hidden;
  border-radius: 16px 16px 5px 16px;
  opacity: 0;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .25));
  font-size: 13px;
  line-height: 1.25;
  will-change: transform, opacity, max-height;
}

.customer-message {
  align-self: flex-start;
  max-width: 215px;
  border-radius: 16px 16px 16px 5px;
  background: #2d2d2d;
  color: var(--white);
}

.alice-message {
  max-width: 245px;
  background: var(--purple);
  color: var(--white);
}

.booking-card {
  display: grid;
  min-width: 215px;
  border-radius: 16px;
  background: var(--white);
  color: var(--black);
  gap: 3px;
}

.booking-card small {
  color: #777;
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
}

.booking-card strong {
  font-size: 16px;
}

.booking-card span {
  color: #555;
  font-size: 12px;
}

.bubble-one {
  animation: bubble-push-one 14s ease-in-out infinite;
}

.bubble-two {
  animation: bubble-push-two 14s ease-in-out infinite;
}

.bubble-three {
  animation: bubble-push-three 14s ease-in-out infinite;
}

/* Each bubble rises in at the BOTTOM of the stack and pushes the earlier
   ones up (bottom-anchored container + animated height), Manychat-style. */
@keyframes bubble-push-one {
  0%,
  2% {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(18px);
  }
  8% {
    max-height: 180px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: .75;
    transform: none;
  }
  10%,
  88% {
    max-height: 180px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    max-height: 180px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: 0;
    transform: none;
  }
}

@keyframes bubble-push-two {
  0%,
  22% {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(18px);
  }
  28% {
    max-height: 180px;
    margin-top: 10px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: .75;
    transform: none;
  }
  30%,
  88% {
    max-height: 180px;
    margin-top: 10px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    max-height: 180px;
    margin-top: 10px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: 0;
    transform: none;
  }
}

@keyframes bubble-push-three {
  0%,
  44% {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(18px);
  }
  50% {
    max-height: 180px;
    margin-top: 10px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: .75;
    transform: none;
  }
  52%,
  88% {
    max-height: 180px;
    margin-top: 10px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    max-height: 180px;
    margin-top: 10px;
    padding-top: var(--bubble-pad);
    padding-bottom: var(--bubble-pad);
    opacity: 0;
    transform: none;
  }
}

.hero-partners {
  position: absolute;
  z-index: 2;
  right: var(--page-pad);
  bottom: 34px;
  left: var(--page-pad);
  display: flex;
  justify-content: flex-start;
  gap: 34px;
  align-items: center;
  color: rgba(255, 255, 255, .78);
  font: 500 10px/1.15 var(--mono);
  letter-spacing: .04em;
}

.au-made-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.au-made-badge img {
  width: 44px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35));
}

.au-made-badge b {
  color: var(--white);
  font: 700 10px/1 var(--display);
  letter-spacing: .12em;
  white-space: nowrap;
}

.proof-marquee {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
  background: var(--white);
}

.proof-static {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 145px;
  place-content: center;
  border-right: 1px solid var(--line-dark);
  background: var(--white);
}

.proof-rating {
  display: grid;
  width: max-content;
  margin: 0 auto;
  place-items: center;
  gap: 12px;
}

.proof-stars {
  color: var(--red);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
}

.proof-people {
  display: flex;
  justify-content: center;
}

.proof-people img {
  width: 40px;
  height: 40px;
  border: 3px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .16);
}

.proof-people img + img {
  margin-left: -13px;
}

.marquee-window {
  min-width: 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: 145px;
  animation: marquee 32s linear infinite;
}

.marquee-track article {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 14px;
  align-items: center;
  width: 530px;
  padding: 20px 42px;
  border-right: 1px solid var(--line-dark);
}

.marquee-track article > strong:only-child {
  grid-column: 1 / -1;
  max-width: 340px;
  font-size: 24px;
  line-height: 1.05;
}

.proof-avatar {
  grid-row: 1 / 3;
  width: 58px;
  height: 44px;
  background-position: center;
  background-size: cover;
}

.proof-a {
  background-image: url("../../assets/alice-site-proof-woman.png");
}

.proof-b {
  background-image: url("../../assets/alice-site-proof-man.png");
}

.marquee-track small {
  font: 500 10px/1.1 var(--mono);
}

.marquee-track strong {
  max-width: 390px;
  font-size: 17px;
  line-height: 1.05;
}

@keyframes marquee {
  to { translate: -50% 0; }
}

.section-intro,
.before-after,
.steps {
  padding: 140px var(--page-pad);
  text-align: center;
}

.section-intro {
  display: flex;
  min-height: 610px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-sticker {
  width: 138px;
  height: 126px;
  margin: 0 auto 30px;
  filter: drop-shadow(0 4px 0 rgba(16, 16, 14, .18));
}

.section-sticker svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.section-sticker-alice {
  rotate: -2deg;
}

/* Alice's own face where the megaphone sticker used to be (Jase 2026-08-19).
   Same 138x126 box, so nothing around it moves; the image is cropped to a
   circle inside it and keeps the sticker's white outline and drop shadow. */
.section-sticker-alice img {
  display: block;
  width: 118px;
  height: 118px;
  margin: 0 auto;
  border: 4px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
}

.section-sticker-bulb {
  rotate: 2deg;
}

.section-sticker-happy {
  rotate: -1deg;
}

.before-after > .section-sticker {
  width: 118px;
  height: 108px;
  margin-bottom: 26px;
}

/* The hidden demo and FAQ retain their meaningful sparkle/question marks. The
   three visible section introductions now share the sticker-art system. */
.section-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 36px;
  border: 1px solid var(--black);
  border-radius: 50%;
  font: 500 34px/1 var(--mono);
}

.section-icon.light {
  border-color: var(--white);
}

.section-intro h2,
.before-after > h2,
.steps > h2,
.faq h2 {
  max-width: 980px;
  margin-right: auto;
  margin-bottom: 28px;
  margin-left: auto;
  font-size: clamp(58px, 6vw, 88px);
  line-height: .86;
}

.section-intro > p,
.before-after > p,
.steps > p {
  margin-bottom: 0;
  font-size: clamp(20px, 1.7vw, 27px);
}

.grid-bg {
  background-image: none;
}

.grid-yellow {
  --grid-color: rgba(0, 0, 0, .1);
  background-color: var(--yellow);
}

.grid-green {
  --grid-color: rgba(255, 255, 255, .14);
  background-color: var(--green);
}

/* FREE story surface (sticky reveal + panel share it so there is no seam). */
.grid-sky-pale {
  --grid-color: rgba(0, 0, 0, .07);
  background-color: var(--sky-pale);
}

.grid-blue {
  --grid-color: rgba(255, 255, 255, .12);
  background-color: var(--blue);
}

.grid-magenta {
  --grid-color: rgba(255, 255, 255, .36);
  background-color: var(--magenta);
}

.feature-story {
  position: relative;
  height: 500vh;
}

.feature-sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
}

.feature-copy {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 150px 7vw 120px;
  text-align: center;
}

.feature-progress {
  position: absolute;
  top: 112px;
  left: 50%;
  display: flex;
  gap: 10px;
  translate: -50% 0;
}

.feature-progress i {
  width: 28px;
  height: 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .12);
  transition: width .25s ease, background-color .25s ease;
}

.feature-progress i.is-active {
  width: 50px;
  background: var(--black);
}

.feature-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(680px, 86%);
  opacity: 0;
  translate: -50% calc(-50% + 30px);
  transition: opacity .45s ease, translate .55s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.feature-slide.is-active {
  opacity: 1;
  translate: -50% -50%;
}

.feature-slide h2 {
  margin-bottom: 30px;
  font-size: clamp(58px, 5.2vw, 84px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.06em;
}

.feature-slide p {
  max-width: 620px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  font-size: clamp(19px, 1.5vw, 25px);
}

.google-review-copy {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  white-space: nowrap;
}

.google-review-copy svg {
  width: .96em;
  height: .96em;
  flex: none;
}

.google-review-copy strong {
  font-weight: 700;
}

.feature-cta {
  position: absolute;
  right: 7vw;
  bottom: 28px;
  left: 2vw;
  width: auto;
}

.feature-mobile-cta,
.mobile-feature-media {
  display: none;
}

.feature-media {
  position: relative;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line-dark);
}

.media-frame {
  position: relative;
  width: min(360px, 42vw);
  aspect-ratio: 1200 / 2128;
  overflow: hidden;
  border-radius: 52px;
  background: var(--black);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .18);
}

.feature-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity .4s ease;
}

.feature-video.is-active {
  opacity: 1;
}

.media-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.media-caption strong {
  font-family: var(--mono);
  font-weight: 500;
}

/* ---- The FREE story: sticky reveal, then a tall panel ------------------------
   .social-story is the runway for the APPROVED animation only (owner photo fades
   and zooms, FREEEEEEEE grows behind it). The screens live in .free-panel below,
   in normal flow, so they are sized by WIDTH and can actually be big. */
.social-story {
  position: relative;
  height: 260svh;
}

.social-sticky {
  --social-progress: 0;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

.social-photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  /* ⛔ The owner photo must NOT fade away (Jase r22: "i dont think the Happy Girl
     image should disapear"). It only zooms. Anything that drives this toward 0
     leaves the word floating on empty green - which is what he rejected. */
  opacity: 1;
  object-fit: cover;
  object-position: center 42%;
  scale: calc(1 + (var(--social-progress) * .07));
}

.giant-type {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: max-content;
  /* White: the photo stays put underneath this word, so it needs the photo's
     contrast, not the pale panel's. */
  color: var(--white);
  font-size: clamp(160px, 22vw, 420px);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.08em;
  /* A triangle: up from progress .30, peak .72, back to 0 as the panel arrives -
     so the word STOPS at the screens instead of bleeding across them (Jase r21).
     ⛔ Do NOT go back to abs(): it is Chrome 133+, and where it is unsupported the
     WHOLE declaration is invalid, opacity falls back to 1 and the word never
     leaves. min() is the same shape and is supported everywhere. */
  opacity: clamp(0, min(calc((var(--social-progress) - .06) * 6), calc((1 - var(--social-progress)) * 12)), 1);
  translate: -50% -50%;
  scale: calc(.88 + (var(--social-progress) * .3));
}

.giant-type-long,
.giant-type-phone {
  display: block;
}

.giant-type-phone {
  display: none;
}

/* Top padding clears the floating header, so the heading is never sitting under
   the nav pill at the moment the panel reaches the top of the viewport. */
.free-panel {
  position: relative;
  padding: clamp(112px, 10vh, 150px) var(--page-pad) 0;
  overflow: hidden;
}

.social-content {
  display: flex;
  width: min(1500px, 100%);
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
}

.social-content h2 {
  max-width: 1000px;
  margin-bottom: clamp(14px, 1.5vw, 24px);
  /* Black, not white: white is unreadable on the pale sky-blue surface. */
  color: var(--black);
  font-size: clamp(30px, 3vw, 48px);
  line-height: .86;
  text-align: center;
}

/* Small qualifier where three 48px orphan words used to be. It sets up the
   heading instead of competing with it - the old SOLO/TEAM/CHATBOT block was
   physically bigger than the h2 it sat above, which is why the section read as
   three headings and no statement. */
.free-eyebrow {
  margin: 0 0 10px;
  color: rgba(0, 0, 0, .58);
  font-family: var(--headline);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* .free-title, not bare `.social-content h2`: that selector is set five times in
   this file (twice for size) and a later media query pins it to 30px. Class +
   element beats it everywhere, so the size cannot depend on source order. */
.social-content h2.free-title {
  max-width: 15ch;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: .88;
}

.free-reason {
  max-width: 760px;
  margin: 0 auto clamp(38px, 4vw, 56px);
  color: rgba(0, 0, 0, .74);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* The girl-in-circle closes the sky-blue FREE story, bleeding off the bottom edge. It grows
   small -> large as it scrolls up (Jase r23: "it was animated before"). --orb-progress
   is set by base.js; it defaults to 1 so the circle is fully visible without JS.
   ⛔ Do NOT move this back to `animation-timeline: view()`: .free-panel is
   `overflow: hidden`, which makes the panel the nearest scrollport, and a scrollport
   that never scrolls leaves a view timeline pinned at its start - the animation
   silently never ran. */
.social-orb {
  --orb-progress: 1;
  position: relative;
  z-index: 1;
  width: min(560px, 62vw);
  margin: clamp(56px, 7vh, 112px) auto -9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../../assets/alice-site-everywhere-phone-owner.png") center 44% / cover no-repeat;
  opacity: clamp(0, calc(var(--orb-progress) * 2.4), 1);
  scale: clamp(.58, calc(.58 + (var(--orb-progress) * .52)), 1);
  translate: 0 calc((1 - clamp(0, var(--orb-progress), 1)) * 70px);
}

.channel-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  z-index: 2;
  width: min(1200px, 100%);
  gap: 16px;
}

.channel-card {
  display: flex;
  min-width: 0;
  min-height: 270px;
  flex-direction: column;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .08);
  transition: translate .22s ease, box-shadow .22s ease;
}

.channel-card:hover {
  translate: 0 -5px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .13);
}

.channel-tab-heading {
  display: flex;
  margin-top: 0;
  margin-bottom: 20px;
  align-items: center;
  gap: 12px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.channel-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.channel-card .channel-icon {
  color: var(--magenta);
}

.channel-card p {
  max-width: 290px;
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.channel-open {
  margin-top: auto;
  padding-top: 24px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 500 13px/1 var(--mono);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.channel-open:hover {
  color: var(--magenta);
}

/* ---- Free showcase: the app screens under "The whole app is free" -----------
   Two sets stacked top-to-bottom (all viewports). Each .free-set = a frameless
   iPad screenshot base + two frameless phone screenshots sitting STRAIGHT, side
   by side over its bottom-right, hanging past its bottom edge (Jase's sketch).
   ⛔ Sized by WIDTH, never by the viewport height: r20 put this inside the 100vh
   sticky, which capped each set at ~400px wide and left the empty green Jase
   flagged. The set's aspect is fixed by the iPad image (w/h 1.335), so height is
   the wrong axis to constrain. */
.free-showcase {
  display: flex;
  flex-direction: column;
  /* Generous: the set above hangs its phones below the iPad, so a tight gap reads
     as the two sets crowding each other (Jase r23). */
  gap: clamp(80px, 12.5vw, 150px);
  width: min(1040px, 100%);
  margin: 0 auto;
}

/* padding-bottom = the phones' overhang below the iPad. % of the set's own width,
   so the whole composition scales as one piece. */
.free-set {
  position: relative;
  width: 100%;
  padding-bottom: 8.5%;
}

/* A 1px hairline, NOT a drop shadow (Jase r21: matches the site's flat style and
   is less work). radius 6px - 12px was visibly cropping the screenshot content. */
/* 24px = 3x the 8px it had (Jase r23). The iPad's left edge is the app's dark navy
   sidebar, so a bigger radius only rounds that - it does not eat any UI. */
.free-ipad {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 24px;
}

/* ⛔ Sized by HEIGHT, not width. The Locate screenshot is 528x1118 while the rest
   are 560x1241, so an equal WIDTH renders it visibly shorter than the phone beside
   it (Jase r22). Equal height + width:auto makes the pair line up whatever the
   source aspect is.
   ⛔ The radius is MEASURED, not guessed. The phone screenshots keep their own
   rounded screen, and the black outside that arc runs 36px into a 560px-wide
   source = 6.43% of the rendered width (flood-filled from the corner pixel across
   all four corners of all four phone shots). 17px covers the ~15px needed at the
   235px desktop render with headroom; 12px did not, and Jase saw the black wedge. */
.free-phone {
  position: absolute;
  bottom: 0;
  width: auto;
  height: 60%;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 17px;
}

/* Right edges chosen so the two phones sit flush side by side (22.6% each, a
   ~1.4% gap between them), the front one just inside the iPad's right edge. */
.free-phone-a {
  right: 2%;
  z-index: 3;
}

.free-phone-b {
  right: 26%;
  z-index: 2;
}

/* ---- Free features marquee (round 29) ---------------------------------------
   Jase deleted the puzzle ("so ugly") and sent the 21st.dev "marquee along an SVG
   path" demo: flags that ride a curve, edge to edge of the screen, running for
   ever left to right on phone, iPad and desktop. Their component is React +
   Framer Motion; this is the same effect rebuilt in vanilla base.js.

   ⛔ FULL BLEED, deliberately. `.social-content` is a centred column inside the
   panel's page padding; the 100vw + negative margin breaks the flags out of it so
   the run really does cross the whole screen. `.free-panel` is overflow:hidden,
   so the extra width can never add a horizontal scrollbar.
   ⛔ The path's viewBox is 1200x320 but the box's aspect changes per breakpoint
   (preserveAspectRatio="none"), so x and y scale by DIFFERENT amounts on a phone.
   base.js therefore measures arc length in DISPLAYED pixels, not viewBox units -
   otherwise the flags bunch up wherever the curve is steepest. */
.free-marquee {
  --mq-vermilion: #f0552b;
  --mq-teal: #56c5c0;
  --mq-red: #e8402c;
  --mq-pink: #f6c9dc;
  --mq-sage: #93a96b;
  --mq-blue: #1b44c8;
  --mq-tan: #dda97d;
  --mq-cream: #f7efd8;
  --mq-lilac: #b49bd0;
  --mq-butter: #f5d97a;
  --mq-paper: #eceae4;
  --mq-ink: #10100e;
  position: relative;
  width: 100vw;
  margin: 0 0 clamp(48px, 5vw, 80px);
  /* ⛔ No negative margin to break out with. .social-content is a flex column
     with align-items:center, and centring accounts for margins - a
     `calc(50% - 50vw)` left margin shifted the whole run 23px off-screen-left.
     Centred, a 100vw item simply overflows its column symmetrically, which lands
     it exactly edge to edge because the column is itself centred. */
  align-self: center;
  aspect-ratio: 1200 / 300;
  /* ⛔ pan-y, never none. The browser has to keep owning vertical scrolling or a
     finger on the flags fights the page - the same lesson the calendar taught. */
  touch-action: pan-y;
  cursor: grab;
}

.free-marquee.is-dragging {
  cursor: grabbing;
}

.free-marquee-swipe-cue {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: none;
  width: clamp(148px, 42vw, 182px);
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.92);
  transition: opacity .18s ease, transform .24s ease, visibility 0s linear .24s;
}

.free-marquee-swipe-cue.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

.free-marquee-swipe-cue.is-visible:not(.is-ready) {
  opacity: 0;
}

.free-marquee-swipe-cue.is-dismissed {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.84);
}

.free-marquee-swipe-lottie,
.free-marquee-swipe-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}

.free-marquee-swipe-lottie {
  filter: brightness(0);
}

.free-marquee-swipe-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.free-marquee-swipe-fallback {
  display: none;
  fill: none;
  stroke: var(--black);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  transition: opacity .16s ease;
}

.free-marquee-swipe-cue.is-ready .free-marquee-swipe-fallback {
  opacity: 0;
}

@media (max-width: 1100px) {
  .free-marquee-swipe-cue {
    display: grid;
  }
}

/* ⛔ Absolute, so the SVG contributes NOTHING to layout. In flow its intrinsic
   1200x320 viewBox ratio grew the box past the aspect-ratio above (384px instead
   of 360px at 1440), and it would have fought every per-breakpoint aspect. */
.free-marquee-path {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
}

.free-flags {
  position: absolute;
  margin: 0;
  padding: 0;
  inset: 0;
  list-style: none;
}

/* left/top 0 + a translate to the sampled point: base.js writes the transform
   every frame, and transform-origin stays the flag's own centre so the rotation
   follows the curve's tangent without shifting it off the string. */
.free-flag {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: clamp(92px, 9.2vw, 134px);
  padding: 7px 8px;
  aspect-ratio: 3 / 2;
  place-items: center;
  background: var(--flag-bg, var(--mq-paper));
  color: var(--flag-ink, var(--mq-ink));
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  will-change: transform;
}

/* The 21st.dev demo's palette, kept together here so it is obvious this is a
   one-off set for this element and not a change to the locked brand colours.
   Ink is chosen by measured contrast, not by eye: white on the vermilion is
   3.5:1 and on the red 4.0:1, both under the 4.5 floor, so those take black. */
.fm-vermilion { --flag-bg: var(--mq-vermilion); --flag-ink: var(--mq-ink); }
.fm-teal { --flag-bg: var(--mq-teal); --flag-ink: var(--mq-ink); }
.fm-red { --flag-bg: var(--mq-red); --flag-ink: var(--mq-ink); }
.fm-pink { --flag-bg: var(--mq-pink); --flag-ink: var(--mq-ink); }
.fm-sage { --flag-bg: var(--mq-sage); --flag-ink: var(--mq-ink); }
.fm-blue { --flag-bg: var(--mq-blue); --flag-ink: var(--white); }
.fm-tan { --flag-bg: var(--mq-tan); --flag-ink: var(--mq-ink); }
.fm-cream { --flag-bg: var(--mq-cream); --flag-ink: var(--mq-ink); }
.fm-lilac { --flag-bg: var(--mq-lilac); --flag-ink: var(--mq-ink); }
.fm-butter { --flag-bg: var(--mq-butter); --flag-ink: var(--mq-ink); }
.fm-paper { --flag-bg: var(--mq-paper); --flag-ink: var(--mq-ink); }
.fm-ink { --flag-bg: var(--mq-ink); --flag-ink: var(--mq-cream); }


.channel-dialog {
  position: fixed;
  inset: var(--alice-viewport-top, 0px) 0 auto;
  width: 100%;
  max-width: none;
  height: var(--alice-viewport-height, 100dvh);
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--white);
}

.channel-dialog::backdrop {
  background: rgba(8, 9, 12, .8);
  backdrop-filter: blur(16px) saturate(.72);
}

.channel-dialog-close {
  position: absolute;
  z-index: 3;
  top: max(20px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--white);
  font: 300 32px/1 var(--display);
  cursor: pointer;
}

.channel-dialog-close:focus-visible {
  border-radius: 50%;
  outline: 1px solid rgba(255, 255, 255, .8);
  outline-offset: -3px;
}

.channel-dialog:focus {
  outline: 0;
}

.channel-dialog .channel-stage {
  margin: 0;
}

body.channel-dialog-open {
  overflow: hidden;
}

.channel-stage {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.channel-screen {
  display: flex;
  width: min(520px, calc(100% - 80px));
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  pointer-events: auto;
}

.channel-screen[hidden] {
  display: none;
}

.channel-screen-copy {
  order: 2;
  max-width: 650px;
  padding: 0;
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}

.screen-kicker {
  display: block;
  margin-bottom: 22px;
  color: var(--purple);
  font: 500 13px/1 var(--mono);
  text-transform: uppercase;
}

.channel-screen-copy h3 {
  margin: 0;
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.04em;
}

.channel-screen-copy p {
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
}

.screen-tags {
  display: flex;
  margin-top: 32px;
  flex-wrap: wrap;
  gap: 8px;
}

.screen-tags span {
  padding: 9px 13px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 999px;
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
}

.call-phone,
.care-phone {
  position: relative;
  order: 1;
  justify-self: center;
  width: min(230px, 100%);
  border: 7px solid #11141a;
  border-radius: 42px;
  overflow: hidden;
  background: #11141a;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .44);
}

.call-phone {
  aspect-ratio: 9 / 18.8;
  color: var(--white);
}

.call-phone > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.call-phone::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 42%, rgba(0, 0, 0, .55));
  content: "";
  pointer-events: none;
}

.phone-status,
.care-status {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 24px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}

.dynamic-island {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  width: 104px;
  height: 30px;
  border-radius: 999px;
  background: #000;
  translate: -50% 0;
}

.call-name {
  position: absolute;
  z-index: 3;
  top: 78px;
  right: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.call-name strong {
  font-size: 36px;
  line-height: 1;
}

.call-name span {
  margin-top: 7px;
  font-size: 17px;
}

.call-actions {
  position: absolute;
  z-index: 3;
  right: 45px;
  bottom: 50px;
  left: 45px;
  display: flex;
  justify-content: space-between;
}

.call-action {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border-radius: 50%;
}

.call-action svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.call-action.decline {
  background: #f2463e;
}

.call-action.accept {
  background: #45c95a;
}

.channel-screen-calendar {
  display: flex;
  width: min(1080px, calc(100% - 80px));
}

.calendar-tablet {
  position: relative;
  order: 1;
  width: min(650px, 100%);
  justify-self: center;
  padding: 8px;
  border: 7px solid #10141d;
  border-radius: 24px;
  overflow: hidden;
  background: #10141d;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .42);
}

.calendar-tablet img {
  width: 100%;
  border-radius: 17px;
}

.tablet-camera {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #454b59;
}

.care-phone {
  aspect-ratio: 9 / 18.8;
  padding: 50px 16px 18px;
  background: #f9f8ff;
  color: #15151a;
}

.care-status {
  top: 13px;
  color: #101117;
}

.care-nav {
  display: grid;
  min-height: 54px;
  grid-template-columns: 24px 38px 1fr 30px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e5e1f0;
}

.care-nav > img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.care-nav > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.care-nav strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-nav div span {
  color: #777384;
  font-size: 10px;
}

.care-back {
  color: var(--purple);
  font-size: 31px;
  line-height: 1;
}

.care-info {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid var(--purple);
  border-radius: 50%;
  color: var(--purple);
  font-size: 13px;
  font-weight: 800;
}

.care-profile {
  display: flex;
  padding: 20px 0 16px;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #e5e1f0;
}

.care-profile > img {
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
  border: 4px solid #e2d8ff;
  border-radius: 50%;
  object-fit: cover;
}

.care-profile strong {
  font-size: 17px;
}

.location-pill {
  display: inline-flex;
  margin-top: 6px;
  padding: 5px 10px;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #eee7ff;
  color: #6441a8;
  font-size: 11px;
  font-weight: 700;
}

.location-pill svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.care-thread {
  display: flex;
  min-height: 295px;
  padding: 14px 0 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.date-pill {
  align-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e8e5ec;
  color: #777384;
  font-size: 10px;
  font-weight: 700;
}

.message {
  max-width: 84%;
  padding: 10px 12px;
  border-radius: 15px;
  font-size: 12px;
  line-height: 1.3;
}

.message-alice {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, #9459ec, #6f30d4);
  color: var(--white);
}

.message-sarah {
  border-bottom-left-radius: 5px;
  background: #e9e8ec;
}

.care-composer {
  display: flex;
  height: 44px;
  padding-left: 14px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dedbe5;
  border-radius: 999px;
  background: var(--white);
  color: #a4a0ab;
  font-size: 12px;
}

.send-button {
  display: grid;
  width: 36px;
  height: 36px;
  margin-right: 3px;
  place-items: center;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-size: 18px;
}

.care-phone > small {
  display: block;
  margin-top: 10px;
  color: #8c8795;
  font: 500 9px/1 var(--mono);
  text-align: center;
  text-transform: uppercase;
}

/* Shared product-diagram language: device suggestion, not fake OS chrome. */
.diagram-phone {
  width: min(330px, 32vw);
  aspect-ratio: 9 / 16.35;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 54px;
  background: #08090d;
  box-shadow:
    inset 0 0 0 7px #13151b,
    0 34px 90px rgba(0, 0, 0, .48);
}

.call-phone {
  display: flex;
  color: var(--white);
  flex-direction: column;
  gap: 11px;
}

.call-header {
  display: grid;
  min-height: 50px;
  padding: 4px 6px 0;
  grid-template-columns: 42px 1fr 10px;
  align-items: center;
  gap: 11px;
}

.call-header img,
.care-header img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.call-header > div,
.care-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.call-header strong,
.care-header strong {
  font-size: 14px;
  line-height: 1.15;
}

.call-header span {
  margin-top: 3px;
  color: rgba(255, 255, 255, .56);
  font: 500 9px/1 var(--mono);
  text-transform: uppercase;
}

.call-header > i,
.care-header > i,
.care-note > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39d98a;
  box-shadow: 0 0 0 5px rgba(57, 217, 138, .12);
}

.call-portrait {
  height: 222px;
  margin: 0 2px;
  border-radius: 34px;
  overflow: hidden;
  background: #1a1c22;
}

.call-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.voice-wave {
  display: flex;
  height: 46px;
  margin: 0 2px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: #12141a;
}

.voice-wave i {
  width: 4px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--magenta), #8e54ec);
  animation: diagram-wave 1.15s ease-in-out infinite alternate;
}

.voice-wave i:nth-child(2),
.voice-wave i:nth-child(8) { height: 22px; animation-delay: -.7s; }
.voice-wave i:nth-child(3),
.voice-wave i:nth-child(7) { height: 31px; animation-delay: -.3s; }
.voice-wave i:nth-child(4),
.voice-wave i:nth-child(6) { height: 18px; animation-delay: -.9s; }
.voice-wave i:nth-child(5) { height: 36px; animation-delay: -.5s; }

@keyframes diagram-wave {
  from { scale: 1 .62; opacity: .58; }
  to { scale: 1 1; opacity: 1; }
}

.call-transcript {
  display: flex;
  padding: 0 2px 2px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.call-transcript p {
  max-width: 88%;
  margin: 0;
  padding: 11px 13px;
  border-radius: 15px;
  background: #24262d;
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  line-height: 1.28;
}

.call-transcript p:last-child {
  max-width: 78%;
  align-self: flex-end;
  background: linear-gradient(135deg, #8e49e7, #7132cf);
  color: var(--white);
}

.calendar-tablet {
  width: min(940px, 72vw);
  aspect-ratio: 16 / 9.3;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 40px;
  background: #0b0d12;
  box-shadow:
    inset 0 0 0 8px #151820,
    0 38px 100px rgba(0, 0, 0, .48);
}

.calendar-screen-crop {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #f8f6ff;
}

.calendar-screen-crop img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
}

.care-phone {
  padding: 12px;
  background: #08090d;
  color: #14151a;
}

.care-screen {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 24px 20px 18px;
  border-radius: 43px;
  background: #f7f5fc;
  flex-direction: column;
}

.care-header {
  display: grid;
  min-height: 54px;
  padding-bottom: 16px;
  grid-template-columns: 46px 1fr 8px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #e4e0ec;
}

.care-header img {
  width: 46px;
  height: 46px;
}

.care-header strong {
  font-size: 15px;
}

.care-header span {
  margin-top: 4px;
  color: #7d748c;
  font: 500 10px/1 var(--mono);
  text-transform: uppercase;
}

.care-header > i {
  background: var(--purple);
  box-shadow: 0 0 0 5px rgba(123, 52, 206, .1);
}

.care-thread {
  display: flex;
  min-height: 0;
  padding: 20px 0 16px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.date-pill {
  align-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e9e5ef;
  color: #756d80;
  font: 600 9px/1 var(--mono);
  text-transform: uppercase;
}

.message {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 15px;
  font-size: 12px;
  line-height: 1.3;
}

.message-alice {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, #9150e8, #7132cf);
  color: var(--white);
}

.message-sarah {
  border-bottom-left-radius: 5px;
  background: #e7e4eb;
}

.care-note {
  display: flex;
  min-height: 42px;
  padding: 10px 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e0ec;
  border-radius: 14px;
  background: rgba(255, 255, 255, .76);
  color: #6f6878;
  font: 500 9px/1.25 var(--mono);
  text-transform: uppercase;
}

.care-note > i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
}

.before-after {
  min-height: 0;
  padding-top: 170px;
  padding-bottom: 170px;
}

.comparison-story,
.comparison-pin {
  width: 100%;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1240px, 100%);
  margin: 100px auto 0;
  gap: 24px;
  text-align: left;
}

.comparison-card {
  display: flex;
  position: relative;
  min-height: 880px;
  flex-direction: column;
  padding: 70px 48px 44px;
  border-radius: 52px;
  overflow: hidden;
  isolation: isolate;
}

.comparison-card.before {
  background: var(--off-white);
  color: var(--black);
}

.comparison-card.after {
  background: var(--green);
  color: var(--white);
}

.comparison-card > small {
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.comparison-card h3 {
  position: relative;
  z-index: 2;
  min-height: 190px;
  margin-bottom: 0;
  font-size: clamp(54px, 5vw, 82px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.06em;
  text-align: center;
}

.comparison-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.comparison-scene img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .34;
  object-fit: cover;
  object-position: 50% 50%;
}

.comparison-card.before .comparison-scene img {
  object-position: 50% 50%;
}

.comparison-scene::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(237, 242, 237, .78) 0%, rgba(237, 242, 237, .52) 38%, rgba(237, 242, 237, .62) 64%, rgba(237, 242, 237, .94) 100%);
  content: "";
  pointer-events: none;
}

.comparison-card.after .comparison-scene::after {
  background: linear-gradient(180deg, rgba(0, 132, 61, .76) 0%, rgba(0, 132, 61, .50) 38%, rgba(0, 132, 61, .60) 64%, rgba(0, 132, 61, .94) 100%);
}

.comparison-card ul {
  position: relative;
  z-index: 2;
  margin: auto 0 38px;
  padding: 0;
  list-style: none;
}

.comparison-card li {
  position: relative;
  padding: 22px 46px 22px 0;
  border-top: 1px solid currentColor;
  font: 500 13px/1.25 var(--mono);
  text-transform: uppercase;
}

.comparison-card li::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: currentColor;
  color: var(--white);
  content: "✓";
  font-family: var(--display);
  translate: 0 -50%;
}

.comparison-card.before li::after {
  background: var(--white);
  color: var(--red);
  content: "\00D7";
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.comparison-risk-copy {
  color: var(--red-deep);
}

.comparison-card.after li::after {
  color: var(--green);
}

.comparison-card .pill {
  position: relative;
  z-index: 2;
  width: 100%;
}

.revenue-calculator-section {
  width: min(1240px, 100%);
  margin: 150px auto 0;
  text-align: center;
}

.revenue-calculator-eyebrow {
  margin: 0 0 18px;
  color: var(--black);
  font: 700 13px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.revenue-calculator-section > h3 {
  max-width: 980px;
  margin: 0 auto 34px;
  font: 400 clamp(68px, 8.2vw, 126px)/.96 var(--headline);
  letter-spacing: -.032em;
}

.revenue-calculator-section > h4 {
  max-width: 760px;
  margin: 0 auto 16px;
  font: 800 clamp(30px, 3.2vw, 48px)/1.02 var(--display);
  letter-spacing: -.035em;
}

.revenue-calculator-intro {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(15, 15, 17, .68);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.35;
}

.revenue-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  margin-top: 44px;
  padding: 34px;
  border: 0;
  border-radius: 0;
  background: #101014;
  box-shadow: none;
  color: var(--white);
  gap: 28px 32px;
  overflow: hidden;
  text-align: left;
}

.revenue-calculator-controls {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-content: center;
  gap: 24px;
}

.revenue-calculator-control {
  min-width: 0;
}

.revenue-calculator-label {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.revenue-calculator-label label {
  max-width: 390px;
  font: 700 16px/1.22 var(--display);
}

.revenue-calculator-label output {
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: 0;
  background: var(--yellow-bright);
  color: var(--black);
  font: 800 14px/1 var(--display);
  white-space: nowrap;
}

.revenue-calculator-control input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 4px 0 -6px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.revenue-calculator-control input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow-bright) 0 var(--range-progress, 0%), rgba(255, 255, 255, .22) var(--range-progress, 0%) 100%);
}

.revenue-calculator-control input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 3px solid var(--yellow-bright);
  border-radius: 50%;
  appearance: none;
  background: var(--white);
  box-shadow: none;
}

.revenue-calculator-control input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow-bright) 0 var(--range-progress, 0%), rgba(255, 255, 255, .22) var(--range-progress, 0%) 100%);
}

.revenue-calculator-control input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--yellow-bright);
  border-radius: 50%;
  background: var(--white);
  box-shadow: none;
}

.revenue-calculator-control input[type="range"]:focus-visible {
  outline: 3px solid var(--yellow-bright);
  outline-offset: 7px;
}

.revenue-calculator-results {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  gap: 12px;
}

.revenue-calculator-result {
  display: flex;
  min-height: 106px;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--black);
}

.revenue-calculator-result > span {
  color: rgba(0, 0, 0, .58);
  font: 750 13px/1.18 var(--display);
}

.revenue-calculator-result strong {
  display: block;
  margin-top: 10px;
  color: var(--black);
  font: 850 clamp(34px, 3.5vw, 48px)/.9 var(--display);
  letter-spacing: -.045em;
}

.revenue-calculator-result output {
  font: inherit;
}

.revenue-calculator-result-annual {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 190px;
  padding: 28px 34px;
  border-radius: 0;
  background: var(--yellow-bright);
  color: var(--black);
  box-shadow: none;
}

.revenue-calculator-result-annual > span {
  color: rgba(0, 0, 0, .64);
  font: 700 15px/1.15 var(--mono);
  text-transform: uppercase;
}

.revenue-calculator-result-annual strong {
  margin-top: 8px;
  color: var(--black);
  font-size: clamp(66px, 8vw, 112px);
}

.revenue-calculator-result-annual small {
  max-width: 620px;
  margin-top: 10px;
  color: rgba(0, 0, 0, .64);
  font: 600 13px/1.25 var(--display);
}

.revenue-calculator-note {
  margin: 18px auto 0;
  color: rgba(15, 15, 17, .55);
  font: 500 11px/1.4 var(--mono);
}

@media (prefers-reduced-motion: reduce) {
  .revenue-calculator-control input[type="range"],
  .revenue-calculator-result {
    transition: none;
  }
}

@media (max-width: 950px) {
  .revenue-calculator-section {
    margin-top: 120px;
  }

  .revenue-calculator {
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .revenue-calculator-controls {
    grid-column: 1;
    grid-row: 2;
  }

  .revenue-calculator-results {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .revenue-calculator-result-annual {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 760px) {
  .revenue-calculator-section {
    margin-top: 72px;
  }

  .revenue-calculator-eyebrow {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .revenue-calculator-section > h3 {
    max-width: 340px;
    margin-bottom: 12px;
    font-size: clamp(42px, 12vw, 52px);
    line-height: .96;
  }

  .revenue-calculator-section > h4 {
    max-width: 330px;
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 1.08;
  }

  .revenue-calculator-intro {
    max-width: 330px;
    font-size: 14px;
    line-height: 1.22;
  }

  .revenue-calculator {
    margin-top: 16px;
    padding: 14px;
    border-radius: 0;
    gap: 10px;
  }

  .revenue-calculator-controls {
    gap: 6px;
  }

  .revenue-calculator-label {
    align-items: center;
    gap: 8px;
  }

  .revenue-calculator-label label {
    max-width: 245px;
    font-size: 11.5px;
    line-height: 1.15;
  }

  .revenue-calculator-label output {
    padding: 6px 8px;
    font-size: 10.5px;
  }

  .revenue-calculator-control input[type="range"] {
    height: 44px;
    margin: -2px 0 -4px;
  }

  .revenue-calculator-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .revenue-calculator-result {
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 0;
  }

  .revenue-calculator-result > span {
    font: 700 8.5px/1.08 var(--mono);
    text-transform: uppercase;
  }

  .revenue-calculator-result strong {
    margin-top: 6px;
    font-size: 23px;
  }

  .revenue-calculator-result-annual {
    min-height: 104px;
    padding: 14px 16px;
    border-radius: 0;
  }

  .revenue-calculator-result-annual > span {
    font-size: 9.5px;
  }

  .revenue-calculator-result-annual strong {
    margin-top: 4px;
    font-size: clamp(42px, 13vw, 52px);
  }

  .revenue-calculator-result-annual small {
    margin-top: 4px;
    font-size: 9.5px;
    line-height: 1.15;
  }

  .revenue-calculator-note {
    max-width: 330px;
    margin-top: 8px;
    font-size: 8px;
    line-height: 1.2;
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .revenue-calculator-section {
    margin-top: 58px;
  }

  .revenue-calculator-section > h3 {
    margin-bottom: 8px;
    font-size: 40px;
  }

  .revenue-calculator-section > h4 {
    font-size: 16px;
  }

  .revenue-calculator-intro {
    display: none;
  }

  .revenue-calculator {
    margin-top: 12px;
    padding: 12px;
    gap: 8px;
  }

  .revenue-calculator-result-annual {
    min-height: 92px;
    padding: 11px 14px;
  }

  .revenue-calculator-result-annual strong {
    font-size: 40px;
  }

  .revenue-calculator-controls {
    gap: 3px;
  }

  .revenue-calculator-result {
    min-height: 58px;
    padding: 8px 10px;
  }

  .revenue-calculator-result strong {
    font-size: 20px;
  }

  .revenue-calculator-result-annual strong {
    font-size: 40px;
  }
}

.section-intro.compact {
  min-height: 620px;
  padding-top: 120px;
  padding-bottom: 100px;
}

.demo-scene-source {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

.demo-stage {
  display: grid;
  grid-template-columns: 360px minmax(410px, 1fr) 280px;
  min-height: 920px;
  margin: 0 var(--page-pad) 160px;
  padding: calc(var(--header-height) + 50px) 32px 32px;
  gap: 36px;
  align-items: center;
}

.demo-panel {
  display: flex;
  min-width: 0;
  min-height: 840px;
  flex-direction: column;
  padding: 36px 24px 26px;
  border-radius: 28px;
  background: var(--white);
}

.demo-panel-heading {
  margin: 0 10px 28px;
}

.demo-panel-heading > span {
  display: block;
  margin-bottom: 12px;
  color: var(--purple);
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
}

.demo-panel h3 {
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.05em;
}

.demo-tabs {
  margin-bottom: 28px;
  border-top: 1px solid var(--line-dark);
}

.demo-tabs button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 75px;
  padding: 13px 12px;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  color: var(--black);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.demo-tabs button.is-active {
  border-radius: 14px;
  background: #eee9f7;
}

.demo-tabs button:hover {
  background: rgba(123, 52, 206, .07);
}

.demo-tabs button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--magenta);
  outline-offset: -2px;
}

.demo-tab-number {
  color: var(--purple);
  font: 500 11px/1 var(--mono);
}

.demo-tab-copy {
  display: block;
}

.demo-tab-copy strong,
.demo-tab-copy small {
  display: block;
}

.demo-tab-copy strong {
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.05;
}

.demo-tab-copy small {
  color: #6d6d6d;
  font-size: 12px;
  line-height: 1.15;
}

.demo-tab-status {
  display: block;
  position: relative;
  width: 38px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, .12);
}

.demo-tab-status i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left;
}

.demo-panel > .pill {
  width: 100%;
  margin-top: auto;
}

.phone-wrap {
  display: grid;
  min-width: 0;
  width: 100%;
  place-items: center;
}

.alice-demo-phone {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  aspect-ratio: 43 / 92;
  padding: 0;
  overflow: visible;
  container-type: inline-size;
}

.phone-hardware {
  display: none;
}

.demo-phone-screen {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 6.2cqw 5.4cqw 5.4cqw;
  overflow: hidden;
  border-radius: 44px;
  background: #f6f3fa;
  color: var(--black);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .18);
}

.demo-scene-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.demo-scene {
  position: absolute;
  inset: 0;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2.5cqw) scale(.985);
  transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
}

.demo-scene.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* AliceLoveGrowth runs from Claude's original document inside the shared phone shell. */
.scene-growth {
  inset: -6.2cqw -5.4cqw -5.4cqw;
  overflow: hidden;
  background: #050505;
}

.alice-growth-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050505;
  pointer-events: none;
}

/* ManyChat's browser chrome: ONE thin all-white bar spanning the full width of the
   phone, address text sitting directly on it. Not a pill. The negative margin bleeds
   it out of the screen's padding; the screen's overflow:hidden rounds its top corners. */
.demo-phone-topline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -6.2cqw -5.4cqw 4.6cqw;
  padding: 2.5cqw 5.4cqw;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  background: var(--white);
  color: #3d3a42;
  font: 500 2.8cqw/1 var(--mono);
  letter-spacing: .05em;
}

.demo-phone-url {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  color: inherit;
  font-size: 2.9cqw;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-live-label {
  display: flex;
  align-items: center;
  color: var(--black);
}

.demo-live-label i {
  width: 2.2cqw;
  height: 2.2cqw;
  margin-right: 2cqw;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 0 rgba(0, 166, 63, .38);
}

.call-customer {
  display: grid;
  grid-template-columns: 11cqw minmax(0, 1fr) auto;
  gap: 3.2cqw;
  align-items: center;
  padding-bottom: 4.8cqw;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.call-customer-avatar {
  width: 11cqw;
  height: 11cqw;
  border: .8cqw solid var(--white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 12px rgba(49, 23, 82, .14);
}

.call-customer-copy strong,
.call-customer-copy small {
  display: block;
}

.call-customer-copy strong {
  margin-bottom: 1.1cqw;
  font-size: 4.3cqw;
  line-height: 1;
}

.call-customer-copy small {
  color: #706a75;
  font-size: 3cqw;
  line-height: 1;
}

.recording-chip {
  display: flex;
  align-items: center;
  padding: 2.3cqw 2.7cqw;
  gap: 1.8cqw;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font: 500 2.25cqw/1 var(--mono);
  white-space: nowrap;
}

.recording-chip b {
  font-weight: 500;
  opacity: .65;
}

.call-playback {
  display: grid;
  min-height: 12.5cqw;
  padding: 2.2cqw 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.6cqw;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.call-playback button {
  position: relative;
  display: flex;
  min-height: 8cqw;
  padding: 0 2.5cqw;
  align-items: center;
  gap: 1.6cqw;
  border: 1px solid var(--magenta);
  border-radius: 999px;
  background: var(--magenta);
  color: var(--white);
  font: 600 2.1cqw/1 var(--mono);
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
}

.call-demo-pointer-cue {
  position: absolute;
  z-index: 2;
  right: -9px;
  bottom: -13px;
  display: block;
  width: 26px;
  height: 26px;
  overflow: visible;
  fill: var(--white);
  stroke: var(--black);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .22));
  pointer-events: none;
  transform-origin: 48% 18%;
  animation: hero-cta-pointer-tap 1.65s ease-in-out infinite;
}

.call-demo-pointer-detail {
  fill: none;
  stroke-width: 2.7;
}

@media (prefers-reduced-motion: reduce) {
  .call-demo-pointer-cue {
    display: none;
    animation: none;
  }
}

.call-playback button:hover {
  border-color: var(--purple);
  background: var(--purple);
}

.call-playback button:focus-visible {
  outline: .7cqw solid var(--white);
  outline-offset: .5cqw;
}

.call-playback button > i {
  width: 0;
  height: 0;
  border-top: 1.5cqw solid transparent;
  border-bottom: 1.5cqw solid transparent;
  border-left: 2.3cqw solid currentColor;
}

.call-playback audio {
  display: none;
}

.scene-calls.is-audio-playing .call-playback button > i {
  width: 2.4cqw;
  height: 3cqw;
  border: 0;
  border-right: .75cqw solid currentColor;
  border-left: .75cqw solid currentColor;
}

.call-waveform {
  display: flex;
  height: 8cqw;
  align-items: center;
  justify-content: center;
  gap: .8cqw;
}

.call-waveform i {
  width: .85cqw;
  height: 2.8cqw;
  border-radius: 999px;
  background: var(--purple);
  transform-origin: center;
}

.call-waveform i:nth-child(3n + 1) {
  height: 5.6cqw;
}

.call-waveform i:nth-child(4n + 2) {
  height: 4.2cqw;
}

.call-waveform i:nth-child(5n) {
  height: 7cqw;
}

.live-transcript {
  display: flex;
  min-height: 0;
  padding: 2.4cqw 0 1cqw;
  flex: 1;
  flex-direction: column;
}

.live-transcript > p,
.call-details > p {
  margin: 0 0 1.8cqw;
  color: #746d79;
  font: 500 2.5cqw/1 var(--mono);
  letter-spacing: .08em;
}

/* BOTTOM-ANCHORED BY LAYOUT, not by JS scrollTop.
   This clipped the newest transcript row on live four rounds running (rounds 9-12).
   The cause was structural, not arithmetic: the track carried `min-height: 100%`, so
   once the rows exceeded the window the track grew DOWNWARD past the bottom edge and
   the newest row was only visible because JS assigned `scrollTop` — an assignment
   that races with layout and read 0 whenever it ran before the track had grown.
   Making the window itself a flex-end column pins the newest row to the bottom edge
   and pushes any overflow off the TOP (those rows are hidden by the fit anyway), so
   there is nothing left to race. */
.call-dialogue {
  display: flex;
  min-height: 0;
  padding: .6cqw;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  scroll-behavior: smooth;
}

.call-dialogue-track {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2.1cqw;
}

.call-turn {
  display: flex;
  align-items: flex-end;
  gap: 1.6cqw;
}

.call-turn.customer-turn {
  flex-direction: row-reverse;
}

.call-turn img {
  width: 8.5cqw;
  height: 8.5cqw;
  flex: 0 0 auto;
  border: .55cqw solid var(--white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
}

.call-turn p {
  max-width: 75%;
  margin: 0;
  padding: 2.1cqw 2.6cqw;
  border-radius: 2.2cqw 2.2cqw 2.2cqw .6cqw;
  background: var(--purple);
  color: var(--white);
  font-size: 3.35cqw;
  line-height: 1.27;
}

.call-turn.customer-turn p {
  border-radius: 2.2cqw 2.2cqw .6cqw 2.2cqw;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 2px 10px rgba(49, 23, 82, .06);
}

.call-turn p > span:not(.call-word) {
  display: block;
}

.call-word {
  display: inline-block;
}

.privacy-mask {
  padding: 0 .7cqw;
  border-radius: .7cqw;
  background: var(--black);
  color: var(--white);
  font: 600 2.2cqw/1 var(--mono);
  letter-spacing: .08em;
}

.call-details {
  margin: 0;
  padding: 0;
}

.call-completion {
  position: absolute;
  z-index: 6;
  right: 1.4cqw;
  bottom: 1.4cqw;
  left: 1.4cqw;
  padding: 3cqw;
  visibility: hidden;
  border: 1px solid rgba(123, 52, 206, .16);
  border-radius: 4.5cqw;
  background: var(--white);
  box-shadow: 0 2.5cqw 8cqw rgba(34, 20, 54, .28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(3cqw);
  transition: opacity .38s ease, transform .38s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .38s;
}

.scene-calls.is-call-complete .call-completion {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.call-completion .demo-outcome {
  min-height: 11cqw;
  margin-top: 2.4cqw;
}

.call-details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1.7cqw;
}

.call-details span {
  padding: 1.25cqw 1.75cqw;
  border: 1px solid rgba(123, 52, 206, .25);
  border-radius: 999px;
  background: rgba(123, 52, 206, .08);
  color: var(--purple);
  font: 600 1.9cqw/1 var(--mono);
}

.demo-outcome {
  display: flex;
  min-height: 14cqw;
  margin-top: 4cqw;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  border-radius: 4cqw;
  color: var(--white);
}

.outcome-magenta {
  background: var(--magenta);
}

.outcome-black {
  background: var(--black);
}

.outcome-green {
  background: #00a63f;
}

.outcome-check {
  display: grid;
  width: 7cqw;
  height: 7cqw;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
}

.outcome-check::after {
  width: 2cqw;
  height: 3.4cqw;
  margin-top: -.7cqw;
  border-right: .7cqw solid currentColor;
  border-bottom: .7cqw solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.demo-outcome strong,
.demo-outcome small {
  display: block;
}

.demo-outcome strong {
  margin-bottom: 1cqw;
  font: 600 3.2cqw/1 var(--mono);
}

.demo-outcome small {
  font: 500 2.55cqw/1 var(--mono);
  opacity: .72;
}

.scene-person {
  display: grid;
  grid-template-columns: 11cqw minmax(0, 1fr) 2.8cqw;
  min-height: 14cqw;
  padding-bottom: 4cqw;
  gap: 3cqw;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.scene-person img {
  width: 11cqw;
  height: 11cqw;
  border: 2px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .11);
}

.scene-person strong,
.scene-person small {
  display: block;
}

.scene-person strong {
  margin-bottom: 1.1cqw;
  font-size: 4.1cqw;
  line-height: 1;
}

.scene-person small {
  color: #706a75;
  font-size: 2.8cqw;
  line-height: 1;
}

.scene-person > i {
  width: 2.5cqw;
  height: 2.5cqw;
  border-radius: 50%;
  background: #16c784;
}

.chat-thread {
  display: flex;
  padding-top: 6cqw;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.chat-bubble {
  max-width: 78%;
  margin: 0 0 3cqw;
  padding: 3.2cqw 3.7cqw;
  border-radius: 4cqw;
  font-size: 3.5cqw;
  line-height: 1.22;
}

.customer-bubble {
  border-bottom-left-radius: 1.2cqw;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .05);
}

.alice-bubble {
  align-self: flex-end;
  border-bottom-right-radius: 1.2cqw;
  background: var(--purple);
  color: var(--white);
}

.short-bubble {
  max-width: 38%;
}

.quick-book-card {
  display: grid;
  width: 90%;
  margin: 1cqw 0 3cqw auto;
  padding: 3.4cqw;
  grid-template-columns: 12cqw minmax(0, 1fr) 7cqw;
  gap: 3cqw;
  align-items: center;
  border: 1px solid rgba(123, 52, 206, .18);
  border-radius: 4cqw;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(49, 23, 82, .1);
}

.quick-book-date,
.retention-date {
  display: grid;
  width: 12cqw;
  height: 12cqw;
  place-items: center;
  border-radius: 3cqw;
  background: #eee7f8;
  color: var(--purple);
}

.quick-book-date b,
.retention-date b {
  align-self: end;
  font: 600 2.1cqw/1 var(--mono);
}

.quick-book-date strong,
.retention-date strong {
  align-self: start;
  font-size: 4.5cqw;
  line-height: 1;
}

.quick-book-card > span:nth-child(2) small,
.quick-book-card > span:nth-child(2) strong,
.quick-book-card > span:nth-child(2) em,
.retention-booking > span:nth-child(2) small,
.retention-booking > span:nth-child(2) strong,
.retention-booking > span:nth-child(2) em {
  display: block;
}

.quick-book-card small,
.retention-booking small {
  margin-bottom: 1cqw;
  color: var(--purple);
  font: 600 2.2cqw/1 var(--mono);
}

.quick-book-card > span:nth-child(2) strong,
.retention-booking > span:nth-child(2) strong {
  margin-bottom: 1cqw;
  font-size: 3.4cqw;
  line-height: 1;
}

.quick-book-card em,
.retention-booking em {
  color: #6f6874;
  font-size: 2.7cqw;
  font-style: normal;
  line-height: 1;
}

.quick-book-check {
  position: relative;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: #16c784;
  color: var(--white);
}

.quick-book-check::after {
  position: absolute;
  top: 1.3cqw;
  left: 2.4cqw;
  width: 1.9cqw;
  height: 3.2cqw;
  border-right: .8cqw solid currentColor;
  border-bottom: .8cqw solid currentColor;
  content: "";
  rotate: 45deg;
}

.chat-outcome,
.lead-outcome,
.followup-outcome,
.payment-outcome,
.retention-outcome {
  margin-top: auto;
}

.lead-search {
  display: grid;
  flex: none;
  padding: 2.6cqw 3.2cqw;
  grid-template-columns: 5cqw minmax(0, 1fr) auto;
  gap: 2.4cqw;
  align-items: center;
  border-radius: 3.5cqw;
  background: var(--white);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.lead-search-mark {
  position: relative;
  width: 5cqw;
  height: 5cqw;
  border: 1px solid rgba(123, 52, 206, .35);
  border-radius: 50%;
}

.lead-search-mark::after {
  position: absolute;
  right: -.6cqw;
  bottom: -.3cqw;
  width: 2.2cqw;
  height: .8cqw;
  border-radius: 999px;
  background: var(--purple);
  content: "";
  rotate: 45deg;
}

.lead-search strong,
.lead-search small {
  display: block;
}

.lead-search strong {
  margin-bottom: 1cqw;
  font-size: 3.4cqw;
  line-height: 1;
}

.lead-search small {
  color: #716a76;
  font-size: 2.5cqw;
  line-height: 1;
}

.lead-search > b {
  color: var(--purple);
  font: 600 2.3cqw/1 var(--mono);
}

.lead-map {
  position: relative;
  flex: 1 1 74cqw;
  min-height: 34cqw;
  margin-top: 3.4cqw;
  overflow: hidden;
  border-radius: 5cqw;
  background: #e9eee8;
  box-shadow: inset 0 0 0 1px rgba(49, 23, 82, .06);
}

.lead-map-image,
.lead-map-overlay {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Real street map, framed on a dense block so the pins land on streets. */
.lead-map-image {
  border: 0;
  pointer-events: none;
  object-fit: cover;
  object-position: 42% 46%;
  filter: saturate(.86) contrast(1.02);
}

.lead-map-overlay {
  z-index: 1;
}

.map-radius-ring {
  fill: rgba(123, 52, 206, .1);
  stroke: rgba(123, 52, 206, .55);
  stroke-dasharray: 5 5;
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
}

.lead-pin path {
  fill: var(--magenta);
  filter: drop-shadow(0 2px 3px rgba(49, 23, 82, .28));
}

.lead-pin circle {
  fill: var(--white);
}

.lead-found-chip {
  display: flex;
  position: absolute;
  bottom: 3cqw;
  left: 3cqw;
  z-index: 3;
  padding: 2.2cqw 3.4cqw;
  align-items: center;
  border-radius: 3.2cqw;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(49, 23, 82, .18);
}

.lead-found-chip b,
.lead-found-chip small {
  display: block;
}

.lead-found-chip b {
  color: var(--purple);
  font-size: 5cqw;
  line-height: .9;
  letter-spacing: -.04em;
}

.lead-found-chip small {
  margin-top: .6cqw;
  color: #686f6d;
  font: 600 2cqw/1 var(--mono);
}

.lead-radius-label {
  position: absolute;
  right: 3cqw;
  bottom: 3cqw;
  z-index: 3;
  padding: 1.5cqw 2cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--purple);
  font: 600 2cqw/1 var(--mono);
}

/* The leads sheet: what Alice actually saved. */
.lead-sheet {
  flex: none;
  margin-top: 3.2cqw;
  overflow: hidden;
  border: 1px solid rgba(123, 52, 206, .16);
  border-radius: 3.6cqw;
  background: var(--white);
  box-shadow: 0 7px 20px rgba(49, 23, 82, .07);
}

.lead-sheet-head,
.lead-sheet-row {
  display: grid;
  padding: 3.1cqw 3cqw;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .9fr);
  gap: 2cqw;
  align-items: center;
}

.lead-sheet-head {
  background: var(--purple);
  color: var(--white);
  font: 600 1.9cqw/1 var(--mono);
  letter-spacing: .06em;
}

.lead-sheet-row {
  border-top: 1px solid rgba(49, 23, 82, .08);
  font-size: 2.5cqw;
  line-height: 1;
}

.lead-sheet-row span:nth-child(2) {
  font-family: var(--mono);
  font-size: 2.3cqw;
}

.lead-sheet-row span:last-child {
  color: #6f6878;
  font-size: 2.3cqw;
}

.lead-sheet-head span,
.lead-sheet-row span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Linear slider: reads as "pick a number out of 376" far faster than a ring. */
.lead-dial-card {
  flex: none;
  margin: 3.4cqw 0 3.4cqw;
  padding: 0 1cqw;
}

.lead-dial-head small,
.lead-dial-head strong {
  display: block;
}

.lead-dial-head small {
  margin-bottom: 1.2cqw;
  color: var(--purple);
  font: 600 2cqw/1 var(--mono);
}

.lead-dial-head strong {
  font-size: 3.4cqw;
  line-height: 1;
}

.lead-dial-value-text {
  color: var(--magenta);
  font-size: 5.4cqw;
  letter-spacing: -.03em;
}

.lead-slider {
  position: relative;
  height: 5.4cqw;
  margin-top: 3.4cqw;
  display: flex;
  align-items: center;
}

.lead-slider-track {
  display: block;
  width: 100%;
  height: 2.2cqw;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(123, 52, 206, .2);
}

.lead-slider-fill {
  display: block;
  width: 13.3%;
  height: 100%;
  border-radius: 999px;
  background: var(--magenta);
}

.lead-slider-knob {
  position: absolute;
  top: 50%;
  left: 13.3%;
  width: 5.4cqw;
  height: 5.4cqw;
  border: .9cqw solid var(--magenta);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 .5cqw 1.6cqw rgba(49, 23, 82, .28);
  translate: -50% -50%;
}

.lead-slider-scale {
  display: flex;
  margin-top: 1.6cqw;
  justify-content: space-between;
  color: #6f6878;
  font: 600 1.9cqw/1 var(--mono);
}

.lead-dial-card p {
  margin: 2.4cqw 0 0;
  color: #5f5869;
  font-size: 2.4cqw;
  line-height: 1.25;
}

/* "Fitzroy" types itself in, then SEARCH pulses to show it fired. */
.lead-search-typed {
  display: block;
  font-size: 3.3cqw;
  line-height: 1.05;
}

.lead-search-typed i {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-right: .5cqw solid transparent;
  font-style: normal;
  vertical-align: bottom;
  white-space: nowrap;
}

.lead-search-go {
  position: relative;
  color: var(--purple);
  font: 600 2.3cqw/1 var(--mono);
}

/* Finger-tap indicator, modelled on the OS "show touches" overlay: a ring with a
   translucent fill that lands, presses, holds, then lifts off. A radar pulse read as
   a notification badge, not a tap. White per Jase's reference; the faint dark edge and
   shadow are what keep a white ring readable on this white card.
   ONE rule for both tap sites - do not fork a second ring. */
.lead-search-go::after,
.fu-tap {
  position: absolute;
  border: .85cqw solid rgba(255, 255, 255, .98);
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow:
    0 0 0 .34cqw rgba(49, 23, 82, .45),
    inset 0 0 0 .2cqw rgba(49, 23, 82, .22),
    0 .7cqw 2.2cqw rgba(49, 23, 82, .38);
  content: "";
  opacity: 0;
  pointer-events: none;
  translate: -50% -50%;
}

.lead-search-go::after {
  top: 50%;
  left: 50%;
  width: 13cqw;
  height: 13cqw;
}

.fu-tap {
  top: 54%;
  left: 50%;
  width: 17cqw;
  height: 17cqw;
}

/* The mobile demo phone is 16/25 - far shorter than the desktop 43/92 - so the
   sheet and dial give room back to the map instead of the map hitting its floor. */
.feature-mobile-phone-stage .lead-sheet-head,
.feature-mobile-phone-stage .lead-sheet-row {
  padding: 2.3cqw 3cqw;
}

.feature-mobile-phone-stage .lead-dial-card {
  margin: 3cqw 0;
}

.map-road {
  position: absolute;
  border: 1.3cqw solid rgba(255, 255, 255, .95);
  border-radius: 999px;
}

.road-one {
  top: 14cqw;
  left: -16cqw;
  width: 82cqw;
  height: 34cqw;
  rotate: -13deg;
}

.road-two {
  right: -18cqw;
  bottom: 24cqw;
  width: 72cqw;
  height: 28cqw;
  rotate: 18deg;
}

.road-three {
  top: 28cqw;
  right: 20cqw;
  width: 20cqw;
  height: 62cqw;
  rotate: 7deg;
}

.map-label {
  position: absolute;
  color: rgba(0, 0, 0, .42);
  font: 600 2.4cqw/1 var(--mono);
  letter-spacing: .08em;
}

.label-fitzroy {
  top: 17cqw;
  left: 8cqw;
}

.label-carlton {
  top: 49cqw;
  right: 7cqw;
}

.lead-radius {
  position: absolute;
  top: 13cqw;
  left: 50%;
  width: 54cqw;
  height: 54cqw;
  border: 1px solid rgba(123, 52, 206, .5);
  border-radius: 50%;
  background: rgba(123, 52, 206, .12);
  translate: -50% 0;
}

.lead-radius i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6cqw;
  height: 6cqw;
  border: 1.5cqw solid var(--white);
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  translate: -50% -50%;
}

.map-pin {
  display: grid;
  position: absolute;
  z-index: 2;
  width: 8cqw;
  height: 8cqw;
  place-items: center;
  border: 1cqw solid var(--white);
  border-radius: 50%;
  background: var(--magenta);
  color: var(--white);
  font: 600 2.5cqw/1 var(--mono);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}

.pin-one { top: 19cqw; right: 18cqw; }
.pin-two { top: 44cqw; left: 13cqw; }
.pin-three { top: 56cqw; right: 8cqw; }

.lead-result-card {
  display: grid;
  position: absolute;
  right: 3cqw;
  bottom: 3cqw;
  left: 3cqw;
  z-index: 3;
  padding: 3.3cqw;
  grid-template-columns: 10cqw minmax(0, 1fr) auto;
  gap: 2.5cqw;
  align-items: center;
  border-radius: 4cqw;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.lead-result-avatar {
  display: grid;
  width: 10cqw;
  height: 10cqw;
  place-items: center;
  border-radius: 3cqw;
  background: #dcd0f2;
  color: var(--purple);
  font: 700 3cqw/1 var(--mono);
}

.lead-result-card small,
.lead-result-card strong,
.lead-result-card em {
  display: block;
}

.lead-result-card small {
  margin-bottom: 1cqw;
  color: var(--purple);
  font: 600 1.85cqw/1 var(--mono);
}

.lead-result-card strong {
  margin-bottom: 1cqw;
  font-size: 3cqw;
  line-height: 1;
}

.lead-result-card em {
  color: #6d6770;
  font-size: 2.35cqw;
  font-style: normal;
  line-height: 1;
}

.lead-result-card > b {
  padding: 2.4cqw;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font: 600 2cqw/1 var(--mono);
}

/* ---- Follow Up: booking history -> tap -> booking detail -------------------
   Two full-screen panels on one track. The track slides -50% (one panel width)
   when the finger taps, exactly like pushing a detail screen in a real app. */
.followup-flow {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -1.2cqw;
  overflow: hidden;
}

.followup-track {
  display: flex;
  width: 200%;
  height: 100%;
}

/* This scene runs on BOTH the light demo screen and the black feature-stage screen,
   and most of the detail panel sits straight on that background with no card behind
   it. So every colour here is a token; the dark stage re-points the tokens once
   instead of needing a per-element override for anything added later. */
.fu-panel {
  display: flex;
  width: 50%;
  height: 100%;
  padding: 0 1.2cqw;
  flex-direction: column;
  --fu-ink: var(--black);
  --fu-ink-soft: #766f79;
  --fu-ink-faint: #8a8394;
  --fu-line: rgba(49, 23, 82, .12);
  --fu-brand-ink: var(--purple);
  --fu-ok-ink: #087d59;
  --fu-tag-bg: rgba(123, 52, 206, .12);
  color: var(--fu-ink);
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .fu-panel {
  --fu-ink: var(--white);
  --fu-ink-soft: rgba(255, 255, 255, .62);
  --fu-ink-faint: rgba(255, 255, 255, .5);
  --fu-line: rgba(255, 255, 255, .16);
  --fu-brand-ink: #c9a9f0;
  --fu-ok-ink: #5fd6a8;
  --fu-tag-bg: rgba(201, 169, 240, .18);
}

/* Cards are always a white surface, so they always carry the light tokens. */
.fu-card {
  --fu-ink: var(--black);
  --fu-ink-soft: #766f79;
  --fu-ink-faint: #8a8394;
  --fu-line: rgba(49, 23, 82, .12);
  --fu-brand-ink: var(--purple);
  --fu-ok-ink: #087d59;
  --fu-tag-bg: rgba(123, 52, 206, .12);
  color: var(--fu-ink);
}

/* Every block is flex:none so the map is the ONLY thing that gives way on a
   short phone. A shrinking row is how the leads sheet silently clipped. */
.fu-head,
.fu-group,
.fu-detail-head,
.fu-tabs,
.fu-detail-id,
.fu-client,
.fu-address,
.fu-job,
.fu-spec {
  flex: none;
}

.fu-head {
  display: grid;
  grid-template-columns: 9.5cqw minmax(0, 1fr) auto;
  gap: 2.6cqw;
  align-items: center;
}

.fu-head img {
  width: 9.5cqw;
  height: 9.5cqw;
  border-radius: 50%;
  object-fit: cover;
}

.fu-head strong {
  display: block;
  font-size: 3.6cqw;
  line-height: 1;
  letter-spacing: -.02em;
}

.fu-head small,
.fu-client small {
  display: block;
  margin-top: 1.1cqw;
  color: var(--fu-ink-faint);
  font: 500 2.2cqw/1 var(--mono);
}

.fu-head > b {
  width: 1.1cqw;
  height: 1.1cqw;
  margin-right: 1cqw;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 -3.2cqw, 0 3.2cqw;
  color: var(--fu-ink-faint);
}

.fu-group {
  margin-top: 4cqw;
}

/* The last group takes the leftover height so its date rail runs on down the
   screen instead of leaving a dead gap under the final card. */
.fu-list .fu-group:last-of-type {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.fu-list .fu-group:last-of-type .fu-row:last-child {
  flex: 1 1 auto;
}

.fu-card {
  align-self: start;
}

.fu-list .fu-group:last-of-type .fu-row:last-child .fu-date i {
  background: linear-gradient(var(--fu-accent-soft), rgba(255, 255, 255, 0));
}

.fu-group.fu-next {
  --fu-accent: var(--purple);
  --fu-accent-soft: rgba(123, 52, 206, .28);
  --fu-accent-ink: var(--purple);
}

.fu-group.fu-done {
  --fu-accent: #0a8b62;
  --fu-accent-soft: rgba(10, 139, 98, .28);
  --fu-accent-ink: #0a8b62;
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .fu-group.fu-next {
  --fu-accent-ink: #c9a9f0;
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .fu-group.fu-done {
  --fu-accent-ink: #5fd6a8;
}

.fu-group-head {
  display: flex;
  align-items: center;
  gap: 2cqw;
}

.fu-group-head i {
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background: var(--fu-accent);
}

.fu-group-head strong {
  font-size: 3cqw;
  line-height: 1;
  letter-spacing: -.01em;
}

.fu-group-head span {
  flex: 1;
  border-top: 1px dashed var(--fu-line);
}

.fu-group-head svg {
  width: 3.4cqw;
  fill: none;
  stroke: var(--fu-ink-faint);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Date rail on the left, card on the right - the schedule layout Jase picked. */
.fu-row {
  display: grid;
  margin-top: 2.6cqw;
  grid-template-columns: 10.5cqw minmax(0, 1fr);
  gap: 2.6cqw;
}

.fu-date {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.fu-date small {
  margin-bottom: 1.2cqw;
  color: var(--fu-accent-ink);
  font: 700 1.9cqw/1 var(--mono);
  letter-spacing: .08em;
}

.fu-date b {
  display: grid;
  width: 8.4cqw;
  height: 8.4cqw;
  place-items: center;
  border-radius: 50%;
  background: var(--fu-accent);
  color: var(--white);
  font: 700 3cqw/1 var(--mono);
}

.fu-date i {
  width: 1.5cqw;
  margin-top: 1.4cqw;
  flex: 1;
  border-radius: 999px;
  background: var(--fu-accent-soft);
}

.fu-card {
  position: relative;
  padding: 3cqw 3.2cqw;
  border-radius: 3.6cqw;
  background: var(--white);
  box-shadow: 0 5px 16px rgba(49, 23, 82, .07);
}

.fu-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqw;
}

.fu-card-top strong {
  font-size: 3cqw;
  line-height: 1;
  letter-spacing: -.01em;
}

.fu-ref {
  color: var(--fu-ink-faint);
  font: 600 2.1cqw/1 var(--mono);
}

.fu-title {
  display: flex;
  margin-top: 2.2cqw;
  align-items: center;
  gap: 2cqw;
}

.fu-title strong {
  font-size: 3.4cqw;
  line-height: 1;
  letter-spacing: -.02em;
}

.fu-tag {
  padding: 1.1cqw 1.8cqw;
  border-radius: 999px;
  background: var(--fu-tag-bg);
  color: var(--fu-brand-ink);
  font: 700 1.8cqw/1 var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
}

.fu-sub {
  margin: 2cqw 0 0;
  color: var(--fu-ink-soft);
  font-size: 2.45cqw;
  line-height: 1.2;
}

.fu-where {
  display: flex;
  margin: 2cqw 0 0;
  align-items: center;
  gap: 1.6cqw;
  color: var(--fu-ink-soft);
  font-size: 2.45cqw;
  line-height: 1;
}

.fu-where svg {
  width: 3cqw;
  height: 3cqw;
  flex: none;
  fill: var(--fu-ink-faint);
}

.fu-pay {
  display: flex;
  margin-top: 2.6cqw;
  padding: 2.3cqw 2.8cqw;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  border: 1px solid var(--fu-line);
  border-radius: 2.8cqw;
}

.fu-pay-total small {
  display: block;
  color: var(--fu-ink-faint);
  font: 500 2.1cqw/1 var(--mono);
}

.fu-pay-total b {
  display: block;
  margin-top: 1.1cqw;
  font-size: 3.2cqw;
  line-height: 1;
  letter-spacing: -.02em;
}

.fu-pay-state {
  padding: 1.6cqw 2.6cqw;
  border-radius: 999px;
  background: #dff7ed;
  color: #087d59;
  font: 700 2.1cqw/1 var(--mono);
  letter-spacing: .06em;
}

/* ---- Follow Up: the booking detail panel ---------------------------------- */
.fu-detail-head {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
}

.fu-back svg {
  display: block;
  width: 2.6cqw;
  fill: none;
  stroke: var(--fu-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fu-detail-head strong {
  font-size: 3.1cqw;
  line-height: 1;
  letter-spacing: -.01em;
}

/* Bill detail sits top-right with its unread dot, per Jase's reference. */
.fu-tabs {
  display: grid;
  margin: 3.2cqw -1.2cqw 0;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--fu-line);
}

.fu-tab {
  padding: 2.5cqw 1cqw;
  color: var(--fu-ink-faint);
  font-size: 2.7cqw;
  line-height: 1;
  text-align: center;
}

.fu-tab.is-active {
  box-shadow: inset 0 -.7cqw 0 var(--fu-brand-ink);
  color: var(--fu-brand-ink);
  font-weight: 600;
}

.fu-tab-dot {
  display: inline-block;
  width: 1.6cqw;
  height: 1.6cqw;
  margin-left: 1.2cqw;
  border-radius: 50%;
  background: var(--magenta);
  vertical-align: top;
}

.fu-detail-id {
  display: flex;
  margin-top: 3.2cqw;
  padding: 2.4cqw 2.8cqw;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  border: 1px solid var(--fu-line);
  border-radius: 2.6cqw;
}

.fu-detail-id .fu-ref {
  font-size: 2.4cqw;
}

.fu-status {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  color: var(--fu-ok-ink);
  font: 600 2.2cqw/1 var(--mono);
}

.fu-status i {
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: currentColor;
}

.fu-client {
  display: grid;
  margin-top: 3cqw;
  grid-template-columns: 9cqw minmax(0, 1fr) auto;
  gap: 2.6cqw;
  align-items: center;
}

.fu-client img {
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  object-fit: cover;
}

.fu-client strong {
  display: block;
  font-size: 3.2cqw;
  line-height: 1;
}

.fu-nav {
  display: grid;
  width: 7cqw;
  height: 7cqw;
  place-items: center;
  border: 1px solid var(--fu-brand-ink);
  border-radius: 2cqw;
}

.fu-nav svg {
  width: 3.4cqw;
  fill: var(--fu-brand-ink);
}

.fu-address {
  margin: 2.4cqw 0 0;
  color: var(--fu-ink-soft);
  font-size: 2.5cqw;
  line-height: 1.25;
}

/* Where the customer is - a short letterbox strip, matching the proportion in Jase's
   reference. It is a useful glance, not the point of the screen, so it takes a fixed
   ~10% of the phone rather than flexing and eating half the panel. */
.fu-map {
  position: relative;
  flex: 1 0 21cqw;
  max-height: 32cqw;
  margin-top: 2.6cqw;
  overflow: hidden;
  border-radius: 3.4cqw;
  background: #e9eee8;
  box-shadow: inset 0 0 0 1px rgba(49, 23, 82, .06);
}

.fu-map-image,
.fu-map-pin {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Framed so the pin lands in the unlabelled block between Carlton and Collingwood -
   that block IS Fitzroy, and the address line above says Fitzroy. A pin sitting on a
   different suburb's label is exactly the mismatch Jase caught last time. */
.fu-map-image {
  border: 0;
  pointer-events: none;
  object-fit: cover;
  object-position: 40% 52%;
  filter: saturate(.85) contrast(1.02);
}

.fu-map-pin {
  z-index: 1;
}

.fu-map-pin path {
  fill: var(--magenta);
  filter: drop-shadow(0 2px 4px rgba(49, 23, 82, .3));
}

.fu-map-pin circle {
  fill: var(--white);
}

.fu-pin-shadow {
  fill: rgba(49, 23, 82, .22);
}

.fu-job {
  margin-top: 3cqw;
  padding-left: 2.6cqw;
  border-left: .8cqw solid var(--fu-brand-ink);
}

.fu-job small {
  display: block;
  color: var(--fu-ink-faint);
  font: 600 1.9cqw/1 var(--mono);
  letter-spacing: .08em;
}

.fu-job span {
  display: flex;
  margin-top: 1.8cqw;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqw;
}

.fu-job strong {
  font-size: 3.4cqw;
  line-height: 1;
  letter-spacing: -.02em;
}

.fu-job-price {
  color: var(--fu-brand-ink);
  font: 700 2.3cqw/1 var(--mono);
  white-space: nowrap;
}

/* The demo phone is 2.14:1 on desktop but 1.56:1 on the phone, and cqw scales with
   WIDTH - so the taller phone has vertical room the shorter one does not. Rather than
   dump all of it above the pink bar, the map and this row list take a capped share of
   it and the rows breathe. Caps keep the map small, which is the whole point here. */
.fu-spec {
  display: flex;
  margin-top: 2.4cqw;
  flex: 1 0 auto;
  max-height: 46cqw;
  flex-direction: column;
  justify-content: space-between;
}

/* What the customer actually asked for, in her words - the note block from Jase's
   reference. It is also what fills the room the shrunken map gave back. */
.fu-note {
  display: flex;
  flex: none;
  margin: 2.6cqw 0 3cqw;
  padding: 2.6cqw 3cqw;
  align-items: center;
  gap: 2.2cqw;
  border-radius: 2.8cqw;
  background: var(--fu-tag-bg);
  color: var(--fu-ink-soft);
  font-size: 2.5cqw;
  line-height: 1.25;
}

.fu-note svg {
  width: 4cqw;
  height: 4cqw;
  flex: none;
  fill: none;
  stroke: var(--fu-brand-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* margin-top:auto parks the bar on the floor; the note's own bottom margin is what
   guarantees a gap even when there is no slack left to park in. Jase called out a
   jammed pink bar on the leads scene - it must not come back here. */
.fu-detail .followup-outcome {
  margin-top: auto;
}

/* Padding sets the FLOOR only - the short phone sits on it, while the taller phones
   spread these rows out via space-between. Keep it small enough that the shortest
   phone still fits all four rows. */
.fu-spec > div {
  display: flex;
  padding: 1.8cqw 0;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  border-top: 1px solid var(--fu-line);
}

.fu-spec > div:first-child {
  border-top: 0;
}

.fu-spec span {
  color: var(--fu-ink-soft);
  font-size: 2.5cqw;
  line-height: 1;
}

.fu-spec b {
  font-size: 2.6cqw;
  line-height: 1;
}

/* the pill keeps its own type after .fu-spec b */
.fu-spec b.fu-tag {
  font: 700 1.8cqw/1 var(--mono);
}

.review-stars {
  display: inline-flex;
  align-items: center;
  gap: .08em;
  color: #ffad00 !important;
  font-style: normal;
  line-height: 1;
}

.fu-google-review {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  color: #3c4043;
  white-space: nowrap;
}

.fu-card.fu-google-review-card {
  min-height: 32cqw;
  padding: 4.6cqw 3.8cqw 5cqw;
}

.fu-google-review-card .fu-title {
  margin-top: 3cqw;
}

.fu-google-review-card .fu-sub {
  margin-top: 4.2cqw;
}

.fu-google-review-card .fu-google-review {
  gap: 1.2cqw;
}

.fu-google-mark {
  width: 3cqw;
  height: 3cqw;
  flex: none;
}

.fu-google-review-card .fu-google-mark {
  width: 4.4cqw;
  height: 4.4cqw;
}

.fu-google-review > strong {
  font-size: 2.35cqw;
  font-weight: 650;
  line-height: 1;
}

.fu-google-review-card .fu-google-review > strong {
  font-size: 2.9cqw;
}

.review-stars span {
  display: inline-block;
  font-size: 2.25cqw;
  transform-origin: 50% 65%;
}

.fu-google-review-card .review-stars span {
  font-size: 4.5cqw;
}

/* Payments scene - the "paid" success moment (Jase round 18). Renders on BOTH
   the light demo phone (#f6f3fa) and the dark feature chapters, so every colour
   is tokenised. The tick is always green+white and the method logos always sit
   on white plates - both theme-independent on purpose (matches the real app). */
.scene-payments {
  --pay-ink: var(--black);
  --pay-ink-soft: #6b6470;
  --pay-surface: var(--white);
  --pay-surface-line: rgba(49, 23, 82, .10);
  --pay-shadow: 0 10px 30px rgba(49, 23, 82, .08);
  justify-content: flex-start;
  color: var(--pay-ink);
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .scene-payments {
  --pay-ink: var(--white);
  --pay-ink-soft: rgba(255, 255, 255, .62);
  --pay-surface: rgba(255, 255, 255, .06);
  --pay-surface-line: rgba(255, 255, 255, .14);
  --pay-shadow: none;
}

.pay-hero {
  display: flex;
  margin-top: 2cqw;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.pay-tick {
  display: block;
  width: 27cqw;
  height: 27cqw;
  margin-bottom: 3.4cqw;
  border-radius: 50%;
  box-shadow: 0 0 0 3cqw rgba(22, 199, 132, .12);
}

.pay-tick svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pay-tick-ring {
  fill: #16c784;
}

.pay-tick-mark {
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 0; /* default = fully drawn (fallback / reduced motion) */
}

.pay-hero > strong {
  font-size: 4.6cqw;
  line-height: 1;
}

.pay-amount {
  margin-top: 2.4cqw;
  color: var(--pay-ink);
  font-size: 12cqw;
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
}

.pay-amount sup {
  margin-right: .6cqw;
  font-size: 4.4cqw;
  font-weight: 700;
  vertical-align: top;
}

.pay-hero > small {
  margin-top: 2.3cqw;
  color: var(--pay-ink-soft);
  font: 600 2.7cqw/1 var(--mono);
  letter-spacing: .01em;
}

.pay-card {
  margin-top: 4.4cqw;
  padding: 1.2cqw 4cqw;
  border: 1px solid var(--pay-surface-line);
  border-radius: 4cqw;
  background: var(--pay-surface);
  box-shadow: var(--pay-shadow);
}

.pay-row {
  display: flex;
  padding: 2.7cqw 0;
  justify-content: space-between;
  align-items: center;
  gap: 3cqw;
}

.pay-row + .pay-row {
  border-top: 1px solid var(--pay-surface-line);
}

.pay-row small {
  color: var(--pay-ink-soft);
  font-size: 2.9cqw;
}

.pay-row strong {
  color: var(--pay-ink);
  font-size: 2.9cqw;
  font-weight: 700;
  text-align: right;
}

.pay-logos {
  display: flex;
  margin-top: 4cqw;
  justify-content: center;
  align-items: center;
  gap: 2.2cqw;
}

.pay-logo {
  display: inline-flex;
  height: 8.6cqw;
  padding: 0 2.2cqw;
  justify-content: center;
  align-items: center;
  gap: .8cqw;
  border: 1px solid rgba(20, 20, 30, .10);
  border-radius: 2cqw;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 20, 40, .1);
}

.pay-logo svg {
  display: block;
  width: auto;
  height: 4.4cqw;
}

.pay-logo b {
  color: #1a1a22;
  font-size: 3cqw;
  font-weight: 700;
  letter-spacing: -.01em;
}

.pay-logo-apple svg {
  height: 4.8cqw;
  fill: #000;
}

.pay-logo-visa b {
  color: #1434cb;
  font: italic 800 3.8cqw/1 Arial, sans-serif;
  letter-spacing: .02em;
}

.pay-logo-mc svg {
  height: 5.4cqw;
}

.retention-segment {
  display: flex;
  padding: 4cqw;
  align-items: center;
  justify-content: space-between;
  border-radius: 4cqw;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(49, 23, 82, .07);
}

.retention-segment small,
.retention-segment strong {
  display: block;
}

.retention-segment small {
  margin-bottom: 1.3cqw;
  color: var(--purple);
  font: 600 2.2cqw/1 var(--mono);
}

.retention-segment strong {
  font-size: 3.4cqw;
  line-height: 1.05;
}

.retention-avatars {
  display: flex;
  padding-left: 5cqw;
}

.retention-avatars img,
.retention-avatars i {
  display: grid;
  width: 9cqw;
  height: 9cqw;
  margin-left: -3cqw;
  place-items: center;
  border: 1cqw solid var(--white);
  border-radius: 50%;
  object-fit: cover;
}

.retention-avatars i {
  background: var(--black);
  color: var(--white);
  font: 500 2.2cqw/1 var(--mono);
}

.retention-campaign {
  margin-top: 5cqw;
  padding: 5cqw;
  border-radius: 5cqw;
  background: var(--purple);
  color: var(--white);
}

.retention-campaign > small {
  display: block;
  margin-bottom: 3cqw;
  font: 600 2.3cqw/1 var(--mono);
  opacity: .68;
}

.retention-campaign > strong {
  display: block;
  margin-bottom: 4cqw;
  font-size: 5.1cqw;
  line-height: .98;
  letter-spacing: -.04em;
}

.retention-campaign p {
  margin: 0 0 4cqw;
  padding: 3.5cqw;
  border-radius: 3.5cqw;
  background: rgba(255, 255, 255, .13);
  font-size: 3.15cqw;
  line-height: 1.25;
}

.campaign-send-line {
  display: flex;
  align-items: center;
  gap: 2cqw;
  font: 500 2.1cqw/1 var(--mono);
}

.campaign-send-line i {
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  background: var(--magenta);
}

.retention-reply {
  display: flex;
  width: 74%;
  margin: 4cqw 0 0 auto;
  padding: 3cqw;
  align-items: center;
  gap: 2.7cqw;
  border-radius: 4cqw 4cqw 1cqw 4cqw;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.retention-reply img {
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  object-fit: cover;
}

.retention-reply small,
.retention-reply strong {
  display: block;
}

.retention-reply small {
  margin-bottom: 1cqw;
  color: var(--purple);
  font: 600 2cqw/1 var(--mono);
}

.retention-reply strong {
  font-size: 3.2cqw;
}

.retention-booking {
  display: grid;
  margin-top: 4cqw;
  padding: 3.2cqw;
  grid-template-columns: 12cqw 1fr;
  gap: 3cqw;
  align-items: center;
  border: 1px solid rgba(123, 52, 206, .18);
  border-radius: 4cqw;
  background: var(--white);
}

/* AI Search: one honest readiness screen. No ranking, traffic or publishing claims. */
.scene-ai-search {
  color: var(--white);
}

.ai-search-card {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 4cqw;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4cqw;
  background: rgba(255, 255, 255, .065);
}

.ai-search-heading {
  display: grid;
  grid-template-columns: 11cqw minmax(0, 1fr);
  align-items: center;
  gap: 3cqw;
}

.ai-search-heading-icon {
  display: grid;
  width: 11cqw;
  height: 11cqw;
  place-items: center;
  border-radius: 3cqw;
  background: var(--yellow);
  color: var(--black);
}

.ai-search-heading-icon svg {
  width: 6.6cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.ai-search-heading small,
.ai-search-heading strong {
  display: block;
}

.ai-search-heading small {
  margin-bottom: 1.4cqw;
  color: rgba(255, 255, 255, .58);
  font: 600 2.1cqw/1 var(--mono);
  letter-spacing: .1em;
}

.ai-search-heading strong {
  font-size: 3.8cqw;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.ai-search-cloud {
  position: relative;
  flex: 1;
  min-height: 60cqw;
  max-height: 96cqw;
  margin-top: 4cqw;
  overflow: hidden;
  border-radius: 3.4cqw;
  background:
    radial-gradient(circle at 50% 50%, rgba(123, 52, 206, .14), transparent 35%),
    #fbfafc;
}

.ai-search-cloud::before,
.ai-search-cloud::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(123, 52, 206, .22);
  border-radius: 50%;
  translate: -50% -50%;
}

.ai-search-cloud::before {
  width: 70%;
  aspect-ratio: 1;
}

.ai-search-cloud::after {
  width: 48%;
  aspect-ratio: 1;
}

.ai-search-orbit,
.ai-search-core {
  display: grid;
  position: absolute;
  z-index: 2;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1.4cqw 4cqw rgba(49, 23, 82, .14);
}

.ai-search-orbit {
  width: 13cqw;
  height: 13cqw;
  padding: 2.5cqw;
  border: 1px solid rgba(49, 23, 82, .08);
}

.ai-search-orbit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.orbit-chatgpt { top: 43%; left: 7%; }
.orbit-gemini { top: 8%; left: 29%; }
.orbit-claude { top: 23%; right: 8%; }
.orbit-perplexity { right: 19%; bottom: 7%; }
.orbit-copilot { bottom: 8%; left: 27%; }

.ai-search-core {
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 24cqw;
  height: 24cqw;
  color: var(--white);
  background: var(--purple);
  translate: -50% -50%;
  box-shadow: 0 0 0 3cqw rgba(123, 52, 206, .12), 0 2cqw 7cqw rgba(49, 23, 82, .2);
}

.ai-search-core svg {
  width: 13cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.ai-search-fields {
  display: grid;
  margin-top: 3cqw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8cqw;
}

.ai-search-fields span {
  display: flex;
  min-width: 0;
  padding: 2.4cqw 2.6cqw;
  align-items: center;
  justify-content: space-between;
  gap: 1.5cqw;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 2.5cqw;
  background: rgba(255, 255, 255, .07);
}

.ai-search-fields small {
  overflow: hidden;
  color: rgba(255, 255, 255, .62);
  font-size: 2.15cqw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai-search-fields strong {
  color: var(--green);
  font: 700 2cqw/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ai-search-outcome {
  margin-top: 3cqw;
}

.demo-stage.is-running .scene-ai-search.is-active .ai-search-heading,
.demo-stage.is-running .scene-ai-search.is-active .ai-search-cloud,
.demo-stage.is-running .scene-ai-search.is-active .ai-search-fields span,
.demo-stage.is-running .scene-ai-search.is-active .ai-search-outcome,
.demo-stage.is-running .scene-ai-search.is-active .ai-search-orbit,
.demo-stage.is-running .scene-ai-search.is-active .ai-search-core {
  animation: demo-scene-reveal .52s cubic-bezier(.2, .8, .2, 1) both;
}

.demo-stage.is-running .scene-ai-search.is-active .ai-search-heading { animation-delay: .05s; }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-cloud { animation-delay: .15s; }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-orbit { animation-delay: calc(.28s + (var(--i) * .08s)); }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-core { animation-delay: .72s; }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-fields span:nth-child(1) { animation-delay: .9s; }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-fields span:nth-child(2) { animation-delay: 1.02s; }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-fields span:nth-child(3) { animation-delay: 1.14s; }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-fields span:nth-child(4) { animation-delay: 1.26s; }
.demo-stage.is-running .scene-ai-search.is-active .ai-search-outcome { animation-delay: 1.42s; }

@media (prefers-reduced-motion: reduce) {
  .scene-ai-search * {
    animation: none !important;
  }
}

@media (max-width: 760px),
       (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  .feature-mobile-phone-stage .scene-ai-search * {
    animation: none !important;
  }
}

.demo-stage.is-running .demo-live-label i {
  animation: demo-live-pulse 1.15s ease-out infinite;
}

.demo-stage.is-running .call-waveform i {
  animation: demo-wave .8s ease-in-out infinite alternate;
}

.demo-stage.is-running .call-waveform i:nth-child(2n) {
  animation-delay: -.22s;
}

.demo-stage.is-running .call-waveform i:nth-child(3n) {
  animation-delay: -.42s;
}

.demo-stage.is-running .call-turn,
.demo-stage.is-running .call-playback {
  animation: demo-scene-reveal .52s cubic-bezier(.2, .8, .2, 1) both;
}

.demo-stage.is-running .call-playback {
  animation-delay: .15s;
}

.scene-calls:not(.is-audio-mode) .call-turn:nth-child(n + 3) {
  display: none;
}

.demo-stage.is-running .scene-calls.is-active:not(.is-audio-mode) .call-turn {
  transform-origin: bottom;
}

.demo-stage.is-running .scene-calls.is-active:not(.is-audio-mode) .call-turn:first-child {
  animation: demo-scene-reveal .58s cubic-bezier(.16, 1, .3, 1) .3s both;
}

.demo-stage.is-running .scene-calls.is-active:not(.is-audio-mode) .call-turn:nth-child(2) {
  animation: demo-scene-reveal .58s cubic-bezier(.16, 1, .3, 1) 2.2s both;
}

.demo-stage.is-running .scene-calls.is-active:not(.is-audio-mode) .call-turn p > span {
  animation: none;
}

.demo-stage.is-running .scene-calls.is-active:not(.is-audio-mode) .call-turn:first-child p > span {
  animation: demo-copy-reveal .62s ease .48s both;
}

.demo-stage.is-running .scene-calls.is-active:not(.is-audio-mode) .call-turn:nth-child(2) p > span {
  animation: demo-copy-reveal .62s ease 2.38s both;
}

.demo-stage.is-running .scene-calls.is-active:not(.is-audio-mode) .call-dialogue-track {
  animation: none;
}

.scene-calls.is-audio-mode .call-turn {
  display: none;
  animation: none !important;
  opacity: 0;
  transform: translateY(7px) scale(.985);
}

.scene-calls.is-audio-mode .call-turn.is-audio-visible {
  display: flex;
  animation: call-turn-in .38s cubic-bezier(.16, 1, .3, 1) both !important;
  opacity: 1;
  transform: none;
}

.scene-calls.is-audio-mode .call-turn.is-audio-overflowed {
  display: none;
}

.scene-calls.is-audio-mode .call-turn.is-past-turn {
  animation: none !important;
  opacity: .72;
  transform: none;
}

.scene-calls.is-audio-mode .call-turn.is-active-turn {
  opacity: 1;
}

.scene-calls.is-audio-mode .call-word {
  opacity: 0;
  transform: translateY(.22em);
  transition: opacity .28s ease-out, transform .34s cubic-bezier(.16, 1, .3, 1);
}

.scene-calls.is-audio-mode .call-word.is-word-visible {
  opacity: 1;
  transform: none;
}

.scene-calls.is-audio-mode .call-turn p > span,
.scene-calls.is-audio-mode .call-dialogue-track {
  animation: none !important;
}

@keyframes call-turn-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.demo-stage.is-running .demo-tabs button.is-active .demo-tab-status i {
  animation: demo-tab-progress 11s linear both;
}

.demo-stage.is-running .scene-chat.is-active .chat-bubble,
.demo-stage.is-running .scene-chat.is-active .quick-book-card,
.demo-stage.is-running .scene-chat.is-active .chat-outcome,
.demo-stage.is-running .scene-leads.is-active .lead-search,
.demo-stage.is-running .scene-leads.is-active .lead-map,
.demo-stage.is-running .scene-leads.is-active .lead-found-chip,
.demo-stage.is-running .scene-leads.is-active .lead-sheet,
.demo-stage.is-running .scene-leads.is-active .lead-sheet-row,
.demo-stage.is-running .scene-leads.is-active .lead-dial-card,
.demo-stage.is-running .scene-leads.is-active .lead-outcome,
.demo-stage.is-running .scene-followup.is-active .fu-head,
.demo-stage.is-running .scene-followup.is-active .fu-group-head,
.demo-stage.is-running .scene-followup.is-active .fu-row,
.demo-stage.is-running .scene-followup.is-active .followup-outcome,
.demo-stage.is-running .scene-payments.is-active .pay-hero > strong,
.demo-stage.is-running .scene-payments.is-active .pay-amount,
.demo-stage.is-running .scene-payments.is-active .pay-hero > small,
.demo-stage.is-running .scene-payments.is-active .pay-row,
.demo-stage.is-running .scene-payments.is-active .pay-logos,
.demo-stage.is-running .scene-payments.is-active .payment-outcome,
.demo-stage.is-running .scene-retention.is-active .retention-campaign,
.demo-stage.is-running .scene-retention.is-active .retention-reply,
.demo-stage.is-running .scene-retention.is-active .retention-booking,
.demo-stage.is-running .scene-retention.is-active .retention-outcome {
  animation: demo-scene-reveal .5s cubic-bezier(.2, .8, .2, 1) both;
}

.demo-stage.is-running .scene-chat.is-active .chat-thread > .customer-bubble:first-child { animation-delay: .35s; }
.demo-stage.is-running .scene-chat.is-active .alice-bubble { animation-delay: 1.15s; }
.demo-stage.is-running .scene-chat.is-active .quick-book-card { animation-delay: 2s; }
.demo-stage.is-running .scene-chat.is-active .short-bubble { animation-delay: 2.8s; }
.demo-stage.is-running .scene-chat.is-active .chat-outcome { animation-delay: 3.55s; }

.demo-stage.is-running .scene-leads.is-active .lead-search { animation-delay: .2s; }
.demo-stage.is-running .scene-leads.is-active .lead-map { animation-delay: .55s; }
.demo-stage.is-running .scene-leads.is-active .map-radius-ring {
  animation: demo-map-radius 1.1s cubic-bezier(.2, .8, .2, 1) 2s both;
}
.demo-stage.is-running .scene-leads.is-active .lead-pin {
  animation: demo-pin-drop .5s cubic-bezier(.2, 1.5, .4, 1) both;
  animation-delay: calc(2.15s + (var(--i) * .07s));
}
.demo-stage.is-running .scene-leads.is-active .lead-found-chip { animation-delay: 3.5s; }
.demo-stage.is-running .scene-leads.is-active .lead-sheet-row {
  animation-delay: calc(4s + (var(--i) * .2s));
}
.demo-stage.is-running .scene-leads.is-active .lead-sheet { animation-delay: 3.9s; }
.demo-stage.is-running .scene-leads.is-active .lead-dial-card { animation-delay: 4.6s; }
/* Type the suburb -> tap SEARCH -> pins land -> count -> saved rows -> pick how many. */
.demo-stage.is-running .scene-leads.is-active .lead-search-typed i {
  animation: demo-type-caret .62s steps(1) 3 both, demo-type-in .95s steps(7) .35s both;
}
.demo-stage.is-running .scene-leads.is-active .lead-search-go::after {
  animation: demo-finger-tap .95s cubic-bezier(.3, .7, .3, 1) 1.45s both;
}
.demo-stage.is-running .scene-leads.is-active .lead-slider-fill {
  animation: demo-slider-fill 1.1s cubic-bezier(.3, .9, .3, 1) 4.95s both;
}
.demo-stage.is-running .scene-leads.is-active .lead-slider-knob {
  animation: demo-slider-knob 1.1s cubic-bezier(.3, .9, .3, 1) 4.95s both;
}
.demo-stage.is-running .scene-leads.is-active .lead-outcome { animation-delay: 6.3s; }

/* History builds -> finger taps the next-up card -> the panel slides left and the
   booking detail is already there, the way pushing a screen actually behaves. */
.demo-stage.is-running .scene-followup.is-active .fu-head { animation-delay: .25s; }
.demo-stage.is-running .scene-followup.is-active .fu-next .fu-group-head { animation-delay: .55s; }
.demo-stage.is-running .scene-followup.is-active .fu-next .fu-row { animation-delay: .75s; }
.demo-stage.is-running .scene-followup.is-active .fu-done .fu-group-head { animation-delay: 1.35s; }
.demo-stage.is-running .scene-followup.is-active .fu-done .fu-row:nth-child(2) { animation-delay: 1.55s; }
.demo-stage.is-running .scene-followup.is-active .fu-done .fu-row:nth-child(3) { animation-delay: 2.05s; }
.demo-stage.is-running .scene-followup.is-active .review-stars span {
  animation: fu-review-star-pop .34s cubic-bezier(.2, 1.55, .4, 1) both;
  animation-delay: calc(2.32s + (var(--star-index) * .13s));
}
.demo-stage.is-running .scene-followup.is-active .fu-tap {
  animation: demo-finger-tap .95s cubic-bezier(.3, .7, .3, 1) 4s both;
}
.demo-stage.is-running .scene-followup.is-active .fu-card-tapped {
  animation: fu-card-press .95s ease 4s both;
}
.demo-stage.is-running .scene-followup.is-active .followup-track {
  animation: fu-slide .95s cubic-bezier(.65, 0, .35, 1) 5s both;
}
.demo-stage.is-running .scene-followup.is-active .fu-map-pin g {
  animation: demo-pin-drop .55s cubic-bezier(.2, 1.5, .4, 1) 6.3s both;
}
.demo-stage.is-running .scene-followup.is-active .followup-outcome { animation-delay: 7.3s; }

@keyframes fu-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes fu-card-press {
  0%, 100% { transform: none; }
  42%, 62% { transform: scale(.972); }
}

@keyframes fu-review-star-pop {
  from {
    opacity: 0;
    transform: translateY(.24em) scale(.25) rotate(-16deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-stars span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.demo-stage.is-running .scene-payments.is-active .pay-tick {
  animation: pay-tick-pop .5s cubic-bezier(.2, 1.4, .4, 1) .35s both;
}
.demo-stage.is-running .scene-payments.is-active .pay-tick-mark {
  animation: pay-tick-draw .4s ease .75s both;
}
.demo-stage.is-running .scene-payments.is-active .pay-hero > strong { animation-delay: .6s; }
.demo-stage.is-running .scene-payments.is-active .pay-amount { animation-delay: .8s; }
.demo-stage.is-running .scene-payments.is-active .pay-hero > small { animation-delay: 1s; }
.demo-stage.is-running .scene-payments.is-active .pay-row:nth-child(1) { animation-delay: 1.2s; }
.demo-stage.is-running .scene-payments.is-active .pay-row:nth-child(2) { animation-delay: 1.4s; }
.demo-stage.is-running .scene-payments.is-active .pay-row:nth-child(3) { animation-delay: 1.6s; }
.demo-stage.is-running .scene-payments.is-active .pay-logos { animation-delay: 2s; }
.demo-stage.is-running .scene-payments.is-active .payment-outcome { animation-delay: 2.85s; }

.demo-stage.is-running .scene-retention.is-active .retention-campaign { animation-delay: .35s; }
.demo-stage.is-running .scene-retention.is-active .campaign-send-line i {
  animation: demo-live-pulse 1.15s ease-out 1.1s 2;
}
.demo-stage.is-running .scene-retention.is-active .retention-reply { animation-delay: 1.55s; }
.demo-stage.is-running .scene-retention.is-active .retention-booking { animation-delay: 2.45s; }
.demo-stage.is-running .scene-retention.is-active .retention-outcome { animation-delay: 3.35s; }

@keyframes demo-tab-progress {
  to { transform: scaleX(1); }
}

@keyframes demo-map-radius {
  from {
    opacity: 0;
    scale: .18;
  }
}

@keyframes demo-call-scroll {
  0%, 28% { transform: translateY(0); }
  100% { transform: translateY(-49cqw); }
}

@keyframes demo-pin-pop {
  from {
    opacity: 0;
    scale: .25;
    translate: 0 8px;
  }
}

/* Map pins fall onto the street map one after another. */
@keyframes demo-pin-drop {
  from {
    opacity: 0;
    translate: 0 -14px;
  }
}

/* 7 steps = the 7 letters of "Fitzroy". */
@keyframes demo-type-in {
  from {
    width: 0;
  }
  to {
    width: 7ch;
  }
}

@keyframes demo-type-caret {
  0%, 49% {
    border-right-color: var(--magenta);
  }
  50%, 100% {
    border-right-color: transparent;
  }
}

/* Lands (scales down onto the target), presses, holds, then lifts off. */
@keyframes demo-finger-tap {
  0% {
    opacity: 0;
    scale: 1.5;
  }
  24% {
    opacity: 1;
    scale: 1;
  }
  40%, 66% {
    opacity: 1;
    scale: .82;
  }
  100% {
    opacity: 0;
    scale: 1.28;
  }
}

/* 50 of 376 = 13.3% of the track. */
@keyframes demo-slider-fill {
  from {
    width: 0;
  }
  to {
    width: 13.3%;
  }
}

@keyframes demo-slider-knob {
  from {
    left: 0;
  }
  to {
    left: 13.3%;
  }
}

@keyframes pay-tick-pop {
  from {
    opacity: 0;
    transform: scale(.3);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pay-tick-draw {
  from {
    stroke-dashoffset: 34;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes demo-scene-reveal {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: .98;
  }
}

@keyframes demo-copy-reveal {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

@keyframes demo-wave {
  to {
    scale: 1 .35;
    opacity: .45;
  }
}

@keyframes demo-live-pulse {
  70% {
    box-shadow: 0 0 0 2.8cqw rgba(0, 166, 63, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 166, 63, 0);
  }
}

.demo-caption {
  align-self: start;
  margin: 12px 0 0;
  padding-left: 22px;
  border-left: 1px solid var(--white);
  color: var(--white);
  font-size: 20px;
  line-height: 1.3;
}

.steps {
  min-height: 1650px;
  padding-top: 170px;
  padding-bottom: 180px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1280px, 100%);
  margin: 110px auto 26px;
  gap: 64px;
  text-align: left;
}

.steps-grid > article {
  position: relative;
}

.steps-grid > article:not(:last-child)::after {
  position: absolute;
  z-index: 5;
  top: 178px;
  right: -54px;
  width: 44px;
  height: 34px;
  background: var(--black);
  clip-path: polygon(0 32%, 61% 32%, 61% 0, 100% 50%, 61% 100%, 61% 68%, 0 68%);
  content: "";
  pointer-events: none;
}

.step-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 390px;
  margin-bottom: 24px;
  overflow: hidden;
}

.step-find-flow {
  display: grid;
  width: min(300px, calc(100% - 72px));
  min-width: 0;
  min-height: 190px;
}

.step-find-scene {
  display: grid;
  min-width: 0;
  grid-area: 1 / 1;
  place-items: center;
}

.step-find-finder-scene {
  opacity: 1;
}

.step-find-training-scene {
  opacity: 0;
  pointer-events: none;
}

.step-find-finder,
.step-find-training {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 34px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.step-find-finder {
  display: grid;
  min-height: 190px;
  padding: 12px;
  grid-template-rows: 74px 80px;
  gap: 10px;
}

.step-find-search {
  display: grid;
  min-width: 0;
  padding: 0 12px 0 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.step-find-search-icon {
  width: 22px;
  fill: none;
  stroke: #777;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.step-find-business-name {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  color: #777;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.step-find-business-name > span {
  display: block;
  clip-path: inset(0 100% 0 0);
}

.step-find-business-name::after {
  position: absolute;
  top: -.06em;
  bottom: -.06em;
  left: 0;
  width: 2px;
  background: var(--black);
  content: "";
  opacity: 0;
}

.step-find-button {
  display: flex;
  width: 100%;
  min-height: 80px;
  padding: 0 26px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--alice-main-btn-gradient);
  color: var(--white);
  font: 500 14px/1 var(--mono);
  letter-spacing: .02em;
}

.step-find-button-copy {
  white-space: nowrap;
}

.step-find-button-arrow {
  font: 300 22px/1 Arial, sans-serif;
}

.step-find-training {
  display: grid;
  min-width: 0;
  min-height: 152px;
  padding: 22px;
  grid-template-rows: 12px 8px 28px;
  align-content: center;
  gap: 11px;
  opacity: 1;
}

.step-find-training-label {
  font: 700 11px/1 var(--mono);
  letter-spacing: .12em;
}

.step-find-progress {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
}

.step-find-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transform: scaleX(1);
  transform-origin: left center;
}

.step-find-statuses {
  display: grid;
  min-width: 0;
  align-items: center;
}

.step-find-status {
  display: flex;
  min-width: 0;
  grid-area: 1 / 1;
  gap: 9px;
  align-items: center;
  opacity: 0;
}

.step-find-status i {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font: 700 13px/1 Arial, sans-serif;
  font-style: normal;
}

.step-find-status b {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.step-find-status-four {
  opacity: 1;
}

.steps-grid.is-visible .step-find-business-name > span {
  animation: step-find-type-business 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-business-name::after {
  animation: step-find-type-cursor 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-finder-scene {
  animation: step-find-finder-scene 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-button {
  animation: step-find-button-click 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-training-scene {
  animation: step-find-training-scene 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-progress-fill {
  animation: step-find-progress-load 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-status-one {
  animation: step-find-status-one 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-status-two {
  animation: step-find-status-two 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-status-three {
  animation: step-find-status-three 8.8s linear infinite;
}

.steps-grid.is-visible .step-find-status-four {
  animation: step-find-status-four 8.8s linear infinite;
}

.checker {
  background:
    linear-gradient(45deg, var(--green-soft) 25%, transparent 25%, transparent 75%, var(--green-soft) 75%),
    linear-gradient(45deg, var(--green-soft) 25%, var(--off-white) 25%, var(--off-white) 75%, var(--green-soft) 75%);
  background-position: 0 0, 62px 62px;
  background-size: 124px 124px;
}

.connect-mark {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--white);
  font-size: 130px;
  font-style: italic;
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.12em;
}

.alice-ring {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 52px;
  width: min(330px, calc(100% - 36px));
  min-height: 116px;
  padding: 18px;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 34px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 56px rgba(61, 35, 75, .2);
  opacity: 1;
  translate: none;
  scale: 1;
}

.alice-ring img {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  border: 3px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.alice-ring-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  line-height: 1;
}

.alice-ring-copy small {
  margin-bottom: 7px;
  color: #7a6b80;
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
}

.alice-ring-copy strong {
  margin-bottom: 7px;
  font-size: 24px;
  font-weight: 800;
}

.alice-ring-copy span {
  color: #6f6275;
  font-size: 14px;
}

.call-icon {
  position: relative;
  z-index: 3;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(255, 0, 220, .28);
}

.call-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ring-wave {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 18px;
  width: 52px;
  height: 52px;
  border: 2px solid var(--magenta);
  border-radius: 50%;
  opacity: 0;
  translate: 0 -50%;
}

.steps-grid.is-visible .call-icon {
  animation: alice-phone-ring 7.2s ease-in-out .7s infinite;
}

.steps-grid.is-visible .ring-wave-one {
  animation: alice-ring-wave 7.2s ease-out 1.25s infinite;
}

.steps-grid.is-visible .ring-wave-two {
  animation: alice-ring-wave 7.2s ease-out 1.7s infinite;
}

.message-visual {
  display: grid;
  padding: 24px;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: center;
  justify-items: center;
  border: 1px solid #eee;
  background: var(--white);
}

.forwarding-control,
.alice-greeting {
  box-sizing: border-box;
  width: min(330px, 100%);
}

.forwarding-control {
  display: flex;
  min-height: 60px;
  padding: 11px 14px 11px 18px;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
}

.forwarding-label {
  color: var(--black);
  font: 700 11px/1 var(--mono);
  letter-spacing: .08em;
}

.forwarding-switch {
  --forwarding-knob-travel: 48px;
  position: relative;
  display: flex;
  width: 84px;
  height: 36px;
  flex: 0 0 84px;
  align-items: center;
  border-radius: 999px;
  background: #d7d7d7;
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.forwarding-switch b {
  margin-left: 14px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
  opacity: 0;
}

.forwarding-switch i {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
  transform: translateX(0);
}

.alice-greeting {
  position: relative;
  display: flex;
  min-height: 84px;
  padding: 18px 20px;
  align-items: center;
  border-radius: 22px;
  background: var(--purple);
  color: var(--white);
  box-shadow: 0 16px 34px rgba(111, 48, 207, .22);
  opacity: 0;
}

.alice-greeting::after {
  position: absolute;
  right: 24px;
  bottom: -10px;
  width: 18px;
  height: 12px;
  background: var(--purple);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  content: "";
}

.alice-greeting p {
  margin: 0;
  font-size: 17px;
  line-height: 1.24;
}

.alice-greeting strong {
  color: inherit;
  font-weight: 800;
}

.steps-grid.is-visible .forwarding-switch {
  animation: step-forwarding-switch 4.8s ease-out both;
}

.steps-grid.is-visible .forwarding-switch b {
  animation: step-forwarding-state 4.8s ease-out both;
}

.steps-grid.is-visible .forwarding-switch i {
  animation: step-forwarding-knob 4.8s cubic-bezier(.2, .8, .2, 1) both;
}

.steps-grid.is-visible .alice-greeting {
  animation: step-forwarding-greeting 4.8s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes step-find-type-business {
  0% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(18, end);
  }
  22%,
  96% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes step-find-type-cursor {
  0% {
    left: 0;
    opacity: 1;
    animation-timing-function: steps(18, end);
  }
  22% {
    left: 100%;
    opacity: 1;
  }
  24%,
  96% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 0;
  }
}

@keyframes step-find-finder-scene {
  0%,
  34% {
    opacity: 1;
    transform: translateY(0);
  }
  38%,
  96% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes step-find-button-click {
  0%,
  28%,
  34%,
  100% {
    transform: scale(1);
    box-shadow: none;
  }
  31% {
    transform: scale(.94);
    box-shadow: 0 0 0 8px rgba(91, 95, 245, .2);
  }
}

@keyframes step-find-training-scene {
  0%,
  37% {
    opacity: 0;
    transform: translateY(6px);
  }
  41%,
  96% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes step-find-progress-load {
  0%,
  42% {
    transform: scaleX(0);
  }
  92%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes step-find-status-one {
  0%,
  42% {
    opacity: 0;
    transform: translateY(4px);
  }
  44%,
  51% {
    opacity: 1;
    transform: translateY(0);
  }
  54%,
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes step-find-status-two {
  0%,
  53% {
    opacity: 0;
    transform: translateY(4px);
  }
  55%,
  62% {
    opacity: 1;
    transform: translateY(0);
  }
  65%,
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes step-find-status-three {
  0%,
  64% {
    opacity: 0;
    transform: translateY(4px);
  }
  66%,
  73% {
    opacity: 1;
    transform: translateY(0);
  }
  76%,
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes step-find-status-four {
  0%,
  75% {
    opacity: 0;
    transform: translateY(4px);
  }
  78%,
  96% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps-grid.is-visible .step-find-business-name > span,
  .steps-grid.is-visible .step-find-business-name::after,
  .steps-grid.is-visible .step-find-finder-scene,
  .steps-grid.is-visible .step-find-button,
  .steps-grid.is-visible .step-find-training-scene,
  .steps-grid.is-visible .step-find-progress-fill,
  .steps-grid.is-visible .step-find-status {
    animation: none;
  }

  .step-find-business-name > span {
    clip-path: none;
  }

  .step-find-business-name::after {
    display: none;
  }

  .step-find-finder-scene {
    opacity: 0;
  }

  .step-find-training-scene {
    opacity: 1;
    transform: none;
  }

  .step-find-progress-fill {
    transform: scaleX(1);
  }

  .step-find-status {
    opacity: 0;
    transform: none;
  }

  .step-find-status-four {
    opacity: 1;
  }

  .steps-grid.is-visible .call-icon,
  .steps-grid.is-visible .ring-wave,
  .steps-grid.is-visible .forwarding-switch,
  .steps-grid.is-visible .forwarding-switch b,
  .steps-grid.is-visible .forwarding-switch i,
  .steps-grid.is-visible .alice-greeting {
    animation: none;
  }

  .ring-wave {
    opacity: 0;
  }

  .alice-ring,
  .alice-greeting {
    opacity: 1;
    transform: none;
  }

  .forwarding-switch {
    background: var(--green);
  }

  .forwarding-switch b {
    opacity: 1;
  }

  .forwarding-switch i {
    transform: translateX(var(--forwarding-knob-travel));
  }

  .call-icon {
    rotate: 0deg;
  }
}

@keyframes alice-call-card {
  0%,
  8% {
    opacity: 0;
    translate: 0 26px;
    scale: .96;
  }
  18%,
  76% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  88%,
  100% {
    opacity: 0;
    translate: 0 -18px;
    scale: .98;
  }
}

@keyframes alice-phone-ring {
  0%,
  20%,
  38%,
  100% {
    rotate: 0deg;
  }
  23%,
  29%,
  35% {
    rotate: -10deg;
  }
  26%,
  32% {
    rotate: 10deg;
  }
}

@keyframes alice-ring-wave {
  0%,
  18% {
    opacity: 0;
    scale: .8;
  }
  24% {
    opacity: .65;
  }
  40%,
  100% {
    opacity: 0;
    scale: 2;
  }
}

@keyframes step-forwarding-switch {
  0%,
  14% {
    background: #d7d7d7;
  }
  24%,
  100% {
    background: var(--green);
  }
}

@keyframes step-forwarding-knob {
  0%,
  14% {
    transform: translateX(0);
  }
  24%,
  100% {
    transform: translateX(var(--forwarding-knob-travel));
  }
}

@keyframes step-forwarding-state {
  0%,
  22% {
    opacity: 0;
  }
  28%,
  100% {
    opacity: 1;
  }
}

@keyframes step-forwarding-greeting {
  0%,
  30% {
    opacity: 0;
    transform: translateY(6px) scale(.98);
  }
  40%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.steps-grid h3 {
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.steps-grid article > p {
  font-size: 20px;
}

.steps-outcome-arrow {
  width: 42px;
  height: 56px;
  margin: 0 auto 30px;
  background: var(--black);
  clip-path: polygon(32% 0, 68% 0, 68% 61%, 100% 61%, 50% 100%, 0 61%, 32% 61%);
}

.steps-outcome {
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto 70px;
  padding: 68px 56px 72px;
  overflow: hidden;
  border: 2px solid var(--black);
  border-radius: 0;
  background: linear-gradient(135deg, var(--yellow) 0 72%, var(--white) 72%);
  text-align: center;
}

.steps-outcome-kicker {
  display: inline-grid;
  min-height: 38px;
  padding: 8px 18px;
  place-items: center;
  border: 2px solid var(--magenta);
  border-radius: 999px;
  background: var(--white);
  font: 600 13px/1 var(--mono);
  letter-spacing: .08em;
}

.steps-outcome h3 {
  margin: 22px 0 0;
  font-family: var(--headline);
  font-size: clamp(58px, 6vw, 86px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
}

.steps-outcome-rule {
  display: block;
  width: 72px;
  height: 6px;
  margin: 26px auto;
  background: var(--magenta);
}

.steps-outcome > p {
  max-width: 650px;
  margin: 0 auto;
  font-size: 23px;
  line-height: 1.3;
}

.win-job-card {
  display: grid;
  width: min(560px, 100%);
  min-height: 112px;
  margin: 42px auto 10px;
  padding: 20px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  box-shadow: 12px 12px 0 var(--black);
  text-align: left;
}

.win-job-check {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  background: var(--magenta);
  color: var(--white);
}

.win-job-check svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Two calm attention beats: SAME DAY lands first, then the confirmed-job tick
   redraws. JavaScript runs the loop only while this outcome is in view. */
.steps-outcome.is-visible .steps-outcome-kicker {
  transform-origin: center;
  animation: steps-outcome-kicker-attention 5.4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.steps-outcome.is-visible .win-job-check {
  transform-origin: center;
  animation: win-job-check-attention 5.4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.steps-outcome.is-visible .win-job-check path {
  stroke-dasharray: 28;
  stroke-dashoffset: 0;
  animation: win-job-tick-attention 5.4s ease-in-out infinite;
}

@keyframes steps-outcome-kicker-attention {
  0%,
  2%,
  15%,
  100% {
    transform: scale(1) rotate(0);
  }
  7% {
    transform: scale(1.14) rotate(-1deg);
  }
  11% {
    transform: scale(.98) rotate(.5deg);
  }
}

@keyframes win-job-check-attention {
  0%,
  21%,
  36%,
  100% {
    transform: scale(1) rotate(0);
  }
  27% {
    transform: scale(1.13) rotate(2deg);
  }
  31% {
    transform: scale(.97) rotate(-1deg);
  }
}

@keyframes win-job-tick-attention {
  0%,
  21% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  21.01%,
  23% {
    stroke-dashoffset: 28;
    opacity: 0;
  }
  24% {
    stroke-dashoffset: 28;
    opacity: 1;
  }
  36%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps-outcome.is-visible .steps-outcome-kicker,
  .steps-outcome.is-visible .win-job-check,
  .steps-outcome.is-visible .win-job-check path {
    animation: none;
  }
}

.win-job-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.win-job-copy small {
  font: 600 10px/1 var(--mono);
  letter-spacing: .09em;
}

.win-job-copy strong {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.win-job-copy em {
  font-size: 14px;
  font-style: normal;
}

.win-job-card > b {
  display: inline-grid;
  min-height: 34px;
  padding: 8px 12px;
  place-items: center;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font: 600 9px/1 var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
}

.steps-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.faq {
  min-height: 1180px;
  padding: 160px var(--page-pad);
  background: var(--black);
  color: var(--white);
}

.faq-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  text-align: center;
}

.faq h2 {
  max-width: 1120px;
  font-size: clamp(72px, 7vw, 112px);
  line-height: .84;
}

.faq-list {
  margin-top: 110px;
  border-top: 1px solid var(--line-light);
  text-align: left;
}

.faq-list article {
  border-bottom: 1px solid var(--line-light);
}

.faq-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 31px 0;
  border: 0;
  background: transparent;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}

.faq-button span {
  font-size: 23px;
  font-weight: 600;
}

.faq-button i {
  color: var(--magenta);
  font: 400 28px/1 var(--mono);
  font-style: normal;
}

.faq-answer {
  max-width: 880px;
  padding: 0 0 34px;
  color: rgba(255, 255, 255, .68);
  font-size: 18px;
  line-height: 1.5;
}

.site-footer {
  min-height: 1220px;
  padding: 110px var(--page-pad) 80px;
  background: var(--black);
  color: var(--white);
}

.footer-links {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 56px;
  max-width: 1320px;
  margin: 0 auto 110px;
}

.footer-brand p {
  max-width: 250px;
  margin-top: 24px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}

.footer-brand-mark {
  font-size: 90px;
}

.footer-links h3 {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .4);
  font: 500 12px/1 var(--mono);
  text-transform: uppercase;
}

.footer-links > div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 15px;
}

.footer-wordmark {
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: 90px;
  overflow: hidden;
  font-size: clamp(52px, 8.8vw, 148px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.08em;
  white-space: nowrap;
}

.footer-wordmark > * {
  flex: 0 0 auto;
}

/* The switch sits in the BLACK above the magenta band, not inside it — it reads as
   "switch it on" and then the band says what you get. It hangs off .footer-links
   rather than a wrapper element because this footer is on all 7 pages, so markup
   would mean overlaying 7 HTML files instead of one stylesheet. .footer-links is a
   4-column grid, hence the span-and-centre.
   ⛔ Its STATIC state is ON — green, knob right — because that is the finished state;
   the keyframes only supply the OFF it starts from. So under reduced motion, or if the
   animation is ever dropped, it still reads as switched on rather than stuck off.

   ⛔ 4s is a SHARED CLOCK, not just this switch's speed. The word below only glitches
   while the switch is ON, and the only way to gate one CSS animation on another is to
   put both on the same period and let the keyframes agree on the windows:
     0-5% off · 5-15% slide on · 15-55% ON · 55-65% slide off · 65-100% off
   so it flips every 2s and the glitch lives inside 15-55%. Change this duration and you
   must change the glitch duration with it, or the word will glitch while it reads off. */
.footer-links {
  --tgl-w: clamp(124px, 14vw, 208px);
  --tgl-h: clamp(66px, 7.4vw, 110px);
  --tgl-pad: calc(var(--tgl-h) * .115);
  --tgl-knob: calc(var(--tgl-h) - var(--tgl-pad) * 2);
  --tgl-on: calc(var(--tgl-w) - var(--tgl-knob) - var(--tgl-pad));
}

.footer-links::after {
  content: "";
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: clamp(30px, 4vw, 62px);
  /* .footer-links carries a 110px bottom margin; pull most of it back so the switch
     reads as paired with the band underneath rather than floating in the black. */
  margin-bottom: calc(clamp(28px, 5vw, 70px) * -1);
  width: var(--tgl-w);
  height: var(--tgl-h);
  border-radius: 999px;
  background-color: var(--green);
  background-image: radial-gradient(circle closest-side, #fff 97%, transparent 100%);
  background-repeat: no-repeat;
  background-position: var(--tgl-on) center;
  background-size: var(--tgl-knob) var(--tgl-knob);
  box-shadow: inset 0 calc(var(--tgl-h) * .055) 0 rgba(0, 0, 0, .16);
  animation: footer-toggle-on 4s cubic-bezier(.62, .04, .3, 1) infinite;
}

.footer-wordmark strong {
  padding: .2em .12em .28em;
  background: var(--purple);
  color: var(--white);
}

/* 21st.dev "Animated Glitch Text", translated to vanilla CSS. Theirs is React +
   framer-motion + Tailwind and stacks three RGB copies of the text, each on its own
   clock (.15s / .13s / .11s) so the three beat against each other and the jitter never
   looks looped. There is no framework here, so the three layers become three animations
   — RGB split, jitter, flicker. steps(1, end) rather than a smooth ease: a glitch snaps.

   ⛔ All three run at 4s, the SWITCH's period, because the word must only glitch while
   the switch reads ON. CSS cannot gate one animation on another, so instead each one
   spends 0-15% and 55-100% pinned to a neutral value (zero-offset shadows, identity
   transform, opacity 1) and only chatters inside the ON window. That is also why they
   are no longer `alternate` — the A/B flip is written into the stops. The three flip
   counts (10 / 16 / 14) are deliberately coprime-ish so they stay out of phase with each
   other exactly as the three original durations did, and the first and last two flips of
   each are scaled down so the glitch arrives and leaves with the knob instead of popping.
   These keyframes are generated, not hand-tuned — re-generate rather than nudge a stop.

   ⛔ On the inner span, NOT on `strong`. `strong` carries the purple block, and a
   transform moves an element together with its background and any pseudo-element — so
   animating `strong` shook the purple along with the word. The span is the text's own
   box: it glitches, the block behind it stays put. inline-block is required, an inline
   element ignores transform entirely. */
.footer-wordmark strong > span {
  display: inline-block;
  animation:
    footer-glitch-rgb 4s steps(1, end) infinite,
    footer-glitch-shift 4s steps(1, end) infinite,
    footer-glitch-flicker 4s steps(1, end) infinite;
}

/* 1.6s on, 1.6s off, with a 0.4s eased slide either way — the knob and the colour move
   together so the flip reads as one gesture rather than a jump. */
@keyframes footer-toggle-on {
  0%, 5% {
    /* ⛔ A LIGHT track, not a dark one. The footer is black, so the old rgba(0,0,0,.55)
       was invisible against it and the off state read as a white knob floating in
       space. That went unnoticed while off was a brief blip in a 9s cycle; at 4s it is
       40% of the loop and always on screen. */
    background-color: rgba(255, 255, 255, .2);
    background-position: var(--tgl-pad) center;
  }

  15%, 55% {
    background-color: var(--green);
    background-position: var(--tgl-on) center;
  }

  65%, 100% {
    /* ⛔ A LIGHT track, not a dark one. The footer is black, so the old rgba(0,0,0,.55)
       was invisible against it and the off state read as a white knob floating in
       space. That went unnoticed while off was a brief blip in a 9s cycle; at 4s it is
       40% of the loop and always on screen. */
    background-color: rgba(255, 255, 255, .2);
    background-position: var(--tgl-pad) center;
  }
}

/* Offsets in em, not px: this word runs 56px on a phone and 148px on a desktop, and a
   fixed 3px split that reads well small all but disappears large. */
@keyframes footer-glitch-rgb {
  0% { text-shadow: 0 0 #ff0000, 0 0 #00ff00, 0 0 #0000ff; }
  15% { text-shadow: -.0167em 0 #ff0000, .0167em 0 #00ff00, .0053em .0053em #0000ff; }
  19% { text-shadow: .0333em .0107em #ff0000, -.0333em -.0107em #00ff00, -.0213em 0 #0000ff; }
  23% { text-shadow: -.05em 0 #ff0000, .05em 0 #00ff00, .016em .016em #0000ff; }
  27% { text-shadow: .05em .016em #ff0000, -.05em -.016em #00ff00, -.032em 0 #0000ff; }
  31% { text-shadow: -.05em 0 #ff0000, .05em 0 #00ff00, .016em .016em #0000ff; }
  35% { text-shadow: .05em .016em #ff0000, -.05em -.016em #00ff00, -.032em 0 #0000ff; }
  39% { text-shadow: -.05em 0 #ff0000, .05em 0 #00ff00, .016em .016em #0000ff; }
  43% { text-shadow: .05em .016em #ff0000, -.05em -.016em #00ff00, -.032em 0 #0000ff; }
  47% { text-shadow: -.0333em 0 #ff0000, .0333em 0 #00ff00, .0107em .0107em #0000ff; }
  51% { text-shadow: .0167em .0053em #ff0000, -.0167em -.0053em #00ff00, -.0107em 0 #0000ff; }
  55%, 100% { text-shadow: 0 0 #ff0000, 0 0 #00ff00, 0 0 #0000ff; }
}

@keyframes footer-glitch-shift {
  0% { transform: translate3d(0, 0, 0) skewX(0deg); }
  15% { transform: translate3d(-.01em, .0053em, 0) skewX(-.4deg); }
  17.5% { transform: translate3d(.02em, -.0107em, 0) skewX(.8deg); }
  20% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  22.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  25% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  27.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  30% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  32.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  35% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  37.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  40% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  42.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  45% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  47.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  50% { transform: translate3d(-.02em, .0107em, 0) skewX(-.8deg); }
  52.5% { transform: translate3d(.01em, -.0053em, 0) skewX(.4deg); }
  55%, 100% { transform: translate3d(0, 0, 0) skewX(0deg); }
}

@keyframes footer-glitch-flicker {
  0% { opacity: 1; }
  15% { opacity: 1; }
  17.857% { opacity: .96; }
  20.714% { opacity: 1; }
  23.571% { opacity: .94; }
  26.429% { opacity: 1; }
  29.286% { opacity: .94; }
  32.143% { opacity: 1; }
  35% { opacity: .94; }
  37.857% { opacity: 1; }
  40.714% { opacity: .94; }
  43.571% { opacity: 1; }
  46.429% { opacity: .94; }
  49.286% { opacity: 1; }
  52.143% { opacity: .98; }
  55%, 100% { opacity: 1; }
}

/* Animation off = the finished state: switch on and green, word clean on purple. */
@media (prefers-reduced-motion: reduce) {
  .footer-links::after,
  .footer-wordmark strong > span {
    animation: none;
  }
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.footer-bottom small {
  align-self: flex-end;
  color: rgba(255, 255, 255, .42);
  font: 500 11px/1 var(--mono);
}

.mega-pill {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 168px;
  border-radius: 999px;
  /* Deliberately NOT the pastel --yellow: Jase wants the original ManyChat bright
     yellow on this one closing button. */
  background: var(--yellow-bright);
  color: var(--black);
  font: 500 15px/1 var(--mono);
  text-transform: uppercase;
  transition: translate .2s ease;
}

@media (max-width: 1100px) {
  .nav-shell {
    grid-template-columns: 100px 1fr 230px;
  }

  .desktop-nav {
    gap: 22px;
  }

  .hero-bubbles {
    right: 5%;
  }

  .demo-stage {
    grid-template-columns: 320px 1fr;
    padding-top: 32px;
  }

  .demo-caption {
    grid-column: 1 / -1;
    max-width: 620px;
    justify-self: center;
  }

  .free-panel {
    padding-top: 96px;
  }

  .channel-card {
    min-height: 220px;
    padding: 24px;
  }

  .channel-tab-heading {
    gap: 8px;
    font-size: 22px;
  }

  .channel-tab-copy {
    font-size: 16px;
  }

  .channel-stage {
    padding: 0;
  }

  .channel-screen {
    grid-template-columns: .78fr 1fr;
    gap: 32px;
  }

  .channel-screen-calendar {
    grid-template-columns: 1fr;
  }

  .channel-screen-calendar .channel-screen-copy {
    max-width: 720px;
    padding: 0;
  }

  .call-phone,
  .care-phone {
    width: min(300px, 38vw);
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 62px;
  }

  .site-header {
    padding: 10px 12px 0;
  }

  .business-finder input {
    font-size: 19px;
  }

  .business-finder button {
    min-width: 250px;
    padding-right: 34px;
    padding-left: 34px;
  }

  .nav-shell {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--header-height);
    padding: 0 14px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .demo-stage {
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
    min-height: 0;
    margin: 0 16px 110px;
    padding: 18px;
    gap: 18px;
  }

  .demo-panel {
    min-height: 740px;
    padding: 28px 16px 20px;
  }

  .demo-panel-heading {
    margin: 0 6px 22px;
    text-align: left;
  }

  .demo-tabs {
    display: block;
    border-top: 1px solid var(--line-dark);
  }

  .demo-tabs button {
    min-height: 68px;
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
  }

  .demo-panel > .pill {
    margin-top: 0;
  }

  .alice-demo-phone {
    width: min(380px, 100%);
  }

  .demo-caption {
    grid-column: 1 / -1;
    width: min(560px, 100%);
    margin: 0 auto;
    align-self: auto;
  }

  .site-header.is-past-hero-cta .nav-shell {
    min-height: 64px;
    border-color: rgba(255, 255, 255, .65);
    background: linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 222, 246, .82), rgba(255, 224, 190, .8));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .09);
    color: var(--black);
    backdrop-filter: blur(18px) saturate(1.22);
  }

  .site-header.menu-active .nav-shell {
    border-color: rgba(255, 255, 255, .65);
    background: linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 222, 246, .82), rgba(255, 224, 190, .8));
    color: var(--black);
    backdrop-filter: blur(18px) saturate(1.22);
  }

  .brand-mark {
    width: 40px;
    height: 38px;
    font-size: 45px;
  }

  .brand-dot {
    width: 11px;
    height: 11px;
    margin-left: -2px;
    translate: 0 10px;
  }

  .desktop-nav,
  .nav-actions {
    display: none;
  }

  .header-actions {
    margin-left: auto;
    margin-right: 14px;
  }

  .header-login {
    display: none;
  }

  .header-cta {
    position: static;
    min-width: 150px;
    min-height: 48px;
    font-size: 11px;
  }

  .menu-button {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 11px 8px;
    border: 0;
    place-content: center;
    gap: 5px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .mobile-menu {
    display: grid;
    margin: 8px 0 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 24px;
    gap: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    color: var(--black);
    pointer-events: auto;
    backdrop-filter: blur(18px);
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu a {
    display: flex;
    min-height: 48px;
    padding: 0 14px;
    align-items: center;
    border-radius: 15px;
    font: 500 12px/1 var(--mono);
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .mobile-menu a[aria-current="page"] {
    background: var(--yellow);
  }

  .mobile-menu .mobile-menu-login {
    justify-content: center;
    background: var(--black);
    color: var(--white);
  }

  .hero {
    min-height: max(700px, 100svh);
  }

  .hero-copy {
    width: min(820px, 90vw);
    padding-top: 128px;
  }

  .hero h1 {
    font-size: clamp(17px, 2.4vw, 22px);
  }

  .hero-bubbles {
    right: 5%;
    bottom: 30px;
    width: 250px;
  }

  .feature-story {
    height: 470vh;
  }

  .feature-sticky {
    grid-template-columns: .95fr 1.05fr;
  }

  .feature-copy {
    padding-right: 3vw;
    padding-left: 3vw;
  }

  .feature-slide h2 {
    font-size: 54px;
  }

  .media-caption {
    width: 84%;
  }

  .comparison-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .before-after,
  .steps {
    min-height: auto;
  }

  .comparison-card {
    min-height: 920px;
  }

  .steps-grid {
    max-width: 620px;
    gap: 70px;
  }

  .steps-grid > article:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -56px;
    width: 36px;
    height: 44px;
    clip-path: polygon(32% 0, 68% 0, 68% 61%, 100% 61%, 50% 100%, 0 61%, 32% 61%);
    translate: 50% 0;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --page-pad: 18px;
  }

  .site-header {
    padding: 10px 12px 0;
  }

  .nav-shell,
  .site-header.is-past-hero-cta .nav-shell {
    min-height: 58px;
    padding: 0 12px 0 14px;
    border-radius: 19px;
  }

  .nav-shell {
    border-width: 0;
  }

  .site-header.is-past-hero-cta .nav-shell {
    border-width: 1px;
  }

  .header-actions {
    margin-right: 4px;
  }

  .header-cta {
    min-width: 142px;
    font-size: 10px;
  }

  .menu-button {
    width: 44px;
    height: 44px;
  }

  .mobile-menu {
    margin: 6px 0 0;
    border-width: 1px;
    border-radius: 19px;
  }

  body {
    font-size: 15px;
  }

  .hero {
    min-height: max(640px, 100svh);
  }

  .hero-photo {
    object-position: 58% center;
  }

  .hero-scrim {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .22) 64%),
      rgba(0, 0, 0, .46);
  }

  .hero-copy {
    width: 100%;
    padding: 100px 22px 200px;
  }

  .hero h1 {
    max-width: 360px;
    margin-bottom: 18px;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: .86;
  }

  .finder-kicker {
    margin-bottom: 11px;
    font-size: 10px;
  }

  .hero-lede {
    max-width: 340px;
    margin-bottom: 22px;
    font-size: 17px;
  }

  .business-finder {
    width: 100%;
  }

  .business-finder-shell {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 0;
    padding: 9px;
    border-radius: 34px;
  }

  .business-finder-icon {
    width: 20px;
    margin-left: 8px;
  }

  .business-finder input {
    padding: 16px 8px;
    font-size: 17px;
  }

  .business-finder button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    margin-top: 2px;
    padding: 0 24px;
    justify-self: stretch;
  }

  .business-finder-note,
  .business-finder-status {
    font-size: 12px;
  }

  .business-finder-note {
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
  }

  .hero-bubbles {
    right: 18px;
    bottom: 22px;
    width: min(215px, calc(100vw - 36px));
  }

  .bubble {
    --bubble-pad: 8px;
    padding: var(--bubble-pad) 11px;
    border-radius: 14px 14px 4px 14px;
    font-size: 11px;
  }

  .customer-message {
    max-width: 165px;
    border-radius: 14px 14px 14px 4px;
  }

  .alice-message {
    max-width: 190px;
  }

  .booking-card {
    min-width: 180px;
    border-radius: 14px;
  }

  .booking-card strong {
    font-size: 13px;
  }

  .booking-card span {
    font-size: 10px;
  }

  .hero-partners {
    right: 18px;
    bottom: 20px;
    left: 18px;
    gap: 10px;
    font-size: 7px;
  }

  .au-made-badge {
    gap: 8px;
  }

  .au-made-badge img {
    width: 32px;
  }

  .au-made-badge b {
    font-size: 8px;
  }

  .marquee-track {
    min-height: 120px;
  }

  .proof-marquee {
    display: block;
  }

  .proof-static {
    min-height: 136px;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .proof-stars {
    font-size: 18px;
    letter-spacing: .1em;
  }

  .proof-people img {
    width: 44px;
    height: 44px;
  }

  .marquee-track article {
    width: 390px;
    padding: 14px 26px;
  }

  .section-intro,
  .before-after,
  .steps {
    padding: 100px 18px;
  }

  .section-intro {
    min-height: 520px;
  }

  .section-sticker {
    width: 116px;
    height: 108px;
    margin-bottom: 24px;
  }

  .before-after > .section-sticker {
    width: 104px;
    height: 98px;
    margin-bottom: 20px;
  }

  .section-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 28px;
    font-size: 27px;
  }

  .section-intro h2,
  .before-after > h2,
  .steps > h2,
  .faq h2 {
    font-size: 52px;
    line-height: .88;
  }

  .section-intro > p,
  .before-after > p,
  .steps > p {
    font-size: 18px;
  }

  .feature-story,
  .social-story {
    height: auto;
  }

  .feature-sticky,
  .social-sticky {
    position: relative;
    height: auto;
    min-height: 0;
  }

  .feature-sticky {
    display: block;
    padding: 0 0 24px;
    overflow: visible;
  }

  .feature-copy {
    display: block;
    padding: 0;
  }

  .feature-progress,
  .feature-cta {
    display: none;
  }

  /* Dead rule from the abandoned pre-mobile-list layout. It must NOT set
     `position: sticky` any more - the live rule further down does not reset
     position, so this one would quietly float the button again. */
  .feature-mobile-cta {
    display: grid;
    width: calc(100% - 36px);
    min-height: 68px;
    margin: 0 18px 24px;
    place-items: center;
    border-radius: 999px;
    font-size: 13px;
  }

  .feature-slide,
  .feature-slide.is-active {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: max(760px, 100svh);
    margin: 0;
    padding: 92px 18px 124px;
    opacity: 1;
    text-align: center;
    translate: none;
    pointer-events: auto;
  }

  .feature-slide + .feature-slide {
    border-top: 1px solid rgba(0, 0, 0, .1);
  }

  .feature-slide h2 {
    margin-bottom: 20px;
    font-size: clamp(44px, 12.6vw, 54px);
    line-height: .86;
  }

  .feature-slide p {
    max-width: 340px;
    font-size: 18px;
  }

  .feature-media {
    display: none;
  }

  .mobile-feature-media {
    position: relative;
    display: block;
    width: min(300px, 82vw);
    margin: 42px auto 0;
  }

  .mobile-media-frame {
    width: 100%;
    aspect-ratio: 1200 / 2128;
    overflow: hidden;
    border-radius: 42px;
    background: var(--black);
    box-shadow: 0 24px 62px rgba(0, 0, 0, .18);
  }

  .mobile-media-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-media-caption {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--magenta);
    color: var(--white);
    font: 500 11px/1.2 var(--mono);
    text-align: left;
    text-transform: uppercase;
  }

  .social-story {
    height: 270svh;
  }

  .social-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .social-photo {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    object-position: 52% center;
    scale: calc(1 + (var(--social-progress) * .07));
  }

  .giant-type {
    z-index: 3;
    top: 50%;
    left: 50%;
    width: max-content;
    font-size: clamp(150px, 43vw, 178px);
    letter-spacing: -.09em;
    opacity: clamp(0, calc((1 - var(--social-progress)) * 18), 1);
    translate: -50% -50%;
    scale: calc(.44 + (var(--social-progress) * .62));
    will-change: opacity, scale;
  }

  .giant-type-long {
    display: none;
  }

  .giant-type-phone {
    display: block;
  }

  .free-panel {
    padding: 96px 18px 0;
  }

  .social-content h2 {
    margin-bottom: 14px;
    font-size: 30px;
  }

  .free-reason {
    max-width: 340px;
    margin-bottom: 28px;
    font-size: 16.5px;
    line-height: 1.45;
  }

  /* Phone keeps the same displayed path proportions as desktop. Stretching this
     to 1200/500 changed the flag angles and made the same animation look unrelated. */
  .free-marquee {
    margin-bottom: 34px;
    aspect-ratio: 1200 / 300;
  }

  .free-flag {
    width: 86px;
    padding: 5px;
    font-size: 10.5px;
  }

  /* The two sets already stack (base is a column); size the phones for the phone view. */
  .free-showcase {
    width: 100%;
    gap: 58px;
  }

  .free-set { padding-bottom: 9%; }
  /* Still height-driven; the phones are ~85px wide here, so 6.43% = ~5.5px needed.
     The iPad keeps the same 2.3%-of-width curve it has on desktop. */
  .free-phone { height: 62%; border-radius: 7px; }
  .free-ipad { border-radius: 8px; }
  .free-phone-a { right: 2%; }
  .free-phone-b { right: 28.5%; }

  /* Jase r21: the circle was missing at the end of the green page on mobile. */
  .social-orb {
    width: min(320px, 74vw);
    margin: 44px auto -14%;
  }

  .channel-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .channel-card {
    min-height: 220px;
    padding: 26px;
  }

  .channel-card:hover {
    translate: none;
  }

  .channel-tab-heading {
    margin-bottom: 18px;
    flex-direction: row;
    gap: 10px;
    font-size: 28px;
    line-height: 1;
  }

  .channel-icon {
    width: 24px;
    height: 24px;
  }

  .channel-card p {
    max-width: 310px;
    font-size: 17px;
  }

  .channel-dialog {
    inset: var(--alice-viewport-top, 0px) 0 auto;
    width: 100%;
    height: var(--alice-viewport-height, 100vh);
    max-height: none;
    margin: 0;
    overflow: visible;
    translate: none;
  }

  .channel-dialog-close {
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    font-size: 29px;
  }

  .channel-dialog .channel-stage {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .channel-screen,
  .channel-screen-calendar {
    display: flex;
    width: min(330px, calc(100% - 28px));
    min-height: 0;
    flex-direction: column;
    gap: 14px;
  }

  .channel-screen-calendar {
    width: min(350px, calc(100% - 28px));
  }

  .channel-screen-copy,
  .channel-screen-calendar .channel-screen-copy {
    order: 2;
    max-width: 100%;
    padding: 0 8px;
    text-align: center;
  }

  .screen-kicker {
    margin-bottom: 14px;
  }

  .channel-screen-copy h3 {
    max-width: 310px;
    margin: 0 auto;
    font-size: 23px;
    line-height: 1;
  }

  .channel-screen-copy p {
    font-size: 17px;
  }

  .screen-tags {
    justify-content: center;
    margin-top: 24px;
  }

  .call-phone,
  .care-phone {
    order: 1;
    width: min(270px, 72vw);
  }

  .diagram-phone {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 44px;
    box-shadow:
      inset 0 0 0 6px #13151b,
      0 24px 62px rgba(0, 0, 0, .46);
  }

  .calendar-tablet {
    order: 1;
    width: min(350px, 92vw);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    box-shadow:
      inset 0 0 0 5px #151820,
      0 24px 62px rgba(0, 0, 0, .46);
  }

  .calendar-screen-crop {
    border-radius: 20px;
  }

  .phone-status {
    top: 9px;
    right: 14px;
    left: 14px;
    font-size: 9px;
  }

  .dynamic-island {
    top: 7px;
    width: 68px;
    height: 20px;
  }

  .call-name {
    top: 50px;
  }

  .call-name strong {
    font-size: 25px;
  }

  .call-name span {
    margin-top: 4px;
    font-size: 11px;
  }

  .call-actions {
    right: 25px;
    bottom: 28px;
    left: 25px;
  }

  .call-action {
    width: 46px;
    height: 46px;
  }

  .call-action svg {
    width: 22px;
    height: 22px;
  }

  .care-phone {
    padding: 10px;
  }

  .care-status {
    top: 8px;
    right: 14px;
    left: 14px;
    font-size: 9px;
  }

  .care-nav {
    min-height: 38px;
    grid-template-columns: 18px 28px 1fr 22px;
    gap: 5px;
  }

  .care-nav > img {
    width: 28px;
    height: 28px;
  }

  .care-nav strong {
    font-size: 11px;
  }

  .care-nav div span {
    font-size: 8px;
  }

  .care-back {
    font-size: 22px;
  }

  .care-info {
    width: 18px;
    height: 18px;
    font-size: 9px;
    border-width: 1px;
  }

  .care-profile {
    padding: 8px 0;
  }

  .care-profile > img {
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    border-width: 2px;
  }

  .care-profile strong {
    font-size: 12px;
  }

  .location-pill {
    margin-top: 3px;
    padding: 3px 7px;
    font-size: 8px;
  }

  .location-pill svg {
    width: 10px;
    height: 10px;
  }

  .care-thread {
    min-height: 170px;
    padding: 8px 0 6px;
    gap: 6px;
  }

  .date-pill {
    padding: 3px 7px;
    font-size: 8px;
  }

  .message {
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 9px;
    line-height: 1.2;
  }

  .care-composer {
    height: 32px;
    padding-left: 9px;
    font-size: 9px;
  }

  .send-button {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .care-phone > small {
    margin-top: 5px;
    font-size: 7px;
  }

  .before-after {
    padding-top: 110px;
    padding-bottom: 110px;
  }

  .comparison-grid {
    margin-top: 70px;
  }

  .comparison-card {
    min-height: 650px;
    padding: 48px 24px 28px;
    border-radius: 36px;
  }

  .comparison-card h3 {
    min-height: 140px;
    margin-bottom: 40px;
    font-size: 52px;
  }

  .comparison-card li {
    font-size: 11px;
  }

  .section-intro.compact {
    min-height: 400px;
    padding-top: 76px;
    padding-bottom: 68px;
  }

  .demo-stage {
    grid-template-columns: 1fr;
    margin: 0 0 110px;
    padding: 12px 14px 18px;
    gap: 12px;
  }

  .demo-panel {
    min-height: 0;
    padding: 16px 14px 12px;
    border-radius: 18px;
  }

  .demo-panel-heading {
    display: flex;
    margin: 0 4px 12px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
  }

  .demo-panel-heading > span {
    margin-bottom: 9px;
    font-size: 9px;
  }

  .demo-panel h3 {
    font-size: 25px;
    line-height: .96;
  }

  .demo-tabs {
    display: flex;
    margin: 0 -4px;
    padding: 4px;
    gap: 6px;
    overflow-x: auto;
    border: 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .demo-tabs::-webkit-scrollbar {
    display: none;
  }

  .demo-tabs button {
    display: block;
    width: auto;
    min-width: max-content;
    min-height: 42px;
    padding: 12px 14px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    scroll-snap-align: start;
  }

  .demo-tab-number {
    display: none;
  }

  .demo-tab-copy strong {
    font-size: 13px;
  }

  .demo-tab-copy small {
    display: none;
  }

  .demo-tab-status {
    display: none;
  }

  .demo-panel > .pill {
    display: none;
  }

  .alice-demo-phone {
    width: min(380px, calc(100vw - 36px));
  }

  .demo-phone-screen {
    border-radius: 36px;
  }

  .demo-caption {
    grid-column: auto;
    padding: 18px;
    border: 0;
    background: rgba(0, 0, 0, .13);
    font-size: 16px;
  }

  .steps {
    padding-top: 76px;
    padding-bottom: 84px;
  }

  .steps > .section-sticker {
    width: 94px;
    height: 90px;
    margin-bottom: 16px;
  }

  .steps > h2 {
    margin-bottom: 14px;
  }

  .steps > p {
    line-height: 1.2;
  }

  .steps-grid {
    width: 100%;
    max-width: 460px;
    margin: 34px auto 38px;
    gap: 54px;
  }

  .steps-grid > article {
    display: block;
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 0;
    background: var(--white);
  }

  .steps-grid > article:not(:last-child)::after {
    bottom: -49px;
    width: 32px;
    height: 38px;
  }

  .step-visual {
    width: 100%;
    height: 160px;
    margin-bottom: 0;
    border-radius: 0;
  }

  .step-find-flow {
    width: min(260px, calc(100% - 64px));
    min-height: 110px;
  }

  .step-find-finder,
  .step-find-training {
    border-radius: 28px;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .14);
  }

  .step-find-finder {
    min-height: 110px;
    padding: 8px;
    grid-template-rows: 38px 52px;
    gap: 2px;
  }

  .step-find-search {
    padding: 0 7px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
  }

  .step-find-search-icon {
    width: 18px;
  }

  .step-find-business-name {
    font-size: 10.5px;
  }

  .step-find-business-name::after {
    width: 1px;
  }

  .step-find-button {
    min-height: 52px;
    padding: 0 16px;
    gap: 9px;
    font-size: 9px;
  }

  .step-find-button-arrow {
    font-size: 16px;
  }

  .step-find-training {
    min-height: 100px;
    padding: 14px;
    grid-template-rows: 7px 5px 20px;
    gap: 6px;
  }

  .step-find-training-label {
    font-size: 7.5px;
  }

  .step-find-progress {
    height: 5px;
  }

  .step-find-status {
    gap: 6px;
  }

  .step-find-status i {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 9px;
  }

  .step-find-status b {
    font-size: 10px;
  }

  .steps-grid h3 {
    margin: 14px 16px 0;
    font-size: 19px;
    line-height: 1.03;
  }

  .steps-grid article > p {
    margin: 7px 16px 16px;
    font-size: 13.5px;
    line-height: 1.25;
  }

  .alice-ring {
    width: min(300px, calc(100% - 28px));
    min-height: 72px;
    padding: 9px;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 8px;
    border-radius: 20px;
  }

  .alice-ring img {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }

  .alice-ring-copy small {
    margin-bottom: 4px;
    font-size: 6px;
  }

  .alice-ring-copy strong {
    margin-bottom: 4px;
    font-size: 14px;
  }

  .alice-ring-copy span {
    font-size: 9px;
  }

  .call-icon,
  .ring-wave {
    width: 34px;
    height: 34px;
  }

  .call-icon svg {
    width: 16px;
    height: 16px;
  }

  .ring-wave {
    right: 9px;
    border-width: 1px;
  }

  .message-visual {
    padding: 16px;
    gap: 10px;
  }

  .forwarding-control,
  .alice-greeting {
    width: min(260px, 100%);
  }

  .forwarding-control {
    min-height: 36px;
    padding: 5px 7px 5px 11px;
    gap: 8px;
    border-radius: 13px;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .09);
  }

  .forwarding-label {
    font-size: 7.5px;
  }

  .forwarding-switch {
    --forwarding-knob-travel: 34px;
    width: 58px;
    height: 24px;
    flex-basis: 58px;
  }

  .forwarding-switch b {
    margin-left: 8px;
    font-size: 7px;
  }

  .forwarding-switch i {
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
  }

  .alice-greeting {
    min-height: 60px;
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(111, 48, 207, .18);
  }

  .alice-greeting::after {
    right: 18px;
    bottom: -7px;
    width: 13px;
    height: 8px;
  }

  .alice-greeting p {
    font-size: 10.5px;
    line-height: 1.22;
  }

  .steps-outcome-arrow {
    width: 32px;
    height: 44px;
    margin-bottom: 24px;
  }

  .steps-outcome {
    margin-bottom: 46px;
    padding: 42px 18px 44px;
    border-width: 1px;
  }

  .steps-outcome-kicker {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 10px;
  }

  .steps-outcome h3 {
    margin-top: 18px;
    font-size: 48px;
  }

  .steps-outcome-rule {
    width: 54px;
    height: 5px;
    margin: 20px auto;
  }

  .steps-outcome > p {
    max-width: 320px;
    font-size: 17px;
  }

  .win-job-card {
    min-height: 0;
    margin-top: 30px;
    padding: 14px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    box-shadow: 8px 8px 0 var(--black);
  }

  .win-job-check {
    width: 46px;
    height: 46px;
  }

  .win-job-check svg {
    width: 25px;
    height: 25px;
  }

  .win-job-copy strong {
    font-size: 18px;
  }

  .win-job-copy em {
    font-size: 12px;
  }

  .win-job-card > b {
    min-height: 30px;
    margin-top: 2px;
    grid-column: 1 / -1;
    justify-self: start;
  }

  .steps-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .steps-actions .pill {
    width: 100%;
  }

  .faq {
    min-height: auto;
    padding: 100px 18px;
  }

  .faq h2 {
    max-width: 620px;
    font-size: 52px;
  }

  .faq-list {
    margin-top: 60px;
  }

  .faq-button {
    padding: 24px 0;
  }

  .faq-button span {
    font-size: 18px;
  }

  .faq-button i {
    font-size: 24px;
  }

  .faq-answer {
    padding-bottom: 26px;
    font-size: 16px;
  }

  .site-footer {
    min-height: auto;
    padding: 90px 18px 50px;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 80px;
    gap: 44px 24px;
  }

  .footer-wordmark {
    min-height: 220px;
    margin-right: -18px;
    margin-bottom: 60px;
    margin-left: -18px;
    font-size: min(56px, 10.8vw);
  }

  .mega-pill {
    min-height: 118px;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .feature-story,
  .social-story {
    height: auto;
  }

  .feature-sticky {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    padding: 100px var(--page-pad);
  }

  .feature-copy {
    display: block;
    padding: 0;
  }

  .feature-progress,
  .feature-media,
  .feature-cta {
    display: none;
  }

  .feature-slide,
  .feature-slide.is-active {
    position: static;
    width: min(760px, 100%);
    margin: 0 auto 50px;
    padding: 42px 20px;
    opacity: 1;
    translate: none;
  }

  /* No scroll animation here, so the sticky can't be height:auto - its only child
     is the absolutely-positioned photo and the panel would collapse to nothing.
     Give it a fixed stage and show the word outright. */
  .social-sticky {
    position: relative;
    height: 68vh;
    min-height: 440px;
  }

  .social-photo {
    opacity: 1;
    scale: 1;
  }

  .giant-type {
    color: var(--white);
    opacity: 1;
    scale: 1;
  }

  .social-orb {
    opacity: 1;
    scale: 1;
    translate: none;
  }

  .step-find .pill,
  .alice-ring,
  .call-icon,
  .ring-wave,
  .forwarding-switch,
  .forwarding-switch b,
  .forwarding-switch i,
  .alice-greeting {
    animation: none !important;
  }

  .ring-wave {
    opacity: 0;
  }

  .alice-ring,
  .message-visual .alice-greeting {
    opacity: 1;
    translate: none;
    scale: 1;
    transform: none;
  }

  .message-visual .forwarding-switch {
    background: var(--green);
  }

  .message-visual .forwarding-switch b {
    opacity: 1;
  }

  .message-visual .forwarding-switch i {
    transform: translateX(var(--forwarding-knob-travel));
  }

  .call-icon {
    rotate: 0deg;
  }

  .bubble-one,
  .bubble-two,
  .bubble-three {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .bubble-two,
  .bubble-three {
    margin-top: 10px;
  }
}

/* One shared breath between adjacent white sections, not two stacked gutters. */
.before-after {
  padding-bottom: clamp(56px, 6vw, 90px);
}

.before-after + .steps {
  padding-top: clamp(56px, 6vw, 90px);
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .social-story {
    height: auto;
  }

  .social-sticky {
    position: relative;
    height: 68svh;
    min-height: 440px;
  }

  .social-photo {
    scale: 1;
  }

  .giant-type {
    opacity: 1;
    translate: -50% -50%;
    scale: 1;
    will-change: auto;
  }

  .free-marquee-swipe-cue {
    display: none;
  }
}

/* Alice six-job story: keep the yellow Manychat rhythm, replace its demo. */
.demo-scene-source {
  display: none;
}

.hero h1,
.section-intro h2,
.feature-slide h2,
.social-content h2,
.social-copy h2,
.channels h2,
.before-after h2,
.steps h2,
.faq h2,
.footer-wordmark,
.comparison-card h3 {
  font-family: var(--headline);
  font-weight: 400;
}

/* Wide black display type: strong without crushing adjacent lines. */
.hero h1,
.section-intro h2,
.before-after > h2,
.demo-scene-source .section-intro h2,
.steps > h2,
.faq h2,
.social-content h2,
.social-copy h2,
.channels h2,
.footer-wordmark,
.comparison-card h3 {
  line-height: .96;
  letter-spacing: -.032em;
}

.hero h1 {
  line-height: .98;
  letter-spacing: -.035em;
}

.feature-slide h2 {
  line-height: .94;
  letter-spacing: -.025em;
}

.feature-story {
  height: 700vh;
}

.feature-mobile-list {
  display: none;
}

.feature-kicker {
  display: block;
  margin-bottom: 18px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.feature-slide h2 {
  letter-spacing: -.025em;
}

.feature-sticky {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
}

.feature-media {
  /* The vh cap keeps the taller phone inside the sticky stage on short screens
     (43/92 aspect ratio means height is 2.14x the width). */
  --feature-phone-width: min(420px, 34vw, 42vh);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  padding: 96px 0 22px;
  place-items: center;
}

.feature-phone-stage.demo-stage {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  place-items: center;
  background: transparent;
}

.feature-phone-stage .phone-wrap {
  width: 100%;
  height: 100%;
  align-content: center;
}

.feature-phone-stage .alice-demo-phone {
  width: var(--feature-phone-width);
}

.feature-phone-stage .demo-phone-screen {
  border-radius: 34px;
  background: #050505;
  color: var(--white);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.feature-phone-stage .demo-phone-topline,
.feature-phone-stage .call-customer small,
.feature-phone-stage .live-transcript > p {
  color: rgba(255, 255, 255, .58);
}

/* The bar stays white on the dark demo screens too - it is browser chrome, not part
   of the app - so it must beat the dark stages' translucent-white text colour. */
.feature-phone-stage .demo-phone-topline,
.feature-mobile-phone-stage .demo-phone-topline {
  background: var(--white);
  border-bottom-color: rgba(0, 0, 0, .1);
  color: #3d3a42;
}

.feature-phone-stage .demo-phone-url,
.feature-mobile-phone-stage .demo-phone-url {
  color: #3d3a42;
}

/* The slider block sits directly on the dark screen now (no light card behind it),
   so every part of it needs light-on-dark colours. */
:is(.feature-phone-stage, .feature-mobile-phone-stage) .lead-dial-head strong {
  color: var(--white);
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .lead-dial-head small {
  color: #c9a9f0;
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .lead-dial-card p {
  color: rgba(255, 255, 255, .6);
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .lead-slider-scale {
  color: rgba(255, 255, 255, .5);
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) .lead-slider-track {
  background: rgba(255, 255, 255, .18);
}

.feature-phone-stage .demo-live-label,
.feature-phone-stage .call-customer strong {
  color: var(--white);
}

.feature-phone-stage .call-playback {
  border-color: rgba(255, 255, 255, .14);
}

.feature-phone-stage .call-playback button {
  border-color: var(--magenta);
  background: var(--magenta);
  color: var(--white);
}

.feature-phone-stage .call-playback button:hover {
  border-color: var(--purple);
  background: var(--purple);
}

.feature-phone-stage .call-turn.alice-turn p {
  background: var(--purple);
  color: var(--white);
}

.feature-phone-stage .call-turn.customer-turn p {
  background: #f6f6f6;
  color: var(--black);
}

.feature-phone-stage .call-completion,
.feature-mobile-phone-stage .call-completion {
  border-color: rgba(0, 0, 0, .07);
  background: var(--white);
}

.feature-phone-stage .call-completion .call-details > p,
.feature-mobile-phone-stage .call-completion .call-details > p {
  color: #6d6577;
}

.feature-phone-stage .call-completion .call-details span,
.feature-mobile-phone-stage .call-completion .call-details span {
  border-color: rgba(123, 52, 206, .25);
  background: rgba(123, 52, 206, .08);
  color: var(--purple);
}

.scene-calls.is-call-complete .call-dialogue {
  opacity: .28;
  transition: opacity .4s ease;
}

:is(.feature-phone-stage, .feature-mobile-phone-stage) :is(
  .quick-book-card,
  .lead-search,
  .lead-found-chip,
  .lead-sheet,
  .fu-card,
  .retention-segment,
  .retention-reply,
  .retention-booking
) {
  color: var(--black);
}

.feature-cta {
  right: 54vw;
  left: 2vw;
  z-index: 5;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .feature-sticky {
    grid-template-columns: .92fr 1.08fr;
  }

  .feature-copy {
    padding-right: 3vw;
    padding-left: 3vw;
  }

  .feature-slide h2 {
    font-size: clamp(48px, 6vw, 62px);
  }

  .feature-slide p {
    font-size: 18px;
  }

  .feature-media {
    --feature-phone-width: min(330px, 42vw, 34vh);
  }

  /* The copy column ends exactly at 54vw here, so the shared `right: 54vw` put the
     Try now hard against the divider line. Clear it and match the column padding. */
  .feature-cta {
    right: calc(54vw + 26px);
    bottom: 34px;
    left: 3vw;
  }
}

@media (max-width: 760px) {
  .feature-story {
    height: auto;
  }

  .feature-sticky {
    display: none;
  }

  .feature-mobile-list {
    display: block;
    --feature-mobile-card-width: min(84vw, 330px);
    --feature-mobile-side-pad: calc((100vw - var(--feature-mobile-card-width)) / 2);
    overflow: visible;
    /* Hold the CTA's trailing space INSIDE the gold section. It used to live on the
       CTA's margin-bottom, which collapsed out of .feature-story (no bottom
       padding/border) and showed 44px of white body behind the gold - the "weird
       white gap" below Try now. Padding here keeps that space gold. */
    padding-bottom: 44px;
  }

  .feature-mobile-runway {
    height: 600svh;
  }

  .feature-mobile-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  .feature-mobile-track {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 var(--feature-mobile-side-pad);
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--feature-mobile-side-pad);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  .feature-mobile-track::-webkit-scrollbar {
    display: none;
  }

  .feature-mobile-track:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: -4px;
  }

  .feature-mobile-chapter {
    display: grid;
    flex: 0 0 var(--feature-mobile-card-width);
    width: var(--feature-mobile-card-width);
    height: 100%;
    min-height: 0;
    padding: 82px 0 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    align-content: start;
    justify-items: center;
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .feature-mobile-copy {
    width: 100%;
    min-height: 66px;
    padding: 0 4px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
  }

  .feature-mobile-chapter.is-active .feature-mobile-copy {
    opacity: 1;
    transform: translateY(0);
  }

  .feature-mobile-copy .feature-kicker {
    margin-bottom: 12px;
    color: var(--magenta);
    font-size: 11px;
  }

  .feature-mobile-copy h2 {
    width: 100%;
    max-width: 340px;
    margin: 0 auto 8px;
    font-family: var(--headline);
    font-size: clamp(25px, 7.2vw, 30px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.022em;
  }

  .feature-mobile-copy p {
    max-width: 340px;
    margin: 0 auto;
    font-size: 12.5px;
    line-height: 1.25;
  }

  .feature-mobile-phone-stage.demo-stage {
    display: grid;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
    place-items: center;
    background: transparent;
  }

  .feature-mobile-phone-stage .phone-wrap {
    width: 100%;
    min-height: 0;
    place-items: center;
  }

  .feature-mobile-phone-stage .alice-demo-phone {
    width: min(326px, calc(100vw - 60px), 100%);
    aspect-ratio: 16 / 25;
    opacity: .42;
    transition: opacity .24s ease;
  }

  .feature-mobile-chapter.is-active .feature-mobile-phone-stage .alice-demo-phone {
    opacity: 1;
  }

  .feature-mobile-phone-stage .demo-phone-screen {
    border-radius: 34px;
    background: #050505;
    color: var(--white);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .2);
  }

  .feature-mobile-phone-stage .demo-phone-topline,
  .feature-mobile-phone-stage .call-customer small,
  .feature-mobile-phone-stage .live-transcript > p {
    color: rgba(255, 255, 255, .6);
  }

  .feature-mobile-phone-stage .demo-live-label,
  .feature-mobile-phone-stage .call-customer strong {
    color: var(--white);
  }

  .feature-mobile-phone-stage .call-playback {
    border-color: rgba(255, 255, 255, .14);
  }

  .feature-mobile-phone-stage .call-playback button {
    min-height: 44px;
    padding: 0 13px;
    border-color: var(--magenta);
    background: var(--magenta);
    color: var(--white);
    font-size: 10px;
  }

  .feature-mobile-phone-stage .demo-phone-topline {
    font-size: 9px;
  }

  .feature-mobile-phone-stage .call-customer-copy strong {
    font-size: 14px;
  }

  .feature-mobile-phone-stage .call-customer-copy small {
    font-size: 10px;
  }

  .feature-mobile-phone-stage .recording-chip,
  .feature-mobile-phone-stage .live-transcript > p,
  .feature-mobile-phone-stage .call-details > p {
    font-size: 8px;
  }

  .feature-mobile-phone-stage .call-turn p {
    font-size: 11px;
  }

  .feature-mobile-phone-stage .call-turn.alice-turn p {
    background: var(--purple);
    color: var(--white);
  }

  .feature-mobile-phone-stage .call-turn.customer-turn p {
    background: #f6f6f6;
    color: var(--black);
  }

  .feature-mobile-phone-stage .call-details span {
    border-color: rgba(255, 255, 255, .28);
    color: #d8b8ff;
  }

  /* ONE Try now in normal flow at the END of the story. NOT sticky: a floating
     button and a full-height demo phone collide on every scroll, and no scrim made
     that read as deliberate. Jase, 2026-08-04: "can be at the end of this yellow
     features section (not need to float and sticky) - on mobile version only." */
  .feature-mobile-cta {
    display: grid;
    width: calc(100% - 40px);
    min-height: 62px;
    margin: 14px 20px 0;
    place-items: center;
    border-radius: 999px;
    font-size: 12px;
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .feature-mobile-chapter {
    padding-top: 70px;
  }

  .feature-mobile-copy {
    min-height: 62px;
  }

  .feature-mobile-copy h2 {
    font-size: clamp(25px, 7.2vw, 29px);
  }

  .feature-mobile-copy p {
    font-size: 12.5px;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .feature-mobile-runway {
    height: 100svh;
  }

  .feature-mobile-pin {
    position: relative;
  }

  .feature-mobile-copy,
  .feature-mobile-phone-stage .alice-demo-phone {
    transition: none;
  }
}

/* Refinement 08: manual phone coverflow on the original yellow field.
   Desktop and iPad keep the original split-screen sticky story above. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  .feature-story,
  .feature-mobile-list {
    height: auto;
    background: var(--yellow);
    color: var(--black);
  }

  .feature-sticky {
    display: none;
  }

  .feature-mobile-list {
    display: block;
    overflow: hidden;
    padding-bottom: 0;
  }

  .feature-mobile-shell {
    display: grid;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 96px 0 42px;
    grid-template-rows: auto auto;
    gap: 0;
    overflow: hidden;
    background: var(--yellow);
  }

  .feature-mobile-stage {
    position: relative;
    width: 100%;
    height: min(680px, calc((100vw - 52px) * 1.5625 + 24px));
  }

  .feature-mobile-track {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    perspective: 1800px;
    perspective-origin: 50% 48%;
    scroll-snap-type: none;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
  }

  .feature-mobile-control {
    display: grid;
    position: absolute;
    z-index: 45;
    top: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1.5px solid rgba(0, 0, 0, .22);
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
    box-shadow: none;
    transform: translateY(-50%);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
  }

  .feature-mobile-control-prev { left: 8px; }
  .feature-mobile-control-next { right: 8px; }

  .feature-mobile-control svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
  }

  .feature-mobile-control:active {
    transform: translateY(-50%) scale(.94);
    box-shadow: none;
  }

  .feature-mobile-control:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 3px;
  }

  .feature-mobile-swipe-cue {
    display: grid;
    position: absolute;
    z-index: 44;
    top: 50%;
    left: 50%;
    width: clamp(148px, 42vw, 182px);
    aspect-ratio: 1;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.92);
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
  }

  .feature-mobile-swipe-cue.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
  }

  .feature-mobile-swipe-cue.is-visible:not(.is-ready) {
    opacity: 0;
  }

  .feature-mobile-swipe-cue.is-dismissed {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.84);
  }

  .feature-mobile-swipe-lottie,
  .feature-mobile-swipe-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
  }

  .feature-mobile-swipe-lottie {
    filter: brightness(0) invert(1);
  }

  .feature-mobile-swipe-lottie svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .feature-mobile-swipe-fallback {
    display: none;
    fill: none;
    color: var(--white);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
    transition: opacity .16s ease;
  }

  .feature-mobile-swipe-cue.is-ready .feature-mobile-swipe-fallback {
    opacity: 0;
  }

  .feature-mobile-track.is-dragging {
    cursor: grabbing;
  }

  .feature-mobile-track::after {
    display: none;
  }

  .feature-mobile-chapter {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(420px, calc(100vw - 52px));
    height: auto;
    min-height: 0;
    padding: 0;
    aspect-ratio: 16 / 25;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: 34px;
    background: #050505;
    box-shadow: none;
    opacity: var(--slide-opacity, 1);
    transform: translate3d(calc(-50% + var(--slide-x, 0px)), -50%, var(--slide-z, 0px)) rotateY(var(--slide-angle, 0deg)) scale(var(--slide-scale, 1));
    transform-style: preserve-3d;
    transition: transform .58s cubic-bezier(.2, .75, .2, 1), opacity .36s ease, filter .36s ease, box-shadow .36s ease;
    cursor: pointer;
    will-change: transform;
  }

  .feature-mobile-chapter[aria-selected="true"] {
    box-shadow: none;
    cursor: default;
  }

  .feature-mobile-chapter:focus-visible {
    outline: 4px solid var(--magenta);
    outline-offset: -7px;
  }

  .feature-mobile-chapter.has-final-frame:not([aria-selected="true"]) .feature-mobile-phone-stage {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .feature-mobile-final-frame {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #050505;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    pointer-events: none;
  }

  .feature-mobile-chapter.has-final-frame:not([aria-selected="true"]) .feature-mobile-final-frame {
    opacity: 1;
    visibility: visible;
  }

  .feature-mobile-chapter[aria-selected="true"] .feature-mobile-final-frame {
    opacity: 0;
    visibility: hidden;
  }

  .feature-mobile-copy {
    display: none;
  }

  .feature-mobile-phone-stage.demo-stage,
  .feature-mobile-phone-stage .phone-wrap,
  .feature-mobile-phone-stage .alice-demo-phone,
  .feature-mobile-phone-stage .demo-phone-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .feature-mobile-phone-stage.demo-stage {
    display: grid;
    position: absolute;
    z-index: 1;
    inset: 0;
    place-items: stretch;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease, visibility .18s ease;
  }

  .feature-mobile-phone-stage .alice-demo-phone {
    aspect-ratio: auto;
    opacity: 1;
    transition: none;
  }

  .feature-mobile-phone-stage .demo-phone-screen {
    border-radius: 33px;
    padding: 6.2cqw 5.4cqw 5.4cqw;
    background: #050505;
    color: var(--white);
    box-shadow: none;
  }

  .feature-mobile-phone-stage .demo-phone-topline,
  .feature-mobile-phone-stage .call-customer small,
  .feature-mobile-phone-stage .live-transcript > p {
    color: rgba(255, 255, 255, .58);
  }

  .feature-mobile-phone-stage .demo-live-label,
  .feature-mobile-phone-stage .call-customer strong {
    color: var(--white);
  }

  .feature-mobile-phone-stage .call-playback {
    border-color: rgba(255, 255, 255, .14);
  }

  .feature-mobile-phone-stage .call-details span {
    border-color: rgba(255, 255, 255, .28);
    color: #d8b8ff;
  }

  .feature-mobile-active-copy {
    z-index: 30;
    width: min(calc(100% - 36px), 430px);
    min-height: 96px;
    margin: 24px auto 0;
    align-self: center;
    color: var(--black);
    text-align: center;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: opacity .3s ease, filter .3s ease, transform .3s ease;
    will-change: opacity, filter, transform;
  }

  .feature-mobile-active-copy h2 {
    margin: 0;
    color: var(--black);
    font-family: var(--headline);
    font-size: clamp(31px, 8.8vw, 40px);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .94;
    text-wrap: balance;
  }

  .feature-mobile-active-copy p {
    max-width: 360px;
    margin: 8px auto 0;
    color: rgba(0, 0, 0, .72);
    font-size: 12.5px;
    line-height: 1.28;
    text-wrap: balance;
  }

  .feature-mobile-caption-morph {
    display: grid;
  }

  .feature-mobile-caption-morph > span {
    grid-area: 1 / 1;
    width: 100%;
  }

  .feature-mobile-caption-morph > .is-next {
    display: none;
  }

  .feature-mobile-active-copy.is-morphing {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(3px);
    transition-duration: .22s;
  }

  .site-header.is-over-mobile-features:not(.menu-active) .nav-shell {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 640px) and (max-height: 760px) {
  .feature-mobile-shell {
    padding-top: 74px;
  }

  .feature-mobile-chapter {
    width: min(420px, calc(100vw - 52px));
    aspect-ratio: 16 / 25;
  }

  .feature-mobile-active-copy {
    min-height: 82px;
  }

  .feature-mobile-active-copy p {
    margin-top: 6px;
    font-size: 11.5px;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce),
       (orientation: landscape) and (max-height: 560px) and (max-width: 950px) and (prefers-reduced-motion: reduce) {
  .feature-mobile-chapter,
  .feature-mobile-final-frame,
  .feature-mobile-phone-stage,
  .feature-mobile-active-copy,
  .feature-mobile-caption-morph > span {
    transition-duration: .01ms;
    animation-duration: .01ms !important;
  }

  .feature-mobile-swipe-cue {
    display: none;
  }
}

/* Refinement 22: on portrait phones, scrolling performs the actual Before-to-After
   replacement. Wider screens and reduced motion retain the normal two-card flow. */
@media (max-width: 760px) and (orientation: portrait) {
  .before-after {
    overflow: clip;
  }

  .comparison-story {
    height: 240svh;
    margin-top: 70px;
  }

  .comparison-pin {
    display: grid;
    position: sticky;
    top: calc(var(--header-height) + 8px);
    height: calc(100svh - var(--header-height) - 16px);
    place-items: center;
    overflow: clip;
  }

  .comparison-story .comparison-grid {
    display: block;
    position: relative;
    width: calc(100% - 36px);
    height: min(720px, 100%);
    margin: 0 auto;
  }

  .comparison-story .comparison-card {
    display: grid;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 26px 22px 20px;
    grid-template-rows: repeat(5, auto);
    align-content: center;
    row-gap: 10px;
    border-radius: 36px;
    will-change: transform;
  }

  .comparison-story .comparison-card > small {
    grid-row: 1;
    margin-bottom: 0;
    font-size: 17px;
  }

  .comparison-story .comparison-card h3 {
    grid-row: 2;
    min-height: 0;
    margin-bottom: 0;
    font-size: clamp(42px, 12.8vw, 50px);
  }

  .comparison-story .comparison-scene {
    position: relative;
    z-index: 1;
    inset: auto;
    grid-row: 3;
    width: min(100%, calc(clamp(136px, 26svh, 218px) * 1.167));
    height: clamp(136px, 26svh, 218px);
    margin: 0;
    justify-self: center;
    background: transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  .comparison-story .comparison-scene img {
    opacity: .78;
    object-fit: contain;
    object-position: 50% 50%;
  }

  .comparison-story .comparison-card.before .comparison-scene::after {
    background: linear-gradient(180deg, rgba(237, 242, 237, .22), rgba(237, 242, 237, .08) 45%, rgba(237, 242, 237, .20));
  }

  .comparison-story .comparison-card.after .comparison-scene::after {
    background: linear-gradient(180deg, rgba(0, 132, 61, .24), rgba(0, 132, 61, .10) 45%, rgba(0, 132, 61, .24));
  }

  .comparison-story .comparison-card ul {
    grid-row: 4;
    margin: 0 0 6px;
  }

  .comparison-story .comparison-card li {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 9.5px;
  }

  .comparison-story .comparison-card .pill {
    grid-row: 5;
  }

  .comparison-story .comparison-card.before {
    z-index: 1;
    opacity: var(--comparison-before-opacity, 1);
    transform: translate3d(var(--comparison-before-x, 0%), 0, 0) rotate(var(--comparison-before-rotate, 0deg)) scale(var(--comparison-before-scale, 1));
    transform-origin: 50% 55%;
  }

  .comparison-story .comparison-card.after {
    z-index: 2;
    transform: translate3d(var(--comparison-after-x, 116%), 0, 0) rotate(var(--comparison-after-rotate, 4deg)) scale(var(--comparison-after-scale, .965));
    transform-origin: 50% 55%;
  }
}

@media (max-width: 760px) and (orientation: portrait) and (max-height: 720px) {
  .comparison-story .comparison-card {
    padding: 20px 18px 16px;
    row-gap: 6px;
  }

  .comparison-story .comparison-card > small {
    margin-bottom: 0;
    font-size: 14px;
  }

  .comparison-story .comparison-card h3 {
    min-height: 0;
    margin-bottom: 0;
    font-size: clamp(36px, 11vw, 42px);
  }

  .comparison-story .comparison-scene {
    width: min(100%, calc(clamp(128px, 22.5svh, 160px) * 1.167));
    height: clamp(128px, 22.5svh, 160px);
  }

  .comparison-story .comparison-card ul {
    margin-bottom: 4px;
  }

  .comparison-story .comparison-card li {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 8.5px;
  }

  .comparison-story .comparison-card .pill {
    min-height: 52px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

@media (max-width: 760px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .comparison-story {
    height: auto;
    margin-top: 70px;
  }

  .comparison-pin {
    display: block;
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .comparison-story .comparison-grid {
    display: grid;
    width: min(1240px, 100%);
    height: auto;
    margin: 0 auto;
    gap: 24px;
  }

  .comparison-story .comparison-card {
    position: static;
    height: auto;
    min-height: 650px;
    transform: none;
  }
}

@media (min-width: 761px) and (min-height: 561px) and (prefers-reduced-motion: reduce),
       (min-width: 951px) and (prefers-reduced-motion: reduce) {
  .feature-story {
    height: auto;
  }

  .feature-sticky {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    padding: 96px var(--page-pad);
    overflow: visible;
  }

  .feature-copy {
    display: block;
    padding: 0;
  }

  .feature-slide,
  .feature-slide.is-active {
    position: static;
    width: min(720px, 100%);
    min-height: 0;
    margin: 0 auto 48px;
    padding: 26px 0;
    opacity: 1;
    translate: none;
  }

  .feature-media,
  .feature-progress,
  .feature-cta {
    display: none;
  }

  .feature-mobile-chapter,
  .feature-mobile-arrow,
  .feature-mobile-dots i {
    transition-duration: .01ms;
  }
}

/* Stage A: the Alice welcome film remains a quiet corner object until the
   visitor deliberately plays it. One fixed element changes scale and position,
   so the motion reads as a single player moving rather than a modal swap. */
.alice-video-backdrop {
  position: fixed;
  z-index: 88;
  inset: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: rgba(0, 0, 0, .18);
  cursor: default;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1);
}

.alice-video-backdrop[data-active="true"] {
  opacity: 1;
  cursor: zoom-out;
  pointer-events: auto;
}

.alice-video-player {
  position: fixed;
  z-index: 90;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  height: 199px;
  max-width: calc(100vw - 48px);
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  opacity: 0;
  filter: saturate(.98) contrast(1.01);
  box-shadow: 6px 6px 0 var(--yellow-bright), 0 18px 46px rgba(0, 0, 0, .32);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 100% 100%;
  transition:
    right 420ms cubic-bezier(.22, 1, .36, 1),
    bottom 420ms cubic-bezier(.22, 1, .36, 1),
    height 420ms cubic-bezier(.22, 1, .36, 1),
    border-radius 420ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    opacity 180ms ease;
}

.alice-video-player.is-ready {
  opacity: 1;
  pointer-events: auto;
}

.alice-video-player[data-state="expanded"] {
  right: 50%;
  bottom: 50%;
  height: min(587px, calc(100dvh - 48px));
  max-width: calc(100vw - 48px);
  border-radius: 26px;
  box-shadow: 10px 10px 0 var(--yellow-bright), 0 28px 90px rgba(0, 0, 0, .48);
  transform: translate3d(50%, 50%, 0);
}

.alice-video-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 3px solid var(--black);
  border-radius: inherit;
  background: var(--black);
}

.alice-video-frame video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  background: var(--black);
}

.alice-video-tag {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  padding: 5px 7px 4px;
  background: var(--yellow-bright);
  color: var(--black);
  font: 900 8px/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.alice-video-player[data-state="expanded"] .alice-video-tag {
  top: 13px;
  left: 13px;
  padding: 6px 9px 5px;
  font-size: 10px;
}

.alice-video-player.is-playing[data-state="expanded"] .alice-video-tag {
  opacity: 0;
}

.alice-video-toggle {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--black);
  cursor: pointer;
}

.alice-video-toggle:focus-visible {
  outline: 4px solid var(--magenta);
  outline-offset: -7px;
}

.alice-video-control-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 3px 3px 0 var(--yellow-bright), 0 10px 28px rgba(0, 0, 0, .26);
  transition: opacity 180ms ease, transform 180ms ease;
}

.alice-video-control-icon svg {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.alice-video-pause-icon {
  display: none;
}

.alice-video-player.is-playing .alice-video-play-icon {
  display: none;
}

.alice-video-player.is-playing .alice-video-pause-icon {
  display: block;
}

.alice-video-player.is-playing[data-state="expanded"] .alice-video-control-icon {
  opacity: 0;
  transform: scale(.9);
}

.alice-video-player.is-playing[data-state="expanded"] .alice-video-toggle:hover .alice-video-control-icon,
.alice-video-player.is-playing[data-state="expanded"] .alice-video-toggle:focus-visible .alice-video-control-icon,
.alice-video-player.is-playing[data-state="expanded"] .alice-video-toggle:active .alice-video-control-icon {
  opacity: 1;
  transform: scale(1);
}

.alice-video-minimise {
  position: absolute;
  z-index: 5;
  top: 9px;
  right: 9px;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(0, 0, 0, .68);
  color: var(--white);
  cursor: pointer;
}

.alice-video-minimise:not([hidden]) {
  display: grid;
}

.alice-video-minimise svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.alice-video-minimise:focus-visible {
  outline-color: var(--yellow-bright);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .alice-video-player {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(92px + env(safe-area-inset-bottom));
    height: 149px;
    max-width: calc(100vw - 24px);
    border-radius: 17px;
    box-shadow: 5px 5px 0 var(--yellow-bright), 0 14px 38px rgba(0, 0, 0, .34);
  }

  .alice-video-player[data-state="expanded"] {
    right: 50%;
    bottom: 50%;
    height: min(519px, calc(100dvh - 48px));
    max-width: calc(100vw - 40px);
    border-radius: 24px;
    box-shadow: 8px 8px 0 var(--yellow-bright), 0 24px 70px rgba(0, 0, 0, .48);
    transform: translate3d(50%, 50%, 0);
  }

  .alice-video-frame {
    border-width: 2px;
  }

  .alice-video-control-icon {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-video-backdrop,
  .alice-video-player,
  .alice-video-tag,
  .alice-video-control-icon {
    transition-duration: .01ms !important;
  }
}

/* Stage A revision 2: replace the old booking bubbles in their hero lane.
   The film stays on the front page, grows from one bottom-right origin and
   scrolls away with the hero. The video and one play control are the UI. */
.hero .alice-video-player {
  position: absolute;
  z-index: 5;
  right: 6%;
  bottom: 34px;
  width: 92px;
  height: auto;
  max-width: none;
  border-radius: 14px;
  filter: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transform: none;
  transform-origin: 100% 100%;
  transition:
    width 700ms cubic-bezier(.22, 1, .36, 1),
    border-radius 700ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 700ms cubic-bezier(.22, 1, .36, 1),
    opacity 180ms ease;
}

.hero .alice-video-player[data-state="expanded"] {
  right: 6%;
  bottom: 34px;
  width: 132px;
  height: auto;
  max-width: none;
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .32);
  transform: none;
}

.hero .alice-video-frame {
  border: 0;
  border-radius: inherit;
}

.hero .alice-video-control-icon {
  width: 44px;
  height: 44px;
  border: 2px solid var(--black);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
}

.hero .alice-video-player.is-playing[data-state="expanded"] .alice-video-control-icon,
.hero .alice-video-player.is-playing[data-state="expanded"] .alice-video-toggle:hover .alice-video-control-icon,
.hero .alice-video-player.is-playing[data-state="expanded"] .alice-video-toggle:focus-visible .alice-video-control-icon,
.hero .alice-video-player.is-playing[data-state="expanded"] .alice-video-toggle:active .alice-video-control-icon {
  opacity: 0;
  transform: scale(.92);
}

@media (max-width: 1100px) {
  .hero .alice-video-player {
    right: 5%;
    bottom: 30px;
    width: 82px;
  }

  .hero .alice-video-player[data-state="expanded"] {
    right: 5%;
    bottom: 30px;
    width: 118px;
  }
}

@media (max-width: 760px) {
  /* PHONE ONLY - 62px -> 124px ("2x larger even when its not clicked") -> 105px
     ("make it 15% smaller - its too big i think"), Jase 2026-08-19. Still 1.7x
     the original. Desktop (92px) and the <=1100px tier (82px) are untouched.

     ⛔ BOTH STATES ARE THE SAME WIDTH ON A PHONE, on purpose. The player grows
     from the bottom-right corner, so its height eats upward into the sign-up
     form. Measured headroom between the form's last line and the bottom of the
     hero: 270px at a 844-tall viewport, but only 224px at 752 - which is what an
     iPhone 12 Pro actually gives once Safari's chrome is showing. 105px is
     187px tall, so at rest it clears the form by 37px there. A tap-grow on top
     of that ran into "Powered by advanced AI" and reached the button.
     Tapping still unmutes and swaps the control icon; only the size step is
     dropped, and only on phones. */
  .hero .alice-video-player,
  .hero .alice-video-player[data-state="expanded"] {
    right: 18px;
    bottom: 22px;
    width: 105px;
    height: auto;
    max-width: none;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  }

  .hero .alice-video-control-icon {
    width: 36px;
    height: 36px;
    border-width: 1.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  }

  .hero .alice-video-control-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Small phones, and any phone whose browser chrome pushes the viewport under
   ~744px. Headroom below the sign-up form falls to 178px once the hero stops
   shrinking (it has a min-height, so the hero is 658px tall even at a 553px
   viewport), which caps the player at 100px wide. 82px sits well inside it.
   Measured, not guessed: available height tracks 0.5 x viewport - 152px from
   844 all the way down to 658. */
@media (max-width: 760px) and (max-height: 743px) {
  .hero .alice-video-player,
  .hero .alice-video-player[data-state="expanded"] {
    width: 82px;
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero .alice-video-player,
  .hero .alice-video-control-icon {
    transition-duration: .01ms !important;
  }
}

/* ===================================================================
   Hero business suggestions (2026-08-11)
   A plain search-suggestion list: white sheet, normal weight, no
   gradient and no uppercase. Jase: "i just want a normal looking
   suggestion, nothing bold".

   ⛔ MUST LIVE AT THE END OF THIS FILE, AND MUST STAY 3 CLASSES DEEP.
   The options are <button>s inside .business-finder, so the hero CTA
   rule `.business-finder button` (line ~737) matches them too - and at
   (0,1,1) it beats a bare `.business-finder-option` (0,1,0) whatever
   the order. That rule paints the purple gradient, uppercase, DM Mono
   and an 84px min-height, which is exactly how these rendered before.
   Every reset below is neutralising it on purpose - do not "tidy" them
   away, and do not move this block earlier in the file.
   =================================================================== */
/* A compact floating menu under the TEXT, not a sheet spanning the whole pill.
   It may sit over the CTA, which is fine: choosing a row closes the menu, and
   tapping anywhere outside it (including the CTA) closes it too. */
.business-finder .business-finder-suggest {
  /* ⛔ The finger MUST be able to pan this list. Selection is on `click` precisely so
     the browser can tell a scroll from a tap - state pan-y explicitly so no later rule
     can quietly take the gesture back (the calendar touch-action cascade lesson). */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: calc(100% + 8px);
  left: 46px;                          /* under the input, clear of the search icon */
  right: auto;
  /* Jase 2026-08-11: "it can overlap with Try Alice Free button - to see more" - so it
     runs on past the CTA rather than stopping short of it. Long trading names get room
     instead of an ellipsis. The CTA underneath is disabled while the menu is open. */
  width: min(1040px, calc(100% - 60px));
  max-height: 296px;                   /* ~5 rows, then scroll */
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px 0;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  text-align: left;
}

.business-finder .business-finder-suggest .business-finder-option {
  display: block;
  width: 100%;
  min-width: 0;                       /* beats min-width: 300px */
  min-height: 0;                      /* beats min-height: 84px */
  margin: 0;
  padding: 6px 16px;
  border: 0;
  border-radius: 0;
  justify-self: stretch;
  background: none;                   /* beats the CTA gradient */
  box-shadow: none;
  color: var(--black);
  font: 400 15.5px/1.3 var(--display);  /* beats 500 14px DM Mono */
  letter-spacing: normal;
  text-align: left;
  text-transform: none;               /* beats uppercase */
  cursor: pointer;
  transition: background-color .12s ease;
}

.business-finder .business-finder-suggest .business-finder-option:hover,
.business-finder .business-finder-suggest .business-finder-option.is-active {
  background: #f2f3f5;
}

.business-finder .business-finder-suggest .business-finder-option-name {
  display: block;
  color: var(--black);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-finder .business-finder-suggest .business-finder-option-where {
  display: block;
  color: #8a8a8a;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tablet: still a menu, just narrower than the desktop cap. */
@media (max-width: 1100px) {
  .business-finder .business-finder-suggest {
    left: 40px;
    width: calc(100% - 52px);
  }
}

/* Phone: fill the pill's own width and show about three, then scroll. */
@media (max-width: 720px) {
  .business-finder .business-finder-suggest {
    top: calc(100% + 6px);
    left: 8px;
    width: calc(100% - 16px);
    max-height: 156px;
    border-radius: 12px;
  }

  .business-finder .business-finder-suggest .business-finder-option {
    padding: 7px 14px;
    font-size: 15px;
  }

  .business-finder .business-finder-suggest .business-finder-option-name { font-size: 15px; }
  .business-finder .business-finder-suggest .business-finder-option-where { font-size: 12px; }
}

/* ⛔ The greyed-out ":disabled" CTA styling that lived here is GONE ON PURPOSE. Gating the
   button on "a business was picked" froze the front door for anyone who came back or
   reloaded with text still in the box. The CTA is never disabled now - do not re-add a
   disabled style, because it would signal a state that must not exist. */


/* "Free feature" tag (Jase 2026-08-19) on Website chat, Map work and AI search.
   It sits INSIDE the slide's <p> on purpose: buildMobileFeatureList() clones
   that paragraph wholesale, so the tag reaches the phone view without a single
   line of JS. */
.free-feature-tag {
  display: inline-block;
  margin-right: .5em;
  padding: 3px 10px;
  border-radius: 999px;
  /* Green, not grey (Jase 2026-08-19: "its not standing out at all"). A 10%
     black chip on a yellow panel reads as disabled; the brand green reads as a
     badge. */
  background: var(--green);
  color: var(--white);
  font-size: .74em;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================================
   FREE PANEL - PHONE ONLY (Jase 2026-08-19)
   "cards stacked vertically, scroll only - no swipe, no arrows ... however only
   for mobile, desktop behaviour stays the same."
   base.js bails out of initFreeMarquee at this width so no rAF, Lottie or
   pointer handler ever starts. The `transform: none !important` is the belt to
   that brace: it defeats an inline transform left behind if the page was loaded
   wide and then resized narrow, which JS alone would not undo.
   ========================================================================== */
@media (max-width: 760px) {
  .free-marquee {
    /* ⛔ aspect-ratio, not just height. The marquee is `width:100vw` +
       `aspect-ratio: 1200/300`, so at 390px it is pinned to 97.5px tall no
       matter what `height: auto` says - the stacked list then ran 721px out the
       bottom of its own box. An aspect ratio outranks an auto height. */
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    cursor: auto;
    touch-action: auto;
  }

  .free-marquee-path,
  .free-marquee-swipe-cue {
    display: none;
  }

  .free-flags {
    /* The marquee is full-bleed by design so flags can travel off both edges.
       Stacked, that would run the list edge to edge while the heading above it
       sits inside the page gutter - so put the gutter back. */
    position: static;
    display: flex;
    inset: auto;
    flex-direction: column;
    gap: 10px;
    padding-inline: var(--page-pad);
  }

  .free-flag {
    position: static;
    width: 100%;
    padding: 14px 16px;
    aspect-ratio: auto;
    place-items: center start;
    font-size: 16px;
    text-align: left;
    transform: none !important;
  }
}


/* ============================================================================
   YELLOW FEATURE SECTION - PHONE ONLY (Jase 2026-08-19)
   "for Phone, I'd like the Yellow section to be only scrolling - Big Heading
   then the animation, one by one", because a tester "didn't know he can swipe
   left or right here".

   Same media query as featureMobileMedia in base.js, so CSS and JS can never
   disagree about what a phone is. iPad (768px) is ABOVE this breakpoint and is
   untouched - it keeps the desktop sticky experience.

   End of file ON PURPOSE: the coverflow rules live at equal specificity further
   up, so only source order beats them.
   ========================================================================== */
@media (max-width: 0px) {
  .feature-mobile-shell {
    padding: 28px 0 42px;
  }

  .feature-mobile-stage {
    height: auto;
  }

  .feature-mobile-track {
    display: flex;
    flex-direction: column;
    gap: 52px;
    height: auto;
    padding: 0 var(--page-pad);
    overflow: visible;
    perspective: none;
    cursor: auto;
    touch-action: auto;
    user-select: auto;
  }

  /* The chapter stops being the black card and becomes a plain column: heading,
     then the phone. The card look moves to the phone stage below. */
  .feature-mobile-chapter {
    /* ONE source of truth for the card size: the stage height, the still's
       height and the hardware button positions all derive from it. */
    --card-w: min(420px, 100vw - 36px);
    --stage-h: calc(var(--card-w) * 1.5625);
    display: flex;
    /* ⛔ relative, NOT static. The still (.feature-mobile-final-frame) is
       `position:absolute; inset:0`. With the card static its containing block
       became the whole track, so the still stretched over the heading and
       flashed across it while scrolling. */
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: auto;
    /* ⛔ The coverflow sets `flex: 0 0 var(--feature-mobile-card-width)`. That
       basis is the card WIDTH - correct in a row, but this track is a COLUMN, so
       the same value silently became a fixed 328px HEIGHT: every card cropped and
       the heading squashed to zero. Must be auto. */
    flex: 0 0 auto;
    flex-direction: column;
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    cursor: auto;
    transition: none;
    /* !important defeats the inline --slide-* transform left behind if the page
       was loaded wide and then narrowed; JS alone cannot undo that. */
    opacity: 1 !important;
    transform: none !important;
    z-index: auto !important;
  }

  /* Heading first, animation second - the order Jase asked for.
     ⛔ `display` is the important one: the coverflow hides every chapter's own
     copy (display:none) because the shared morphing caption spoke for all seven.
     The stack has no shared caption, so each card must speak for itself. */
  .feature-mobile-copy {
    display: block;
    order: -1;
    min-height: 0;
    padding: 0;
    opacity: 1 !important;
    transform: none !important;
    text-align: left;
  }

  .feature-mobile-copy h2 {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  /* The phone stage inherits the card: black, rounded, clipped, 16:25.
     ⛔ An explicit height, NOT aspect-ratio. The stage is absolutely positioned
     with height:100% in the coverflow rules; taking it back into flow leaves its
     inner phone (height:100% + its own 43:92 ratio) to argue with the ratio, and
     the box collapsed to 328px instead of 553px. 1.5625 is 25/16 - the same
     figure the original .feature-mobile-stage height used. */
  .feature-mobile-phone-stage.demo-stage {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    height: var(--stage-h);
    aspect-ratio: auto;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: 34px;
    background: #050505;
  }

  /* ⛔ NO still image in the stack (Jase 2026-08-19: "I can see the old map
     flashes"). The final-frame PNGs were baked for the carousel BEFORE the live
     Google map replaced the flat one, so alice-leads-final.png still shows the
     old static map - it flashed up for a beat before the real scene rendered.
     The carousel needed a poster for the cards you were not looking at; a
     scrolled column does not, because a card only appears as it plays. */
  .feature-mobile-final-frame {
    display: none;
  }

  /* Conceptual phone hardware (Jase 2026-08-19, ManyChat reference): silent
     switch + two volume keys on the left, power on the right. Drawn as
     pseudo-elements on the CARD, not inside the stage - the stage clips its
     contents, so anything drawn in there would be sliced off at the edge. The
     two extra left-hand keys are box-shadow copies of the first, which keeps it
     to the two pseudo-elements an element actually has. */
  .feature-mobile-chapter::before,
  .feature-mobile-chapter::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 3px;
    border-radius: 3px;
    background: #050505;
    pointer-events: none;
  }

  .feature-mobile-chapter::before {
    left: -3px;
    bottom: calc(var(--stage-h) * .70);
    height: 22px;
    box-shadow: 0 42px 0 0 #050505, 0 92px 0 0 #050505;
  }

  .feature-mobile-chapter::after {
    right: -3px;
    bottom: calc(var(--stage-h) * .62);
    height: 62px;
  }

  /* Arrows, swipe cue and the shared morphing caption are all gone: every card
     now carries its own heading, and there is nothing to swipe. */
  .feature-mobile-control,
  .feature-mobile-swipe-cue,
  .feature-mobile-active-copy {
    display: none !important;
  }
}


/* ============================================================================
   CONCEPTUAL PHONE HARDWARE - DESKTOP + iPAD (Jase 2026-08-19)
   The phone stack on mobile draws its keys on the card, because there the phone
   sits inside a clipped stage. Here the phone body itself is overflow:visible
   AND is its own container (container-type: inline-size), so the keys can hang
   off its edges and be sized in cqw - they scale with the phone at every width.
   ========================================================================== */
.feature-phone-stage .alice-demo-phone::before,
.feature-phone-stage .alice-demo-phone::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: .9cqw;
  border-radius: .9cqw;
  background: #050505;
  pointer-events: none;
}

/* Silent switch, then two volume keys as shadow copies of it. */
.feature-phone-stage .alice-demo-phone::before {
  left: -.8cqw;
  top: 19%;
  height: 4.4%;
  box-shadow: 0 9cqw 0 0 #050505, 0 19cqw 0 0 #050505;
}

/* Power key. */
.feature-phone-stage .alice-demo-phone::after {
  right: -.8cqw;
  top: 25%;
  height: 9%;
}


/* ============================================================================
   ROUND 4 FIXES (Jase 2026-08-19)
   ========================================================================== */

/* 1. THE PHONE VANISHED, THE BUTTONS STAYED.
   The carousel hid the live phone on every card that was not selected, because
   the still image was covering it instead. Removing the still (it showed the OLD
   map) left those cards showing nothing at all - while the hardware keys, drawn
   on the CARD rather than the stage, stayed put. In a scrolled column every
   phone must be visible whether or not it is the selected one. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  .feature-mobile-chapter.has-final-frame:not([aria-selected="true"]) .feature-mobile-phone-stage {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* 3. The wordmark is smaller on a phone: "Alice AI Receptionist" is a long
     string and at 15px it dominated the bar. Desktop and iPad keep 15px. */
  .site-header .brand-liquid {
    font-size: 12px;
  }
}

/* 2. THE WHITE GLASS BANNER STAYS ON over the yellow section. It used to be
   switched off there on purpose; Jase wants it on at all times now, except at
   the top of the front page where the "Try Alice free" hero owns the screen -
   which is exactly what .is-past-hero-cta already expresses. Re-stating the
   glass with one extra class beats the transparent override on specificity. */
@media (max-width: 900px) {
  .site-header.is-past-hero-cta.is-over-mobile-features:not(.menu-active) .nav-shell {
    border-color: rgba(255, 255, 255, .65);
    background: linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 222, 246, .82), rgba(255, 224, 190, .8));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .09);
    color: var(--black);
    backdrop-filter: blur(18px) saturate(1.22);
    -webkit-backdrop-filter: blur(18px) saturate(1.22);
  }
}

/* 4. THE FREE REVEAL IS A STATIC FRAME ON MOBILE.
   Desktop keeps the sticky reveal (photo zooms, FREE grows behind it). On a
   phone the section collapses to one screen at a fixed point in that animation:
   --social-progress .9 is where FREE has reached full size and is still fully
   opaque - the frame in Jase's screenshot. Past ~.944 the word fades out, so a
   value of 1 would ship an empty photo.
   base.js also stops writing the variable at this width; without that its inline
   style would beat this rule every scroll frame. */
@media (max-width: 760px) {
  .social-story {
    height: auto;
  }

  .social-sticky {
    --social-progress: .9;
    position: static;
    height: 100svh;
  }
}


/* ============================================================================
   FREE TOOLS - GROUPED LIST (Jase 2026-08-19)
   "how we can present this better? all the free tools ... I just want to show
   these features - they are free to use"

   Fifteen identically-shaped colour bars in one flat run read as a colour
   chart, not a list of what you get. The same tools now sit in three named
   groups, two to a row, each with a tick.

   The group headings are hidden by default: on desktop the flags still travel
   the SVG string, where a heading has nowhere to go and base.js only positions
   .free-flag.
   ========================================================================== */
.free-group {
  display: none;
}

@media (max-width: 760px) {
  .free-flags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .free-group {
    display: block;
    grid-column: 1 / -1;
    margin: 16px 0 0;
    color: rgba(0, 0, 0, .55);
    font-family: var(--headline);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .free-group:first-child {
    margin-top: 0;
  }

  /* An odd group leaves one tile alone on its row, which reads as a bug rather
     than a list. The last tile of an odd group takes the full width instead. */
  .free-flag.is-wide {
    grid-column: 1 / -1;
  }

  .free-flag {
    display: flex;
    padding: 13px 11px;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    line-height: 1.12;
  }

  /* Escaped, not a literal tick: the character then cannot be mangled by an
     editor or a pipe that guesses the encoding. */
  .free-flag::before {
    content: "\2713";
    flex: 0 0 auto;
    font-size: 12px;
    opacity: .7;
  }

  .social-content h2.free-title {
    font-size: 44px;
  }
}


/* ⛔⛔ DO NOT PUT `overflow-x` BACK ON `html`. I added `html { overflow-x: clip }`
   here on 2026-08-19 as a belt-and-braces guard against sideways scroll, and it
   BROKE EVERY STICKY SECTION ON THE PAGE - Jase reported "a massive white gap"
   above the missed-call calculator within the hour.

   The mechanism, because it is not obvious: overflow on the ROOT propagates to
   the viewport. While html is `visible`, it is BODY's `overflow-x: hidden` that
   propagates, and body itself is then treated as visible - so `position: sticky`
   still resolves against the viewport. The moment html gets its own overflow,
   html's value propagates instead and body's `hidden` starts applying to the
   BODY BOX. Body becomes an overflow container, sticky descendants bind to it
   rather than the viewport, and every pinned section unsticks - leaving the full
   height of its scroll runway as blank space (1260px, in the case Jase saw).

   The guard was also unnecessary: body's propagated `hidden` already prevents
   horizontal scrolling. The 12px I measured was scrollWidth overhang, which is
   not the same thing as being able to scroll. */

/* Says what the coloured list below actually is. */
.free-list-label {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  color: rgba(0, 0, 0, .55);
  font-family: var(--headline);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 900;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

/* Alice redesign step 02: keep the experiment isolated to the homepage. */
.alice-homepage {
  --headline: "Alice Manrope", "Figtree", Arial, sans-serif;
}

.alice-homepage .hero {
  background: #f5f5f7;
  color: #1d1d1f;
}

.alice-homepage .nav-shell {
  color: #1d1d1f;
}

.alice-homepage .header-login:hover {
  background: rgba(0, 0, 0, .055);
}

.alice-homepage .hero h1.hero-headline {
  color: #1d1d1f;
  font-weight: 800;
}

.alice-homepage .hero h1.hero-liquid-title,
.alice-homepage .site-header .brand-liquid,
.alice-homepage .free-eyebrow,
.alice-homepage .steps-outcome h3,
.alice-homepage .feature-mobile-active-copy h2,
.alice-homepage .free-group,
.alice-homepage .free-list-label {
  font-weight: 800;
}

.alice-homepage .hero-job-roll {
  color: #515154;
}

.alice-homepage .finder-kicker,
.alice-homepage .business-finder-note {
  color: rgba(29, 29, 31, .64);
}

.alice-homepage .business-finder-shell {
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
}

.alice-homepage .hero-scroll-cue {
  color: #1d1d1f;
}

.alice-homepage .hero-scroll-cue::before {
  border-color: rgba(29, 29, 31, .5);
  background: rgba(255, 255, 255, .74);
}

.alice-homepage .hero-scroll-cue:focus-visible {
  outline-color: #1d1d1f;
}

/* Alice redesign step 03: off-white feature story and restored carousel. */
.alice-homepage .feature-story.grid-yellow,
.alice-homepage .feature-mobile-list,
.alice-homepage .feature-mobile-shell {
  background: #f5f5f7;
}

.alice-homepage .feature-slide h2,
.alice-homepage .feature-mobile-active-copy h2 {
  font-weight: 800;
}

@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  .alice-homepage .feature-mobile-shell {
    padding-top: 88px;
  }

  .alice-homepage .feature-mobile-active-copy {
    margin: 0 auto 24px;
  }
}

/* Alice redesign step 08: the phone carousel is 15% smaller, with both adjacent
   cards peeking inside a hard-clipped stage. The later FREE owner photo also
   clips its animated zoom at its own sticky panel; that photo was the 12-13px
   document-width leak that let iPhone Safari pan the whole page sideways. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  .alice-homepage .feature-mobile-stage {
    --alice-mobile-feature-card-width: min(357px, calc(85vw - 44.2px));
    height: min(578px, calc(132.8125vw - 49.0625px));
    overflow: hidden;
    overflow: clip;
  }

  .alice-homepage .feature-mobile-chapter {
    width: var(--alice-mobile-feature-card-width);
  }

  .alice-homepage .social-sticky {
    overflow: hidden;
    overflow: clip;
    contain: paint;
  }
}

/* Alice redesign step 04: one restrained Bloub replaces the “o” in Front. */
.alice-homepage .intro-assistant-heading {
  font-weight: 800;
}

.alice-homepage .intro-heading-strong,
.alice-homepage .intro-heading-rest {
  display: block;
}

.alice-homepage .intro-heading-strong {
  font-weight: 800;
}

.alice-homepage .intro-heading-rest {
  font-weight: 800;
}

.alice-homepage .intro-blob-letter {
  display: inline-block;
  width: .76em;
  height: .76em;
  margin: 0 .015em;
  contain: layout paint;
  line-height: 0;
  vertical-align: -.055em;
}

.alice-homepage .intro-blob-avatar {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.alice-homepage .intro-mascot-creature {
  transform-box: view-box;
  transform-origin: center;
  animation: intro-mascot-jiggle 5.6s ease-in-out infinite;
}

.alice-homepage .intro-mascot-body {
  fill: #8b5cf6;
  animation: intro-mascot-body-morph 6.8s ease-in-out infinite;
}

.alice-homepage .intro-mascot-gaze {
  transform-origin: 0 0;
  animation: intro-mascot-gaze 8.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.alice-homepage .intro-mascot-eye {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  scale: 1.6 1.04;
  ry: 22px;
  animation:
    intro-mascot-eye-shape 8.4s linear infinite,
    intro-mascot-eye-corners 8.4s linear infinite;
}

.alice-homepage .intro-mascot-mouth {
  fill: none;
  stroke: #fff;
  stroke-width: 5.5;
  stroke-linecap: round;
}

@keyframes intro-mascot-gaze {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  6% { transform: translate3d(9px, -8px, 0) rotate(-3deg); }
  16% { transform: translate3d(29px, -27px, 0) rotate(-9deg); }
  25% { transform: translate3d(-4px, -6px, 0) rotate(-1deg); }
  32% { transform: translate3d(-30px, 4px, 0) rotate(6deg); }
  46% { transform: translate3d(1px, 3px, 0) rotate(0deg); }
  60% { transform: translate3d(6px, -34px, 0) rotate(-5deg); }
  68% { transform: translate3d(20px, -12px, 0) rotate(-2deg); }
  72% { transform: translate3d(2px, 1px, 0) rotate(0deg); }
  82% { transform: translate3d(-18px, -12px, 0) rotate(3deg); }
  89% { transform: translate3d(6px, -16px, 0) rotate(-1deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes intro-mascot-eye-shape {
  0% { scale: 1.6 1.04; }
  6% { scale: 1.55 1.06; }
  16% { scale: 1.24 1.32; }
  25% { scale: 1.5 1.05; }
  32% { scale: 1.28 1.3; }
  46% { scale: 1.62 1.04; }
  60% { scale: 1.26 1.34; }
  68% { scale: 1.55 1.02; }
  71.15% { scale: 1.5 .035; }
  72.4% { scale: 1.58 1.03; }
  82% { scale: 1.45 1.1; }
  89% { scale: 1.5 1.02; }
  90% { scale: 1.45 .05; }
  91.2% { scale: 1.55 1.03; }
  100% { scale: 1.6 1.04; }
}

@keyframes intro-mascot-eye-corners {
  0% { ry: 22px; }
  6% { ry: 20px; }
  16% { ry: 14px; }
  25% { ry: 20px; }
  32% { ry: 14px; }
  46% { ry: 22px; }
  60% { ry: 14px; }
  68% { ry: 20px; }
  72.4% { ry: 22px; }
  82% { ry: 18px; }
  89%, 100% { ry: 22px; }
}

@keyframes intro-mascot-body-morph {
  0%, 100% { d: path("M 0 -100 C 58 -103 99 -57 101 0 C 104 59 57 98 0 101 C -58 104 -101 59 -99 0 C -98 -58 -56 -99 0 -100 Z"); }
  24% { d: path("M 2 -99 C 61 -96 103 -55 99 3 C 96 61 54 104 -4 100 C -64 96 -104 54 -101 -5 C -98 -63 -55 -105 2 -99 Z"); }
  51% { d: path("M -3 -103 C 55 -106 98 -62 103 -3 C 107 55 62 99 3 98 C -55 99 -99 64 -103 5 C -106 -53 -62 -98 -3 -103 Z"); }
  76% { d: path("M 1 -98 C 63 -101 101 -54 98 6 C 95 64 50 101 -8 102 C -66 103 -101 55 -98 -4 C -95 -62 -51 -99 1 -98 Z"); }
}

@keyframes intro-mascot-jiggle {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  20% { transform: translate3d(-1px, 1px, 0) scale(1.012, .99) rotate(-.4deg); }
  45% { transform: translate3d(1px, -1px, 0) scale(.99, 1.014) rotate(.1deg); }
  70% { transform: translate3d(-.5px, 0, 0) scale(1.008, .994) rotate(.35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .intro-mascot-creature,
  .alice-homepage .intro-mascot-body,
  .alice-homepage .intro-mascot-gaze,
  .alice-homepage .intro-mascot-eye {
    animation: none;
  }
}

/* Alice redesign step 05: concrete trade-business copy and a solid demo CTA. */
.alice-homepage .intro-assistant-copy {
  max-width: 1040px;
  text-wrap: balance;
}

.alice-homepage .intro-see-below {
  display: block;
  margin-top: 22px;
  font-weight: 700;
}

.alice-homepage .call-playback .call-demo-button,
.alice-homepage .call-playback .call-demo-button:hover,
.alice-homepage .call-playback .call-demo-button:focus-visible,
.alice-homepage .call-playback .call-demo-button:active {
  border-color: #00a63f;
  background: #00a63f;
  background-color: #00a63f;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.alice-homepage .call-demo-button .call-demo-label {
  position: relative;
  filter: none;
}

/* Alice redesign step 07: shorter wordmark and one unbranded laptop per setup step. */
.alice-homepage .site-header .brand-liquid {
  font-size: 15px;
}

.alice-homepage .step-laptop {
  position: relative;
  width: 100%;
  margin: 0 0 34px;
  transform-origin: 50% 100%;
}

.alice-homepage .step-laptop-lid {
  position: relative;
  z-index: 2;
  padding: 13px 10px 10px;
  border: 1px solid #37373a;
  border-radius: 20px 20px 8px 8px;
  background: linear-gradient(145deg, #29292c 0%, #111113 60%, #050506 100%);
  box-shadow:
    0 22px 38px rgba(0, 0, 0, .15),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

.alice-homepage .step-laptop-camera {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #45454a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75);
  transform: translateX(-50%);
}

.alice-homepage .step-laptop-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 11px 11px 4px 4px;
  background: #f5f5f7;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.alice-homepage .step-laptop-screen::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  background: linear-gradient(112deg, transparent 33%, rgba(255, 255, 255, .18) 49%, transparent 65%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-115%);
}

.alice-homepage .step-laptop .step-visual {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.alice-homepage .step-laptop-base {
  position: relative;
  z-index: 3;
  width: 108%;
  height: 19px;
  margin: -2px -4% 0;
  border: 1px solid #aaaeb4;
  border-top-color: #d9dce0;
  border-radius: 3px 3px 14px 14px;
  background: linear-gradient(180deg, #f4f5f6 0%, #c6c9ce 48%, #969aa1 100%);
  box-shadow:
    0 10px 16px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  clip-path: polygon(3% 0, 97% 0, 100% 68%, 97% 100%, 3% 100%, 0 68%);
}

.alice-homepage .step-laptop-notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 22%;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: rgba(85, 88, 94, .28);
  transform: translateX(-50%);
}

.alice-homepage .steps-grid.is-visible .step-laptop {
  animation: step-laptop-arrive 640ms cubic-bezier(.16, 1, .3, 1) both;
}

.alice-homepage .steps-grid.is-visible > article:nth-child(2) .step-laptop {
  animation-delay: 110ms;
}

.alice-homepage .steps-grid.is-visible > article:nth-child(3) .step-laptop {
  animation-delay: 220ms;
}

.alice-homepage .steps-grid.is-visible .step-laptop .step-visual {
  animation: step-laptop-screen-settle 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.alice-homepage .steps-grid.is-visible > article:nth-child(2) .step-visual {
  animation-delay: 110ms;
}

.alice-homepage .steps-grid.is-visible > article:nth-child(3) .step-visual {
  animation-delay: 220ms;
}

.alice-homepage .steps-grid.is-visible .step-laptop-screen::after {
  animation: step-laptop-sheen 820ms cubic-bezier(.16, 1, .3, 1) 260ms both;
}

.alice-homepage .steps-grid.is-visible > article:nth-child(2) .step-laptop-screen::after {
  animation-delay: 370ms;
}

.alice-homepage .steps-grid.is-visible > article:nth-child(3) .step-laptop-screen::after {
  animation-delay: 480ms;
}

@keyframes step-laptop-arrive {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes step-laptop-screen-settle {
  from {
    opacity: .72;
    transform: scale(.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes step-laptop-sheen {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }
  32% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@media (min-width: 1101px) {
  .alice-homepage .steps-grid > article:not(:last-child)::after {
    top: 124px;
  }
}

@media (max-width: 760px) {
  .alice-homepage .steps-grid > article {
    border: 0;
    background: transparent;
  }

  .alice-homepage .step-laptop {
    width: calc(100% - 20px);
    margin: 0 auto 18px;
  }

  .alice-homepage .step-laptop-lid {
    padding: 11px 8px 8px;
    border-radius: 16px 16px 7px 7px;
  }

  .alice-homepage .step-laptop-camera {
    top: 4px;
    width: 3px;
    height: 3px;
  }

  .alice-homepage .step-laptop-screen {
    border-radius: 8px 8px 3px 3px;
  }

  .alice-homepage .step-laptop-base {
    width: 106%;
    height: 15px;
    margin-right: -3%;
    margin-left: -3%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .steps-grid.is-visible .step-laptop,
  .alice-homepage .steps-grid.is-visible .step-laptop .step-visual,
  .alice-homepage .steps-grid.is-visible .step-laptop-screen::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Alice redesign step 09: the How It Works section uses one calm onboarding
   moment per laptop. The old checker, yellow training scene, ringing card and
   long forwarding switch remain unused historical CSS above; these names are
   deliberately isolated so those older animations cannot leak into r100. */
.alice-homepage .section-sticker-bloub {
  width: 112px;
  height: 112px;
  margin-bottom: 26px;
}

.alice-homepage .section-sticker-bloub svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.alice-homepage .how-bloub-character,
.alice-homepage .how-bloub-eyes {
  transform-box: fill-box;
  transform-origin: center;
}

.alice-homepage .how-bloub-character {
  animation: how-bloub-breathe 4.8s cubic-bezier(.45, 0, .25, 1) infinite;
}

.alice-homepage .how-bloub-body {
  fill: #8b5cf6;
}

.alice-homepage .how-bloub-eyes {
  fill: #fff;
  animation: how-bloub-blink 5.4s ease-in-out infinite;
}

@keyframes how-bloub-breathe {
  0%, 100% { transform: translateY(1px) rotate(-1.5deg) scale(.97, 1.03); }
  45% { transform: translateY(-3px) rotate(1deg) scale(1.025, .98); }
  76% { transform: translateY(0) rotate(-.4deg) scale(.995, 1.01); }
}

@keyframes how-bloub-blink {
  0%, 43%, 47%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(.12); }
}

.alice-homepage .steps > h2 {
  margin-bottom: 0;
}

.alice-homepage .steps-grid {
  margin-top: 76px;
  gap: 56px;
}

.alice-homepage .step-card-heading {
  display: grid;
  min-height: 74px;
  margin-bottom: 22px;
  align-content: start;
  justify-items: center;
  text-align: center;
}

.alice-homepage .step-card-heading > span {
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.alice-homepage .step-card-heading h3 {
  margin: 8px 0 0;
  color: #1d1d1f;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  text-wrap: balance;
}

.alice-homepage .steps-grid > article > p {
  max-width: 360px;
  margin: 0 auto;
  color: #515154;
  font-size: 17px;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.alice-homepage .step-laptop {
  margin-bottom: 26px;
}

/* Thin and equal display rim. The base is a rounded rectangle instead of the
   old pointed polygon, so both ends terminate symmetrically. */
.alice-homepage .step-laptop-lid {
  padding: 7px;
  border: 1px solid #2c2c2e;
  border-radius: 14px 14px 4px 4px;
  background: #111113;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.alice-homepage .step-laptop-camera {
  top: 2px;
  width: 2px;
  height: 2px;
  background: #505056;
  box-shadow: none;
}

.alice-homepage .step-laptop-screen {
  border-radius: 8px 8px 2px 2px;
  box-shadow: none;
}

.alice-homepage .step-laptop-screen::after {
  content: none;
  animation: none;
}

.alice-homepage .step-laptop-base {
  width: 104%;
  height: 11px;
  margin: -1px -2% 0;
  border: 1px solid #b7bac0;
  border-top-color: #e0e2e5;
  border-radius: 2px 2px 10px 10px;
  background: linear-gradient(180deg, #f4f5f6 0%, #c7cacf 55%, #9da1a8 100%);
  box-shadow: 0 7px 12px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .88);
  clip-path: none;
}

.alice-homepage .step-laptop-notch {
  width: 16%;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: rgba(80, 83, 89, .22);
}

.alice-homepage .step-demo {
  container-type: inline-size;
  isolation: isolate;
  font-family: "Alice Manrope", "Figtree", Arial, sans-serif;
}

.alice-homepage .hiw-demo-label {
  color: #6e6e73;
  font-size: clamp(8px, 3cqw, 12px);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
}

/* Step 1 — one action, then the real onboarding training language. */
.alice-homepage .step-demo-find {
  display: grid;
  padding: clamp(18px, 7cqw, 32px);
  place-items: center;
  background: #f5f5f7;
  color: #1d1d1f;
}

.alice-homepage .hiw-find-entry,
.alice-homepage .hiw-training {
  display: grid;
  width: min(84%, 410px);
  grid-area: 1 / 1;
}

.alice-homepage .hiw-find-entry {
  gap: clamp(9px, 3cqw, 14px);
  opacity: 1;
}

.alice-homepage .hiw-business-field {
  display: grid;
  min-height: clamp(38px, 13cqw, 56px);
  padding: 0 clamp(12px, 4cqw, 18px);
  grid-template-columns: clamp(15px, 5cqw, 21px) minmax(0, 1fr);
  gap: clamp(8px, 3cqw, 13px);
  align-items: center;
  border: 1px solid #d2d2d7;
  border-radius: 999px;
  background: #fff;
  color: #515154;
  font-size: clamp(10px, 3.5cqw, 15px);
}

.alice-homepage .hiw-business-field svg {
  width: 100%;
  fill: none;
  stroke: #86868b;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.alice-homepage .hiw-business-field span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alice-homepage .step-demo-cta {
  display: flex;
  min-height: clamp(42px, 14cqw, 60px);
  padding: 0 clamp(16px, 5cqw, 24px);
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--alice-main-btn-gradient);
  color: #fff;
  box-shadow: var(--alice-main-btn-shadow);
  font: 600 clamp(8px, 2.8cqw, 12px)/1 var(--mono);
  letter-spacing: .035em;
}

.alice-homepage .step-demo-cta b {
  font: 400 clamp(13px, 4cqw, 18px)/1 Arial, sans-serif;
}

.alice-homepage .hiw-training {
  gap: clamp(8px, 2.5cqw, 12px);
  opacity: 0;
  transform: translateY(6px);
}

.alice-homepage .hiw-training-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.alice-homepage .hiw-training-heading span {
  color: #1d1d1f;
  font-size: clamp(9px, 3cqw, 12px);
  font-weight: 800;
  letter-spacing: .09em;
}

.alice-homepage .hiw-training-heading strong {
  color: #2168f3;
  font-size: clamp(15px, 5.5cqw, 24px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.alice-homepage .hiw-training-track {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #d2d2d7;
}

.alice-homepage .hiw-training-track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #2168f3;
  transform: scaleX(0);
  transform-origin: left center;
}

.alice-homepage .hiw-training-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.alice-homepage .hiw-training-list li {
  display: flex;
  min-height: clamp(26px, 8.5cqw, 38px);
  gap: clamp(8px, 3cqw, 12px);
  align-items: center;
  border-bottom: 1px solid #e5e5ea;
  color: #3a3a3c;
  font-size: clamp(9px, 3cqw, 13px);
  font-weight: 650;
  opacity: 0;
  transform: translateY(4px);
}

.alice-homepage .hiw-training-list li:last-child {
  border-bottom: 0;
}

.alice-homepage .hiw-training-list li > i {
  display: grid;
  width: clamp(15px, 5cqw, 21px);
  height: clamp(15px, 5cqw, 21px);
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #2168f3;
  color: #fff;
  font: 700 clamp(8px, 2.4cqw, 10px)/1 Arial, sans-serif;
  font-style: normal;
}

.alice-homepage .steps-grid.is-visible .hiw-find-entry {
  animation: hiw-entry-exit .48s cubic-bezier(.4, 0, .2, 1) 2.15s both;
}

.alice-homepage .steps-grid.is-visible .step-demo-cta {
  animation: hiw-cta-press .34s cubic-bezier(.4, 0, .2, 1) 1.52s both;
}

.alice-homepage .steps-grid.is-visible .hiw-training {
  animation: hiw-training-enter .52s cubic-bezier(.16, 1, .3, 1) 2.35s both;
}

.alice-homepage .steps-grid.is-visible .hiw-training-track i {
  animation: hiw-training-fill 1.8s cubic-bezier(.22, 1, .36, 1) 2.9s both;
}

.alice-homepage .steps-grid.is-visible .hiw-training-list li:nth-child(1) {
  animation: hiw-row-resolve .48s cubic-bezier(.16, 1, .3, 1) 3.35s both;
}

.alice-homepage .steps-grid.is-visible .hiw-training-list li:nth-child(2) {
  animation: hiw-row-resolve .48s cubic-bezier(.16, 1, .3, 1) 3.95s both;
}

.alice-homepage .steps-grid.is-visible .hiw-training-list li:nth-child(3) {
  animation: hiw-row-resolve .48s cubic-bezier(.16, 1, .3, 1) 4.55s both;
}

@keyframes hiw-cta-press {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.965); }
}

@keyframes hiw-entry-exit {
  to { opacity: 0; transform: translateY(-5px); }
}

@keyframes hiw-training-enter {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hiw-training-fill {
  to { transform: scaleX(1); }
}

@keyframes hiw-row-resolve {
  to { opacity: 1; transform: translateY(0); }
}

/* Step 2 — the approved onboarding night scene, adapted to a tiny display with
   no WebGL dependency. Internal fields move; the circle itself stays grounded. */
.alice-homepage .step-demo-call {
  display: grid;
  padding: clamp(16px, 6cqw, 28px);
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(7px, 2.3cqw, 11px);
  place-items: center;
  background: #0d1226;
  color: #f7f7fb;
}

.alice-homepage .step-demo-call .hiw-demo-label {
  color: #b5a4ff;
}

.alice-homepage .hiw-voice-orb {
  position: relative;
  isolation: isolate;
  width: clamp(74px, 31cqw, 126px);
  aspect-ratio: 1;
  overflow: hidden;
  align-self: end;
  border-radius: 50%;
  background:
    radial-gradient(circle at 21% 60%, rgba(244, 183, 197, .92) 0 18%, transparent 51%),
    radial-gradient(circle at 73% 58%, rgba(126, 187, 242, .9) 0 19%, transparent 55%),
    radial-gradient(circle at 52% 14%, rgba(233, 143, 207, .84) 0 15%, transparent 49%),
    linear-gradient(145deg, #9887dd 0%, #c79cdf 51%, #8179d2 100%);
}

.alice-homepage .hiw-voice-orb::before {
  position: absolute;
  z-index: 0;
  inset: -28%;
  border-radius: 44%;
  background:
    radial-gradient(circle at 24% 35%, rgba(232, 222, 255, .98) 0 8%, transparent 32%),
    radial-gradient(circle at 74% 29%, rgba(78, 151, 255, .94) 0 11%, transparent 34%),
    radial-gradient(circle at 31% 74%, rgba(85, 64, 221, .95) 0 20%, transparent 47%);
  content: "";
  filter: blur(14px) saturate(1.02);
  opacity: .78;
}

.alice-homepage .hiw-voice-orb i {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(16px);
  mix-blend-mode: screen;
  opacity: .58;
}

.alice-homepage .hiw-voice-orb i:nth-child(1) { top: 6%; left: -18%; width: 72%; height: 72%; background: #eeb1c9; }
.alice-homepage .hiw-voice-orb i:nth-child(2) { top: -12%; right: -14%; width: 66%; height: 66%; background: #83bdf0; }
.alice-homepage .hiw-voice-orb i:nth-child(3) { bottom: -25%; left: 16%; width: 76%; height: 76%; background: #b89add; }
.alice-homepage .hiw-voice-orb i:nth-child(4) { top: 27%; left: 31%; width: 42%; height: 42%; background: #f3e8f5; }

.alice-homepage .steps-grid.is-visible .hiw-voice-orb::before {
  animation: hiw-orb-turn 9s linear infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-voice-orb i:nth-child(1) { animation: hiw-orb-drift-a 4.4s ease-in-out infinite alternate; }
.alice-homepage .steps-grid.is-visible .hiw-voice-orb i:nth-child(2) { animation: hiw-orb-drift-b 5.2s ease-in-out infinite alternate; }
.alice-homepage .steps-grid.is-visible .hiw-voice-orb i:nth-child(3) { animation: hiw-orb-drift-a 5.8s ease-in-out infinite alternate-reverse; }
.alice-homepage .steps-grid.is-visible .hiw-voice-orb i:nth-child(4) { animation: hiw-orb-drift-b 3.8s ease-in-out infinite alternate; }

@keyframes hiw-orb-turn {
  to { transform: rotate(360deg) scale(1.03); }
}

@keyframes hiw-orb-drift-a {
  from { transform: translate3d(-3%, -2%, 0) scale(.92); }
  to { transform: translate3d(20%, 14%, 0) scale(1.15); }
}

@keyframes hiw-orb-drift-b {
  from { transform: translate3d(3%, -4%, 0) scale(1.08); }
  to { transform: translate3d(-18%, 17%, 0) scale(.9); }
}

.alice-homepage .hiw-voice-meter {
  display: flex;
  height: clamp(13px, 4cqw, 18px);
  gap: clamp(2px, .9cqw, 4px);
  align-items: center;
}

.alice-homepage .hiw-voice-meter i {
  width: clamp(2px, .7cqw, 3px);
  height: 100%;
  border-radius: 999px;
  background: #a58cff;
  transform: scaleY(.28);
}

.alice-homepage .steps-grid.is-visible .hiw-voice-meter i {
  animation: hiw-voice-level 1.15s ease-in-out infinite alternate;
}

.alice-homepage .hiw-voice-meter i:nth-child(2),
.alice-homepage .hiw-voice-meter i:nth-child(6) { animation-delay: -.48s !important; }
.alice-homepage .hiw-voice-meter i:nth-child(3),
.alice-homepage .hiw-voice-meter i:nth-child(5) { animation-delay: -.82s !important; }
.alice-homepage .hiw-voice-meter i:nth-child(4) { animation-delay: -.24s !important; }

@keyframes hiw-voice-level {
  0% { transform: scaleY(.24); opacity: .56; }
  100% { transform: scaleY(.9); opacity: 1; }
}

.alice-homepage .hiw-voice-state {
  color: #c4c7d5;
  font-size: clamp(9px, 3.2cqw, 13px);
  font-weight: 650;
}

/* Step 3 — one compact native-scale switch, then a short confirmation. */
.alice-homepage .step-demo-forward {
  display: grid;
  padding: clamp(18px, 7cqw, 34px);
  place-items: center;
  background: #f5f5f7;
  color: #1d1d1f;
}

.alice-homepage .hiw-forward-card {
  display: grid;
  width: min(84%, 410px);
  padding: clamp(14px, 5cqw, 22px);
  gap: clamp(10px, 3.3cqw, 15px);
  border: 1px solid #d2d2d7;
  border-radius: clamp(12px, 4cqw, 18px);
  background: #fff;
}

.alice-homepage .hiw-forward-row {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.alice-homepage .hiw-forward-row > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.alice-homepage .hiw-forward-row strong {
  font-size: clamp(11px, 3.8cqw, 16px);
  font-weight: 750;
}

.alice-homepage .hiw-forward-row small {
  color: #6e6e73;
  font-size: clamp(8px, 2.8cqw, 12px);
}

.alice-homepage .hiw-forward-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex: 0 0 44px;
  border-radius: 999px;
  background: #d2d2d7;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.alice-homepage .hiw-forward-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
  transform: translateX(0);
}

.alice-homepage .hiw-forward-confirm {
  display: flex;
  min-height: 24px;
  padding-top: clamp(9px, 3cqw, 13px);
  gap: 8px;
  align-items: center;
  border-top: 1px solid #e5e5ea;
  color: #3a3a3c;
  font-size: clamp(8px, 2.8cqw, 12px);
  font-weight: 650;
  opacity: 0;
  transform: translateY(4px);
}

.alice-homepage .hiw-forward-confirm i {
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border-radius: 50%;
  background: #2168f3;
  color: #fff;
  font: 700 9px/1 Arial, sans-serif;
  font-style: normal;
}

.alice-homepage .steps-grid.is-visible .hiw-forward-switch {
  animation: hiw-switch-track .42s ease-out 1.15s both;
}

.alice-homepage .steps-grid.is-visible .hiw-forward-switch i {
  animation: hiw-switch-knob .42s cubic-bezier(.16, 1, .3, 1) 1.15s both;
}

.alice-homepage .steps-grid.is-visible .hiw-forward-confirm {
  animation: hiw-forward-confirm .48s cubic-bezier(.16, 1, .3, 1) 1.65s both;
}

@keyframes hiw-switch-track {
  to { background: #2168f3; }
}

@keyframes hiw-switch-knob {
  to { transform: translateX(18px); }
}

@keyframes hiw-forward-confirm {
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1101px) {
  .alice-homepage .steps-grid > article:not(:last-child)::after {
    top: 190px;
    right: -43px;
    width: 30px;
    height: auto;
    background: none;
    clip-path: none;
    color: #86868b;
    content: "→";
    font: 400 28px/1 Arial, sans-serif;
  }
}

@media (max-width: 1100px) {
  .alice-homepage .steps-grid > article:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -48px;
    width: auto;
    height: auto;
    background: none;
    clip-path: none;
    color: #86868b;
    content: "↓";
    font: 400 25px/1 Arial, sans-serif;
    translate: 50% 0;
  }
}

@media (max-width: 760px) {
  .alice-homepage .section-sticker-bloub {
    width: 88px;
    height: 88px;
    margin-bottom: 18px;
  }

  .alice-homepage .steps-grid {
    margin-top: 44px;
    gap: 62px;
  }

  .alice-homepage .step-card-heading {
    min-height: 0;
    margin-bottom: 18px;
  }

  .alice-homepage .step-card-heading > span {
    font-size: 14px;
  }

  .alice-homepage .step-card-heading h3 {
    margin-top: 7px;
    font-size: 25px;
  }

  .alice-homepage .step-laptop {
    width: calc(100% - 12px);
    margin-bottom: 20px;
  }

  .alice-homepage .step-laptop-lid {
    padding: 6px;
    border-radius: 12px 12px 3px 3px;
  }

  .alice-homepage .step-laptop-camera {
    top: 2px;
    width: 2px;
    height: 2px;
  }

  .alice-homepage .step-laptop-screen {
    border-radius: 7px 7px 2px 2px;
  }

  .alice-homepage .step-laptop-base {
    width: 104%;
    height: 10px;
    margin-right: -2%;
    margin-left: -2%;
  }

  .alice-homepage .steps-grid > article > p {
    max-width: 310px;
    margin: 0 auto;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .how-bloub-character,
  .alice-homepage .how-bloub-eyes,
  .alice-homepage .steps-grid.is-visible .hiw-find-entry,
  .alice-homepage .steps-grid.is-visible .step-demo-cta,
  .alice-homepage .steps-grid.is-visible .hiw-training,
  .alice-homepage .steps-grid.is-visible .hiw-training-track i,
  .alice-homepage .steps-grid.is-visible .hiw-training-list li,
  .alice-homepage .steps-grid.is-visible .hiw-voice-orb::before,
  .alice-homepage .steps-grid.is-visible .hiw-voice-orb i,
  .alice-homepage .steps-grid.is-visible .hiw-voice-meter i,
  .alice-homepage .steps-grid.is-visible .hiw-forward-switch,
  .alice-homepage .steps-grid.is-visible .hiw-forward-switch i,
  .alice-homepage .steps-grid.is-visible .hiw-forward-confirm {
    animation: none;
  }

  .alice-homepage .hiw-find-entry {
    opacity: 0;
  }

  .alice-homepage .hiw-training,
  .alice-homepage .hiw-training-list li,
  .alice-homepage .hiw-forward-confirm {
    opacity: 1;
    transform: none;
  }

  .alice-homepage .hiw-training-track i {
    transform: scaleX(1);
  }

  .alice-homepage .hiw-forward-switch {
    background: #2168f3;
  }

  .alice-homepage .hiw-forward-switch i {
    transform: translateX(18px);
  }

  .alice-homepage .hiw-voice-meter i {
    transform: scaleY(.55);
  }
}

/* Alice redesign step 10: keep the hero and three setup loops calm, scoped and
   compositor-friendly. The existing scroll class owns the header swap and the
   existing steps observer owns when the laptop motion starts. */
.alice-homepage .hero-job-roll {
  font-size: clamp(16px, 1.6vw, 22.4px);
}

.alice-homepage .hero-job-word {
  white-space: nowrap;
}

.alice-homepage .hero-job-bloub {
  --hero-bloub-eye-x: 0px;
  --hero-bloub-eye-y: 0px;
  --hero-bloub-tilt: 0deg;
  display: inline-grid;
  width: .66em;
  height: .66em;
  margin: 0 .015em;
  vertical-align: -.055em;
  place-items: center;
}

.alice-homepage .hero-job-bloub svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.alice-homepage .hero-job-bloub-character,
.alice-homepage .hero-job-bloub-eyes,
.alice-homepage .hero-job-bloub-eye-pair {
  transform-box: fill-box;
  transform-origin: center;
}

.alice-homepage .hero-job-bloub-character {
  animation: hero-job-bloub-breathe 4.2s cubic-bezier(.45, 0, .25, 1) infinite;
}

.alice-homepage .hero-job-bloub-body {
  fill: #8b5cf6;
}

.alice-homepage .hero-job-bloub-eyes {
  fill: #fff;
  animation: hero-job-bloub-gaze 9.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

.alice-homepage .hero-job-bloub-eye-pair {
  transform: translate(var(--hero-bloub-eye-x), var(--hero-bloub-eye-y));
}

.alice-homepage .hero-job-bloub.is-tracking .hero-job-bloub-character,
.alice-homepage .hero-job-bloub.is-returning .hero-job-bloub-character,
.alice-homepage .hero-job-bloub.is-booped .hero-job-bloub-character {
  animation: none;
}

.alice-homepage .hero-job-bloub.is-tracking .hero-job-bloub-character {
  transform: rotate(var(--hero-bloub-tilt)) scale(.985, 1.015);
  transition: transform 90ms linear;
  will-change: transform;
}

.alice-homepage .hero-job-bloub.is-tracking .hero-job-bloub-eyes,
.alice-homepage .hero-job-bloub.is-returning .hero-job-bloub-eyes,
.alice-homepage .hero-job-bloub.is-booped .hero-job-bloub-eyes {
  animation: none;
}

.alice-homepage .hero-job-bloub.is-tracking .hero-job-bloub-eye-pair {
  transition: transform 70ms linear;
  will-change: transform;
}

.alice-homepage .hero-job-bloub.is-returning .hero-job-bloub-character,
.alice-homepage .hero-job-bloub.is-returning .hero-job-bloub-eye-pair {
  transform: translate(0, 0) rotate(0) scale(1);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.alice-homepage .hero-job-bloub.is-booped .hero-job-bloub-character {
  transform: scale(1.06, .91);
  transition: transform 75ms cubic-bezier(.4, 0, .2, 1);
}

.alice-homepage .hero-job-bloub.is-booped .hero-job-bloub-eye-pair {
  transform: translate(var(--hero-bloub-eye-x), var(--hero-bloub-eye-y)) scaleY(.08);
  transition: transform 65ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes hero-job-bloub-breathe {
  0%, 100% { transform: rotate(-1.5deg) scale(.96, 1.035); }
  48% { transform: rotate(1deg) scale(1.035, .97); }
  76% { transform: rotate(-.4deg) scale(.99, 1.01); }
}

@keyframes hero-job-bloub-gaze {
  0%, 10%, 19%, 100% { transform: translate(0, 0) scaleY(1); }
  12% { transform: translate(0, 0) scaleY(.08); }
  14% { transform: translate(0, 0) scaleY(1); }
  27%, 36% { transform: translate(0, 12px) scaleY(1); }
  44% { transform: translate(0, 0) scaleY(1); }
  54%, 62% { transform: translate(-12px, 2px) scaleY(1); }
  72%, 80% { transform: translate(12px, 2px) scaleY(1); }
  87%, 89% { transform: translate(0, 0) scaleY(1); }
  90.5% { transform: translate(0, 0) scaleY(.08); }
  92% { transform: translate(0, 0) scaleY(1); }
}

/* The old animated name remains at the top of the hero. Once the same class
   reveals the sticky CTA, the compact Alice app mark takes its place. */
.alice-homepage .site-header .brand-liquid {
  position: relative;
  min-height: 36px;
  align-items: center;
}

.alice-homepage .brand-liquid-prefix,
.alice-homepage .brand-liquid-role {
  transition: opacity .24s ease, transform .24s cubic-bezier(.22, 1, .36, 1), visibility .24s;
}

.alice-homepage .brand-scroll-logo {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  opacity: 0;
  transform: translateY(-50%) scale(.84);
  transition: opacity .24s ease, transform .24s cubic-bezier(.22, 1, .36, 1), visibility .24s;
  visibility: hidden;
}

.alice-homepage .site-header.is-past-hero-cta .brand-liquid-prefix,
.alice-homepage .site-header.is-past-hero-cta .brand-liquid-role {
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
}

.alice-homepage .site-header.is-past-hero-cta .brand-scroll-logo {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  visibility: visible;
}

/* A filtered child used to expose its rectangular blend buffer around the orb.
   The paint containment and closest-side mask guarantee a circular boundary. */
.alice-homepage .hiw-voice-orb {
  contain: paint;
  clip-path: circle(calc(50% - 1px) at 50% 50%);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 98%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 98%, transparent 100%);
  transform: translateZ(0);
}

.alice-homepage .hiw-voice-orb i {
  mix-blend-mode: normal;
}

/* Step 1 repeats one readable story: type, press, train, hold, reset. */
.alice-homepage .hiw-business-name {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  clip-path: inset(0 100% 0 0);
}

.alice-homepage .steps-grid.is-visible .hiw-business-name {
  animation: hiw-business-type-loop 8s steps(17, end) infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-find-entry {
  animation: hiw-find-entry-loop 8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.alice-homepage .steps-grid.is-visible .step-demo-cta {
  animation: hiw-cta-loop 8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-training {
  animation: hiw-training-loop 8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-training-track i {
  animation: hiw-training-progress-loop 8s cubic-bezier(.22, 1, .36, 1) infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-training-list li:nth-child(1) {
  animation: hiw-training-row-one 8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-training-list li:nth-child(2) {
  animation: hiw-training-row-two 8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-training-list li:nth-child(3) {
  animation: hiw-training-row-three 8s cubic-bezier(.16, 1, .3, 1) infinite;
}

@keyframes hiw-business-type-loop {
  0%, 4% { clip-path: inset(0 100% 0 0); }
  28%, 84% { clip-path: inset(0 0 0 0); }
  88%, 100% { clip-path: inset(0 100% 0 0); }
}

@keyframes hiw-find-entry-loop {
  0%, 33% { opacity: 1; transform: translateY(0); }
  39%, 84% { opacity: 0; transform: translateY(-5px); }
  90%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes hiw-cta-loop {
  0%, 27%, 35%, 100% { transform: scale(1); }
  31% { transform: scale(.965); }
}

@keyframes hiw-training-loop {
  0%, 35% { opacity: 0; transform: translateY(6px); }
  41%, 82% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes hiw-training-progress-loop {
  0%, 40% { transform: scaleX(0); }
  65%, 84% { transform: scaleX(1); }
  88%, 100% { transform: scaleX(0); }
}

@keyframes hiw-training-row-one {
  0%, 44% { opacity: 0; transform: translateY(4px); }
  50%, 84% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes hiw-training-row-two {
  0%, 51% { opacity: 0; transform: translateY(4px); }
  57%, 84% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes hiw-training-row-three {
  0%, 58% { opacity: 0; transform: translateY(4px); }
  64%, 84% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}

/* Step 3 changes state once per second: on for one beat, off for one beat. */
.alice-homepage .steps-grid.is-visible .hiw-forward-switch {
  animation: hiw-switch-track-loop 2s linear infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-forward-switch i {
  animation: hiw-switch-knob-loop 2s cubic-bezier(.22, 1, .36, 1) infinite;
}

.alice-homepage .steps-grid.is-visible .hiw-forward-confirm {
  animation: hiw-forward-confirm-loop 2s ease-in-out infinite;
}

@keyframes hiw-switch-track-loop {
  0%, 7%, 59%, 100% { background: #d2d2d7; }
  17%, 49% { background: #2168f3; }
}

@keyframes hiw-switch-knob-loop {
  0%, 7%, 59%, 100% { transform: translateX(0); }
  17%, 49% { transform: translateX(18px); }
}

@keyframes hiw-forward-confirm-loop {
  0%, 11%, 57%, 100% { opacity: 0; transform: translateY(4px); }
  21%, 49% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .alice-homepage .hero-job-roll {
    font-size: clamp(13.6px, 3.52vw, 16px);
  }

  .alice-homepage .brand-scroll-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .hero-job-bloub-character,
  .alice-homepage .hero-job-bloub-eyes,
  .alice-homepage .hero-job-bloub-eye-pair,
  .alice-homepage .steps-grid.is-visible .hiw-business-name,
  .alice-homepage .steps-grid.is-visible .hiw-find-entry,
  .alice-homepage .steps-grid.is-visible .step-demo-cta,
  .alice-homepage .steps-grid.is-visible .hiw-training,
  .alice-homepage .steps-grid.is-visible .hiw-training-track i,
  .alice-homepage .steps-grid.is-visible .hiw-training-list li,
  .alice-homepage .steps-grid.is-visible .hiw-forward-switch,
  .alice-homepage .steps-grid.is-visible .hiw-forward-switch i,
  .alice-homepage .steps-grid.is-visible .hiw-forward-confirm {
    animation: none;
  }

  .alice-homepage .hero-job-bloub-character,
  .alice-homepage .hero-job-bloub-eyes,
  .alice-homepage .hero-job-bloub-eye-pair {
    transform: none !important;
    transition: none !important;
  }

  .alice-homepage .brand-liquid-prefix,
  .alice-homepage .brand-liquid-role,
  .alice-homepage .brand-scroll-logo {
    transition: none;
  }

  .alice-homepage .hiw-business-name {
    clip-path: none;
  }

  .alice-homepage .hiw-find-entry {
    opacity: 0;
  }

  .alice-homepage .hiw-training,
  .alice-homepage .hiw-training-list li,
  .alice-homepage .hiw-forward-confirm {
    opacity: 1;
    transform: none;
  }

  .alice-homepage .hiw-training-track i {
    transform: scaleX(1);
  }

  .alice-homepage .hiw-forward-switch {
    background: #2168f3;
  }

  .alice-homepage .hiw-forward-switch i {
    transform: translateX(18px);
  }
}

/* Alice redesign step 11: the Step 2 orb is the byte-locked onboarding WebGL
   Fast Smoke object. Its position is geometric, not shared with the surrounding
   label/meter rows, so tablet line wrapping cannot pull it off centre. */
.alice-homepage .step-demo-call {
  position: relative;
  display: block;
  padding: 0;
}

.alice-homepage .step-demo-call .hiw-demo-label {
  position: absolute;
  z-index: 4;
  top: clamp(16px, 8cqw, 30px);
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  text-align: center;
}

.alice-homepage .hiw-orb-centre {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.alice-homepage .hiw-voice-orb.voice-orb {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: clamp(74px, 31cqw, 126px);
  height: clamp(74px, 31cqw, 126px);
  align-self: auto;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 21% 60%, rgba(244, 183, 197, .92) 0 18%, transparent 51%),
    radial-gradient(circle at 73% 58%, rgba(126, 187, 242, .90) 0 19%, transparent 55%),
    radial-gradient(circle at 52% 14%, rgba(233, 143, 207, .84) 0 15%, transparent 49%),
    linear-gradient(145deg, #9887dd 0%, #c79cdf 51%, #8179d2 100%);
  box-shadow: none;
  transform: translateZ(0);
}

.alice-homepage .hiw-voice-orb.voice-orb .voice-orb-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.alice-homepage .hiw-voice-orb.voice-orb.has-webgl {
  background: transparent;
  box-shadow: none;
}

.alice-homepage .hiw-voice-orb.voice-orb.has-webgl::before,
.alice-homepage .hiw-voice-orb.voice-orb.has-webgl::after {
  content: none;
  animation: none;
}

.alice-homepage .hiw-voice-orb.voice-orb.has-webgl i {
  display: none;
}

.alice-homepage .step-demo-call .hiw-voice-meter {
  position: absolute;
  z-index: 4;
  top: calc(50% + clamp(45px, 17cqw, 72px));
  left: 50%;
  transform: translateX(-50%);
}

.alice-homepage .step-demo-call .hiw-voice-state {
  position: absolute;
  z-index: 4;
  top: calc(50% + clamp(66px, 22cqw, 96px));
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  text-align: center;
}

/* Alice redesign step 12: tablet/desktop phone definition. The outline is a
   paint-only outer rim, so it cannot change the approved phone or scene geometry. */
@media (min-width: 761px) {
  .alice-homepage .feature-phone-stage .demo-phone-screen {
    box-shadow:
      0 0 0 3px #151518,
      0 24px 70px rgba(0, 0, 0, .24);
  }
}

/* A compact, automatic notification stack communicates different customer
   outcomes without turning the section into another marketing card. */
.alice-homepage .steps-outcome {
  isolation: isolate;
  width: min(920px, 100%);
  margin: 0 auto 70px;
  padding: clamp(56px, 8vw, 92px) clamp(18px, 6vw, 64px) clamp(64px, 9vw, 104px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.alice-homepage .steps-outcome h3 {
  margin: 0;
  color: #1d1d1f;
  font-family: "Alice Manrope", "Figtree", Arial, sans-serif;
  font-size: clamp(62px, 8vw, 112px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .92;
}

.alice-homepage .win-job-notification-stack {
  --stack-front: 136px;
  --stack-middle: 82px;
  --stack-rear: 40px;
  position: relative;
  width: min(430px, 100%);
  height: 230px;
  margin: clamp(32px, 5vw, 52px) auto 0;
  isolation: isolate;
  perspective: 900px;
}

.alice-homepage .win-job-notification-stack::before {
  position: absolute;
  z-index: -1;
  inset: 24% 5% -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 46%, rgba(126, 91, 255, .18), transparent 52%),
    radial-gradient(circle at 74% 54%, rgba(51, 164, 255, .14), transparent 52%);
  content: "";
  filter: blur(30px);
  opacity: .55;
  pointer-events: none;
}

.alice-homepage .win-job-notification {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  display: grid;
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  overflow: hidden;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(244, 242, 250, .7));
  box-shadow:
    0 12px 30px rgba(35, 25, 72, .11),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  color: #1d1d1f;
  text-align: left;
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
  opacity: 0;
  transform: translate3d(-50%, var(--stack-front), 0) scale(.98);
  will-change: transform, opacity;
}

.alice-homepage .win-job-notification img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.alice-homepage .win-job-notification-copy {
  min-width: 0;
}

.alice-homepage .win-job-notification-copy strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alice-homepage .win-job-notification time {
  color: #6e6e73;
  font-size: 12px;
  align-self: start;
  line-height: 1.2;
}

.alice-homepage .win-job-notification-copy p {
  overflow: hidden;
  margin: 3px 0 0;
  color: #515154;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alice-homepage .win-job-notification-copy p span {
  font-weight: 600;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification {
  animation: win-job-notification-cycle 10.4s cubic-bezier(.22, 1, .36, 1) infinite backwards;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-sarah {
  animation-delay: 0s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-daniel {
  animation-delay: 2.6s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-mia {
  animation-delay: 5.2s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-jack {
  animation-delay: 7.8s;
}

@keyframes win-job-notification-cycle {
  0% {
    z-index: 4;
    opacity: 0;
    transform: translate3d(-50%, calc(var(--stack-front) + 18px), 0) scale(.98);
  }
  5%, 22% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, var(--stack-front), 0) scale(1);
  }
  27%, 47% {
    z-index: 3;
    opacity: .96;
    transform: translate3d(-50%, var(--stack-middle), -1px) scale(.965);
  }
  52%, 72% {
    z-index: 2;
    opacity: .78;
    transform: translate3d(-50%, var(--stack-rear), -2px) scale(.93);
  }
  77%, 95% {
    z-index: 1;
    opacity: 0;
    transform: translate3d(-50%, 8px, -3px) scale(.9);
  }
  100% {
    z-index: 4;
    opacity: 0;
    transform: translate3d(-50%, calc(var(--stack-front) + 18px), 0) scale(.98);
  }
}

@media (max-width: 760px) {
  .alice-homepage .steps-outcome {
    padding: 54px 18px 70px;
  }

  .alice-homepage .steps-outcome h3 {
    font-size: clamp(48px, 14vw, 60px);
  }

  .alice-homepage .win-job-notification-stack {
    --stack-front: 124px;
    --stack-middle: 74px;
    --stack-rear: 36px;
    width: min(330px, 100%);
    height: 205px;
    margin-top: 28px;
  }

  .alice-homepage .win-job-notification {
    min-height: 68px;
    padding: 8px 10px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 18px;
  }

  .alice-homepage .win-job-notification img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .alice-homepage .win-job-notification-copy strong {
    font-size: 13.5px;
  }

  .alice-homepage .win-job-notification-copy p {
    font-size: 12.5px;
  }

  .alice-homepage .win-job-notification time {
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .win-job-notification-stack {
    display: grid;
    height: auto;
    gap: 8px;
  }

  .alice-homepage .steps-outcome.is-visible .win-job-notification {
    position: relative;
    top: auto;
    left: auto;
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Alice redesign step 18: the three setup laptops and the Win the Job result
   now form one non-looping, single-scene carousel. Nothing peeks around the
   viewport: the swipe hand and one overlaid next control teach the interaction. */
.alice-homepage .steps {
  min-height: 0;
}

.alice-homepage .steps-carousel {
  width: min(1040px, 100%);
  margin: clamp(52px, 7vw, 82px) auto 0;
}

.alice-homepage .steps-carousel-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  outline: none;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  cursor: grab;
}

.alice-homepage .steps-carousel.is-dragging .steps-carousel-viewport {
  cursor: grabbing;
}

.alice-homepage .steps-carousel-viewport:focus-visible {
  border-radius: 24px;
  box-shadow: 0 0 0 3px rgba(33, 104, 243, .28);
}

.alice-homepage .steps-carousel .steps-grid {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 0;
  text-align: center;
  will-change: transform;
  transition: transform .52s cubic-bezier(.22, 1, .36, 1);
}

.alice-homepage .steps-carousel .steps-grid.is-dragging {
  transition: none;
}

.alice-homepage .steps-carousel .steps-carousel-slide {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 clamp(8px, 3vw, 32px) 18px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  transform: scale(.985);
  transition:
    opacity .34s ease,
    transform .46s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 1101px) {
  .alice-homepage .steps-carousel .hiw-voice-orb.voice-orb {
    width: 176px;
    height: 176px;
  }

  .alice-homepage .steps-carousel .step-demo-call .hiw-voice-meter {
    top: calc(50% + 102px);
  }

  .alice-homepage .steps-carousel .step-demo-call .hiw-voice-state {
    top: calc(50% + 126px);
  }
}

.alice-homepage .steps-carousel .steps-carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.alice-homepage .steps-carousel .steps-carousel-slide:not(.is-active) {
  pointer-events: none;
}

.alice-homepage .steps-carousel .steps-grid > article::after {
  display: none;
  content: none;
}

.alice-homepage .steps-carousel .step-card-heading {
  width: 100%;
  min-height: 0;
  margin: 0 0 clamp(20px, 3.2vw, 34px);
  text-align: center;
}

.alice-homepage .steps-carousel .step-card-heading h3 {
  margin-top: 8px;
}

.alice-homepage .steps-carousel .step-laptop {
  width: min(760px, calc(100% - 24px));
  margin-right: auto;
  margin-left: auto;
}

.alice-homepage .steps-carousel .steps-grid > article > p {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Alice Step 2 hidden feature: the approved Orb remains the only rendered Orb.
   Its native button wrapper unlocks deliberate tap/keyboard playback; Alice's
   face and transcript stay fully absent until that action. */
.alice-homepage .hiw-orb-centre.hiw-orb-interactive {
  pointer-events: auto;
}

.alice-homepage .hiw-orb-button {
  display: grid;
  width: max-content;
  height: max-content;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.alice-homepage .hiw-orb-button .hiw-voice-orb {
  display: block;
  pointer-events: none;
}

.alice-homepage .hiw-orb-button:focus-visible {
  outline: 3px solid rgba(181, 164, 255, .92);
  outline-offset: 7px;
}

.alice-homepage .hiw-orb-transcript-stage {
  position: absolute;
  z-index: 6;
  inset: clamp(9px, 3.2cqw, 18px);
  display: grid;
  align-items: end;
  pointer-events: none;
}

.alice-homepage .hiw-orb-transcript-row {
  --hiw-orb-face-size: clamp(30px, 8.8cqw, 54px);
  display: flex;
  width: min(94%, 660px);
  margin: 0 auto clamp(12px, 5cqw, 36px);
  align-items: flex-end;
  justify-content: center;
  gap: clamp(7px, 2cqw, 13px);
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.965);
  transform-origin: 24% 76%;
  transition:
    opacity .34s ease,
    transform .46s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .46s;
  will-change: transform, opacity;
}

.alice-homepage .hiw-orb-transcript-stage[data-state="visible"] .hiw-orb-transcript-row {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.alice-homepage .hiw-orb-transcript-stage.is-immediate .hiw-orb-transcript-row {
  transition: none;
}

.alice-homepage .hiw-orb-transcript-row > img {
  position: relative;
  z-index: 3;
  width: var(--hiw-orb-face-size);
  height: var(--hiw-orb-face-size);
  flex: 0 0 auto;
  border: clamp(1px, .22cqw, 1.5px) solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18),
    0 7px 22px rgba(0, 0, 0, .32);
}

.alice-homepage .hiw-orb-transcript-bubble.lg {
  --lg-radius: clamp(15px, 4.6cqw, 26px);
  --lg-tint: .05;
  --lg-saturate: 100%;
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  min-width: 0;
  max-width: min(82%, 570px);
  min-height: 0;
  padding: clamp(10px, 2.9cqw, 19px) clamp(12px, 3.5cqw, 23px);
  flex: 1 1 auto;
  background-color: rgba(255, 255, 255, .05);
  color: #fff;
  text-align: left;
}

.alice-homepage .hiw-orb-transcript-bubble p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: inherit;
  font-family: "Alice Manrope", "Manrope", sans-serif;
  font-size: clamp(9px, 3.05cqw, 17px);
  font-weight: 500;
  line-height: 1.32;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .48);
  text-wrap: pretty;
}

.alice-homepage .hiw-orb-transcript-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .22em, 0);
  transition:
    opacity .24s ease-out,
    transform .34s cubic-bezier(.16, 1, .3, 1);
}

.alice-homepage .hiw-orb-transcript-word.is-word-visible {
  opacity: 1;
  transform: none;
}

.alice-homepage .step-demo-call .hiw-voice-meter,
.alice-homepage .step-demo-call .hiw-voice-state {
  transition: opacity .28s ease;
}

.alice-homepage .hiw-orb-transcript-stage[data-state="visible"] ~ .hiw-voice-meter,
.alice-homepage .hiw-orb-transcript-stage[data-state="visible"] ~ .hiw-voice-state {
  opacity: 0;
}

@media (max-width: 760px) {
  .alice-homepage .hiw-orb-transcript-stage {
    inset: 7px;
  }

  .alice-homepage .hiw-orb-transcript-row {
    --hiw-orb-face-size: clamp(28px, 9cqw, 38px);
    width: 96%;
    transform-origin: 20% 80%;
  }

  .alice-homepage .hiw-orb-transcript-bubble.lg {
    --lg-radius: clamp(13px, 4.5cqw, 18px);
    max-width: none;
    padding: clamp(8px, 2.6cqw, 11px) clamp(9px, 3cqw, 13px);
  }

  .alice-homepage .hiw-orb-transcript-bubble p {
    font-size: clamp(8px, 2.9cqw, 11px);
    line-height: 1.27;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .hiw-orb-transcript-row {
    transform: none;
    transition: opacity .14s ease, visibility 0s linear .14s;
  }

  .alice-homepage .hiw-orb-transcript-word {
    transform: none;
    transition: opacity .1s linear;
  }

}

/* Step 2 enters as one stable object. Its historical 110ms delayed laptop and
   screen-settle animations restarted when the hidden slide became active,
   briefly repainting the black rim. The Orb's internal motion remains intact. */
.alice-homepage .steps-grid.is-visible > article:nth-child(2).is-active .step-laptop,
.alice-homepage .steps-grid.is-visible > article:nth-child(2).is-active .step-visual {
  animation: none !important;
  opacity: 1;
  transform: none;
}

.alice-homepage .steps-carousel .steps-outcome {
  width: 100%;
  max-width: none;
  min-height: clamp(520px, 51vw, 650px);
  margin: 0;
  padding: 0 clamp(12px, 4vw, 40px) 28px;
  justify-content: flex-start;
  overflow: visible;
}

.alice-homepage .steps-carousel .steps-outcome h3 {
  max-width: 100%;
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-size: clamp(52px, 6vw, 80px);
  line-height: .94;
}

.alice-homepage .steps-carousel .steps-outcome .win-job-notification-stack {
  margin: 0 auto;
}

.alice-homepage .steps-carousel-next {
  position: absolute;
  z-index: 11;
  top: var(--steps-next-y, 50%);
  right: clamp(6px, 1.8vw, 18px);
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid #d2d2d7;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
  color: #1d1d1f;
  cursor: pointer;
  transform: translateY(-50%);
  transform-origin: center;
  animation: steps-next-tap 1.65s ease-in-out infinite;
  transition: transform .2s ease, opacity .18s ease, visibility 0s linear 0s, background-color .18s ease;
}

.alice-homepage .steps-carousel-next:hover:not(:disabled) {
  animation: none;
  background: #fff;
  transform: translateY(-50%) scale(1.04);
}

.alice-homepage .steps-carousel-next:focus-visible {
  outline: 3px solid rgba(33, 104, 243, .34);
  outline-offset: 2px;
}

.alice-homepage .steps-carousel-next:disabled {
  visibility: hidden;
  opacity: 0;
  animation: none;
  cursor: default;
  box-shadow: none;
  transform: translateY(-50%) scale(.82);
  transition-delay: 0s, 0s, .18s, 0s;
}

.alice-homepage .steps-carousel-next svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@keyframes steps-next-tap {
  0%, 100% { transform: translateY(-50%) scale(.92); }
  50% { transform: translateY(-50%) scale(1.06); }
}

.alice-homepage .steps-swipe-cue {
  position: absolute;
  z-index: 12;
  top: var(--steps-swipe-y, 55%);
  left: 50%;
  display: grid;
  width: clamp(192px, 20vw, 248px);
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.88);
  transition: opacity .2s ease, transform .28s ease, visibility 0s linear .28s;
}

.alice-homepage .steps-swipe-cue.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

.alice-homepage .steps-swipe-cue.is-dismissed {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.8);
}

.alice-homepage .steps-swipe-lottie,
.alice-homepage .steps-swipe-fallback {
  position: absolute;
  width: 78%;
  height: 78%;
  inset: 11%;
  transform: scaleX(-1);
}

.alice-homepage .steps-swipe-lottie {
  z-index: 2;
}

.alice-homepage .steps-swipe-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.alice-homepage .steps-swipe-fallback {
  z-index: 1;
  fill: #fff;
  stroke: #1d1d1f;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  transition: opacity .16s ease;
}

.alice-homepage .steps-swipe-cue.is-ready .steps-swipe-fallback {
  opacity: 0;
}

/* Hidden slides must not finish their screen stories before a person reaches
   them. Adding .is-active again restarts the same approved r106 animations. */
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .step-laptop,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .step-visual,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .step-laptop-screen::after,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-find-entry,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .step-demo-cta,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-training,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-training-track i,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-training-list li,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-voice-orb::before,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-voice-orb i,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-voice-meter i,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-forward-switch,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-forward-switch i,
.alice-homepage .steps-grid.is-visible .steps-carousel-slide:not(.is-active) .hiw-forward-confirm,
.alice-homepage .steps-carousel-slide.steps-outcome:not(.is-active) .win-job-notification {
  animation: none !important;
}

/* Same approved r106 cards and appearance; only the work-feed tempo changes. */
.alice-homepage .steps-outcome.is-visible .win-job-notification {
  animation-duration: 5.6s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-sarah {
  animation-delay: 0s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-daniel {
  animation-delay: 1.4s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-mia {
  animation-delay: 2.8s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-jack {
  animation-delay: 4.2s;
}

@media (max-width: 760px) {
  .alice-homepage .steps {
    padding-top: 110px;
    padding-bottom: 120px;
  }

  .alice-homepage .steps-carousel {
    margin-top: 42px;
  }

  .alice-homepage .steps-carousel .steps-carousel-slide {
    padding-right: 2px;
    padding-bottom: 14px;
    padding-left: 2px;
  }

  .alice-homepage .steps-carousel .step-laptop {
    width: calc(100% - 24px);
  }

  .alice-homepage .steps-carousel .steps-outcome {
    min-height: 500px;
    padding: 0 8px 36px;
  }

  .alice-homepage .steps-carousel .steps-outcome h3 {
    font-size: clamp(44px, 13vw, 56px);
  }

  .alice-homepage .steps-carousel-next {
    right: 4px;
    width: 42px;
    height: 42px;
  }

  .alice-homepage .steps-swipe-cue { width: 192px; }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .steps-carousel .steps-grid,
  .alice-homepage .steps-carousel .steps-carousel-slide {
    transition: none;
  }

  .alice-homepage .steps-swipe-cue {
    display: none;
  }

  .alice-homepage .steps-carousel-next:not(:disabled) {
    animation: none;
    transform: translateY(-50%);
  }
}

/* Alice preview r111: finish the outcome spacing, then replace the old FREE
   campaign with one quiet, product-led Free Features section. */
.alice-homepage .steps-carousel .steps-outcome {
  padding-top: 28px;
}

.alice-homepage .free-features-section {
  padding: clamp(136px, 13vw, 192px) var(--page-pad) clamp(120px, 12vw, 176px);
  background: #f5f5f7;
  color: #1d1d1f;
}

.alice-homepage .free-features-intro {
  display: flex;
  width: min(760px, 100%);
  margin: 0 auto clamp(112px, 11vw, 160px);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.alice-homepage .free-features-title {
  max-width: none;
  margin: 0 0 clamp(72px, 6vw, 92px);
  color: #fff;
  font-family: "Alice Open Sans Effect", sans-serif;
  font-size: clamp(52px, 7vw, 96px);
  font-style: italic;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: -.055em;
  line-height: .94;
  text-transform: lowercase;
  -webkit-text-stroke: 1.5px #1d1d1f;
  paint-order: stroke fill;
  text-shadow:
    0 8px 0 #ffd60a,
    0 10px 0 #1d1d1f,
    0 18px 0 #ff7a45,
    0 20px 0 #1d1d1f,
    0 28px 0 #bf5af2,
    0 30px 0 #1d1d1f,
    0 38px 0 #0a84ff,
    0 40px 0 #1d1d1f;
}

.alice-homepage .free-features-reason {
  max-width: 620px;
  margin: 0;
  color: #515154;
  font-family: "Alice Manrope", "Manrope", sans-serif;
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .alice-homepage .steps-carousel .steps-outcome {
    padding-top: 20px;
  }

  .alice-homepage .free-features-section {
    padding: 112px 18px 104px;
  }

  .alice-homepage .free-features-intro {
    margin-bottom: 88px;
  }

  .alice-homepage .free-features-title {
    margin-bottom: 60px;
    font-size: clamp(42px, 12.2vw, 54px);
    -webkit-text-stroke-width: 1px;
    text-shadow:
      0 5px 0 #ffd60a,
      0 7px 0 #1d1d1f,
      0 11px 0 #ff7a45,
      0 13px 0 #1d1d1f,
      0 17px 0 #bf5af2,
      0 19px 0 #1d1d1f,
      0 23px 0 #0a84ff,
      0 25px 0 #1d1d1f;
  }

  .alice-homepage .free-features-reason {
    max-width: 34ch;
    font-size: 17px;
  }
}

/* Alice preview r112: use the complete 21st.dev two-line treatment. The full
   fourteen-colour stack is preserved at every width; only its depth scales so
   it cannot create horizontal page drift on a phone. */
.alice-homepage .free-features-intro {
  width: min(1120px, 100%);
}

.alice-homepage .free-features-title {
  display: flex;
  margin-bottom: clamp(124px, 9vw, 148px);
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 1.8vw, 28px);
  font-size: clamp(82px, 8vw, 116px);
  line-height: .78;
  text-shadow:
    1.4px 7px #FFD20E, 1.4px 9px #000,
    2.8px 14px #E5BC08, 2.8px 16px #000,
    4.2px 21px #EC8401, 4.2px 23px #000,
    5.6px 28px #E65C04, 5.6px 30px #000,
    7px 35px #E52E06, 7px 37px #000,
    8.4px 42px #DE006B, 8.4px 44px #000,
    9.8px 49px #CA039E, 9.8px 51px #000,
    11.2px 56px #A203CB, 11.2px 58px #000,
    12.6px 63px #6D01C9, 12.6px 65px #000,
    14px 70px #22008F, 14px 72px #000,
    15.4px 77px #062F9A, 15.4px 79px #000,
    16.8px 84px #0045AC, 16.8px 86px #000,
    18.2px 91px #007DB2, 18.2px 93px #000,
    19.6px 98px #00B8D9, 19.6px 100px #000;
}

.alice-homepage .free-features-word {
  display: block;
}

.alice-homepage .free-features-reason-row {
  display: flex;
  max-width: 980px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.alice-homepage .free-features-reason {
  max-width: 780px;
}

.alice-homepage .free-features-flag {
  display: inline-block;
  width: 30px;
  height: 20px;
  margin: 0 2px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -.18em;
}

.alice-homepage .free-features-jump {
  position: relative;
  display: inline-flex;
  min-height: 32px;
  padding: 0 13px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(29, 29, 31, .72);
  border-radius: 999px;
  color: #1d1d1f;
  font-family: "Alice Manrope", "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.alice-homepage .free-features-jump::after {
  position: absolute;
  inset: -6px -7px;
  content: "";
}

.alice-homepage .free-features-jump:hover,
.alice-homepage .free-features-jump:focus-visible {
  background: #1d1d1f;
  color: #fff;
}

.alice-homepage .free-features-jump:active {
  transform: scale(.97);
}

/* Three cards are present from the first rendered frame. The fourth card is
   already outside the stack and cycles back through, so the feed stays busy. */
.alice-homepage .steps-outcome.is-visible .win-job-notification-sarah {
  animation-delay: -.28s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-daniel {
  animation-delay: -1.68s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-mia {
  animation-delay: -3.08s;
}

.alice-homepage .steps-outcome.is-visible .win-job-notification-jack {
  animation-delay: -4.48s;
}

@media (max-width: 1024px) and (min-width: 761px) {
  .alice-homepage .free-features-title {
    margin-bottom: 126px;
    font-size: clamp(76px, 13vw, 126px);
    text-shadow:
      1.4px 7px #FFD20E, 1.4px 9px #000,
      2.8px 14px #E5BC08, 2.8px 16px #000,
      4.2px 21px #EC8401, 4.2px 23px #000,
      5.6px 28px #E65C04, 5.6px 30px #000,
      7px 35px #E52E06, 7px 37px #000,
      8.4px 42px #DE006B, 8.4px 44px #000,
      9.8px 49px #CA039E, 9.8px 51px #000,
      11.2px 56px #A203CB, 11.2px 58px #000,
      12.6px 63px #6D01C9, 12.6px 65px #000,
      14px 70px #22008F, 14px 72px #000,
      15.4px 77px #062F9A, 15.4px 79px #000,
      16.8px 84px #0045AC, 16.8px 86px #000,
      18.2px 91px #007DB2, 18.2px 93px #000,
      19.6px 98px #00B8D9, 19.6px 100px #000;
  }
}

@media (max-width: 760px) {
  .alice-homepage .free-features-title {
    margin-bottom: 78px;
    gap: 14px;
    font-size: clamp(62px, 18vw, 76px);
    line-height: .8;
    text-shadow:
      1px 4px #FFD20E, 1px 5px #000,
      2px 8px #E5BC08, 2px 9px #000,
      3px 12px #EC8401, 3px 13px #000,
      4px 16px #E65C04, 4px 17px #000,
      5px 20px #E52E06, 5px 21px #000,
      6px 24px #DE006B, 6px 25px #000,
      7px 28px #CA039E, 7px 29px #000,
      8px 32px #A203CB, 8px 33px #000,
      9px 36px #6D01C9, 9px 37px #000,
      10px 40px #22008F, 10px 41px #000,
      11px 44px #062F9A, 11px 45px #000,
      12px 48px #0045AC, 12px 49px #000,
      13px 52px #007DB2, 13px 53px #000,
      14px 56px #00B8D9, 14px 57px #000;
  }

  .alice-homepage .free-features-reason-row {
    gap: 18px;
  }

  .alice-homepage .free-features-reason {
    max-width: 33ch;
    font-size: 16px;
  }

  .alice-homepage .free-features-flag {
    width: 25px;
    height: 17px;
  }
}

/* Alice preview r124: the missed-call calculator now reads as one continuous,
   minimal white section. The amount-slider interaction is recreated locally
   without adding React, Radix, Tailwind or a decorative canvas animation. */
.alice-homepage .revenue-calculator-section {
  width: min(1120px, 100%);
  margin: 118px auto 0;
  color: var(--black);
  text-align: center;
}

.alice-homepage .revenue-calculator-section > h3 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--black);
  font: 400 clamp(54px, 6.4vw, 94px)/.96 var(--headline);
  letter-spacing: -.055em;
  text-wrap: balance;
}

.alice-homepage .revenue-calculator {
  display: grid;
  grid-template-columns: 1fr;
  margin: 58px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--black);
  gap: 50px;
  overflow: visible;
  text-align: left;
}

.alice-homepage .revenue-calculator-result-annual {
  display: flex;
  min-height: 0;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--black);
  text-align: center;
}

.alice-homepage .revenue-calculator-result-annual > span {
  color: var(--black);
  font: 400 13px/1.1 var(--headline);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.alice-homepage .revenue-calculator-result-annual strong {
  min-height: 1em;
  margin: 12px 0 0;
  color: var(--green);
  font: 400 clamp(78px, 10vw, 136px)/.86 var(--headline);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.07em;
}

.alice-homepage .revenue-calculator-result-annual output {
  --revenue-reduced-motion: 0;
  display: inline-flex;
  align-items: flex-start;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.alice-homepage .revenue-rolling-prefix,
.alice-homepage .revenue-rolling-digits,
.alice-homepage .revenue-rolling-separator {
  display: inline-flex;
  height: 1em;
  line-height: 1;
}

.alice-homepage .revenue-rolling-prefix {
  width: .67em;
  justify-content: flex-start;
}

.alice-homepage .revenue-rolling-digits {
  align-items: flex-start;
}

.alice-homepage .revenue-rolling-separator {
  width: .28em;
  align-items: flex-end;
  justify-content: center;
}

.alice-homepage .revenue-rolling-digit {
  display: inline-block;
  width: .61em;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.alice-homepage .revenue-rolling-digit-strip {
  display: flex;
  width: 100%;
  flex-direction: column;
  transform: translate3d(0, calc(var(--rolling-digit, 0) * -1em), 0);
  transition: none;
  will-change: transform;
}

.alice-homepage .revenue-rolling-digit-strip > span {
  display: flex;
  width: 100%;
  height: 1em;
  flex: 0 0 1em;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}

.alice-homepage [data-rolling-money].is-rolling-ready .revenue-rolling-digit-strip {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.alice-homepage .revenue-calculator-controls {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: initial;
  gap: 42px;
}

.alice-homepage .revenue-calculator-control {
  min-width: 0;
}

.alice-homepage .revenue-calculator-label {
  display: flex;
  min-height: 58px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.alice-homepage .revenue-calculator-label label {
  max-width: none;
  color: var(--black);
  font: 400 15px/1.15 var(--headline);
}

.alice-homepage .revenue-calculator-label output {
  flex: 0 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font: 400 clamp(25px, 2.6vw, 36px)/.92 var(--headline);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.alice-homepage .revenue-calculator-label output.is-negative {
  color: var(--red);
}

.alice-homepage .revenue-calculator-label output.is-positive {
  color: var(--green);
}

.alice-homepage .revenue-amount-slider {
  --range-progress: 0%;
  position: relative;
  height: 48px;
  margin-top: 12px;
}

.alice-homepage .revenue-amount-slider-track {
  position: absolute;
  inset: 6px 0;
  border-radius: 9px;
  background-color: #f1f1f3;
  background-image: radial-gradient(circle, rgba(5, 5, 6, .22) 0 1.5px, transparent 1.7px);
  background-position: 12px center;
  background-size: 30px 100%;
  overflow: hidden;
  pointer-events: none;
}

.alice-homepage .revenue-amount-slider-track::before {
  position: absolute;
  width: var(--range-progress);
  height: 100%;
  background-color: rgba(5, 5, 6, .04);
  background-image: radial-gradient(circle, var(--black) 0 1.6px, transparent 1.8px);
  background-position: 12px center;
  background-size: 30px 100%;
  content: "";
}

.alice-homepage .revenue-calculator-control input[type="range"] {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 48px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.alice-homepage .revenue-calculator-control input[type="range"]::-webkit-slider-runnable-track {
  height: 36px;
  border: 0;
  background: transparent;
}

.alice-homepage .revenue-calculator-control input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 40px;
  margin-top: -2px;
  border: 2px solid var(--black);
  border-radius: 8px;
  appearance: none;
  background: var(--black);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
}

.alice-homepage .revenue-calculator-control input[type="range"]::-moz-range-track {
  height: 36px;
  border: 0;
  background: transparent;
}

.alice-homepage .revenue-calculator-control input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 36px;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: var(--black);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
}

.alice-homepage .revenue-calculator-control input[type="range"]:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 11px;
}

.alice-homepage .revenue-calculator-results {
  display: grid;
  width: min(640px, 100%);
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: center;
  gap: 32px;
}

.alice-homepage .revenue-calculator-results .revenue-calculator-result {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid rgba(5, 5, 6, .18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--black);
  text-align: center;
}

.alice-homepage .revenue-calculator-results .revenue-calculator-result > span {
  color: var(--black);
  font: 400 13px/1.15 var(--headline);
  letter-spacing: 0;
  text-transform: none;
}

.alice-homepage .revenue-calculator-results .revenue-calculator-result strong {
  margin-top: 8px;
  color: var(--green);
  font: 400 clamp(38px, 4.5vw, 58px)/.9 var(--headline);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}

@media (max-width: 950px) {
  .alice-homepage .revenue-calculator-section {
    margin-top: 100px;
  }

  .alice-homepage .revenue-calculator {
    padding: 0;
    gap: 44px;
  }

  .alice-homepage .revenue-calculator-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .alice-homepage .revenue-calculator-label {
    min-height: 78px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
  }
}

@media (max-width: 700px) {
  .alice-homepage .revenue-calculator-section {
    margin-top: 72px;
  }

  .alice-homepage .revenue-calculator-section > h3 {
    max-width: 350px;
    margin: 0 auto;
    font-size: clamp(43px, 12.6vw, 56px);
    line-height: .98;
    letter-spacing: -.05em;
  }

  .alice-homepage .revenue-calculator {
    margin-top: 42px;
    padding: 0;
    gap: 36px;
  }

  .alice-homepage .revenue-calculator-result-annual > span {
    font-size: 10px;
  }

  .alice-homepage .revenue-calculator-result-annual strong {
    margin-top: 10px;
    font-size: clamp(58px, 19vw, 76px);
  }

  .alice-homepage .revenue-calculator-controls {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .alice-homepage .revenue-calculator-label {
    min-height: 0;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
  }

  .alice-homepage .revenue-calculator-label label {
    font-size: 14px;
  }

  .alice-homepage .revenue-calculator-label output {
    font-size: 29px;
  }

  .alice-homepage .revenue-amount-slider {
    margin-top: 9px;
  }

  .alice-homepage .revenue-calculator-results {
    gap: 18px;
  }

  .alice-homepage .revenue-calculator-results .revenue-calculator-result {
    padding-top: 14px;
  }

  .alice-homepage .revenue-calculator-results .revenue-calculator-result > span {
    font-size: 11px;
  }

  .alice-homepage .revenue-calculator-results .revenue-calculator-result strong {
    margin-top: 7px;
    font-size: clamp(34px, 11vw, 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .revenue-calculator-result-annual output {
    --revenue-reduced-motion: 1;
  }

  .alice-homepage .revenue-rolling-digit-strip {
    transition: none !important;
  }
}

/* Alice preview r121: one responsive Before/After comparison surface. The
   divider is vertical on iPad/desktop and horizontal on portrait phones, so
   the larger sentence-case list copy never has to fit inside a half-phone
   column. The 21st.dev example is an interaction reference only; this stays
   dependency-free and uses the site's existing images and colour states. */
.alice-homepage .before-after {
  padding-top: clamp(112px, 10vw, 156px);
  padding-bottom: clamp(64px, 7vw, 104px);
  overflow: hidden;
  overflow: clip;
}

.alice-homepage .before-after-title {
  width: min(1120px, 100%);
  max-width: none;
  margin: 0 auto;
  color: #050506;
  font-family: "Alice Manrope", "Manrope", "Figtree", Arial, sans-serif;
  font-size: clamp(54px, 6.1vw, 88px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.alice-homepage .before-after-title-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.alice-homepage .before-after-title-mark-group {
  white-space: nowrap;
}

.alice-homepage .before-after-title-underline {
  position: absolute;
  right: -5%;
  bottom: -.22em;
  left: -5%;
  width: 110%;
  height: .34em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
  pointer-events: none;
}

.alice-homepage .workday-compare {
  --workday-compare-position: 50%;
  position: relative;
  width: min(1240px, 100%);
  height: clamp(720px, 61vw, 820px);
  margin: clamp(70px, 7vw, 104px) auto 0;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 48px;
  overflow: hidden;
  isolation: isolate;
  background: #edf2ed;
  box-shadow: 0 30px 72px rgba(0, 0, 0, .11);
  text-align: left;
  contain: layout paint;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.alice-homepage .workday-compare-layer {
  position: absolute;
  inset: 0;
}

.alice-homepage .workday-compare-before {
  z-index: 1;
}

.alice-homepage .workday-compare-after {
  z-index: 2;
  -webkit-clip-path: inset(0 0 0 var(--workday-compare-position));
  clip-path: inset(0 0 0 var(--workday-compare-position));
}

.alice-homepage .workday-compare .comparison-card {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(50px, 5vw, 72px) clamp(42px, 4.5vw, 66px);
  border-radius: 0;
  overflow: hidden;
}

.alice-homepage .workday-compare .comparison-card-copy {
  display: flex;
  position: relative;
  z-index: 2;
  width: min(45.5%, 520px);
  height: 100%;
  flex-direction: column;
  min-width: 0;
}

.alice-homepage .workday-compare .comparison-card.before .comparison-card-copy {
  margin-right: auto;
}

.alice-homepage .workday-compare .comparison-card.after .comparison-card-copy {
  margin-left: auto;
}

.alice-homepage .workday-compare .comparison-card-copy > small {
  margin: 0 0 22px;
  font-family: "Alice Manrope", "Manrope", "Figtree", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.015em;
  text-align: left;
}

.alice-homepage .workday-compare .comparison-card h3 {
  min-height: 0;
  margin: 0;
  font-family: "Alice Manrope", "Manrope", "Figtree", Arial, sans-serif;
  font-size: clamp(54px, 5vw, 76px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.052em;
  text-align: left;
}

.alice-homepage .workday-compare .comparison-card ul {
  margin: auto 0 0;
  padding: 0;
}

.alice-homepage .workday-compare .comparison-card li {
  min-height: 66px;
  padding: 18px 42px 18px 0;
  border-top: 1px solid currentColor;
  font-family: "Alice Manrope", "Manrope", "Figtree", Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.012em;
  text-transform: none;
}

.alice-homepage .workday-compare .comparison-card li::after {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 18px;
}

.alice-homepage .workday-compare .comparison-card.before li::after {
  font-size: 22px;
}

.alice-homepage .workday-compare .comparison-scene img {
  opacity: .38;
}

.alice-homepage .workday-compare .comparison-card.before .comparison-scene::after {
  background: linear-gradient(90deg, rgba(237, 242, 237, .90) 0%, rgba(237, 242, 237, .70) 47%, rgba(237, 242, 237, .26) 76%, rgba(237, 242, 237, .18) 100%);
}

.alice-homepage .workday-compare .comparison-card.after .comparison-scene::after {
  background: linear-gradient(270deg, rgba(0, 132, 61, .90) 0%, rgba(0, 132, 61, .70) 47%, rgba(0, 132, 61, .28) 76%, rgba(0, 132, 61, .18) 100%);
}

.alice-homepage .workday-compare-handle {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: var(--workday-compare-position);
  width: 66px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #050506;
  cursor: ew-resize;
  touch-action: none;
  transform: translateX(-50%);
}

.alice-homepage .workday-compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 0 22px rgba(0, 0, 0, .2);
  transform: translateX(-50%);
}

.alice-homepage .workday-compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  transform: translate(-50%, -50%);
}

.alice-homepage .workday-compare-knob svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alice-homepage .workday-compare-handle:hover .workday-compare-knob {
  transform: translate(-50%, -50%) scale(1.04);
}

.alice-homepage .workday-compare-handle:focus-visible .workday-compare-knob {
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px #050506, 0 12px 30px rgba(0, 0, 0, .22);
}

@media (max-width: 1024px) and (min-width: 761px) {
  .alice-homepage .workday-compare {
    height: 760px;
    border-radius: 40px;
  }

  .alice-homepage .workday-compare .comparison-card {
    padding: 46px 34px;
  }

  .alice-homepage .workday-compare .comparison-card-copy {
    width: 46.5%;
  }

  .alice-homepage .workday-compare .comparison-card h3 {
    font-size: clamp(48px, 7vw, 58px);
  }

  .alice-homepage .workday-compare .comparison-card li {
    min-height: 62px;
    padding: 15px 38px 15px 0;
    font-size: 15.5px;
  }
}

@media (max-width: 760px) {
  .alice-homepage .before-after {
    padding: 96px 16px 72px;
  }

  .alice-homepage .before-after-title {
    width: min(520px, 100%);
    font-size: clamp(40px, 11.2vw, 46px);
    line-height: 1.01;
    letter-spacing: -.048em;
  }

  .alice-homepage .before-after-title-underline {
    bottom: -.24em;
    height: .38em;
    stroke-width: 2.5px;
  }

  .alice-homepage .workday-compare {
    width: 100%;
    height: 820px;
    margin-top: 58px;
    border-radius: 34px;
  }

  .alice-homepage .workday-compare-after {
    -webkit-clip-path: inset(var(--workday-compare-position) 0 0 0);
    clip-path: inset(var(--workday-compare-position) 0 0 0);
  }

  .alice-homepage .workday-compare .comparison-card {
    padding: 20px 20px;
  }

  .alice-homepage .workday-compare .comparison-card-copy {
    width: 100%;
    height: 50%;
    padding: 12px 0;
  }

  .alice-homepage .workday-compare .comparison-card.before .comparison-card-copy {
    margin: 0;
  }

  .alice-homepage .workday-compare .comparison-card.after .comparison-card-copy {
    margin: auto 0 0;
  }

  .alice-homepage .workday-compare .comparison-card-copy > small {
    margin-bottom: 12px;
    font-size: 15px;
  }

  .alice-homepage .workday-compare .comparison-card h3 {
    font-size: clamp(36px, 10.8vw, 43px);
    line-height: .94;
  }

  .alice-homepage .workday-compare .comparison-card ul {
    margin-top: auto;
  }

  .alice-homepage .workday-compare .comparison-card li {
    min-height: 0;
    padding: 11px 34px 11px 0;
    font-size: 14px;
    line-height: 1.22;
  }

  .alice-homepage .workday-compare .comparison-card li::after {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 16px;
  }

  .alice-homepage .workday-compare .comparison-card.before li::after {
    font-size: 19px;
  }

  .alice-homepage .workday-compare .comparison-card.before .comparison-scene::after {
    background: linear-gradient(180deg, rgba(237, 242, 237, .91) 0%, rgba(237, 242, 237, .72) 43%, rgba(237, 242, 237, .26) 70%, rgba(237, 242, 237, .18) 100%);
  }

  .alice-homepage .workday-compare .comparison-card.after .comparison-scene::after {
    background: linear-gradient(0deg, rgba(0, 132, 61, .91) 0%, rgba(0, 132, 61, .72) 43%, rgba(0, 132, 61, .28) 70%, rgba(0, 132, 61, .18) 100%);
  }

  .alice-homepage .workday-compare-handle {
    top: var(--workday-compare-position);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 66px;
    cursor: ns-resize;
    transform: translateY(-50%);
  }

  .alice-homepage .workday-compare-line {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 3px;
    transform: translateY(-50%);
  }

  .alice-homepage .workday-compare-knob {
    top: 50%;
    left: 50%;
  }

  .alice-homepage .workday-compare-knob svg {
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .workday-compare-handle,
  .alice-homepage .workday-compare-knob,
  .alice-homepage .workday-compare-after {
    transition: none !important;
  }
}

/* Alice preview r122: Jase kept the iPad/desktop compare, but rejected the
   phone's tall top/bottom split. Phones return to the same left/right reveal;
   one complete copy panel replaces the other at the midpoint while the wider,
   less-filtered photo area carries the emotional before/after story. */
.alice-homepage .before-after-title-cross,
.alice-homepage .before-after-title-emphasis {
  color: var(--red);
}

.alice-homepage .before-after-title-cross {
  display: inline-block;
  margin-right: .12em;
  font-size: .88em;
  font-weight: 800;
  line-height: 1;
}

.alice-homepage .workday-compare-mobile-copy {
  display: none;
}

@media (max-width: 760px) {
  .alice-homepage .workday-compare {
    height: 630px;
  }

  .alice-homepage .workday-compare-after {
    -webkit-clip-path: inset(0 0 0 var(--workday-compare-position));
    clip-path: inset(0 0 0 var(--workday-compare-position));
  }

  /* The original layer copy remains in the accessibility tree. The visual
     copy below is duplicated only for layout and explicitly aria-hidden. */
  .alice-homepage .workday-compare-layer .comparison-card-copy {
    opacity: 0;
    pointer-events: none;
  }

  .alice-homepage .workday-compare .comparison-scene img {
    width: 100%;
    height: 58%;
    opacity: 1;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .alice-homepage .workday-compare .comparison-card.before .comparison-scene::after,
  .alice-homepage .workday-compare .comparison-card.after .comparison-scene::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 58%;
  }

  .alice-homepage .workday-compare .comparison-card.before .comparison-scene::after {
    background: linear-gradient(180deg, rgba(237, 242, 237, .01), rgba(237, 242, 237, .06));
  }

  .alice-homepage .workday-compare .comparison-card.after .comparison-scene::after {
    background: linear-gradient(180deg, rgba(0, 132, 61, .02), rgba(0, 132, 61, .08));
  }

  .alice-homepage .workday-compare-mobile-copy {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: block;
    height: 318px;
    pointer-events: none;
  }

  .alice-homepage .workday-compare-mobile-panel {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 18px 18px 16px;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    opacity: 0;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
  }

  .alice-homepage .workday-compare-mobile-panel.before {
    background: #fff;
    color: #050506;
  }

  .alice-homepage .workday-compare-mobile-panel.after {
    border-color: rgba(255, 255, 255, .18);
    background: #00783a;
    color: #fff;
  }

  .alice-homepage .workday-compare[data-workday-compare-copy="before"] [data-workday-compare-mobile-copy="before"],
  .alice-homepage .workday-compare[data-workday-compare-copy="after"] [data-workday-compare-mobile-copy="after"] {
    opacity: 1;
    transform: translateY(0);
  }

  .alice-homepage .workday-compare-mobile-panel > small {
    margin: 0 0 8px;
    font-family: "Alice Manrope", "Manrope", "Figtree", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
  }

  .alice-homepage .workday-compare-mobile-panel h3 {
    margin: 0 0 12px;
    font-family: "Alice Manrope", "Manrope", "Figtree", Arial, sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.045em;
  }

  .alice-homepage .workday-compare-mobile-panel ul {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
  }

  .alice-homepage .workday-compare-mobile-panel li {
    position: relative;
    padding: 7px 30px 7px 0;
    border-top: 1px solid currentColor;
    font-family: "Alice Manrope", "Manrope", "Figtree", Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
  }

  .alice-homepage .workday-compare-mobile-panel li::after {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    background: #fff;
    color: var(--green);
    content: "✓";
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    transform: translateY(-50%);
  }

  .alice-homepage .workday-compare-mobile-panel.before li::after {
    background: #fff2ef;
    color: var(--red);
    content: "\00D7";
    font-size: 18px;
  }

  .alice-homepage .workday-compare-handle {
    top: 0;
    right: auto;
    bottom: auto;
    left: var(--workday-compare-position);
    width: 66px;
    height: 58%;
    cursor: ew-resize;
    transform: translateX(-50%);
  }

  .alice-homepage .workday-compare-line {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 3px;
    height: calc(100% - 69px);
    transform: translateX(-50%);
  }

  .alice-homepage .workday-compare-knob svg {
    transform: none;
  }
}

@media (max-width: 374px) {
  .alice-homepage .workday-compare {
    height: 650px;
  }

  .alice-homepage .workday-compare-mobile-copy {
    right: 12px;
    bottom: 12px;
    left: 12px;
    height: 332px;
  }

  .alice-homepage .workday-compare-mobile-panel {
    padding: 16px 15px 14px;
  }

  .alice-homepage .workday-compare-mobile-panel h3 {
    font-size: 32px;
  }

  .alice-homepage .workday-compare-mobile-panel li {
    font-size: 13px;
  }

  .alice-homepage .workday-compare-line {
    height: calc(100% - 73px);
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .alice-homepage .workday-compare-mobile-panel {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .steps-outcome.is-visible .win-job-notification {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .alice-homepage .steps-outcome.is-visible .win-job-notification-jack {
    display: none;
  }
}

/* Alice preview r123: the real iPhone viewport is shorter than the browser's
   nominal screen height once Safari chrome and the sticky Alice bar are present.
   Tighten only the phone heading and comparison so the complete heading plus
   the useful comparison story can share one view. */
@media (max-width: 760px) {
  .alice-homepage .before-after-title {
    font-size: clamp(36px, 9.8vw, 40px);
    line-height: 1;
  }

  .alice-homepage .workday-compare {
    height: 540px;
    margin-top: 32px;
  }

  .alice-homepage .workday-compare-mobile-copy {
    right: 12px;
    bottom: 12px;
    left: 12px;
    height: 280px;
  }

  .alice-homepage .workday-compare-mobile-panel {
    padding: 16px 16px 14px;
    border-radius: 22px;
  }

  .alice-homepage .workday-compare-mobile-panel > small {
    margin-bottom: 7px;
    font-size: 13px;
  }

  .alice-homepage .workday-compare-mobile-panel h3 {
    margin-bottom: 10px;
    font-size: 30px;
    line-height: .94;
  }

  .alice-homepage .workday-compare-mobile-panel li {
    padding: 5.5px 28px 5.5px 0;
    font-size: 12.5px;
    line-height: 1.16;
  }

  .alice-homepage .workday-compare-mobile-panel li::after {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 13px;
  }

  .alice-homepage .workday-compare-mobile-panel.before li::after {
    font-size: 17px;
  }
}

@media (max-width: 374px) {
  .alice-homepage .workday-compare {
    height: 560px;
    margin-top: 30px;
  }

  .alice-homepage .workday-compare-mobile-copy {
    height: 300px;
  }

  .alice-homepage .workday-compare-mobile-panel {
    padding: 15px 14px 13px;
  }

  .alice-homepage .workday-compare-mobile-panel h3 {
    font-size: 29px;
  }

  .alice-homepage .workday-compare-mobile-panel li {
    font-size: 12px;
  }

  .alice-homepage .workday-compare-line {
    height: calc(100% - 79px);
  }
}

/* Alice preview r115: fit the supplied app captures inside one consistent,
   slim iPhone shell. Source phone lines stay beyond the clipped screen edge. */
.alice-homepage .steps {
  padding-bottom: 156px;
}

.alice-homepage .free-features-intro {
  margin-bottom: clamp(72px, 7vw, 96px);
}

.alice-homepage .free-features-business-mark {
  display: inline-block;
  color: #1d1d1f;
  font-weight: 800;
  white-space: nowrap;
}

.alice-homepage .free-features-straight-underline {
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .15em;
}

.alice-homepage .free-app-carousel {
  --free-app-drag: 0px;
  --free-app-phone-width: clamp(318px, 24vw, 340px);
  --free-app-side-offset: clamp(260px, 26vw, 365px);
  width: min(1220px, calc(100vw - (2 * var(--page-pad))));
  margin: 0 auto;
}

.alice-homepage .free-app-heading-stage {
  display: grid;
  width: 100%;
  height: clamp(65px, 6.66vw, 100px);
  min-height: 0;
  margin: 0 auto clamp(18px, 2vw, 26px);
  place-items: center;
}

.alice-homepage .free-app-heading {
  max-width: 20ch;
  margin: 0;
  color: #1d1d1f;
  font-family: "Alice Manrope", "Manrope", sans-serif;
  font-size: clamp(31px, 3.2vw, 48px);
  font-weight: 750;
  letter-spacing: -.052em;
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
  will-change: opacity, filter, transform;
}

.alice-homepage .free-app-heading.is-changing {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(3px);
  transition-duration: .22s;
}

.alice-homepage .free-app-stage {
  position: relative;
  width: 100%;
  height: clamp(690px, 52vw, 744px);
  overflow: hidden;
  outline: none;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  cursor: grab;
}

.alice-homepage .free-app-carousel.is-dragging .free-app-stage {
  cursor: grabbing;
}

.alice-homepage .free-app-stage:focus-visible {
  border-radius: 40px;
  box-shadow: inset 0 0 0 3px rgba(33, 104, 243, .25);
}

.alice-homepage .free-app-slide {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: var(--free-app-phone-width);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.74);
  transform-origin: 50% 12%;
  filter: saturate(.72);
  will-change: transform, opacity;
  transition:
    transform .62s cubic-bezier(.22, 1, .36, 1),
    opacity .42s ease,
    filter .42s ease;
}

.alice-homepage .free-app-slide.is-active {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(calc(-50% + var(--free-app-drag))) scale(1);
  filter: none;
}

.alice-homepage .free-app-slide.is-prev {
  z-index: 1;
  opacity: .28;
  transform: translateX(calc(-50% - var(--free-app-side-offset) + var(--free-app-drag))) scale(.82);
}

.alice-homepage .free-app-slide.is-next {
  z-index: 2;
  opacity: .34;
  transform: translateX(calc(-50% + var(--free-app-side-offset) + var(--free-app-drag))) scale(.82);
}

.alice-homepage .free-app-carousel.is-dragging .free-app-slide {
  transition: none;
}

.alice-homepage .free-app-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 828;
  padding: 5px;
  display: block;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 54px;
  background: linear-gradient(115deg, #5c5d61 0%, #17181a 16%, #070809 51%, #414246 84%, #77787b 100%);
  box-shadow:
    0 26px 54px rgba(0, 0, 0, .16),
    0 3px 10px rgba(0, 0, 0, .13),
    inset 0 0 0 1px rgba(0, 0, 0, .84),
    inset 0 0 0 2px rgba(255, 255, 255, .13);
}

.alice-homepage .free-app-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .94);
  border-radius: 49px;
  background: #08090a;
}

.alice-homepage .free-app-screen img {
  --free-app-source-width: 111.5%;
  --free-app-source-left: -5.7%;
  --free-app-source-top: -2.8%;
  position: absolute;
  top: var(--free-app-source-top);
  left: var(--free-app-source-left);
  display: block;
  width: var(--free-app-source-width);
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.alice-homepage .free-app-slide:nth-child(1) .free-app-screen img {
  --free-app-source-width: 112%;
  --free-app-source-left: -5.9%;
  --free-app-source-top: -3%;
}

.alice-homepage .free-app-slide:nth-child(2) .free-app-screen img,
.alice-homepage .free-app-slide:nth-child(4) .free-app-screen img {
  --free-app-source-width: 110.5%;
  --free-app-source-left: -5.2%;
  --free-app-source-top: -2.5%;
}

.alice-homepage .free-app-slide:nth-child(3) .free-app-screen img,
.alice-homepage .free-app-slide:nth-child(5) .free-app-screen img {
  --free-app-source-width: 111%;
  --free-app-source-left: -5.5%;
  --free-app-source-top: -2.7%;
}

.alice-homepage .free-app-dynamic-island {
  position: absolute;
  top: 15px;
  left: 50%;
  z-index: 4;
  width: 29%;
  height: 29px;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 999px;
  background: #050506;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .84);
  transform: translateX(-50%);
}

.alice-homepage .free-app-side-button {
  position: absolute;
  left: -4px;
  z-index: -1;
  width: 3px;
  border-radius: 2px 0 0 2px;
  background: #303136;
  box-shadow: inset 1px 0 rgba(255, 255, 255, .18);
}

.alice-homepage .free-app-side-button-top {
  top: 18%;
  height: 5.7%;
}

.alice-homepage .free-app-side-button-middle {
  top: 26.4%;
  height: 9.4%;
}

.alice-homepage .free-app-phone::after {
  position: absolute;
  top: 25%;
  right: -4px;
  z-index: -1;
  width: 3px;
  height: 12%;
  border-radius: 0 2px 2px 0;
  background: #303136;
  box-shadow: inset -1px 0 rgba(255, 255, 255, .18);
  content: "";
}

.alice-homepage .free-app-swipe-cue {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 50%;
  display: grid;
  width: var(--free-app-phone-width);
  aspect-ratio: 393 / 828;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(.88);
  transition: opacity .2s ease, transform .28s ease, visibility 0s linear .28s;
}

.alice-homepage .free-app-swipe-cue.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  transition-delay: 0s;
}

.alice-homepage .free-app-swipe-cue.is-dismissed {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(.8);
}

.alice-homepage .free-app-swipe-lottie,
.alice-homepage .free-app-swipe-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(148px, 42vw, 182px);
  height: clamp(148px, 42vw, 182px);
  transform: translate(-50%, -50%) scaleX(-1);
}

.alice-homepage .free-app-swipe-lottie {
  z-index: 2;
  filter: none;
}

.alice-homepage .free-app-swipe-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.alice-homepage .free-app-swipe-fallback {
  display: none;
  z-index: 1;
  fill: none;
  color: #050506;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  transition: opacity .16s ease;
}

.alice-homepage .free-app-swipe-fallback path:last-child {
  fill: #fff;
  stroke: #050506;
  paint-order: stroke fill;
}

.alice-homepage .free-app-swipe-cue.is-ready .free-app-swipe-fallback {
  opacity: 0;
}

@media (max-width: 1024px) and (min-width: 761px) {
  .alice-homepage .steps {
    padding-bottom: 156px;
  }

  .alice-homepage .free-app-carousel {
    --free-app-phone-width: clamp(285px, 38vw, 310px);
    --free-app-side-offset: clamp(232px, 34vw, 280px);
  }

  .alice-homepage .free-app-stage {
    height: 680px;
  }
}

@media (max-width: 760px) {
  .alice-homepage .steps {
    padding-bottom: 96px;
  }

  .alice-homepage .free-features-intro {
    margin-bottom: 64px;
  }

  .alice-homepage .free-app-carousel {
    --free-app-phone-width: clamp(218px, 58vw, 232px);
    --free-app-side-offset: clamp(182px, 49vw, 200px);
    width: calc(100vw - 36px);
  }

  .alice-homepage .free-app-heading-stage {
    height: 67px;
    min-height: 0;
    margin-bottom: 18px;
  }

  .alice-homepage .free-app-heading {
    max-width: 16ch;
    font-size: clamp(27px, 7.8vw, 32px);
  }

  .alice-homepage .free-app-stage {
    height: clamp(474px, 126vw, 506px);
  }

  .alice-homepage .free-app-phone {
    padding: 4px;
    border-radius: 42px;
  }

  .alice-homepage .free-app-screen {
    border-radius: 38px;
  }

  .alice-homepage .free-app-dynamic-island {
    top: 11px;
    height: 21px;
  }

  .alice-homepage .free-app-swipe-cue { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .free-app-heading,
  .alice-homepage .free-app-slide {
    transition: none;
  }

  .alice-homepage .free-app-swipe-cue {
    display: none;
  }
}

/* Alice preview r117: WebKit paints long text-shadow stacks differently from
   Chromium. The approved effect is now one deterministic transparent image.
   Each app capture is also pre-cropped to its inner screen, so no source phone
   rim can reappear at the bottom on a real iPhone. */
.alice-homepage .free-features-title {
  display: block;
  width: clamp(360px, 30vw, 430px);
  max-width: 100%;
  margin: 0 auto 48px;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.alice-homepage .free-features-title-art {
  display: block;
  width: 100%;
  height: auto;
}

.alice-homepage .free-app-stage {
  overflow: visible;
}

.alice-homepage .free-app-carousel {
  width: min(1220px, 100%);
  max-width: 100%;
}

.alice-homepage .free-app-phone {
  box-shadow:
    0 0 34px rgba(0, 0, 0, .14),
    0 8px 20px rgba(0, 0, 0, .08),
    inset 0 0 0 1px rgba(0, 0, 0, .84),
    inset 0 0 0 2px rgba(255, 255, 255, .13);
}

.alice-homepage .free-app-screen img,
.alice-homepage .free-app-slide:nth-child(1) .free-app-screen img,
.alice-homepage .free-app-slide:nth-child(2) .free-app-screen img,
.alice-homepage .free-app-slide:nth-child(3) .free-app-screen img,
.alice-homepage .free-app-slide:nth-child(4) .free-app-screen img,
.alice-homepage .free-app-slide:nth-child(5) .free-app-screen img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.alice-homepage .free-app-screen {
  background: #f5f5f7;
}

@media (max-width: 1024px) and (min-width: 761px) {
  .alice-homepage .free-features-title {
    width: clamp(400px, 54vw, 480px);
    margin-bottom: 34px;
  }
}

@media (max-width: 760px) {
  .alice-homepage .free-features-title {
    width: min(282px, 76vw);
    margin-bottom: 24px;
  }

  .alice-homepage .free-app-carousel {
    width: 100%;
    max-width: 100%;
  }
}

/* Alice preview r125: keep the native amount sliders and layer a deterministic
   square-pixel trail behind their thumbs. Phone-only type corrections keep the
   longest result and the Before/After opening inside a real iPhone viewport. */
.alice-homepage .revenue-calculator-alice {
  display: block;
  width: clamp(74px, 7vw, 92px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 24px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 5px var(--white),
    0 8px 26px rgba(5, 5, 6, .14);
}

.alice-homepage .revenue-amount-slider-track {
  z-index: 0;
}

.alice-homepage .revenue-amount-slider::after {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 1;
  width: var(--range-progress);
  height: 28px;
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Crect width='3' height='3' rx='.35' fill='%23050506' fill-opacity='.34'/%3E%3C/svg%3E");
  background-position: right center;
  background-size: 6px 6px;
  content: "";
  opacity: .95;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .16) 18%, #000 72%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .16) 18%, #000 72%, #000 100%);
  transition: width .14s cubic-bezier(.22, 1, .36, 1);
}

.alice-homepage .revenue-calculator-control input[type="range"] {
  z-index: 2;
}

.alice-homepage .site-footer .footer-wordmark {
  background-color: #012169;
  background-image:
    linear-gradient(90deg, rgba(1, 20, 62, .08), rgba(1, 20, 62, .16)),
    url("./assets/flags/australia-fill.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.alice-homepage .site-footer .mega-pill {
  background: var(--alice-main-btn-gradient);
  box-shadow: var(--alice-main-btn-shadow);
  color: var(--white);
}

.alice-homepage .site-footer .mega-pill:hover {
  background: var(--alice-main-btn-gradient-hover);
  box-shadow: var(--alice-main-btn-shadow-hover);
}

@media (max-width: 760px) {
  .alice-homepage .before-after-title {
    font-size: clamp(31px, 8.5vw, 35px);
  }

  .alice-homepage .revenue-calculator-alice {
    width: 68px;
    margin-bottom: 18px;
  }

  .alice-homepage .revenue-calculator-result-annual strong {
    font-size: clamp(49px, 13.5vw, 58px);
  }

  .alice-homepage .revenue-calculator-label {
    justify-content: flex-start;
  }

  .alice-homepage .revenue-calculator-label label {
    margin-right: auto;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .revenue-amount-slider::after {
    transition: none;
  }
}

/* Alice preview r126: direct vanilla port of the supplied 21st.dev live canvas
   effect. The rejected r125 CSS follower is removed; the native input remains
   the only control and the canvas reads its current value every frame. */
.alice-homepage .revenue-amount-slider::after {
  display: none;
  content: none;
}

.alice-homepage .revenue-amount-slider-track {
  color: var(--black);
}

.alice-homepage .revenue-amount-slider-track::before {
  z-index: 2;
  pointer-events: none;
}

.alice-homepage .revenue-amount-slider-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.alice-homepage .revenue-calculator-control input[type="range"] {
  z-index: 3;
}

/* Alice preview r127: tighten the opening story, move the Australian reason
   beneath the free-phone proof, restore one small shared CTA tap cue and let
   the footer wordmark sit directly on black. */
.alice-homepage .hero-copy {
  align-items: center;
  text-align: center;
}

.alice-homepage .hero h1.hero-headline {
  max-width: 16ch;
  margin-right: auto;
  margin-bottom: clamp(18px, 2vw, 26px);
  margin-left: auto;
}

.alice-homepage .site-header .brand-liquid {
  min-height: 42px;
  font-size: 22.5px;
}

.alice-homepage .hero .alice-video-player {
  width: 138px;
}

.alice-homepage .hero .alice-video-player[data-state="expanded"] {
  width: 198px;
}

.alice-homepage .free-features-reason-row {
  margin: clamp(44px, 5vw, 66px) auto 0;
}

.alice-homepage .step-demo-cta {
  position: relative;
  overflow: visible;
  isolation: isolate;
  font-weight: 500;
  letter-spacing: .02em;
}

.alice-homepage .step-demo-cta b {
  font-weight: 300;
}

.alice-homepage .step-demo-cta .hero-cta-pointer-cue {
  right: clamp(5px, 2.4cqw, 11px);
  bottom: clamp(-4px, -.8cqw, -1px);
  width: clamp(24px, 8cqw, 36px);
  height: clamp(24px, 8cqw, 36px);
}

.alice-homepage .steps-grid.is-visible .step-demo-cta {
  animation: none;
}

.alice-homepage .site-footer .footer-links {
  margin-bottom: clamp(26px, 4vw, 48px);
}

.alice-homepage .site-footer .footer-links::after {
  margin-top: clamp(24px, 3vw, 38px);
  margin-bottom: 0;
}

.alice-homepage .site-footer .footer-wordmark {
  min-height: clamp(138px, 15vw, 218px);
  margin-bottom: clamp(46px, 5vw, 70px);
  background: transparent;
  background-image: none;
}

@media (max-width: 1100px) {
  .alice-homepage .hero .alice-video-player {
    width: 123px;
  }

  .alice-homepage .hero .alice-video-player[data-state="expanded"] {
    width: 177px;
  }
}

@media (max-width: 760px) {
  .alice-homepage .site-header .brand-liquid {
    min-height: 38px;
    font-size: 18px;
  }

  .alice-homepage .hero h1.hero-headline {
    max-width: min(16ch, calc(100vw - 44px));
  }

  .alice-homepage .hero .alice-video-player,
  .alice-homepage .hero .alice-video-player[data-state="expanded"] {
    width: 158px;
  }

  .alice-homepage .free-features-reason-row {
    margin-top: 38px;
  }

  .alice-homepage .site-footer .footer-wordmark {
    min-height: 138px;
    margin-bottom: 42px;
  }
}

@media (max-width: 760px) and (max-height: 743px) {
  .alice-homepage .hero .alice-video-player,
  .alice-homepage .hero .alice-video-player[data-state="expanded"] {
    width: 118px;
  }
}

/* Alice preview r128: one finder language, two honest video states and one
   separate carousel gesture cue. CTA pointer hands are removed in markup. */
.alice-homepage .finder-kicker {
  font-size: 10.8px;
}

.alice-homepage .finder-kicker > span {
  display: inline-block;
  margin-left: .18em;
  font-family: system-ui, sans-serif;
  font-size: 1.08em;
  letter-spacing: 0;
}

.alice-homepage .hiw-business-finder-shell {
  display: grid;
  gap: 0;
  padding: clamp(5px, 1.8cqw, 8px);
  border: 1px solid rgba(29, 29, 31, .1);
  border-radius: clamp(20px, 7.5cqw, 34px);
  background: #fff;
  box-shadow: 0 8px 22px rgba(29, 29, 31, .1);
  overflow: hidden;
}

.alice-homepage .hiw-business-finder-shell .hiw-business-field {
  min-height: clamp(34px, 11cqw, 48px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.alice-homepage .hiw-business-finder-shell .step-demo-cta {
  width: 100%;
  min-height: clamp(38px, 12.5cqw, 54px);
  box-shadow: 0 8px 20px rgba(88, 79, 255, .2);
}

@media (max-width: 760px) {
  .alice-homepage .finder-kicker {
    font-size: 9px;
    white-space: nowrap;
  }

  .alice-homepage .hero .alice-video-player {
    width: 111px;
  }

  .alice-homepage .hero .alice-video-player[data-state="expanded"] {
    width: 158px;
  }
}

@media (max-width: 760px) and (max-height: 743px) {
  .alice-homepage .hero .alice-video-player {
    width: 83px;
  }

  .alice-homepage .hero .alice-video-player[data-state="expanded"] {
    width: 118px;
  }
}

/* Alice preview r129: calmer feature headings and cross-WebKit gesture clarity. */
.alice-homepage .free-features-title {
  margin-bottom: 10px;
}

.alice-homepage .free-features-terms {
  margin: 0;
  color: rgba(29, 29, 31, .5);
  font: 500 10px/1.3 "Alice Manrope", "Manrope", sans-serif;
  letter-spacing: .01em;
}

.alice-homepage .free-app-heading {
  font-weight: 400;
  letter-spacing: -.04em;
}

.alice-homepage .free-app-heading-stage {
  height: clamp(70px, 7vw, 108px);
}

.alice-homepage .free-app-heading strong {
  position: relative;
  display: inline-block;
  font-weight: 800;
  white-space: nowrap;
}

.alice-homepage .free-app-heading-underline {
  position: absolute;
  right: -7%;
  bottom: -.24em;
  left: -7%;
  width: 114%;
  height: .36em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
  pointer-events: none;
}

@media (max-width: 760px) {
  .alice-homepage .hero h1.hero-headline {
    line-height: .93;
  }

  .alice-homepage .feature-mobile-active-copy[data-feature-index="5"] h2 {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(29px, 8vw, 36px);
    white-space: pre-line;
  }

  .alice-homepage .feature-mobile-chapter[data-mobile-feature="5"] .feature-mobile-copy h2 {
    white-space: pre-line;
  }

  .alice-homepage .free-features-title {
    margin-bottom: 8px;
  }

  .alice-homepage .free-app-heading-stage {
    height: 72px;
  }

  .alice-homepage .free-app-heading {
    max-width: 100%;
  }

  .alice-homepage .free-features-terms {
    font-size: 9px;
  }
}

/* Alice r154: a button-only press cue. The long rest keeps it calm; one small
   contraction and restrained rebound reads as a tap without restoring a hand. */
@keyframes alice-cta-tap-r154 {
  0%, 58%, 78%, 100% { scale: 1; }
  65% { scale: .965; }
  71% { scale: 1.018; }
}

.alice-homepage .business-finder button[type="submit"],
.alice-homepage .steps-grid.is-visible .step-demo-cta {
  transform-origin: 50% 50%;
  animation: alice-cta-tap-r154 3.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.alice-homepage .business-finder button[type="submit"]:active {
  animation: none;
  scale: .965;
}

@media (prefers-reduced-motion: reduce) {
  .alice-homepage .business-finder button[type="submit"],
  .alice-homepage .steps-grid.is-visible .step-demo-cta {
    animation: none;
    scale: 1;
  }
}
/* Alice redesign r156: compact demo control on iPad/desktop only. */
@media (min-width: 761px) {
  .alice-homepage .feature-phone-stage .call-playback .call-demo-button {
    width: 112px;
    min-width: 112px;
    min-height: 44px;
    padding-inline: 4px;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
  }
}