/* ==========================================================================
   Adovvy V4 — sections, in page order
   Responsive overrides live at the very end of this file and must stay
   there: at equal specificity the later rule wins.
   ========================================================================== */

/* Two-column section heads: headline left, lede right, bottoms aligned. */
.s2__head,
.crew__head,
.insights__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.crew__head .lede,
.insights__head .lede { margin: 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(880px, calc(100svh - var(--header-h)));
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 8vh, 104px);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 66%;
  z-index: 0;
}
/* The film reads on the right; the copy reads on clean paper on the left,
   and the bottom edge dissolves into the logo band. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #fff 34%, rgba(255, 255, 255, .9) 44%, rgba(255, 255, 255, .42) 58%, rgba(255, 255, 255, 0) 74%),
    linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 18%);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* --- The full-width hero (opt-in: .hero--wide) ------------------------------
   The film runs edge to edge, the copy sits at the far left over a lighter
   veil that has faded out by the middle of the screen, and the conversation
   takes the far right, so the picture and the messages each get their own
   room. The header opts in alongside it (.header--wide) so its edges line up
   with the copy and the thread. Desktop only: a phone keeps its band. */
:root { --wide-gutter: clamp(20px, 4vw, 72px); }
@media (min-width: 901px) {
  .hero--wide .hero__media { left: 0; width: auto; }
  .hero--wide .hero__veil {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .92) 24%, rgba(255, 255, 255, .6) 38%, rgba(255, 255, 255, 0) 54%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 16%);
  }
  .hero--wide > .shell { max-width: none; padding-inline: var(--wide-gutter); }
  .hero--wide .hero__grid { grid-template-columns: minmax(0, 620px) minmax(0, 1fr) minmax(300px, 420px); }
  .hero--wide .hero__copy { grid-column: 1; }
  .hero--wide .hero__thread { grid-column: 3; }
}

/* --- The hero, split (opt-in: .hero--split) ---------------------------------
   Inside the grid, as the rest of the page is: the copy in the left column
   on clean white, the conversation in the right column, and the film filling
   the right of the section behind them. The film's subject sits in the
   middle of her frame, so the crop is set to drop her into the gap between
   the copy and the right edge, and the conversation is anchored to the foot
   of the hero, below her face. Nothing is ever laid across it.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero--split .hero__media { width: 62%; --focal-x: 34%; --focal-y: 40%; }
  .hero--split .hero__veil {
    background:
      linear-gradient(90deg, #fff 37%, rgba(255, 255, 255, .92) 44%, rgba(255, 255, 255, 0) 56%);
  }
  /* The conversation is anchored to the foot of the hero, under her face,
     which is why the section gives its floor back here. */
  .hero--split { padding-block: clamp(48px, 8vh, 104px) clamp(20px, 3vh, 40px); }
  /* The grid takes the hero's full height, so the conversation can sit on
     its floor, under her face, while the copy stays on the centre line. */
  .hero--split .hero__grid { align-self: stretch; align-items: stretch; }
  .hero--split .hero__copy { align-self: center; }
  .hero--split .hero__thread {
    align-self: end;
    justify-self: end;
    width: min(100%, 400px);
  }
}
/* The panel crops harder as the window narrows, which enlarges her face on
   screen, so the focal point steps with it. Measured, not guessed. */
@media (min-width: 1500px) {
  .hero--split .hero__media { --focal-x: 42%; }
}

/* Laptops (901 to 1200 wide, any window wider than it is tall) keep the
   desktop arrangement:
   the promise on the left, in front of the picture's faded edge, and the
   conversation at the foot of the film on the right. The conversation
   narrows with the window, and its window gets shorter on short screens, so
   its top always stays under her chin. */
@media (min-width: 901px) {
  .hero--split .chat__log { height: clamp(150px, min(30vh, 48vh - 125px), 306px); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .hero--split .hero__thread { width: min(100%, clamp(330px, 36vw, 400px)); }
  .hero--split .chat__bubble { padding: 11px 15px 12px; font-size: 14px; }
  .hero--split .chat__ask { padding: 13px 18px; font-size: 14px; }
}

/* --- The hero, stacked ------------------------------------------------------
   Phones, and tablets held upright. The promise comes first, at the top,
   and its buttons sit in front of the film's top edge, which rises out of
   the white. The conversation takes the lower half of the frame, under her
   chin, never across her face, and carries on below the picture. Its
   window is a fixed height, as on a desktop: messages roll up through it,
   so nothing under the hero moves while the conversation plays.
   (The plain .hero's phone rules at the end of the file are for the other
   hero variants; the split hero, the one in use, stacks here.)
   -------------------------------------------------------------------------- */
@media (max-width: 900px), (max-width: 1200px) and (orientation: portrait) {
  .hero.hero--split {
    --film-ar: 1.45;
    --film-lift: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "film";
    min-height: 0;
    padding-block: clamp(26px, 4.5vh, 48px) clamp(40px, 6vh, 72px);
  }
  .hero--split .hero__grid { display: contents; }
  .hero--split .hero__copy {
    grid-area: copy;
    position: relative;
    z-index: 3;
    align-self: start;
    padding-inline: var(--gutter);
  }
  .hero.hero--split .h1 { font-size: clamp(36px, 7vw, 58px); }
  .hero--split .hero__media,
  .hero--split .hero__veil {
    grid-area: film;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--film-ar);
    align-self: start;
    margin-top: calc(-1 * var(--film-lift));
  }
  .hero--split .hero__media { --focal-x: 44%; --focal-y: 50%; }
  .hero--split .hero__media .ph__img,
  .hero--split .hero__media .ph__video { object-position: var(--focal-x) var(--focal-y); }
  .hero--split .hero__veil {
    background: linear-gradient(180deg,
      #fff 0,
      rgba(255, 255, 255, .78) calc(var(--film-lift) + 4px),
      rgba(255, 255, 255, 0) calc(var(--film-lift) + 64px),
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, .6) 84%,
      #fff 100%);
  }
  .hero--split .hero__thread {
    grid-area: film;
    position: relative;
    z-index: 2;
    order: 0;
    align-self: start;
    justify-self: end;
    width: min(100% - 2 * var(--gutter), 520px);
    margin: calc(100vw / var(--film-ar) * .56 - var(--film-lift)) var(--gutter) 0;
    padding: 0;
  }
  .hero--split .chat__log {
    height: clamp(270px, 32vh + 22px, 344px);
    /* Room at the sides and foot, so the newest message's shadow sits inside
       the window rather than being cut off by it. */
    margin: 0 -8px -36px;
    padding: 0 8px 44px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 100%);
  }
  /* The agent's label can land over the film or over the white under it,
     so it carries its own glass. */
  .hero--split .hero__thread .chat__by {
    align-self: flex-end;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .8);
    color: var(--ink-2);
    text-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .hero--split .hero__thread .chat__by .icon { color: var(--accent); }
  /* The glass keeps a visible edge where it runs on past the film, over
     the white. */
  .hero--split .hero__thread .chat__bubble,
  .hero--split .hero__thread .chat__ask { border-color: rgba(23, 23, 43, .1); }
  .hero--split .hero__thread .chat__turn--out .chat__bubble { border-color: rgba(142, 155, 255, .5); }
}
/* The homepage's full hero also stacks on landscape screens up to 1100px
   wide: its full-bleed film needs more width than that to keep her face
   clear of the copy and the conversation. The other pages keep the split
   layout there. */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) {
  .hero.hero--full {
    --film-ar: 1.45;
    --film-lift: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "film";
    min-height: 0;
    padding-block: clamp(26px, 4.5vh, 48px) clamp(40px, 6vh, 72px);
  }
  .hero--full .hero__grid { display: contents; }
  .hero--full .hero__copy {
    grid-area: copy;
    position: relative;
    z-index: 3;
    align-self: start;
    padding-inline: var(--gutter);
  }
  .hero.hero--full .h1 { font-size: clamp(36px, 7vw, 58px); }
  .hero--full .hero__media,
  .hero--full .hero__veil {
    grid-area: film;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--film-ar);
    align-self: start;
    margin-top: calc(-1 * var(--film-lift));
  }
  .hero--full .hero__media { --focal-x: 44%; --focal-y: 50%; }
  .hero--full .hero__media .ph__img,
  .hero--full .hero__media .ph__video { object-position: var(--focal-x) var(--focal-y); }
  .hero--full .hero__veil {
    background: linear-gradient(180deg,
      #fff 0,
      rgba(255, 255, 255, .78) calc(var(--film-lift) + 4px),
      rgba(255, 255, 255, 0) calc(var(--film-lift) + 64px),
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, .6) 84%,
      #fff 100%);
  }
  .hero--full .hero__thread {
    grid-area: film;
    position: relative;
    z-index: 2;
    order: 0;
    align-self: start;
    justify-self: end;
    width: min(100% - 2 * var(--gutter), 520px);
    margin: calc(100vw / var(--film-ar) * .56 - var(--film-lift)) var(--gutter) 0;
    padding: 0;
  }
  .hero--full .chat__log {
    height: clamp(270px, 32vh + 22px, 344px);
    /* Room at the sides and foot, so the newest message's shadow sits inside
       the window rather than being cut off by it. */
    margin: 0 -8px -36px;
    padding: 0 8px 44px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 100%);
  }
  /* The agent's label can land over the film or over the white under it,
     so it carries its own glass. */
  .hero--full .hero__thread .chat__by {
    align-self: flex-end;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .8);
    color: var(--ink-2);
    text-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .hero--full .hero__thread .chat__by .icon { color: var(--accent); }
  /* The glass keeps a visible edge where it runs on past the film, over
     the white. */
  .hero--full .hero__thread .chat__bubble,
  .hero--full .hero__thread .chat__ask { border-color: rgba(23, 23, 43, .1); }
  .hero--full .hero__thread .chat__turn--out .chat__bubble { border-color: rgba(142, 155, 255, .5); }
}
/* A phone's film is square: tall enough that her face clears the buttons
   above it and the conversation below it. */
@media (max-width: 600px) {
  .hero.hero--split { --film-ar: 1; --film-lift: 32px; }
  .hero--split .chat__log { height: clamp(270px, 34vh + 22px, 330px); }
  .hero--split .chat__bubble { max-width: 90%; padding: 11px 14px 12px; border-radius: 18px; font-size: 14px; }
  .hero--split .chat__turn { gap: 8px; }
  .hero--split .chat .avatar { width: 26px; height: 26px; font-size: 9px; }
  .hero--split .chat__shot { aspect-ratio: 16 / 10; margin-bottom: 7px; }
  .hero--split .chat__card { padding: 7px 7px 9px; }
  .hero--split .chat__card b { font-size: 12px; }
  .hero--split .chat__card em { font-size: 11px; }
  .hero--split .chat__add { right: 9px; bottom: 9px; width: 22px; height: 22px; font-size: 12px; }
  .hero--split .chat__ask { padding: 13px 18px; font-size: 14px; }
}
/* On a phone the two calls to action are one width, one above the other. */
@media (max-width: 480px) {
  .hero--split .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
}

/* --- The hero, full bleed with the copy on the grid (opt-in: .hero--full,
   with .hero--split) ---------------------------------------------------------
   The shopping film runs edge to edge with no white wash and fills most of
   the first screen, while the copy and the conversation stay on the page's grid, on
   the same lines as every section below, both sitting at the foot of the
   hero. The film is shown mirrored, so the shopper walks on the right of the
   frame, and its crop is measured, not guessed: her face was tracked frame
   by frame through the whole loop, and at every desktop size from 1101 to
   2560 wide (checked at common browser window sizes) it stays clear of
   every line of the copy and above the conversation. What holds it there:
   the mirrored frame keeps its left edge (--focal-x 100%), the crop sits 45%
   down it, the headline tops out at 50px, and the conversation column is
   340px. Below 1101px, and on
   upright tablets, the split hero's stacked layout takes over.
   -------------------------------------------------------------------------- */
.hero--full { --film-flip: -1; }
.hero--full .hero__media .ph__img,
.hero--full .hero__media .ph__video { transform: scaleX(var(--film-flip)); }
@media (min-width: 1201px), (min-width: 1101px) and (orientation: landscape) {
  .hero--full {
    /* Where the copy column ends, for the scrim: the grid's left line plus
       the column's width. */
    --copy-end: calc(max(0px, 50% - var(--shell) / 2) + var(--gutter) + min(max(34vw, 400px), 500px));
    /* A little under the window's height: nothing on a short laptop, up to
       90px on a tall screen, so the next section starts to show. */
    min-height: calc(100svh - var(--header-h) - clamp(0px, 12svh - 60px, 90px));
    /* The copy and the conversation share this bottom padding. It grows
       with the window's height: about 70px on a big screen, and close to
       the old 20px on a short laptop, where the copy needs the room to
       stay under her profile in the close-up of the phone. */
    padding-bottom: clamp(20px, 10vh - 45px, 72px);
    background: var(--deep);
  }
  .hero--full .hero__media { left: 0; width: auto; --focal-x: 100%; --focal-y: 45%; }
  /* The chat window is a little shorter to match, so its top stays under
     her chin. */
  .hero--full .chat__log { height: clamp(150px, min(23vh, 41vh - 125px), 240px); }
  .hero--full .hero__veil {
    background:
      linear-gradient(90deg, rgba(8, 10, 26, .56) 0, rgba(8, 10, 26, .46) calc(var(--copy-end) - 120px), rgba(8, 10, 26, .1) calc(var(--copy-end) + 90px), rgba(8, 10, 26, 0) calc(var(--copy-end) + 220px)),
      linear-gradient(0deg, rgba(8, 10, 26, .34) 0%, rgba(8, 10, 26, 0) 40%);
  }
  /* At least 380px for the copy column. */
  .hero--full .hero__grid { grid-template-columns: minmax(0, min(max(34vw, 400px), 500px)) minmax(0, 1fr) 380px; }
  /* The copy and the conversation share one bottom line, the hero's own
     bottom padding. */
  .hero--full .hero__copy { grid-column: 1; align-self: end; text-shadow: 0 1px 18px rgba(8, 10, 26, .35); }
  .hero--full .hero__thread { grid-column: 3; align-self: end; width: 100%; }
  /* The headline sizes to the window's height as well as its width, so its
     lines stay clear of her face on short and wide windows alike. */
  .hero.hero--full .h1 { max-width: none; font-size: clamp(36px, min(3.5vw, 4.8vh), 50px); color: #fff; }
  .hero--full .h1 em,
  .hero--full .split .w.em { color: #fff; }
  .hero--full .hero__promise,
  .hero--full .hero__promise span { color: #fff; }
  .hero--full .btn--secondary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; text-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hero--full .btn--secondary:hover { background: rgba(255, 255, 255, .22); }
  .hero--full .btn--primary { text-shadow: none; }
}
/* The headline keeps short lines wherever the window has the height for
   them: five lines, with the first sentence on two. From 1484px it always
   does, because the copy column stops growing there while her face keeps
   moving left, so a full first line ("AI Customer Experience.") would run
   into it. Short windows keep four lines, so the copy stays low. */
@media (min-width: 1484px),
       (min-width: 1201px) and (min-height: 640px),
       (min-width: 1101px) and (orientation: landscape) and (min-height: 640px) {
  .hero.hero--full .h1 { max-width: 9.5em; }
}
/* The narrowest desktops keep the full height: the copy needs every pixel
   there to stay under her profile in the close-up of the phone. */
@media (min-width: 1101px) and (max-width: 1200px) and (orientation: landscape) {
  .hero--full { min-height: calc(100svh - var(--header-h)); }
}
/* Stacked, the copy sits on white above the film: ink, with no indigo. */
@media (max-width: 1100px), (max-width: 1200px) and (orientation: portrait) {
  .hero--full .h1 em,
  .hero--full .split .w.em,
  .hero--full .hero__promise span { color: var(--ink); }
  .hero--full .hero__media { --focal-x: 40%; --focal-y: 40%; }
}

/* --- The conversation in the hero ------------------------------------------
   One thread, not four floating notes: the customer asks, Adovvy types, and
   the answer lands, over and over. The ask bar at the foot is a picture of
   an input, never a field: nothing in the hero is typable.
   -------------------------------------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: 10px; }
/* A real chat window: it is only so tall, and the oldest messages ride up
   out of the top as new ones land, fading rather than clipping. */
.chat__log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  height: clamp(212px, 30vh, 306px);
  overflow: hidden;
  /* Messages dissolve as they ride off the top, never cut. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 100%);
}
.chat__turn { display: flex; align-items: flex-end; gap: 10px; }
/* Added by the scene only: an unsent message holds no space, so each one
   lands just above the bar and pushes the thread up. */
.chat .is-pending { display: none !important; }
.chat__turn--out { justify-content: flex-end; }
.chat__bubble {
  margin: 0;
  max-width: 88%;
  padding: 13px 17px 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--e-2);
  font: 400 15px/1.5 var(--font);
  color: var(--ink);
}
.chat__turn--in .chat__bubble { border-bottom-left-radius: 7px; }
/* Both sides are white glass: the speaker is told by the side it sits on
   and by the agent's label, not by a blue block. */
.chat__turn--out .chat__bubble { border-bottom-right-radius: 7px; box-shadow: var(--e-2), 0 0 0 1px rgba(142, 155, 255, .35); }
.chat__bubble p { margin: 0; }
.chat__bubble p + .chat__cards { margin-top: 10px; }
/* What Adovvy is offering, inside the answer that offers it. */
.chat__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chat__card {
  position: relative;
  display: block;
  padding: 8px 8px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid var(--line);
}
.chat__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 8px;
  background: #fff;
}
.chat__card b { display: block; padding-inline: 3px; font: 600 12.5px/1.25 var(--font); color: var(--ink); }
.chat__card em { display: block; margin-top: 2px; padding-inline: 3px; font-style: normal; font: 400 11.5px/1.2 var(--font); color: var(--muted); }
.chat__add {
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 14px -6px rgba(72, 87, 194, .8);
}

.chat__by {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: 8px 0 -2px;
  font: 600 12px/1 var(--font);
  letter-spacing: .04em;
  color: var(--muted);
}
.chat__by .icon { font-size: 15px; color: var(--accent); }
.chat__ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding: 15px 20px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--e-2);
  font: 400 14.5px/1 var(--font);
  color: var(--muted);
  cursor: default;
}
.chat__ask .icon { font-size: 19px; color: var(--muted); }
/* Three dots while Adovvy is answering. */
.chat__dots { display: inline-flex; align-items: center; gap: 5px; height: 9px; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); animation: chatDot 1.1s var(--ease-soft) infinite; }
.chat__dots i:nth-child(2) { animation-delay: .15s; }
.chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Over the film the conversation is glass, so the picture stays visible
   through it and the type still clears its contrast. On a phone too: the
   stacked hero lays it over the film's foot. */
@media all {
  .hero--split .chat__bubble,
  .hero--split .chat__ask {
    background: rgba(255, 255, 255, .74);
    border-color: rgba(255, 255, 255, .6);
    box-shadow: 0 22px 44px -24px rgba(8, 10, 26, .55), 0 2px 8px -4px rgba(8, 10, 26, .28);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
  .hero--split .chat__turn--out .chat__bubble {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .8);
    box-shadow: 0 22px 44px -24px rgba(8, 10, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1px rgba(255, 255, 255, .35);
  }
  /* Homepage: Adovvy's replies are clearer glass than the shopper's, with
     a soft indigo glow, so the agent's side of the thread lifts off the film. */
  .hero--full .chat__turn--out .chat__bubble {
    background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(236, 238, 255, .5));
    border-color: rgba(255, 255, 255, .75);
    box-shadow: 0 0 26px -2px rgba(142, 155, 255, .6), 0 0 0 1px rgba(170, 180, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 44px -24px rgba(8, 10, 26, .5);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
  }
  .hero--split .chat__by { color: #fff; text-shadow: 0 1px 10px rgba(8, 10, 26, .55); }
  .hero--split .chat__by .icon { color: #fff; }
  .hero--split .chat .avatar {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px -14px rgba(8, 10, 26, .5);
  }
}

/* --- The hero as a card (opt-in: .hero--card inside .intro) -----------------
   After Decagon's first screen: the film fills a rounded card inset a few
   pixels from the window, the header floats over its top, and the copy sits
   straight on the picture with no wash. The only shading is a soft dark scrim
   behind the copy on the opening (night) shot; the journey fades it out with
   the copy, so every frame of the story after that plays clean. The logo band
   shares the first screen beneath the card. Desktop only: a phone keeps its
   band above the copy. */
@media (min-width: 901px) {
  :root { --intro-foot: 132px; --card-inset: 10px; }
  /* The header is its nav plus a 1px border: the page tucks under both. */
  .page--under-header { margin-top: calc(-1 * var(--header-h) - 1px); }
  /* Padding, not the card's margin: a margin would collapse through the
     intro, and the card would jump by the inset the moment the intro pins. */
  .intro { padding-top: var(--card-inset); }
  .hero--card {
    margin: 0 var(--card-inset);
    border-radius: 24px;
    height: calc(100svh - var(--card-inset) - var(--intro-foot));
    min-height: 580px;
    padding-block: calc(var(--header-h) + 20px) 32px;
    background: var(--deep);
    isolation: isolate;
  }
  .hero--card .hero__media { inset: 0; width: auto; }
  .hero--card .hero__veil {
    background: linear-gradient(90deg, rgba(8, 10, 26, .44) 0%, rgba(8, 10, 26, .22) 32%, rgba(8, 10, 26, 0) 56%);
  }
  .hero--card .hero__copy { text-shadow: 0 1px 18px rgba(8, 10, 26, .32); }
  .hero--card .h1 { color: #fff; }
  .hero--card .h1 em,
  .hero--card .split .w.em { color: #B7C0FF; }
  .hero--card .hero__promise { color: #fff; }
  .hero--card .hero__promise span { color: #B7C0FF; }
  .hero--card .hero__lede { color: rgba(255, 255, 255, .86); }
  .hero--card .hero__live {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: none;
  }
  .hero--card .btn--secondary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); color: #fff; text-shadow: none; }
  .hero--card .btn--secondary:hover { background: rgba(255, 255, 255, .22); }
  .hero--card .btn--primary { text-shadow: none; }
  .hero.hero--card.is-journey .hero__thread { margin-top: 0; }

  .intro .logos { padding-block: 22px 20px; border-bottom: 0; }
  .intro .logos__head { margin-bottom: 14px; }
  .intro .logos__title { font-size: clamp(18px, 1.45vw, 22px); }
  .intro .logos__sub { display: none; }
}
/* On a phone the card is the film's window at the top of the hero: the same
   rounded frame, inset from the edges, wide enough to show the whole scene,
   with the copy on white beneath it instead of over a fade. */
@media (max-width: 900px) {
  :root { --card-inset: 10px; }
  .hero--card .hero__media {
    top: var(--card-inset);
    left: var(--card-inset);
    right: var(--card-inset);
    width: auto;
    aspect-ratio: 1.6;
    border-radius: 20px;
  }
  .hero--card .hero__media .ph__img,
  .hero--card .hero__media .ph__video { object-position: 50% 50%; }
  .hero--card .hero__veil { display: none; }
  .hero--card .hero__grid { padding-top: calc((100vw - 2 * var(--card-inset)) / 1.6 + var(--card-inset) + 26px); }
}
.hero__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 26px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line-2);
  font: 600 12.5px/1 var(--font);
  color: var(--ink-2);
  box-shadow: var(--e-1);
}
.hero .h1 { max-width: 15ch; font-size: var(--fs-hero); }
.hero__promise {
  margin: 26px 0 0;
  font: 600 clamp(17px, 1.45vw, 21px)/1.45 var(--font);
  letter-spacing: -.01em;
  color: var(--ink);
}
.hero__promise span { color: var(--accent); }
.hero__lede { max-width: 46ch; margin-top: 14px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__thread { display: flex; flex-direction: column; gap: 14px; }
/* With the journey film on, the thread is two slots rather than a pile:
   each card names its slot, and a later card takes an earlier one's place
   (hero.js fades the earlier one out as it arrives). */
.hero.is-journey .hero__thread { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-content: start; }
.hero.is-journey .hero__thread .cmsg { grid-column: 1; grid-row: 1; margin-left: 0; }
.hero.is-journey .hero__thread .cmsg[data-slot="2"] { grid-row: 2; }
.hero.is-journey .hero__thread .cmsg--out { justify-self: end; }
/* On a desktop the thread rides high: the film's action (the bed, the walk,
   the robot) fills the middle and bottom of the frame in every scene, and the
   ceiling and sky above it are the free space. */
@media (min-width: 901px) {
  .hero.is-journey .hero__thread { align-self: start; margin-top: -7vh; }
}
.hero__thread .cmsg { align-self: flex-start; }
.hero__thread .cmsg--out { align-self: flex-end; }
.hero__thread .cmsg:nth-child(3) { margin-left: 8%; }
.avatar--brand { background: var(--accent); color: #fff; box-shadow: none; }
.avatar--brand svg { width: 58%; height: auto; }

/* ==========================================================================
   LOGOS
   ========================================================================== */
.logos {
  padding-block: clamp(36px, 5vh, 64px) clamp(44px, 6vh, 76px);
  border-bottom: 1px solid var(--line);
}
.logos__head { text-align: center; margin-bottom: clamp(26px, 4vh, 44px); }
.logos__title {
  margin: 0;
  font: 600 clamp(22px, 2vw, 30px)/1.2 var(--display);
  letter-spacing: -.025em;
  color: var(--ink);
}
.logos__title em { color: var(--accent); }
.logos__sub { margin: 10px auto 0; max-width: 54ch; font: 400 15px/1.55 var(--font); color: var(--muted); }
.logos__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logos__track { display: flex; width: max-content; will-change: transform; }
.is-live-section .logos__track { animation: marquee 48s linear infinite; }
.logos__viewport:hover .logos__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.logos__set {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  margin: 0;
  padding: 0 clamp(24px, 3vw, 48px) 0 0;
  list-style: none;
}
.logos__set li { display: grid; place-items: center; flex: none; }
.logos__set img {
  height: calc(clamp(22px, 2.2vw, 32px) * var(--s, 1));
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: .58;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.logos__set img:hover { opacity: 1; transform: scale(1.05); }

/* The homepage's strip after Jitter's: five still slots (three on a
   phone), and the whole row dissolves into the next set together. */
.logos__slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.logos__slot { display: grid; place-items: center; height: 48px; }
.logos__slot img {
  height: calc(clamp(22px, 2.2vw, 32px) * var(--s, 1));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .62;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), filter .5s var(--ease-out);
}
.logos__slot img.is-out { opacity: 0; transform: translateY(-10px) scale(.96); filter: blur(6px); }
.logos__slot img.is-in { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(6px); transition: none; }
@media (max-width: 700px) {
  .logos__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos__slot:nth-child(n + 4) { display: none; }
}

/* ==========================================================================
   THE PROBLEM
   ========================================================================== */
.s2__lines .lede { margin: 0; }
.s2__never {
  margin: 22px 0 0;
  font: 600 clamp(19px, 1.7vw, 24px)/1.3 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.s2__gaps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s2__gaps li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line-2);
  font: 600 12.5px/1 var(--font);
  color: var(--ink-2);
}
.s2__gaps .icon { font-size: 15px; color: var(--muted); }

.s2__board {
  margin-top: clamp(40px, 6vh, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
}
/* The homepage's board is three channel cards, centred. */
.page-home .s2__board { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; }
.lost {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 1.7vw, 24px);
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--line);
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-soft);
}
.lost > * { position: relative; z-index: 1; }
.lost:hover { transform: translateY(-4px); box-shadow: var(--e-3); border-color: var(--line-2); }
.lost__head { display: flex; align-items: center; gap: 11px; }
.lost__head img { flex: none; }
.lost__head h3 { margin: 0; font: 600 clamp(15.5px, 1.3vw, 18px)/1.2 var(--font); color: var(--ink); }
.lost__icon { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 16px; }


.lost__body { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.lost__msg,
.lost__line,
.lost__row { background: var(--paper); border-radius: 12px; }
.lost__msg { padding: 12px 14px; }
.lost__msg p { margin: 0; font: 400 14px/1.5 var(--font); color: var(--ink); }
.lost__msg time { display: block; margin-top: 7px; font: 400 12px/1 var(--font); color: var(--muted); }
.lost__line { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; font: 400 13.5px/1.35 var(--font); color: var(--ink); }
.lost__line b { font-weight: 600; white-space: nowrap; }
.lost__row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.lost__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lost__who b { font: 600 14px/1.2 var(--font); color: var(--ink); }
.lost__who em { font-style: normal; font: 400 12px/1.2 var(--font); color: var(--muted); }
/* --- The four apps inside the lost cards -----------------------------------
   Each conversation is drawn in the app it really happens in — a WhatsApp
   thread, an Instagram message, a checkout, a recents list — because a
   generic grey bubble is what a slide deck does, not what a customer sees.
   The brand cues are the header, the bubble shapes and the marks; the
   surfaces stay on the site's palette, so nothing turns warm.
   -------------------------------------------------------------------------- */
.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.app__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app__who b { font: 600 12.5px/1.2 var(--font); color: var(--ink); }
.app__who em { display: flex; align-items: center; gap: 5px; font-style: normal; font: 400 11px/1.2 var(--font); color: var(--muted); }
.app__who em .icon { font-size: 13px; }
.app__act { margin-left: auto; font-size: 16px; color: var(--muted); }
.app__body { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 11px; }

/* WhatsApp: green bar, tailed bubbles, the time inside the bubble. */
.app--wa .app__bar { background: #075E54; border-bottom-color: #075E54; }
.app--wa .app__who b { color: #fff; }
.app--wa .app__who em { color: rgba(255, 255, 255, .72); }
.app--wa .app__act { color: rgba(255, 255, 255, .8); }
.app--wa .avatar { background: #25D366; color: #06322C; }
.app--wa .app__body { background: var(--paper); }
.app__msg {
  position: relative;
  align-self: flex-start;
  max-width: 92%;
  margin: 0;
  padding: 8px 11px 7px;
  border-radius: 10px 10px 10px 3px;
  background: var(--card);
  border: 1px solid var(--line);
  font: 400 12.8px/1.45 var(--font);
  color: var(--ink);
}
.app__msg time { display: block; margin-top: 3px; font: 400 10.5px/1 var(--font); color: var(--muted); text-align: right; }

/* Instagram: the ringed avatar, round bubbles, the seen line. */
.app--ig .app__msg { border-radius: 16px 16px 16px 5px; background: var(--paper); border-color: transparent; }
.app__ring {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 210deg, #F9CE34, #EE2A7B, #6228D7, #F9CE34);
}
.app__ring .avatar { border: 2px solid var(--card); }
.app__seen { margin: 0; text-align: right; font: 500 10.5px/1 var(--font); color: var(--muted); }

/* Checkout: the step dots, the lines and their prices. */
.app__bar--plain { background: var(--card); }
.app__steps { margin-left: auto; display: flex; gap: 4px; }
.app__steps i { width: 16px; height: 4px; border-radius: 2px; background: var(--line-2); }
.app__steps i.is-done { background: var(--accent); }
.app__line { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 10px; background: var(--paper); }
.app__line span:not(.app__thumb) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app__line b { font: 600 12.5px/1.2 var(--font); color: var(--ink); }
.app__line em { font-style: normal; font: 400 11px/1.2 var(--font); color: var(--muted); }
.app__thumb { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 17px; }
.app__price { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Recents: a call list, with the row divider a phone would draw. */
.app--call .app__body { gap: 0; padding: 4px 11px; }
.app__call { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.app__call:last-child { border-bottom: 0; }
.app__info {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.4px solid var(--line-strong);
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--display);
  color: var(--muted);
}

/* One line on every card, so the four feet line up. */
/* One line on every card, so the four feet line up. */
/* The channel pill: its mark, its name and how many customers are waiting
   on it, the count set large so the pile is the first thing read. */
.lost .chan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "logo count";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  margin: 0;
  padding: 14px 22px 14px 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
}
.lost .chan__logo { grid-area: logo; width: 44px; height: 44px; padding: 5px; border-radius: 50%; background: var(--card); box-shadow: var(--e-1); }
.lost .chan__logo--call { display: grid; place-items: center; padding: 0; color: var(--ink); font-size: 22px; }
.lost .chan__name { grid-area: name; font: 500 12.5px/1.2 var(--font); color: var(--muted); }
/* The number on the left, its two-line label on the right, side by side. */
.lost .chan__count { grid-area: count; display: flex; align-items: center; gap: 8px; font: 500 14px/1.25 var(--font); color: var(--ink-2); }
.lost .chan__count b { flex: none; font: 600 clamp(22px, 1.9vw, 26px)/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lost .chan__count span { display: block; line-height: 1.2; }

.lost__foot { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; padding-top: 2px; font: 400 11.8px/1.4 var(--font); color: var(--muted); }
.lost__foot .lost__lost,
.lost__foot .lost__gone { flex: none; }
.lost__foot .icon { font-size: 15px; }
.lost__foot b { color: var(--ink); font-weight: 600; }
.lost__timer { font-variant-numeric: tabular-nums; }
/* The loss is carried by the words and the counter, not by an alarm
   colour: nothing on this page is red. */
.lost__gone,
.lost__lost { color: var(--ink) !important; font-weight: 600; }
.lost__lost { margin-left: auto; }

.s2__toll {
  margin: clamp(40px, 6vh, 64px) auto 0;
  display: flex;
  align-items: center;       /* the note sits on the figure's centre line, not its baseline */
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  text-align: center;
}
.s2__tollNum { margin: 0; font: 600 clamp(44px, 4.8vw, 72px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.s2__tollNote { margin: 0; max-width: 34ch; padding-left: 22px; border-left: 2px solid var(--line-2); font: 400 14.5px/1.5 var(--font); color: var(--muted); text-align: left; }
.s2__calm {
  margin: clamp(36px, 5vh, 56px) auto 0;
  max-width: 24ch;
  text-align: center;
  font: 600 clamp(24px, 2.5vw, 36px)/1.2 var(--display);
  letter-spacing: -.03em;
  color: var(--ink);
}
.s2__calm em { font-style: normal; color: inherit; }

/* ==========================================================================
   MEET ADOVVY
   ========================================================================== */
.meet__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.meet__visual {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 1092 / 1206;
  justify-self: center;
}
.meet__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.meet__fallback { width: 100%; height: auto; }
.meet__caps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 10px; }
.meet__cap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med);
}
.meet__cap:hover { transform: translateX(6px); border-color: var(--line-2); box-shadow: var(--e-2); }
.meet__cap .itile { transition: background-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-soft); }
.meet__cap:hover .itile { background: var(--hue); color: #fff; transform: rotate(-6deg); }
.meet__cap > span:last-child { font: 400 14.5px/1.5 var(--font); color: var(--body); }
.meet__cap b { display: block; margin-bottom: 3px; font: 600 16px/1.3 var(--font); color: var(--ink); }

.chain {
  position: relative;
  margin-top: clamp(56px, 8vh, 96px);
  padding: 30px clamp(20px, 3vw, 44px) 26px;
  border-radius: var(--r-2xl);
  background: var(--card);
  border: 1px solid var(--line);
}
.chain__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.chain__line path { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.chain__line .chain__run { stroke: var(--accent); stroke-dasharray: 26 999; stroke-width: 2.2; }
.chain__nodes {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.chain__node { display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 12.5px/1 var(--font); color: var(--ink-2); }
.chain__dot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line-2);
  font-size: 24px;
  color: var(--ink);
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med), transform var(--t-med) var(--ease-soft), box-shadow var(--t-med), border-color var(--t-med);
}
.chain__dot img { width: 24px; height: 24px; }
.chain__node:hover .chain__dot,
.chain__node.is-on .chain__dot { transform: translateY(-4px); background: var(--card); border-color: var(--accent-soft); box-shadow: 0 14px 28px -16px rgba(72, 87, 194, .7); }
.chain__hub {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 600 14.5px/1.4 var(--font);
  color: var(--ink);
  text-align: center;
}
.chain__mark { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 10px; background: var(--accent); color: #fff; flex: none; transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease-out); }
.chain.is-home .chain__mark { transform: scale(1.1); box-shadow: 0 0 0 7px rgba(72, 87, 194, .14); }
.chain__mark svg { width: 26px; height: auto; }

/* ==========================================================================
   FROM FIRST MESSAGE TO SALE
   ========================================================================== */
.flow__diagram { position: relative; margin-top: clamp(40px, 6vh, 72px); }
.flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.flow__wires path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
/* The lit wire is a second path over the dotted one, normalised to a length
   of 1 so it can draw itself from the platform up to its stage. */
.flow__wires .wire-lit { stroke: var(--hue, var(--accent)); stroke-width: 2.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease-out); }
.flow__wires .wire-lit.is-lit { stroke-dashoffset: 0; }
.flow.is-live-section .flow__wires .wire-in { animation: wireFlow .9s linear infinite; }
@keyframes wireFlow { to { stroke-dashoffset: -8; } }
.flow__stages {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.flow__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 18px 18px;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med);
}
.flow__stage .itile { --it: 52px; margin-bottom: 8px; transition: background-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-soft); }
.flow__name { margin: 0; font: 600 clamp(19px, 1.5vw, 22px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.flow__what { margin: 0; min-height: 3em; font: 400 14px/1.5 var(--font); color: var(--body); }
.flow__stat { margin: auto 0 0; width: 100%; padding: 16px 10px 14px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.flow__stat b { display: block; font: 600 clamp(26px, 2.2vw, 34px)/1 var(--display); letter-spacing: -.035em; color: var(--hue); font-variant-numeric: tabular-nums; }
/* Two lines on every card, whatever the caption says: a one-line caption
   next to five two-line ones breaks the row. */
.flow__stat span { display: block; max-width: 15ch; margin: 8px auto 0; font: 600 10.5px/1.35 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); min-height: 2.7em; }
.flow__stage:hover,
.flow__stage.is-on {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--hue) 36%, transparent);
  box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--hue) 75%, transparent);
}
.flow__stage:hover .itile,
.flow__stage.is-on .itile { background: var(--hue); color: #fff; transform: rotate(-6deg); }

.flow__hubwrap { position: relative; z-index: 1; margin-top: clamp(48px, 7vh, 80px); display: grid; justify-items: center; gap: clamp(44px, 6vh, 72px); }
.flow__hub {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 16px;
  align-items: center;
  padding: 18px 34px 18px 22px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #2E2C70, var(--deep));
  color: var(--on-deep);
  box-shadow: 0 30px 60px -30px rgba(21, 20, 43, .75), 0 0 0 6px rgba(72, 87, 194, .08);
  transition: box-shadow .8s var(--ease-out);
}
.flow__hub.is-on { box-shadow: 0 30px 60px -30px rgba(21, 20, 43, .75), 0 0 0 8px rgba(77, 229, 129, .16), 0 0 44px 4px rgba(77, 229, 129, .22); }
.flow__mark { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(77, 229, 129, .14); color: var(--green); }
.flow__mark svg { width: 26px; height: auto; }
.flow__hubname { font: 600 18px/1.2 var(--font); }
.flow__hubname i { display: inline-block; width: 1px; height: 15px; margin: 0 10px; background: rgba(244, 242, 238, .3); vertical-align: -2px; }
.flow__hubline { margin-top: 6px; font: 600 10.5px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--on-deep-3); }
.flow__channels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vw, 44px); }
.flow__channels li { display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 12.5px/1 var(--font); color: var(--ink-2); }
.flow__channels li > span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--e-1);
  font-size: 24px;
  color: var(--ink);
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med);
}
.flow__channels li > span img { width: 22px; height: 22px; }
.flow__channels li:hover > span { transform: translateY(-4px); box-shadow: var(--e-2); }
.flow__note {
  margin: clamp(32px, 4.5vh, 52px) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font: 600 11.5px/1 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.flow__note::before,
.flow__note::after { content: ''; width: min(160px, 16vw); height: 1px; background: var(--line-2); }

/* ==========================================================================
   SEE IT SELL — the Shopify demo
   ========================================================================== */
.s6__intro { max-width: 760px; }
.s6__panel {
  margin-top: clamp(36px, 5vh, 56px);
  border-radius: var(--r-2xl);
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--e-4);
  overflow: hidden;
}
.s6__rail {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 18px clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
  font: 600 13px/1 var(--font);
}
.s6__step { display: flex; align-items: center; gap: 9px; flex: none; color: var(--muted); transition: color var(--t-med) var(--ease-out); }
.s6__step i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity var(--t-med), box-shadow var(--t-med), background-color var(--t-med); }
.s6__step.is-done { color: var(--ink); }
.s6__step.is-done i { opacity: 1; background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.s6__step.is-active { color: var(--accent); }
.s6__step.is-active i { opacity: 1; background: var(--accent); box-shadow: 0 0 0 4px rgba(72, 87, 194, .16); }
.s6__bar { flex: 1; min-width: 12px; height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.s6__bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--green)); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
.s6__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.s6__thread { padding: clamp(18px, 2.2vw, 30px); border-right: 1px solid var(--line); overflow: hidden; position: relative; }
.s6__track { position: relative; display: flex; flex-direction: column; gap: 12px; }
.s6__track .msg { max-width: 88%; }
.s6__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 94%; }
.s6__product { border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: box-shadow var(--t-med), border-color var(--t-med); }
.s6__product.is-pick { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.s6__swatch {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: linear-gradient(160deg, var(--paper), var(--sand-2));
  color: var(--accent);
  font-size: 34px;
}
.s6__swatch span { font: 600 11.5px/1 var(--font); color: var(--ink-2); }
.s6__productmeta { padding: 9px 11px 10px; }
.s6__productmeta b { display: block; font: 600 12.5px/1.25 var(--font); color: var(--ink); }
.s6__productmeta span { display: block; margin-top: 4px; font: 500 11.5px/1.2 var(--font); color: var(--muted); }
.s6__context { padding: clamp(18px, 2.2vw, 30px); background: var(--paper); position: relative; overflow: hidden; }
.s6__ctxtrack { position: relative; display: flex; flex-direction: column; gap: clamp(16px, 2.2vh, 24px); }
.s6__ctxlabel { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s6__ctxlabel img { width: 14px; height: 14px; }
.s6__intent { font: 600 clamp(17px, 1.4vw, 20px)/1.3 var(--display); letter-spacing: -.015em; color: var(--ink); }
.s6__rows { display: flex; flex-direction: column; gap: 8px; font: 400 14px/1.4 var(--font); color: var(--body); }
.s6__row { display: flex; justify-content: space-between; gap: 12px; }
.s6__row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.s6__acts { display: flex; flex-direction: column; gap: 8px; font: 400 14px/1.45 var(--font); color: var(--ink-2); }
.s6__act { display: flex; gap: 10px; align-items: flex-start; }
.s6__act i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--green); color: #07301A; display: grid; place-items: center; }
.s6__act i svg { width: 11px; height: 11px; }
.s6__booking { border-radius: var(--r-md); padding: 16px 18px; background: linear-gradient(140deg, rgba(77, 229, 129, .16), rgba(72, 87, 194, .07)); border: 1px solid rgba(77, 229, 129, .34); }
.s6__booking .s6__ctxlabel { color: var(--green-ink); }
.s6__booking b { display: block; font: 600 17px/1.3 var(--font); color: var(--ink); }
.s6__booking span { display: block; margin-top: 5px; font: 400 13px/1.5 var(--font); color: var(--body); }

/* ==========================================================================
   THE AI WORKFORCE — specialists by industry
   ========================================================================== */
.crew__bar { margin-top: clamp(32px, 5vh, 52px); }
/* The five industries share the full width of the section, one equal
   column each, so the row reads as one control rather than a loose set. */
.crew__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.crew__tab {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 12px 14px;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--card);
  font: 600 14px/1 var(--font);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med), border-color var(--t-med), transform var(--t-fast);
}
.crew__tab .icon { font-size: 18px; color: var(--muted); transition: color var(--t-med); }
.crew__tab:hover { border-color: var(--line-strong); color: var(--ink); }
.crew__tab:active { transform: translateY(1px); }
.crew__tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.crew__tab[aria-selected="true"] .icon { color: var(--green); }
/* The selected tab's own timer while the switcher advances by itself. */
.crew__tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--green);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}

.crew__panel {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.crew__visual { position: relative; border-radius: var(--r-2xl); overflow: hidden; min-height: 440px; }
.crew__photo { position: absolute; inset: 0; }
.crew__photo .ph__img { transition: opacity .5s var(--ease-out), transform 1.4s var(--ease-out); }
.crew__photo.is-swapping .ph__img { opacity: 0; transform: scale(1.04); }
.crew__photo .ph__mark { z-index: 1; padding-bottom: 72px; transition: opacity .5s var(--ease-out); }
.crew__photo .ph__todo { z-index: 1; inset: 14px 14px auto auto; transition: opacity .5s var(--ease-out); }
.crew__photo.is-swapping .ph__mark,
.crew__photo.is-swapping .ph__todo { opacity: 0; }
.crew__photo [hidden] { display: none; }
.crew__badge {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.crew__count { font: 600 40px/1 var(--display); letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.crew__badge span { font: 400 13.5px/1.4 var(--font); color: var(--body); }
.crew__badge strong { display: block; font: 600 15px/1.3 var(--font); color: var(--ink); }
.crew__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.crew__agent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease-soft), border-color var(--t-med), box-shadow var(--t-med);
}
.crew__agent:hover { transform: translateX(4px); border-color: var(--accent-soft); box-shadow: var(--e-2); }
.crew__no { min-width: 18px; font: 600 11px/1 var(--font); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.crew__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 18px;
  transition: background-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-soft);
}
.crew__agent:hover .crew__icon { background: var(--accent); color: #fff; transform: rotate(-6deg); }
.crew__agent b { font: 600 14px/1.3 var(--font); color: var(--ink); }

/* ==========================================================================
   04b · TRAINED IN LAYERS
   The left side names the three layers; the right side proves them: one
   customer question, answered by an agent trained on the first layer, then
   the first two, then all three. The answer sharpens from generic to exact
   while the steps, the sources and the answer meter build up with it.
   ========================================================================== */
.s4b__in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: center;
}
.s4b__sub {
  margin: 10px 0 0;
  font: var(--w-display) clamp(20px, 2.1vw, 30px)/1.24 var(--font);
  letter-spacing: -.028em;
  color: var(--accent);
}
.s4b__in .lede { margin-top: clamp(16px, 2.2vh, 26px); }

/* --- The three passes ---------------------------------------------------
   Each card carries the colour of the layer it describes, so the list and
   the diagram beside it read as one object: navy for the foundation, the
   brand indigo for your industry, and the green signal for your business,
   because that is the layer that is live and kept in sync.

   The card the training cycle is on is lit -- tinted ground, accent bar,
   filled icon -- and a hairline along its foot fills over the length of the
   step, so the visitor can see the section is moving and how long until it
   moves on. Hovering takes the cycle over completely. */
.s4b__list {
  list-style: none;
  margin: clamp(26px, 3.6vh, 44px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 14px);
}
.s4b__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.3vw, 18px);
  align-items: start;
  padding: clamp(15px, 1.9vh, 20px) clamp(16px, 1.5vw, 22px) clamp(17px, 2.1vh, 22px);
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: default;
  transition: transform var(--t-med) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out);
}
/* Above the cursor sheen `.lift` paints on ::before. */
.s4b__item > * { position: relative; z-index: 2; }

/* The accent bar on the leading edge: a stub at rest, full height when lit. */
.s4b__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hue);
  opacity: 0;
  transform: scaleY(.4);
  transition: transform var(--t-med) var(--ease-soft), opacity var(--t-med) var(--ease-out);
  z-index: 3;
}
.s4b__item.is-active {
  border-color: var(--accent-soft);
  border-color: color-mix(in srgb, var(--hue) 30%, var(--border));
  background: linear-gradient(100deg, var(--tint) 0%, var(--surface) 74%);
  box-shadow: 0 16px 36px -26px color-mix(in srgb, var(--hue) 60%, transparent);
}
.s4b__item.is-active::after { opacity: 1; transform: scaleY(1); }
.s4b__item:hover { transform: translateY(-3px); }

.s4b__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--hue) 14%, transparent);
  transition: background-color var(--t-med) var(--ease-out),
              color var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-out);
}
.s4b__icon svg { width: 21px; height: 21px; display: block; }
.s4b__item.is-active .s4b__icon {
  background: var(--hue);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--hue) 75%, transparent);
}
.s4b__item:hover .s4b__icon { transform: scale(1.07) rotate(-5deg); }

.s4b__no {
  display: block;
  font: 600 10.5px/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
  transition: color var(--t-med) var(--ease-out);
}
.s4b__item.is-active .s4b__no { color: var(--ink); }
.s4b__body b {
  display: block;
  font: 600 clamp(15.5px, 1.3vw, 18px)/1.3 var(--font);
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 5px;
}
.s4b__body p {
  margin: 0;
  font: 400 clamp(13.5px, 1.05vw, 15px)/1.6 var(--font);
  color: var(--body);
}

/* The step timer along the foot of the lit card. Only while the cycle is
   running: under a hovering cursor there is no timer, so there is no bar. */
.s4b__item > .s4b__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}
.s4b__progress i {
  position: absolute;
  inset: 0;
  background: var(--hue);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.s4b.is-cycling .s4b__item.is-active .s4b__progress { opacity: .85; }
.s4b.is-cycling .s4b__item.is-active .s4b__progress i {
  animation: s4bFill var(--s4b-step, 2.8s) linear forwards;
}
@keyframes s4bFill { to { transform: scaleX(1); } }

/* --- One question, three answers ----------------------------------------
   Without the script this is simply the finished state: all three layers
   ticked, the exact answer showing, every source lit. The script adds
   `.is-live` and then walks the layers; anything it dims is dimmed only
   under that class. The colour of the layer on show is one registered
   property, so the glow, the meter and the top edge all ease between hues
   instead of jumping. */
@property --demo-hue {
  syntax: '<color>';
  inherits: true;
  initial-value: #1B864F;
}
.s4b__demo {
  position: relative;
  --demo-hue: var(--c-green);
  --grade: 1;
  transition: --demo-hue .7s var(--ease-out);
}
.s4b__demo::before {
  content: '';
  position: absolute;
  inset: 6% -5% -5% -5%;
  border-radius: 40px;
  background: radial-gradient(58% 52% at 62% 58%, color-mix(in srgb, var(--demo-hue) 18%, transparent), transparent 72%);
  pointer-events: none;
}
.s4b__card {
  position: relative;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--e-4);
  padding: clamp(18px, 2vw, 26px);
  overflow: hidden;
}
.s4b__card::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--demo-hue), transparent);
}

.s4b__top { display: flex; align-items: center; gap: 12px; }
.s4b__agent {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--deep);
  color: var(--green);
}
.s4b__agent svg { width: 24px; height: auto; }
.s4b__title { display: grid; gap: 4px; min-width: 0; }
.s4b__title b { font: 600 15px/1.2 var(--font); color: var(--ink); }
.s4b__title small { font: 500 12px/1.2 var(--font); color: var(--muted); }
.s4b__view {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font: 600 10px/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.s4b__view i { width: 6px; height: 6px; border-radius: 50%; background: var(--demo-hue); }

/* The three passes, cumulative: every layer up to the one on show is ticked. */
.s4b__steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.s4b__step {
  --step-hue: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  border-radius: 10px;
  font: 600 12.5px/1.2 var(--font);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med), box-shadow var(--t-med);
}
.s4b__step[data-layer="1"] { --step-hue: var(--c-indigo); }
.s4b__step[data-layer="2"] { --step-hue: var(--c-green); }
.s4b__tick {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--step-hue);
  color: #fff;
  transition: background-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-soft);
}
.s4b__tick svg { width: 9px; height: 9px; }
.s4b__demo.is-live .s4b__step { color: var(--muted); }
.s4b__demo.is-live .s4b__step .s4b__tick { background: var(--line-2); transform: scale(.85); }
.s4b__demo.is-live .s4b__step.is-done { color: var(--ink-2); }
.s4b__demo.is-live .s4b__step.is-done .s4b__tick { background: var(--step-hue); transform: none; }
.s4b__step.is-current,
.s4b__demo:not(.is-live) .s4b__step[data-layer="2"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgba(23, 23, 43, .4);
}

/* The conversation. The three answers share one grid cell, so the bubble
   is always as tall as the longest and nothing below it jumps. */
.s4b__chat { margin-top: 18px; display: grid; gap: 14px; }
.s4b__who {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font: 600 10.5px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.s4b__who img { width: 14px; height: 14px; }
.s4b__q p {
  margin: 0;
  max-width: 86%;
  padding: 12px 15px;
  border-radius: 16px 16px 16px 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  font: 500 14.5px/1.5 var(--font);
  color: var(--ink);
}
.s4b__a { justify-self: end; width: 90%; }
.s4b__a .s4b__who { justify-content: flex-end; }
.s4b__mini {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--deep);
  color: var(--green);
}
.s4b__mini svg { width: 11px; height: auto; }
.s4b__typing { display: none; gap: 3px; margin-left: 2px; }
.s4b__typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: typingDot 1s var(--ease-in-out) infinite; }
.s4b__typing i:nth-child(2) { animation-delay: .15s; }
.s4b__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.s4b__a.is-typing .s4b__typing { display: inline-flex; }

.s4b__answers { display: grid; }
.s4b__ans {
  grid-area: 1 / 1;
  align-self: start;          /* the cell keeps the tallest height; each bubble fits its own text */
  margin: 0;
  padding: 13px 16px;
  border-radius: 16px 16px 5px 16px;
  font: 500 14.5px/1.55 var(--font);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.s4b__ans.is-shown { opacity: 1; transform: none; }
/* Generic reads grey, informed reads in the brand tint, exact is the full
   brand with the green signal on its edge. */
.s4b__ans[data-layer="0"] { background: #EEF0F4; color: var(--ink-2); }
.s4b__ans[data-layer="1"] { background: var(--accent-tint); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.s4b__ans[data-layer="2"] { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(77, 229, 129, .28), 0 14px 28px -16px rgba(72, 87, 194, .7); }
.s4b__a.is-typing .s4b__ans { opacity: 0; transform: translateY(6px); }

.s4b__grade {
  margin-top: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.s4b__gradeLabel,
.s4b__sources::before {
  font: 600 10.5px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.s4b__gradeBar { height: 8px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.s4b__gradeBar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--demo-hue);
  transform: scaleX(var(--grade));
  transform-origin: 0 50%;
  transition: transform .9s var(--ease-out);
}
.s4b__gradeWord { display: grid; justify-items: end; min-width: 64px; }
.s4b__gradeWord b {
  grid-area: 1 / 1;
  font: 700 13px/1 var(--font);
  color: var(--demo-hue);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.s4b__gradeWord b.is-shown { opacity: 1; }

.s4b__sources {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--line-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.s4b__sources::before { content: 'Draws on'; margin-right: 4px; }
.s4b__sources li {
  --src: var(--c-navy);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font: 600 11.5px/1 var(--font);
  color: color-mix(in srgb, var(--src) 88%, #000);
  background: color-mix(in srgb, var(--src) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--src) 26%, transparent);
  transition: opacity var(--t-med) var(--ease-out), color var(--t-med), background-color var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-soft);
}
.s4b__sources li[data-layer="1"] { --src: var(--c-indigo); }
.s4b__sources li[data-layer="2"] { --src: var(--c-green); }
.s4b__demo.is-live .s4b__sources li:not(.is-on) {
  opacity: .5;
  color: var(--muted);
  background: var(--paper);
  border-color: var(--line);
  transform: scale(.96);
}


/* ==========================================================================
   WHAT ADOVVY DOES
   After Jitter's template wall: one row of large, quiet blocks drifting
   right to left. Each block is a service: its name, a small looping picture
   of the job on a grey stage, and one line. The row is written twice and
   moves by exactly one set, so the loop has no seam. Hover holds it still.
   ========================================================================== */
.svc__viewport {
  margin-top: clamp(40px, 6vh, 64px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.svc__track { display: flex; width: max-content; will-change: transform; }
.is-live-section .svc__track { animation: svcDrift 90s linear infinite; }
.svc__viewport:hover .svc__track { animation-play-state: paused; }
@keyframes svcDrift { to { transform: translate3d(-50%, 0, 0); } }
.svc__set { display: flex; gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0 clamp(14px, 1.6vw, 22px) 0 0; list-style: none; }
.svc__card {
  flex: none;
  width: clamp(290px, 30vw, 430px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 26px;
  border-radius: var(--r-2xl);
  background: var(--card);
  border: 1px solid var(--line);
}
.svc__tag { display: flex; align-items: center; gap: 14px; margin: 6px 8px 2px; font: 600 var(--fs-h3)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.svc__dot { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 22px; }
.svc__line { margin: 0 8px; font: 500 var(--fs-p)/1.5 var(--font); color: var(--ink-2); }
.svc__stage {
  position: relative;
  height: clamp(240px, 20vw, 300px);
  border-radius: var(--r-xl);
  background: var(--paper);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Chat: a question, Adovvy typing, the answer. */
.svc__stage--chat { display: flex; flex-direction: column; justify-content: center; align-items: stretch; place-items: initial; gap: 10px; padding: 0 24px; }
.svc__b { max-width: 78%; padding: 10px 14px; border-radius: 16px; font: 500 13.5px/1.4 var(--font); animation: svcStep 7s var(--ease-out) infinite; }
.svc__b--in { align-self: flex-start; background: var(--card); color: var(--ink); border-bottom-left-radius: 5px; box-shadow: var(--e-1); }
.svc__b--out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; animation-name: svcStepLate; }
.svc__typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--card); animation: svcTyping 7s linear infinite; }
.svc__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); animation: chatDot 1.1s var(--ease-soft) infinite; }
.svc__typing i:nth-child(2) { animation-delay: .15s; }
.svc__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes svcStep { 0%, 4% { opacity: 0; transform: translateY(8px); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes svcStepLate { 0%, 40% { opacity: 0; transform: translateY(8px); } 48%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes svcTyping { 0%, 14% { opacity: 0; } 18%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
.svc__stage--chat .svc__typing { position: absolute; right: 24px; top: 50%; translate: 0 -50%; }

/* Channels: the unread counts turn into "Replied". */
.svc__stage--apps { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 12px; padding: 0 28px; }
.svc__app { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--e-1); }
.svc__app b { font: 600 14px/1 var(--font); color: var(--ink); }
.svc__app em { position: absolute; right: 14px; font-style: normal; }
.svc__count { min-width: 26px; padding: 5px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 12px/1 var(--font); text-align: center; animation: svcOut 6s var(--ease-out) infinite; }
.svc__done { padding: 5px 10px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-ink); font: 600 12px/1 var(--font); animation: svcIn 6s var(--ease-out) infinite; }
.svc__app + .svc__app .svc__count,
.svc__app + .svc__app .svc__done { animation-delay: .5s; }
@keyframes svcOut { 0%, 45% { opacity: 1; transform: none; } 52%, 92% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes svcIn { 0%, 48% { opacity: 0; transform: scale(.8); } 56%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* Voice: a waveform that breathes. */
.svc__wave { display: flex; align-items: center; gap: 5px; height: 110px; }
.svc__wave i { width: 5px; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: 50% 50%; animation: svcWave 1.4s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--i) * -0.11s); opacity: calc(.45 + (var(--i) / 60)); }
@keyframes svcWave { from { transform: scaleY(.12); } to { transform: scaleY(1); } }

/* Bookings: a slot fills and the confirmation lands. */
.svc__stage--book { gap: 14px; align-content: center; }
.svc__cal { display: grid; grid-template-columns: repeat(5, 34px); gap: 7px; }
.svc__cal i { height: 26px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); }
.svc__cal i.is-pick { animation: svcPick 5s var(--ease-out) infinite; }
.svc__confirm { padding: 7px 12px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--e-1); font: 600 12.5px/1 var(--font); color: var(--ink); animation: svcIn 5s var(--ease-out) infinite; }
@keyframes svcPick { 0%, 30% { background: var(--card); border-color: var(--line); } 40%, 90% { background: var(--accent); border-color: var(--accent); } 100% { background: var(--card); } }

/* Cart recovery: the item left behind, then recovered. */
.svc__stage--cart { gap: 14px; align-content: center; }
.svc__item { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--card); box-shadow: var(--e-1); }
.svc__item img { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; }
.svc__item span { display: flex; flex-direction: column; gap: 3px; }
.svc__item b { font: 600 13.5px/1.2 var(--font); color: var(--ink); }
.svc__item em { font-style: normal; font: 400 12px/1.2 var(--font); color: var(--muted); }
.svc__recovered { padding: 7px 12px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-ink); font: 600 12.5px/1 var(--font); animation: svcIn 5.5s var(--ease-out) infinite; }

/* Languages: the greeting turns over. */
.svc__words { display: block; height: 56px; overflow: hidden; }
.svc__words b { display: block; height: 56px; font: 600 44px/56px var(--display); letter-spacing: -.035em; color: var(--ink); text-align: center; animation: svcWords 10s var(--ease-in-out) infinite; }
@keyframes svcWords {
  0%, 16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-100%); }
  40%, 56% { transform: translateY(-200%); }
  60%, 76% { transform: translateY(-300%); }
  80%, 96% { transform: translateY(-400%); }
  100% { transform: translateY(-500%); }
}

/* Insights: the bars grow. */
.svc__bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.svc__bars i { width: 22px; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--accent-soft); transform-origin: 50% 100%; animation: svcGrow 5s var(--ease-out) infinite; animation-delay: calc(var(--i) * .08s); }
.svc__bars i:last-child { background: var(--accent); }
@keyframes svcGrow { 0% { transform: scaleY(.1); } 30%, 88% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }

/* Handoff: the conversation travels from Adovvy to a person. */
.svc__stage--hand { display: flex; align-items: center; justify-content: center; gap: 14px; }
.svc__who { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: var(--e-2); font: 600 15px/1 var(--font); color: var(--ink); }
.svc__who--ai { background: var(--accent); }
.svc__who--ai svg { width: 26px; fill: #fff; }
.svc__path { position: relative; width: 110px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.svc__path i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(72, 87, 194, .15); animation: svcTravel 2.8s var(--ease-in-out) infinite; }
@keyframes svcTravel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .svc__track { animation: none !important; }
  .svc__viewport { overflow-x: auto; }
  .svc__set[aria-hidden="true"] { display: none; }
  .svc__stage *, .svc__stage *::before { animation: none !important; }
  .svc__typing, .svc__done { display: none !important; }
}

/* ==========================================================================
   EVERY INDUSTRY
   ========================================================================== */
.sectors__grid {
  list-style: none;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.sector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 12px 20px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  font: 600 13.5px/1.3 var(--font);
  color: var(--ink-2);
  transition: transform var(--t-med) var(--ease-soft), border-color var(--t-med), box-shadow var(--t-med), color var(--t-med);
}
.sector__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 27px;
  color: var(--ink);
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med), transform var(--t-med) var(--ease-soft), border-color var(--t-med);
}
.sector:hover { transform: translateY(-4px); border-color: var(--accent-soft); box-shadow: var(--e-2); color: var(--ink); }
.sector:hover .sector__icon { background: var(--accent); border-color: transparent; color: #fff; transform: scale(1.06) rotate(-6deg); }

/* ==========================================================================
   CUSTOMER STORY — YANA
   ========================================================================== */
.yana { overflow: hidden; }
.yana__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 84% 8%, rgba(106, 70, 200, .26), transparent 70%),
    radial-gradient(50% 50% at 6% 92%, rgba(72, 87, 194, .3), transparent 70%);
}
.yana .shell { position: relative; }
.yana__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.yana__copy .h2 { font-size: clamp(30px, 3.3vw, 48px); }   /* a long headline in a half-width column */
.yana__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.yana__brand img { width: 44px; height: auto; border-radius: 10px; background: #fff; padding: 3px; }
.yana__brand span { font: 600 14px/1 var(--font); color: var(--on-deep); }
.yana__brand i { font-style: normal; margin: 0 5px; color: var(--on-deep-3); }
.yana__poster { margin: 0; border-radius: var(--r-2xl); overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75); }
.yana__poster img { width: 100%; height: auto; }
.yana__stats {
  margin: clamp(52px, 7vh, 88px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-deep);
  border-bottom: 1px solid var(--line-deep);
}
.yana__stats .stat { padding: 30px clamp(12px, 2vw, 28px); border-left: 1px solid var(--line-deep); }
.yana__stats .stat:first-child { border-left: 0; padding-left: 0; }
.yana__stats dd { margin: 0; }
.yana__press { margin-top: clamp(52px, 7vh, 88px); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.yana__quote { margin: 0; font: 500 clamp(19px, 1.8vw, 25px)/1.45 var(--display); letter-spacing: -.015em; color: var(--on-deep); }
.yana__source { margin: 14px 0 0; font: 500 13.5px/1.5 var(--font); color: var(--on-deep-3); }
.yana__pressMedia { position: relative; padding-bottom: 28px; }
.yana__collage { width: 100%; height: auto; border-radius: var(--r-xl); }
.yana__article {
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 30%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65);
  transform: rotate(3deg);
  transition: transform var(--t-med) var(--ease-soft);
}
.yana__pressMedia:hover .yana__article { transform: rotate(0deg) translateY(-6px) scale(1.03); }

/* ==========================================================================
   HUMANOID ROBOTS & KIOSKS
   ========================================================================== */
.robots__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.robots__media { position: relative; margin: 0; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--e-4); }
.robots__media img { width: 100%; height: auto; transition: transform 1.4s var(--ease-out); }
.robots__media:hover img { transform: scale(1.03); }
.robots__media figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  font: 600 12px/1 var(--font);
  color: var(--ink);
}
.robots__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.robots__list li { display: flex; gap: 14px; align-items: flex-start; font: 400 14.5px/1.5 var(--font); color: var(--body); }
.robots__list b { display: block; margin-bottom: 2px; font: 600 15.5px/1.3 var(--font); color: var(--ink); }

/* ==========================================================================
   INSIGHTS — the dashboard
   ========================================================================== */
.dash {
  margin-top: clamp(40px, 6vh, 64px);
  padding: clamp(16px, 2.2vw, 30px);
  border-radius: var(--r-2xl);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--e-4);
}
.dash__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.dash__eyebrow { margin: 0; font: 600 10.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dash__hello { margin: 8px 0 0; font: 600 clamp(22px, 1.9vw, 28px)/1.2 var(--display); letter-spacing: -.025em; color: var(--ink); }
.dash__sub { margin: 6px 0 0; font: 400 14px/1.5 var(--font); color: var(--body); }
.dash__range { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line-2); font: 500 13px/1 var(--font); color: var(--ink-2); white-space: nowrap; }
.dash__range .icon { font-size: 16px; }
.dash__kpis { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med);
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
.kpi__icon { grid-row: span 3; align-self: start; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 18px; }
.kpi__label { font: 500 12px/1.3 var(--font); color: var(--muted); }
.kpi b { font: 700 clamp(18px, 1.55vw, 22px)/1.2 var(--font); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi em { font-style: normal; font: 600 11.5px/1 var(--font); color: var(--green-ink); }
.dash__grid { margin-top: 12px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.dash__card { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); }
.dash__trend { grid-column: span 8; }
.dash__sentiment { grid-column: span 4; }
.dash__channels { grid-column: span 4; }
.dash__cardHead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.dash__cardHead b { font: 600 14px/1.3 var(--font); color: var(--ink); }
.dash__cardHead > span { font: 500 12px/1 var(--font); color: var(--muted); }
.dash__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 500 11.5px/1 var(--font); color: var(--muted); }
.dash__legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dash__legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dash__chart { display: block; width: 100%; height: 160px; overflow: visible; }
.dash__gridlines line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash__area { fill: rgba(72, 87, 194, .07); }
.dash__line { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.dash__line--a { stroke: var(--accent); }
.dash__line--b { stroke: var(--c-violet); }
.dash__line--c { stroke: var(--c-green); }
.dash__axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px/1 var(--font); color: var(--muted); }
.donut { position: relative; width: 150px; height: 150px; margin: 2px auto 14px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 13; }
.donut__track { stroke: var(--sand); }
.donut__pos { stroke: var(--c-green); }
.donut__neu { stroke: #B4B8C5; }
.donut__neg { stroke: var(--c-plum); }
.donut__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 500 12px/1.3 var(--font); color: var(--muted); }
.donut__label b { display: block; font: 600 30px/1 var(--display); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash__keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dash__keys li { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--font); color: var(--body); }
.dash__keys i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dash__keys b { margin-left: auto; color: var(--ink); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 10px; font: 500 12.5px/1 var(--font); color: var(--body); }
.bars i { position: relative; height: 8px; border-radius: 4px; background: var(--sand); overflow: hidden; }
.bars i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--accent);
  transform: scaleX(var(--v));
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-out) var(--d, 0s);
}
.dash.is-arming .bars i::after { transform: scaleX(0); }
.intents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: n; }
.intents li { display: flex; align-items: center; gap: 10px; counter-increment: n; font: 500 13px/1.3 var(--font); color: var(--ink-2); }
.intents li::before { content: counter(n); flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--paper); font: 600 11px/1 var(--font); color: var(--muted); }
.intents b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recs li { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--paper); transition: transform var(--t-med) var(--ease-soft), background-color var(--t-med); }
.recs li:hover { transform: translateX(3px); background: var(--accent-tint); }
.recs .kpi__icon { width: 30px; height: 30px; font-size: 15px; }
.recs b { display: block; font: 600 13px/1.3 var(--font); color: var(--ink); }
.recs li > span:last-child { font: 400 12px/1.4 var(--font); color: var(--muted); }
.dash__note { margin: 12px 0 0; text-align: right; font: 500 11.5px/1 var(--font); color: var(--muted); }

/* ==========================================================================
   ONE INTEGRATION LAYER
   ========================================================================== */
.eco__map { position: relative; margin-top: clamp(40px, 6vh, 64px); }
.eco__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.eco__wires path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.eco__wires .wire-lit { stroke: var(--hue, var(--accent)); stroke-width: 2.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease-out); }
.eco__wires .wire-lit.is-lit { stroke-dashoffset: 0; }
.eco__cats {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.eco__core { grid-column: 2; grid-row: 2; position: relative; display: grid; place-items: center; min-height: 190px; }
.eco__cat:nth-child(2) { grid-column: 2; grid-row: 1; }
.eco__cat:nth-child(3) { grid-column: 1; grid-row: 1; }
.eco__cat:nth-child(4) { grid-column: 3; grid-row: 1; }
.eco__cat:nth-child(5) { grid-column: 1; grid-row: 2; }
.eco__cat:nth-child(6) { grid-column: 3; grid-row: 2; }
.eco__cat:nth-child(7) { grid-column: 1; grid-row: 3; }
.eco__cat:nth-child(8) { grid-column: 3; grid-row: 3; }
.eco__cat:nth-child(9) { grid-column: 2; grid-row: 3; }
.eco__core img { position: relative; z-index: 2; width: min(170px, 56%); height: auto; }
.eco__core::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: min(220px, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 0 0 12px rgba(72, 87, 194, .05), 0 30px 60px -30px rgba(72, 87, 194, .55);
}
.eco__pulse {
  position: absolute;
  width: min(220px, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  opacity: 0;
}
.is-live-section .eco__pulse { animation: ecoPulse 4.2s var(--ease-out) infinite; }
.is-live-section .eco__pulse--2 { animation-delay: 2.1s; }
@keyframes ecoPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.eco__cat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-content: start;
  padding: 18px;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med), border-color var(--t-med);
}
.eco__cat .itile { grid-row: span 2; transition: background-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-soft); }
.eco__cat b { align-self: end; font: 600 14.5px/1.3 var(--font); color: var(--ink); }
.eco__cat small { font: 500 11.5px/1.4 var(--font); color: var(--muted); }
.eco__brands { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.eco__brands i { font-style: normal; padding: 6px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); font: 600 12px/1 var(--font); color: var(--ink-2); }
.eco__cat:hover,
.eco__cat.is-on { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hue) 36%, transparent); box-shadow: var(--e-3); }
.eco__cat:hover .itile,
.eco__cat.is-on .itile { background: var(--hue); color: #fff; transform: rotate(-6deg); }
.eco__apps { margin: 30px auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; text-align: center; font: 500 15px/1.5 var(--font); color: var(--body); }
.eco__apps .icon { font-size: 20px; color: var(--accent); }
.eco__apps b { color: var(--ink); }

/* ==========================================================================
   LIVE BY FRIDAY
   ========================================================================== */
.s5b__in { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.s5b__meter { margin-top: clamp(24px, 3.4vh, 38px); display: flex; flex-direction: column; gap: 10px; }
.s5b__meterBar { display: block; height: 6px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.s5b__meterBar i { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--green)); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.s5b__meterText { font: 500 14px/1 var(--font); color: var(--muted); }
.s5b__meterText b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.s5b__panel { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--e-4); }
.s5b__bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-lift); }
.s5b__dots { display: flex; gap: 6px; }
.s5b__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); display: block; }
.s5b__barTitle { font: 600 13px/1 var(--font); color: var(--ink-2); }
.s5b__eta { margin-left: auto; font: 500 12.5px/1 var(--font); color: var(--muted); }
.s5b__rows { list-style: none; margin: 0; padding: 0; }
.s5b__rowItem { display: flex; align-items: center; gap: 14px; padding: clamp(13px, 1.5vh, 17px) clamp(16px, 1.8vw, 22px); border-bottom: 1px solid var(--line); transition: background-color var(--t-med) var(--ease-out); }
.s5b__rowItem:last-child { border-bottom: 0; }
.s5b__rowItem.is-on { background: var(--surface-lift); }
.s5b__logo { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--paper); color: var(--hue, var(--accent)); font-size: 19px; transition: background-color var(--t-med) var(--ease-out), color var(--t-med); }
.s5b__logo--chans { display: flex; gap: 2px; align-items: center; justify-content: center; }
.s5b__logo--chans img { width: 15px; height: 15px; }
.s5b__rowItem.is-on .s5b__logo { background: var(--hue); color: #fff; }
.s5b__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.s5b__meta b { font: 600 14.5px/1.2 var(--font); color: var(--ink); }
.s5b__meta em { font-style: normal; font: 400 12.5px/1.3 var(--font); color: var(--muted); }
.s5b__state { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 108px; font: 600 12.5px/1 var(--font); color: var(--muted); }
.s5b__spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); display: block; opacity: 0; }
.s5b__rowItem.is-busy .s5b__spin { opacity: 1; animation: s5bspin .7s linear infinite; }
@keyframes s5bspin { to { transform: rotate(360deg); } }
.s5b__rowItem.is-on .s5b__state { color: var(--green-ink); }
.s5b__rowItem.is-on .s5b__spin { opacity: 1; animation: none; border-color: var(--c-green); background: var(--c-green); box-shadow: inset 0 0 0 2px var(--c-green); }
.s5b__foot { display: flex; align-items: center; gap: 11px; padding: 16px clamp(16px, 1.8vw, 22px); border-top: 1px solid var(--line); background: var(--green-tint); font: 500 13.5px/1.4 var(--font); color: var(--green-ink); transition: opacity var(--t-slow) var(--ease-out); }
/* Visible by default; the scene hides it only while the rows connect. */
.s5b__panel.is-connecting .s5b__foot { opacity: 0; }
.s5b__ready { width: 22px; height: 22px; border-radius: 50%; background: var(--c-green); color: #fff; display: grid; place-items: center; flex: none; }
.s5b__ready svg { width: 13px; height: 13px; }

/* ==========================================================================
   NOT ANOTHER CHATBOT
   ========================================================================== */
.s9__head { max-width: 64ch; }
.s9__title { max-width: 18ch; }
.s9__lede { max-width: 52ch; }
.s9__compare { margin-top: clamp(38px, 5.5vh, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.s9__side { border-radius: var(--r-2xl); padding: clamp(24px, 2.6vw, 38px); display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 28px); }
.s9__side > * { position: relative; z-index: 1; }
.s9__side--old { background: var(--sand); border: 1px solid var(--line); }
.s9__side--new { background: var(--deep); border: 1px solid rgba(142, 155, 255, .14); --ring-t: 16s; --ring-a: .55; --ring-w: 1.4px; }
.s9__badge { display: inline-flex; align-items: center; gap: 10px; width: fit-content; border-radius: var(--r-pill); padding: 9px 18px; font: 600 13px/1 var(--font); }
.s9__badge--old { background: var(--card); border: 1px solid var(--line-2); color: var(--muted); }
.s9__badge--new { background: rgba(255, 255, 255, .1); color: #fff; }
.s9__badge--new .mark { display: block; width: 22px; color: var(--green); }
.s9__badge--new .mark svg { width: 100%; height: auto; display: block; }
.s9__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.s9__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: 12px;
  font: 400 clamp(14.5px, 1.15vw, 16.5px)/1.5 var(--font);
  transition: background-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.s9__side--old li { color: var(--muted); }
.s9__side--new li { color: var(--on-deep-2); }
.s9__side--new li:hover { background: rgba(255, 255, 255, .07); transform: translateX(4px); }
.s9__side--old li:hover { background: rgba(23, 23, 43, .04); transform: translateX(4px); }
.s9__x { flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.s9__x::before,
.s9__x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; border-radius: 2px; background: var(--muted); }
.s9__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.s9__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.s9__tick { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--hue, var(--green)); color: #fff; display: grid; place-items: center; }
.s9__tick svg { width: 12px; height: 12px; }
.s9__punch { margin: clamp(38px, 5.5vh, 72px) auto 0; max-width: 22ch; text-align: center; font: 600 clamp(24px, 2.6vw, 38px)/1.2 var(--display); letter-spacing: -.03em; color: var(--ink); }

/* ==========================================================================
   TRUST & RESPONSIBILITY
   ========================================================================== */
.trust__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.trust__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.trust__badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); font: 500 13px/1 var(--font); color: var(--body); }
.trust__badge b { color: var(--ink); font-weight: 700; }
.trust__badge .icon { font-size: 18px; color: var(--accent); }
/* The hand reaches out of a surface rather than floating in the section:
   a soft panel sits where the forearm enters, and the arm dissolves into it
   (a mask on the image), so it reads as coming out of the panel. */
.trust__handwrap { position: relative; max-width: 560px; margin: 36px 0 0 -8%; }
.trust__handwrap::before {
  content: '';
  position: absolute;
  top: 17%;
  bottom: 15%;
  left: 56%;
  right: -6%;
  border-radius: 28px;
  background:
    radial-gradient(circle, rgba(72, 87, 194, .16) 1px, transparent 1.5px) 0 0 / 14px 14px,
    radial-gradient(80% 90% at 0% 52%, rgba(142, 155, 255, .34), transparent 62%),
    linear-gradient(135deg, #FFFFFF 0%, #EEF0FB 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--e-3), inset 0 1px 0 #fff;
}
.trust__hand {
  position: relative;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 94%);
  mask-image: linear-gradient(90deg, #000 66%, transparent 94%);
}
.is-live-section .trust__hand { animation: handFloat 6.5s var(--ease-in-out) infinite; }
@keyframes handFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.trust__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pillar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med), border-color var(--t-med);
}
.pillar .itile { margin-bottom: 4px; transition: background-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-soft); }
.pillar b { font: 600 16px/1.3 var(--font); color: var(--ink); }
.pillar > span:last-child { font: 400 14px/1.5 var(--font); color: var(--body); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--e-3); border-color: var(--accent-soft); }
.pillar:hover .itile { background: var(--accent); color: #fff; transform: rotate(-6deg); }
.pillar--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; background: var(--deep); border-color: transparent; }
.pillar--wide .itile { background: rgba(255, 255, 255, .1); color: var(--green); margin: 0; }
.pillar--wide b { color: var(--on-deep); }
.pillar--wide > span:last-child { color: var(--on-deep-2); margin-left: auto; max-width: 32ch; text-align: right; }
.pillar--wide:hover .itile { background: var(--green); color: #07301A; }

/* ==========================================================================
   THE ASK
   ========================================================================== */
.s10 { background: var(--deep); padding-block: clamp(80px, 12vh, 150px); overflow: hidden; }
.s10__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.s10__orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.s10__orb--a { width: 46%; padding-bottom: 46%; left: -8%; top: 6%; background: rgba(106, 70, 200, .5); }
.s10__orb--b { width: 40%; padding-bottom: 40%; right: -6%; top: 22%; background: rgba(47, 107, 212, .42); }
.s10__orb--c { width: 34%; padding-bottom: 34%; left: 42%; bottom: -10%; background: rgba(16, 130, 124, .38); }
.is-live-section .s10__orb--a { animation: orbA 26s var(--ease-in-out) -4s infinite; }
.is-live-section .s10__orb--b { animation: orbB 32s var(--ease-in-out) -9s infinite; }
.is-live-section .s10__orb--c { animation: orbC 29s var(--ease-in-out) -2s infinite; }
@keyframes orbA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9%, 7%, 0) scale(1.12); } }
@keyframes orbB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-8%, 10%, 0) scale(1.08); } }
@keyframes orbC { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-11%, -8%, 0) scale(1.14); } }
.s10__bloom {
  position: absolute;
  left: 50%;
  bottom: -42%;
  transform: translateX(-50%);
  width: min(1500px, 130%);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(77, 229, 129, .24) 0%, rgba(106, 70, 200, .22) 38%, transparent 72%);
  filter: blur(50px);
}
.s10__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.s10 .h2 { max-width: 12ch; }
.s10__sub { margin: 18px 0 0; max-width: 26ch; font: 500 clamp(18px, 1.7vw, 23px)/1.4 var(--font); color: var(--on-deep-2); }
.s10__phones { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; max-width: 420px; }
.s10__phones a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: rgba(10, 10, 30, .45);
  border: 1px solid rgba(244, 242, 238, .12);
  color: var(--on-deep);
  transition: background-color var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-soft);
}
.s10__phones a:hover { background: rgba(255, 255, 255, .09); border-color: rgba(244, 242, 238, .28); transform: translateX(4px); }
.s10__cc { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(142, 155, 255, .16); font: 700 12px/1 var(--font); letter-spacing: .06em; color: #D4DAFF; }
.s10__phones b { display: block; font: 600 16px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.s10__phones em { display: block; margin-top: 3px; font-style: normal; font: 400 12.5px/1.3 var(--font); color: var(--on-deep-2); }
.s10__phones .icon { margin-left: auto; font-size: 20px; color: var(--green); }
.s10__reassure { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.s10__reassure li { display: flex; align-items: center; gap: 9px; font: 500 14px/1.4 var(--font); color: var(--on-deep-2); }
.s10__reassure svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: rgba(77, 229, 129, .16); color: var(--green); box-sizing: content-box; }
.s10__formwrap {
  position: relative;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(160, 168, 235, .22);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 2.8vw, 40px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.s10__formtitle { margin: 0; font: 600 clamp(22px, 1.9vw, 28px)/1.2 var(--display); letter-spacing: -.025em; color: #fff; }
.s10__formnote { margin: 10px 0 clamp(20px, 2.6vh, 28px); max-width: 44ch; font: 400 14.5px/1.6 var(--font); color: var(--on-deep-3); }
.s10__form { display: flex; flex-direction: column; gap: 16px; }
.s10__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.s10__submit { align-self: flex-start; margin-top: 4px; }
.s10__privacy { margin: 0; font: 400 13px/1.5 var(--font); color: var(--on-deep-3); }
.s10__done { text-align: center; padding-block: clamp(16px, 3vh, 34px); }
.s10__doneIcon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: var(--green); color: #07301A; }
.s10__doneIcon svg { width: 24px; height: 24px; }
.s10__done h3 { margin: 0; font: 600 clamp(22px, 1.9vw, 28px)/1.2 var(--display); letter-spacing: -.025em; color: #fff; }
.s10__done h3:focus { outline: none; }
.s10__done h3:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.s10__doneMsg { margin: 10px 0 22px; font: 400 15px/1.6 var(--font); color: var(--on-deep-3); }

/* ==========================================================================
   THE OMNICHANNEL AI WORKFORCE
   Three pairs, each one a problem and its answer. The answer sits under the
   problem with an arrow between them, so the section reads downward as a
   turn rather than across as a list.
   ========================================================================== */
.cmp__head {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vh, 32px);
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.cmp__lines { max-width: 760px; }
/* The document's heading is a sentence, not a phrase: a notch smaller than
   the page's other headlines so it lands in four lines, not seven. */
.cmp__head .h2 { font-size: clamp(28px, 3.1vw, 44px); }
.cmp__lines { display: grid; gap: 16px; }
.cmp__lines .lede { margin: 0; }
.cmp__punch {
  margin: 2px 0 0;
  font: 600 clamp(18px, 1.5vw, 22px)/1.45 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.cmp__punch em { font-style: normal; color: var(--accent); }

/* One board read across, two columns: the three moments without Adovvy on
   quiet grey, and the same three with Adovvy on a single white panel lifted
   off the board. Light throughout: the weight is in the lift and the ticks,
   not in dark fills. */
.vs {
  position: relative;
  max-width: 1080px;
  margin: clamp(40px, 6vh, 72px) auto 0;
  border-radius: var(--r-2xl);
  background: var(--sand);
  border: 1px solid var(--line);
}
/* The "with" column's panel: one white surface for the whole column, a
   hairline of indigo and a soft lift. The cells sit on top of it. */
.vs__lift {
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: 10px;
  width: calc(50% - 10px);
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 30px 60px -34px rgba(72, 87, 194, .45), var(--e-2);
  transform-origin: 50% 50%;
}
.vs__rows { list-style: none; margin: 0; padding: 0; }
.vs__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.vs__rows .vs__row + .vs__row .vs__cell { border-top: 1px solid var(--line); }
.vs__cell {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 22px clamp(22px, 3vw, 40px);
}
.vs__cell--new { padding-inline: clamp(30px, 3.6vw, 50px) clamp(30px, 3.6vw, 50px); }
.vs__cell p { margin: 0; font: 500 clamp(15.5px, 1.2vw, 17px)/1.55 var(--font); }
.vs__cell--old p { color: var(--muted); }
.vs__cell--new p { color: var(--ink); }
.vs__row--head .vs__cell { padding-block: 26px 12px; }
.vs__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11.5px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.vs__label--new { color: var(--accent); }
.cmp__mark { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-tint); }
.cmp__mark svg { width: 13px; height: auto; fill: var(--accent); }
.vs__rows .vs__row:last-child .vs__cell { padding-bottom: 28px; }
/* The marks: a quiet cross on the left, a lit tick on the right. */
.vs__mark {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.vs__glyph { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vs__mark--old { background: var(--sand-2); color: #8A8B97; }
.vs__mark--new { background: var(--accent); color: #fff; box-shadow: 0 8px 16px -8px rgba(72, 87, 194, .8); }

/* ==========================================================================
   THE PLATFORM'S FOUR CHANNELS
   ========================================================================== */
.plat__note { display: inline-flex; align-items: center; gap: 9px; margin: 24px 0 0; font: 500 14px/1.4 var(--font); color: var(--muted); }
.plat__cards {
  list-style: none;
  margin: clamp(44px, 6vh, 76px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.plat__card { padding: 26px 24px 28px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); }
.plat__card h3 { margin: 16px 0 0; font: 600 clamp(17px, 1.35vw, 19px)/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); }
.plat__card p { margin: 8px 0 0; font: 400 15px/1.6 var(--font); color: var(--muted); }
.plat__card .itile img { width: 24px; height: 24px; }

/* ==========================================================================
   BUILT TO SCALE
   ========================================================================== */
.scale__cards {
  margin-top: clamp(40px, 6vh, 68px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.scale__card { display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 38px); border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--line); }
.scale__card h3 { margin: 18px 0 0; font: 600 clamp(19px, 1.6vw, 24px)/1.25 var(--display); letter-spacing: -.025em; color: var(--ink); }
.scale__card p { margin: 10px 0 0; font: 400 15.5px/1.65 var(--font); color: var(--muted); }
.scale__facts {
  list-style: none;
  margin: 24px 0 0;
  margin-top: auto;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.scale__facts b { display: block; font: 600 clamp(26px, 2.4vw, 34px)/1 var(--display); letter-spacing: -.03em; color: var(--hue, var(--accent)); font-variant-numeric: tabular-nums; }
.scale__facts span { display: block; margin-top: 7px; font: 400 13.5px/1.45 var(--font); color: var(--muted); }
.scale__named {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 24px 0 0;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 500 14.5px/1.5 var(--font);
  color: var(--ink-2);
}
.scale__named b { color: var(--hue, var(--accent)); }
.scale__named p { margin: 0; font: 500 15px/1.5 var(--font); color: var(--ink-2); }
.scale__card { background: var(--surface-lift); }
/* The two card footers share one height, so their rules line up. */
.scale__facts, .scale__named { min-height: 88px; box-sizing: border-box; align-items: center; }
/* Set as three lines on a desktop so the card matches its neighbour. */
@media (min-width: 1101px) { .scale__lines span { display: block; } }
.scale__logo {
  flex: none;
  display: grid;
  place-items: center;
  height: 60px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--e-1, 0 1px 2px rgba(23, 23, 43, .06));
}
.scale__logo img { display: block; width: auto; height: 40px; clip-path: inset(1px 2.5% 1px 0); margin-right: -4px; }
.scale__mark { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tint, var(--accent-tint)); }
.scale__mark svg { width: 17px; height: auto; fill: var(--hue, var(--accent)); }

/* ==========================================================================
   THE LOGO WALL
   The strip under the hero moves; this one stands still, so the marks can
   actually be read.
   ========================================================================== */
.wall__grid {
  list-style: none;
  margin: clamp(36px, 5vh, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.wall__grid li {
  display: grid;
  place-items: center;
  padding: clamp(20px, 2.4vw, 34px) 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
}
.wall__grid img {
  height: calc(clamp(22px, 2.2vw, 30px) * var(--s, 1));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .62;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.wall__grid li:hover img { opacity: 1; transform: scale(1.04); }

/* ==========================================================================
   FAQ
   <details> elements, so every answer is readable before (and without) the
   script; the scene only adds the easing and closes the others.
   ========================================================================== */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 76px); align-items: start; }
.faq__ask { margin-top: 20px; }
.faq__list { display: grid; gap: 12px; }
.faq__item { border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.faq__item[open] { border-color: var(--line-2); box-shadow: var(--e-2); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px;
  cursor: pointer;
  list-style: none;
  font: 600 clamp(16px, 1.3vw, 18.5px)/1.45 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-lg); }
.faq__chev {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--accent);
  transition: transform var(--t-med) var(--ease-out);
}
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 22px 24px; }
.faq__a p { margin: 0; max-width: 64ch; font: 400 15.5px/1.7 var(--font); color: var(--muted); }

/* The journey's six cards are wider than the page's other rows: their
   captions and figures need the room more than the page needs the margin. */
@media (min-width: 1200px) {
  .flow > .shell { max-width: min(1460px, 100vw - 48px); padding-inline: 24px; }
}

/* ==========================================================================
   THE TWO ASKS (under the lost conversations, and after the robots)
   ========================================================================== */
.s2__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(30px, 4vh, 44px); }
.robots__cta {
  margin-top: clamp(48px, 7vh, 84px);
  padding-top: clamp(32px, 5vh, 52px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
}
.robots__ctas { flex: none; }
.robots__ask { margin: 0; font: 600 clamp(22px, 2.3vw, 32px)/1.25 var(--display); letter-spacing: -.03em; color: var(--ink); }
.robots__ask em { font-style: normal; color: inherit; }
.robots__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* The caption stays above the film once it is playing. */
.robots__media figcaption { z-index: 2; }

/* ==========================================================================
   ONE PARAGRAPH SIZE (homepage)
   Every body paragraph on the homepage is the lede's size, so the page reads
   at one measure from the hero down. The titles above those paragraphs step
   up to the h3 size so they still lead.
   ========================================================================== */
.page-home .vs__cell p { font-size: var(--fs-p); }
/* The problem section's head is centred: title, then its one line. */
.page-home #s2 .s2__head { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; text-align: center; }
.page-home #s2 .s2__head .h2 { margin-inline: auto; }
.page-home #robots .robots__copy .lede { margin: 18px 0 0; }
:is(.page-home, .page-agents) #meet .plat__card h3 { font-size: var(--fs-h3); }
:is(.page-home, .page-agents) #meet .plat__card p { font-size: var(--fs-p); line-height: 1.55; }
:is(.page-home, .page-agents) #flow .flow__name { font-size: var(--fs-h3); }
/* Four steps on the homepage, one row on a desktop and two by two on a
   phone. */
:is(.page-home, .page-agents) #flow .flow__stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1000px; margin-inline: auto; }
:is(.page-home, .page-agents) #flow .flow__stage { grid-column: auto; }
/* Room between each card's title and its figure. */
:is(.page-home, .page-agents) #flow .flow__stat { margin-top: 20px; }
/* Each caption breaks where its markup says, so all four sit on two lines. */
:is(.page-home, .page-agents) #flow .flow__stat span { max-width: none; }
@media (max-width: 720px) {
  :is(.page-home, .page-agents) #flow .flow__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* On a phone "Instant business understanding" takes three lines, so every
     caption keeps room for three and the four figure boxes stay one height. */
  :is(.page-home, .page-agents) #flow .flow__stat span { min-height: 4.05em; }
}
/* The robots title sits on exactly two lines, "Innovating AI agents" over
   "for customer service": the measure is set between the width of the
   longer line and the width the first line would have with "for" (9.2em
   and 10.5em at this weight and tracking), and the size keeps that measure
   inside the copy column. */
.page-home #robots .h2 { max-width: 16em; margin-inline: auto; font-size: clamp(28px, 3.3vw, 48px); }
@media (max-width: 900px) {
  .page-home #robots .h2 { font-size: clamp(30px, 6vw, 40px); }
}
/* Built to scale: its card titles and paragraphs match the page's. */
.page-home #scale .scale__card h3 { font-size: var(--fs-h3); }
.page-home #scale .scale__card p { font-size: var(--fs-p); line-height: 1.6; color: var(--body); }
/* The Master logo stands alone above the title, on its own blue. */
.page-home #yana .yana__brand img { width: 64px; padding: 0; background: none; border-radius: 8px; }
.page-home #robots .robots__list { gap: 18px; }
.page-home #robots .robots__list li { gap: 16px; font-size: var(--fs-p); line-height: 1.5; }
.page-home #robots .robots__list b { margin-bottom: 4px; font-size: var(--fs-h3); line-height: 1.25; }
:is(.page-home, .page-agents) #faq .faq__q { font-size: var(--fs-h3); }
:is(.page-home, .page-agents) #faq .faq__a p { font-size: var(--fs-p); line-height: 1.65; }

/* ==========================================================================
   RESPONSIVE — stays last
   ========================================================================== */
@media (max-width: 1100px) {
  .plat__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vh, 40px); }
  .crew__tab { padding: 11px 8px; gap: 7px; font-size: 13px; }
  .crew__tab .icon { font-size: 16px; }
  .s2__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .s2__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three across, twice: a six-track grid with every card two tracks wide. */
  .flow__stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .flow__stage { grid-column: span 2; }
  .flow__wires { display: none; }
  .crew__panel { grid-template-columns: minmax(0, 1fr); }
  .crew__visual { min-height: 0; aspect-ratio: 16 / 9; }
  .sectors__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yana__grid,
  .yana__press { grid-template-columns: minmax(0, 1fr); }
  .yana__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yana__stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .yana__stats .stat:nth-child(n + 3) { border-top: 1px solid var(--line-deep); }
  .dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__trend { grid-column: span 12; }
  .dash__sentiment,
  .dash__channels,
  .dash__intents { grid-column: span 6; }
  .dash__recs { grid-column: span 12; }
  .eco__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco__core { grid-column: 1 / -1; grid-row: 1; min-height: 168px; }
  /* A smaller disc once the core sits above the grid: at full size it
     spilled over the first card. */
  .eco__core::before,
  .eco__pulse { width: 140px; }
  .eco__core img { width: 104px; }
  .eco__cat:nth-child(n) { grid-column: auto; grid-row: auto; }
  .eco__wires { display: none; }
  .s5b__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .s9__compare { grid-template-columns: minmax(0, 1fr); }
  .trust__grid { grid-template-columns: minmax(0, 1fr); }
  .trust__handwrap { display: none; }
  .s10__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .s10 .h2,
  .s10__sub { max-width: none; }
}

/* The narrowest desktops: five columns still fit if the tabs drop their icon. */
@media (min-width: 901px) and (max-width: 1000px) {
  .crew__tab .icon { display: none; }
}

@media (max-width: 900px) {
  /* On a phone each row stacks: the problem, then its answer on its own
     white card, so the "with" column no longer needs one shared panel. */
  .page-home .s2__board { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .vs { background: transparent; border: 0; border-radius: 0; }
  .vs__lift,
  .vs__row--head { display: none; }
  .vs__rows { display: grid; gap: 14px; }
  .vs__row { grid-template-columns: minmax(0, 1fr); border-radius: var(--r-xl); background: var(--sand); border: 1px solid var(--line); overflow: hidden; }
  .vs__rows .vs__row + .vs__row .vs__cell { border-top: 0; }
  .vs__cell,
  .vs__cell--new { padding: 18px 20px; }
  .vs__rows .vs__row:last-child .vs__cell { padding-bottom: 18px; }
  .vs__cell--new { background: var(--card); border-top: 1px solid var(--accent-soft); }
  .scale__cards { grid-template-columns: minmax(0, 1fr); }
  .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s4b__in { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vh, 44px); }
  .s4b__demo { order: 2; max-width: 640px; }
  .crew__tabs { display: flex; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .crew__tabs::-webkit-scrollbar { display: none; }
  .crew__tab { flex: none; padding: 11px 16px; font-size: 14px; }
  /* The banner is 1.9:1 with the phone at 10-28% of its width and the face
     at 55-82%. As a full-bleed column on a phone, cover crops to the middle
     quarter of the frame -- his shoulder. So on a phone the film becomes a
     window at the top of the hero, cropped to hold both, with the veil
     fading it into the copy that reads over its lower edge. */
  .hero { display: block; min-height: 0; padding-block: 0 clamp(40px, 6vh, 72px); }
  /* A little shorter than the film's own window used to be: with the
     conversation ahead of the headline, every pixel of band pushes the
     promise further below the fold. */
  .hero__media { left: 0; right: 0; bottom: auto; width: 100%; aspect-ratio: 1.35; }
  /* The still and the film share the phone's crop, so nothing shifts
     when the film fades in over it. */
  /* The still and the film share the phone's crop, so nothing shifts
     when the film fades in over it. */
  .hero__media .ph__video,
  .hero__media .ph__img { object-position: 44% 45%; }
  /* On a phone the conversation sits on white under the film, so it is a
     plain list: no fixed window, nothing fading off the top. */
  .chat__log { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .hero__veil {
    top: 0;
    bottom: auto;
    height: calc(100vw / 1.35);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .9) 64%, #fff 86%);
  }
  .hero__grid { grid-template-columns: minmax(0, 1fr); padding-top: calc(100vw / 1.35 * .56); gap: 32px; }
  /* On a phone the conversation goes first: the cards land over the foot of
     the film, and the headline follows underneath them. */
  .hero__thread { order: -1; }
  .hero .h1 { max-width: 15ch; }
  .hero__thread .cmsg { max-width: 100%; }
  .hero__thread .cmsg:nth-child(3) { margin-left: 0; }

  .s2__head,
  .crew__head,
  .insights__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .meet__grid { grid-template-columns: minmax(0, 1fr); }
  .meet__visual { max-width: 380px; }
  /* Four to a row and the rest centred beneath: seven channels as 4 + 3,
     never six and a straggler. */
  .chain__nodes { flex-wrap: wrap; justify-content: center; gap: 18px 0; }
  .chain__node { flex: 0 0 25%; min-width: 0; }
  .chain__line { display: none; }
  .robots__grid { grid-template-columns: minmax(0, 1fr); }
  .s6__body { grid-template-columns: minmax(0, 1fr); }
  .s6__thread { border-right: 0; border-bottom: 1px solid var(--line); }
  .s6__rail { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
  .s6__rail::-webkit-scrollbar { display: none; }
  .s6__bar { width: 26px; flex: none; }
  .dash__top { flex-direction: column; }
}

@media (max-width: 720px) {
  .plat__cards { grid-template-columns: minmax(0, 1fr); }
  .wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scale__facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .robots__cta { flex-wrap: wrap; flex-direction: column; align-items: flex-start; }
  .s2__ctas .btn,
  .robots__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .s2__board { grid-template-columns: minmax(0, 1fr); }
  .s2__toll { flex-direction: column; align-items: center; }
  .s2__tollNote { text-align: center; padding-left: 0; border-left: 0; }
  .flow__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__stage { grid-column: auto; }
  .flow__hub { padding: 14px 22px 14px 16px; }
  .flow__hubname { font-size: 15.5px; }
  .crew__list { grid-template-columns: minmax(0, 1fr); }
  .crew__visual { aspect-ratio: 4 / 3; }
  .sectors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sector { padding: 18px 8px 16px; font-size: 12.5px; }
  .sector__icon { width: 52px; height: 52px; font-size: 23px; }
  .yana__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yana__stats .stat:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-deep); }
  .yana__stats .stat:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line-deep); }
  .yana__stats .stat:first-child,
  .yana__stats .stat:nth-child(2) { border-top: 0; }
  .dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two to a row leaves the figure too little room beside its icon, so the
     icon moves above the label and the figure gets the card's full width. */
  .kpi { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .kpi__icon { grid-row: auto; width: 32px; height: 32px; margin-bottom: 6px; }
  .dash__sentiment,
  .dash__channels,
  .dash__intents { grid-column: span 12; }
  .eco__cats { grid-template-columns: minmax(0, 1fr); }
  .trust__pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar--wide { flex-direction: column; align-items: flex-start; }
  .pillar--wide > span:last-child { margin-left: 0; text-align: left; }
  .s9__side { padding: 22px 20px; }
  .s10__row { grid-template-columns: minmax(0, 1fr); }
  .s5b__bar { flex-wrap: wrap; gap: 8px 12px; }
  .s5b__eta { margin-left: 0; width: 100%; }
  .s5b__state { min-width: 0; }
  .s5b__state .s5b__word { display: none; }
  .s5b__rowItem.is-on .s5b__state .s5b__word { display: inline; font-size: 11.5px; }
  .s4b__view { display: none; }
  .s4b__step { font-size: 11.5px; gap: 5px; padding: 8px 4px; }
  .s4b__q p, .s4b__ans { font-size: 14px; }
  .s4b__a { width: 94%; }
  .s4b__icon { width: 40px; height: 40px; border-radius: 12px; }
  .s4b__icon svg { width: 19px; height: 19px; }

}

@media (max-width: 480px) {
  .s4b__tick { display: none; }
  .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s6__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
  .s6__swatch { font-size: 26px; }
  .s6__productmeta b { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none !important; transform: none !important; }
  .ring::after,
  .eco__pulse { animation: none !important; opacity: 0; }
  .s10__orb { animation: none !important; }
}

/* ==========================================================================
   FEATURES BELT (homepage)
   Twenty-four features on pastel cards, on a belt that drifts right to left
   by itself on every screen. Arrows step it one card at a time, and it can
   be dragged or swiped; features.js drives it and copies the set so the
   belt loops without a seam.
   ========================================================================== */
.feat__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.feat__head .lede { margin: 16px 0 0; }
.feat__nav { display: flex; gap: 10px; flex: none; }
.feat__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--e-1);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.feat__btn:hover { background: var(--ink); color: #fff; }
.feat__btn:active { transform: scale(.94); }
.feat__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.feat__btn--prev .icon { transform: rotate(180deg); }
.feat__viewport {
  margin-top: clamp(32px, 5vh, 56px);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.feat__viewport.is-dragging { cursor: grabbing; }
.feat__track { display: flex; width: max-content; will-change: transform; }
.feat__set { display: flex; gap: clamp(14px, 1.4vw, 20px); margin: 0; padding: 4px clamp(14px, 1.4vw, 20px) 18px 0; list-style: none; }
.feat__card {
  position: relative;
  flex: none;
  width: clamp(250px, 21vw, 300px);
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.feat__card:hover { transform: translateY(-4px); }
.feat__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--tone);
  font-size: 26px;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--tone) 60%, transparent);
}
.feat__icon img { width: 26px; height: 26px; }
.feat__title { margin: auto 0 0; padding-top: 34px; font: 600 var(--fs-h3)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.feat__line { position: relative; z-index: 1; margin: 10px 0 0; font: 400 15px/1.5 var(--font); color: var(--ink-2); }
@media (max-width: 700px) {
  .feat__head { flex-direction: column; align-items: flex-start; }
  .feat__btn { width: 46px; height: 46px; font-size: 18px; }
  .feat__card { width: 76vw; max-width: 300px; min-height: 230px; }
}

/* ==========================================================================
   HOW IT WORKS, CARDS (homepage)
   Each step is a card washed in its own colour from the top, with its
   number in the corner, a solid icon tile and a quieter figure: the figure
   and its caption sit smaller, so the step's name leads.
   ========================================================================== */
:is(.page-home, .page-agents) #flow .flow__head .h2 { max-width: 17em; margin-inline: auto; }
:is(.page-home, .page-agents) #flow .flow__eyebrow { margin: 0 0 14px; }
:is(.page-home, .page-agents) #flow .flow__stage {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, var(--tint) 0%, var(--card) 58%);
  border-color: color-mix(in srgb, var(--hue) 16%, transparent);
  box-shadow: 0 18px 40px -32px color-mix(in srgb, var(--hue) 70%, transparent);
}
:is(.page-home, .page-agents) #flow .flow__stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--hue), color-mix(in srgb, var(--hue) 35%, #fff));
}
:is(.page-home, .page-agents) #flow .flow__num {
  position: absolute;
  top: 20px;
  right: 20px;
  font: 600 13px/1 var(--display);
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--hue) 60%, transparent);
}
:is(.page-home, .page-agents) #flow .flow__stage .itile { background: var(--hue); color: #fff; box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--hue) 80%, transparent); }
:is(.page-home, .page-agents) #flow .flow__stage:hover .itile,
:is(.page-home, .page-agents) #flow .flow__stage.is-on .itile { transform: rotate(-6deg) scale(1.04); }
:is(.page-home, .page-agents) #flow .flow__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  text-align: left;
  background: rgba(255, 255, 255, .75);
  border-color: color-mix(in srgb, var(--hue) 14%, transparent);
}
:is(.page-home, .page-agents) #flow .flow__stat b { flex: none; font-size: clamp(18px, 1.4vw, 21px); }
:is(.page-home, .page-agents) #flow .flow__stat span { min-height: 0; margin: 0; font: 500 13px/1.35 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
@media (max-width: 720px) {
  :is(.page-home, .page-agents) #flow .flow__stat { flex-direction: column; gap: 4px; }
  :is(.page-home, .page-agents) #flow .flow__stat span { min-height: 0; }
}
:is(.page-home, .page-agents) #flow .flow__eyebrow { font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* Built to scale: the first card draws the idea (brands, one shared
   layer, experiences), the second closes on the proof. */
.page-home #scale .scale__card p { flex: none; }
.layers { display: grid; justify-items: center; gap: 8px; margin-top: auto; padding-top: 26px; }
.layers__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.layers__row span { padding: 8px 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); box-shadow: var(--e-1); font: 500 13.5px/1 var(--font); color: var(--ink-2); }
.layers__row--out span { background: var(--tint); border-color: color-mix(in srgb, var(--hue) 20%, transparent); color: var(--i-indigo); }
.layers__arrow { width: 2px; height: 18px; background: linear-gradient(var(--line-2), var(--hue)); position: relative; }
.layers__arrow::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; border-right: 2px solid var(--hue); border-bottom: 2px solid var(--hue); transform: translateX(-50%) rotate(45deg); }
.layers__core { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 380px; justify-content: center; padding: 12px 18px; border-radius: var(--r-lg); background: var(--ink); color: #fff; font: 600 14.5px/1.2 var(--font); box-shadow: 0 16px 30px -18px rgba(21, 20, 43, .6); }
.layers__core .scale__mark { background: rgba(255, 255, 255, .12); }
.layers__core .scale__mark svg { fill: #fff; }
.named { margin: auto 0 0; padding-top: 26px; display: flex; align-items: center; gap: 18px; }
.named__logo { flex: none; height: 64px; width: auto; }
.named blockquote { margin: 0; padding: 16px 20px; border-radius: var(--r-lg); background: var(--tint); border: 1px solid color-mix(in srgb, var(--hue) 18%, transparent); }
.named blockquote p { margin: 0; font: 600 clamp(17px, 1.4vw, 20px)/1.35 var(--display); letter-spacing: -.02em; color: var(--ink); }
.named b { color: var(--hue); }
@media (max-width: 600px) { .named { flex-direction: column; align-items: flex-start; } }

/* Insights (homepage): four clean cards, one idea each. */
.dash--four .dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.dash--four .dash__card { padding: 22px 24px; border-radius: var(--r-lg); border-top: 3px solid var(--hue); }
.dash--four .dash__cardHead b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.dash__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }
.dash--four .bars li { grid-template-columns: 140px minmax(0, 1fr) 36px; font-size: 13.5px; }
.dash--four .bars i::after { background: var(--hue); }
.dash--four .bars em { font-style: normal; font: 600 13px/1 var(--font); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.dash__big { margin: 6px 0 0; display: flex; align-items: baseline; gap: 12px; font: 600 clamp(34px, 3.2vw, 46px)/1 var(--display); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash__big em { font-style: normal; font: 600 13px/1 var(--font); letter-spacing: 0; color: var(--green-ink); padding: 6px 9px; border-radius: var(--r-pill); background: var(--green-tint); }
.dash__sub { margin: 12px 0 0; max-width: 34ch; font: 400 14.5px/1.5 var(--font); color: var(--body); }
.dash--four .intents li { font-size: 14px; padding: 4px 0; }
.dash--four .recs li { padding: 12px 14px; }
.dash--four .recs b { font-size: 14px; font-weight: 500; }
.dash--four .recs li::before { content: "→"; color: var(--hue); font-weight: 600; }
@media (max-width: 800px) {
  .dash--four .dash__grid { grid-template-columns: minmax(0, 1fr); }
  .dash--four .bars li { grid-template-columns: 120px minmax(0, 1fr) 34px; }
}
.dash--four .dash__card { grid-column: auto; }

/* Robots (homepage): title and line on top, then the film on the left and
   the three points on the right, level with it. */
.page-home #robots .robots__head .lede { margin: 18px auto 0; }
.page-home #robots .robots__grid { margin-top: clamp(36px, 5vh, 60px); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.page-home #robots .robots__list { margin: 0; gap: 14px; }
.page-home #robots .robots__list li { padding: 20px 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--e-1); }

/* Integrations: one compact strip between the robots and the FAQs. */
.integ { padding-block: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line); }
.integ__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.integ__copy { display: flex; gap: 18px; align-items: flex-start; }
.integ__title { margin: 0; font: 600 clamp(22px, 2vw, 30px)/1.2 var(--display); letter-spacing: -.025em; color: var(--ink); }
.integ__copy p { margin: 10px 0 0; font: 400 var(--fs-p)/1.55 var(--font); color: var(--body); }
.integ__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.integ__list li { padding: 10px 16px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); box-shadow: var(--e-1); font: 600 14px/1 var(--font); color: var(--ink-2); }
.integ__list .integ__more { background: transparent; box-shadow: none; border-style: dashed; color: var(--muted); font-weight: 500; }
@media (max-width: 900px) { .integ__inner { grid-template-columns: minmax(0, 1fr); } }

/* Features belt, second pass: the line and arrows under the title are gone,
   so the belt sits closer to it; each card carries a small moving picture
   of its own job between the icon and the title; and every description
   fits two lines on a laptop or desktop. */
.feat__head { justify-content: center; text-align: center; }
.feat__viewport { margin-top: clamp(24px, 3.5vh, 40px); }
.feat__card { width: clamp(328px, 23vw, 340px); min-height: 0; }
.feat__title { margin-top: 18px; padding-top: 0; }
.feat__line { min-height: 3em; }
.feat__stage {
  position: relative;
  z-index: 1;
  height: 150px;
  margin-top: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .8);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  overflow: hidden;
}
.fx-chip { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--e-1); font: 600 12px/1 var(--font); color: var(--ink); white-space: nowrap; }
.fx-chip--ok { background: var(--green-tint); color: var(--green-ink); }
.fx-pop { animation: fxPop 5s var(--ease-out) infinite; }
@keyframes fxPop { 0%, 35% { opacity: 0; transform: translateY(6px) scale(.9); } 45%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Chat */
.fx-chat { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 16px; }
.fx-b { max-width: 82%; padding: 8px 11px; border-radius: 13px; font: 500 12px/1.35 var(--font); animation: svcStep 7s var(--ease-out) infinite; }
.fx-b--in { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: 4px; box-shadow: var(--e-1); }
.fx-b--out { align-self: flex-end; background: var(--tone); color: #fff; border-bottom-right-radius: 4px; animation-name: svcStepLate; }
.fx-dots { position: absolute; right: 16px; bottom: 6px; display: inline-flex; gap: 3px; padding: 8px 10px; border-radius: 12px; background: #fff; animation: svcTyping 7s linear infinite; }
.fx-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--tone); opacity: .6; animation: chatDot 1.1s var(--ease-soft) infinite; }
.fx-dots i:nth-child(2) { animation-delay: .15s; }
.fx-dots i:nth-child(3) { animation-delay: .3s; }
/* Voice */
.fx-wave { display: flex; align-items: center; gap: 4px; height: 44px; }
.fx-wave i { width: 4px; height: 100%; border-radius: 2px; background: var(--tone); animation: svcWave 1.3s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
.fx-mic, .fx-call, .fx-badge, .fx-spin { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: #fff; font-size: 24px; }
.fx-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tone); animation: fxRing 2s var(--ease-out) infinite; }
.fx-ring--2 { animation-delay: 1s; }
@keyframes fxRing { from { transform: scale(1); opacity: .7; } to { transform: scale(2); opacity: 0; } }
.fx-call { animation: fxShake 2s ease-in-out infinite; }
@keyframes fxShake { 0%, 60%, 100% { rotate: 0deg; } 65%, 75%, 85% { rotate: -10deg; } 70%, 80% { rotate: 10deg; } }
/* Apps */
.fx-apps { width: 100%; padding: 0 18px; }
.fx-app { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--e-1); }
.fx-app b { font: 600 13.5px/1 var(--font); color: var(--ink); }
.fx-app em { position: absolute; right: 12px; font-style: normal; }
.fx-count { min-width: 24px; padding: 5px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 11.5px/1 var(--font); text-align: center; animation: svcOut 6s var(--ease-out) infinite; }
.fx-done { padding: 5px 9px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-ink); font: 600 11.5px/1 var(--font); animation: svcIn 6s var(--ease-out) infinite; }
/* Languages */
.fx-words { display: block; height: 48px; overflow: hidden; }
.fx-words b { display: block; height: 48px; font: 600 38px/48px var(--display); letter-spacing: -.03em; color: var(--tone); text-align: center; animation: svcWords 10s var(--ease-in-out) infinite; }
/* Vision */
.fx-scan { position: relative; width: 104px; height: 74px; border-radius: 12px; overflow: hidden; box-shadow: var(--e-1); }
.fx-scan img { width: 100%; height: 100%; object-fit: cover; }
.fx-scan i { position: absolute; left: 0; right: 0; top: 4%; height: 2px; background: var(--tone); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--tone) 60%, transparent); animation: fxScan 2.4s ease-in-out infinite alternate; }
@keyframes fxScan { from { transform: translateY(0); } to { transform: translateY(66px); } }
/* Tiles */
.fx-tiles, .fx-recs { display: flex; gap: 10px; }
.fx-tiles span, .fx-recs span { width: 50px; height: 58px; border-radius: 10px; background: #fff; box-shadow: var(--e-1); }
.fx-pick { animation: fxPick 5s var(--ease-out) infinite; }
@keyframes fxPick { 0%, 30% { transform: none; box-shadow: var(--e-1); } 40%, 90% { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--tone), var(--e-2); } 100% { transform: none; } }
.fx-recs span { animation: fxSlide 5s var(--ease-out) infinite; }
.fx-recs span:nth-child(2) { animation-delay: .2s; }
.fx-recs span:nth-child(3) { animation-delay: .4s; }
@keyframes fxSlide { 0%, 10% { opacity: 0; transform: translateX(16px); } 25%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Lead meter */
.fx-meter { display: grid; justify-items: center; gap: 12px; width: 100%; padding: 0 24px; }
.fx-meter span { width: 100%; height: 10px; border-radius: 5px; background: #fff; overflow: hidden; }
.fx-meter i { display: block; height: 100%; border-radius: 5px; background: var(--tone); transform-origin: 0 50%; animation: fxFill 5s var(--ease-out) infinite; }
@keyframes fxFill { 0%, 10% { transform: scaleX(.05); } 45%, 90% { transform: scaleX(.92); } 100% { transform: scaleX(.05); } }
/* Map */
.fx-map { position: relative; width: 90px; height: 64px; border-radius: 12px; background: #fff repeating-linear-gradient(0deg, transparent 0 15px, rgba(23, 23, 43, .06) 15px 16px), repeating-linear-gradient(90deg, transparent 0 15px, rgba(23, 23, 43, .06) 15px 16px); box-shadow: var(--e-1); display: grid; place-items: center; }
.fx-pin { position: relative; z-index: 1; color: var(--tone); font-size: 28px; animation: fxBounce 1.6s ease-in-out infinite; }
.fx-ripple { position: absolute; left: 50%; top: 62%; width: 18px; height: 8px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--tone); animation: fxRing 1.6s var(--ease-out) infinite; }
@keyframes fxBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* Compare */
.fx-compare { display: flex; align-items: flex-end; gap: 10px; height: 80px; }
.fx-compare span { width: 22px; height: calc(var(--h) * 100%); border-radius: 6px 6px 3px 3px; background: #fff; box-shadow: var(--e-1); transform-origin: 50% 100%; animation: svcGrow 5s var(--ease-out) infinite; }
.fx-compare .fx-win { background: var(--tone); }
/* Product row */
.fx-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; box-shadow: var(--e-1); }
.fx-row img { width: 52px; height: 40px; border-radius: 8px; object-fit: cover; }
.fx-row span { display: flex; flex-direction: column; gap: 3px; }
.fx-row b { font: 600 12.5px/1.2 var(--font); color: var(--ink); }
.fx-row em { font-style: normal; font: 400 11.5px/1.2 var(--font); color: var(--muted); }
/* Price */
.fx-price { display: grid; justify-items: center; gap: 8px; }
.fx-price s { font: 500 16px/1 var(--font); color: var(--muted); }
.fx-price b { font: 600 34px/1 var(--display); letter-spacing: -.03em; color: var(--tone); }
/* Tracking */
.fx-track { position: relative; display: flex; justify-content: space-between; width: 72%; height: 12px; }
.fx-track::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: color-mix(in srgb, var(--tone) 30%, #fff); }
.fx-track span { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--tone); }
/* The parcel rides a full-width carrier, so its trip is a transform of the
   carrier (100% of the track) rather than a change to its left edge. */
.fx-track i { position: absolute; top: 1px; left: 0; width: 100%; height: 10px; animation: fxTravel 3s var(--ease-in-out) infinite; }
.fx-track i::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 20%, transparent); }
@keyframes fxTravel { 0% { transform: translateX(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(calc(100% - 10px)); opacity: 0; } }
/* Warranty, returns, loyalty, reviews */
.fx-badge { animation: fxBounce 2.4s ease-in-out infinite; }
.fx-spin .icon { animation: fxTurn 3s var(--ease-in-out) infinite; }
@keyframes fxTurn { 0%, 30% { rotate: 0deg; } 60%, 100% { rotate: 360deg; } }
.fx-stars { display: flex; gap: 4px; font-size: 26px; line-height: 1; }
.fx-stars i { font-style: normal; color: #fff; text-shadow: 0 1px 3px rgba(23, 23, 43, .15); animation: fxStar 5s var(--ease-out) infinite; }
.fx-stars i:nth-child(2) { animation-delay: .15s; }
.fx-stars i:nth-child(3) { animation-delay: .3s; }
.fx-stars i:nth-child(4) { animation-delay: .45s; }
.fx-stars i:nth-child(5) { animation-delay: .6s; }
@keyframes fxStar { 0%, 15% { color: #fff; transform: scale(.85); } 25%, 90% { color: #F5B82E; transform: none; } 100% { color: #fff; } }
@media (prefers-reduced-motion: reduce) {
  .feat__stage *, .feat__stage *::before { animation: none !important; }
  .fx-dots { display: none; }
}

/* How it works, second pass: no coloured line along the top of the cards,
   and each figure sits over its caption, both on one left edge. */
:is(.page-home, .page-agents) #flow .flow__stage::before { content: none; }
:is(.page-home, .page-agents) #flow .flow__stat { display: block; text-align: left; padding: 14px 16px; }
:is(.page-home, .page-agents) #flow .flow__stat b { display: block; }
:is(.page-home, .page-agents) #flow .flow__stat span { display: block; margin-top: 6px; max-width: none; }

/* Built to scale, second pass: both cards end in a picture that fills the
   same space. The second shows the brand's own AI as a profile, closing on
   the proof. */
.page-home #scale .scale__cards { align-items: stretch; }
.page-home #scale .scale__card { height: 100%; }
.persona { margin-top: auto; padding-top: 26px; display: grid; gap: 12px; }
.persona__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--e-1); }
.persona__logo { width: auto; height: 40px; }
.persona__head > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.persona__head b { font: 600 17px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.persona__head em { font-style: normal; font: 400 13px/1.3 var(--font); color: var(--muted); }
.persona__traits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.persona__traits li { padding: 11px 14px; border-radius: var(--r-md); background: var(--tint); border: 1px solid color-mix(in srgb, var(--hue) 16%, transparent); }
.persona__traits span { display: block; font: 600 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.persona__traits b { display: block; margin-top: 6px; font: 600 14px/1.25 var(--font); color: var(--ink); }
.persona__proof { margin: 2px 0 0; font: 600 16px/1.4 var(--display); letter-spacing: -.01em; color: var(--ink-2); text-align: center; }
.persona__proof b { color: var(--hue); }

/* The chat window clips what rides off its top, so on a desktop it gets
   room at the sides for the replies' glow, which it would cut off otherwise. */
@media (min-width: 1201px), (min-width: 1101px) and (orientation: landscape) {
  .hero--full .chat__log { margin-inline: -24px; padding-inline: 24px; }
}

/* Features belt, third pass: white cards, the moving picture keeps the
   card's light colour, and less room above the section. */
.feat__card { background: var(--card); border-color: var(--line); box-shadow: none; }
.feat__icon { background: var(--wash); }
.feat__stage { background: var(--wash); border-color: transparent; }
/* The narrowest desktops keep the earlier, narrower columns: there the
   wider copy and chat would come too close to her face. */
@media (min-width: 1101px) and (max-width: 1279px) and (orientation: landscape) {
  .hero--full { --copy-end: calc(max(0px, 50% - var(--shell) / 2) + var(--gutter) + min(max(31vw, 380px), 460px)); }
  .hero--full .hero__grid { grid-template-columns: minmax(0, min(max(31vw, 380px), 460px)) minmax(0, 1fr) 340px; }
}

/* Features belt, fourth pass: the title sits beside its icon at the top of
   the card, the description under the picture, and the section starts
   closer to the platform section above it. */
.feat__top { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.feat__top .feat__title { margin: 0; padding: 0; font-size: 18px; line-height: 1.2; }
.feat__top .feat__icon { flex: none; width: 46px; height: 46px; border-radius: 14px; font-size: 23px; }
.feat__stage { margin-top: 16px; }
.feat__line { margin-top: 14px; }
/* The hero's line ("Every message. Every call. Every sale. Handled 24/7",
   about 24.5em long) sits on one line from 1280px up: its size follows the
   copy column. Narrower, it wraps, and "Handled 24/7" moves down together
   (the markup keeps each phrase with no-break spaces). */
@media (min-width: 1280px) {
  .hero.hero--full .hero__promise { font-size: min(20px, calc(min(max(34vw, 400px), 500px) / 24.6)); }
}

/* FAQs (homepage): the title on top, then the questions across the full
   width of the grid. */
:is(.page-home, .page-agents) #faq .faq__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vh, 44px); }
:is(.page-home, .page-agents) #faq .faq__head { text-align: center; }
:is(.page-home, .page-agents) #faq .faq__head .h2 { margin-inline: auto; }
/* Integrations: copy only, no icon beside it. */
.integ__copy { display: block; }
/* On a phone the feature cards come back to the screen's size. */
@media (max-width: 700px) {
  .feat__card { width: min(300px, 80vw); }
}
.integ__title { text-wrap: balance; }

/* Phones and small tablets: the robots section stacks, the film first and
   the three points under it, each at the full width. */
@media (max-width: 900px) {
  .page-home #robots .robots__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .page-home #robots .robots__list li { padding: 18px 18px; }
}

/* Performance: every section's looping CSS animations rest while the
   section is off screen (core.js marks the ones in view), so the page only
   animates what can be seen. */
[data-live]:not(.is-live-section) *,
[data-live]:not(.is-live-section) *::before,
[data-live]:not(.is-live-section) *::after { animation-play-state: paused !important; }

/* The features belt sits inside the platform section, straight under the
   comparison, with no title of its own. */
/* 96px of air above the cards and 96px below them (the card row's own
   4px and 18px of shadow room are counted in); a little less on a phone. */
.page-home #meet .feat { margin-top: 92px; }
.page-home #meet.section--pad { padding-bottom: 78px; }
@media (max-width: 700px) {
  .page-home #meet .feat { margin-top: 60px; }
  .page-home #meet.section--pad { padding-bottom: 46px; }
}
.page-home #meet .feat__viewport { margin-top: 0; }
/* Staggered parts of each card's picture hold their first frame while they
   wait, instead of showing and then vanishing when their turn starts. */
.feat__stage * { animation-fill-mode: backwards; }

/* AI workforce page: its step numbers sit top right, where the homepage
   cards keep theirs, so they clear the icon. */
.page-agents #flow .flow__no { left: auto; right: 20px; top: 20px; font: 600 13px/1 var(--display); letter-spacing: .04em; color: color-mix(in srgb, var(--hue) 60%, transparent); }
.page-agents #flow .flow__what { max-width: none; }