/* ================================================================
   PaisaExpress: one thread, no interfaces.

   White is a person, spectrum is the system acting. Every scene demonstrates rather
   than describes, in light, type and motion only, the way the rest of the site does.

   Sizing: the site is drawn at 1440 and scaled by viewport width. Here that is one
   unit, --u, which is a 1440th of the viewport on a desktop and a 390th on a phone,
   so a number in this file is a pixel on the design at that size.

   Motion: each scene runs on its own clock. c2/paisaexpress.js adds .is-live while a
   scene is on screen; --s on an element is the second it arrives. With reduced motion
   or no script the page is simply still, and complete.
   ================================================================ */

.c2.cv.pe {
  --pe-rule: rgba(201, 182, 255, 0.14);
  --pe-lav: #a997ce;
  --pe-dusk: #83799e;
  --pe-pill: #291f39;
  --pe-night: #13101c;
  --pe-thread: linear-gradient(180deg, #1b4dfe, #ac24ff 35%, #e59dfa 60%, #ffd600 85%, #fe881b);
  --pe-cool: linear-gradient(90deg, #2ba7ff, #8a5bff 55%, #e59dfa);
  --pe-warm: linear-gradient(90deg, #ca45ff, #ffd600 70%, #fe881b);
  /* the client's own colours, from its codebase; the blue is lifted for type on night */
  --pex-blue: #1e6fb8;
  --pex-teal: #00a9a5;
  --pex-gold: #f4b400;
  --pex-grad: linear-gradient(90deg, #4f9fe6, #00c4bf 55%, #f4b400);
}
.c2.pe-page {
  --u: calc(100vw / 1440);
  position: relative;
  overflow-x: clip;
  background-color: var(--pe-night);
  color: #f9f9f9;
}
/* the site gives every section an opaque ground and its own padding; this has to
   outrank .c2.cv > section:not(.cv-hero):not(.c2-close) in the CosmiVoice sheet */
.c2.cv.pe.pe-page .pe-story > section.pe-scene {
  position: relative;
  padding: 0;
  background-color: transparent;
}
/* the story is one piece: light bleeds from scene to scene, and is only trimmed at
   the story's own edges so it never reaches the paper section that closes the page */
.c2 .pe-story {
  position: relative;
  /* the site's footer (z-index 5) is pulled up underneath the end of every page and
     the closing section covers it at 6; the story has to do the same or the footer
     shows through its last screen */
  z-index: 6;
  overflow: clip;
  background-color: var(--pe-night);
}
.c2 .pe-wrap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(1196 * var(--u));
  min-height: calc(820 * var(--u));
  margin: 0 auto;
  padding: calc(96 * var(--u)) 0 calc(72 * var(--u));
}
.c2 .pe-duo {
  display: grid;
  grid-template-columns: calc(560 * var(--u)) minmax(0, 1fr);
  column-gap: calc(100 * var(--u));
  align-items: start;
}
.c2 .pe-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* light, without a blur filter: a phone composites a gradient for free */
.c2 .pe-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
}
.c2 .pe-glow--who {
  right: calc(60 * var(--u));
  bottom: calc(-160 * var(--u));
  width: calc(760 * var(--u));
  height: calc(560 * var(--u));
  background: radial-gradient(closest-side, rgba(229, 157, 250, 0.4), rgba(255, 214, 0, 0.1) 60%, transparent);
}
.c2 .pe-glow--cool,
.c2 .pe-glow--warm,
.c2 .pe-glow--path,
.c2 .pe-glow--ring {
  left: calc(520 * var(--u));
  top: calc(-40 * var(--u));
  width: calc(760 * var(--u));
  height: calc(760 * var(--u));
  background: radial-gradient(closest-side, rgba(27, 77, 254, 0.42), rgba(172, 36, 255, 0.22) 50%, transparent);
}
.c2 .pe-glow--warm {
  background: radial-gradient(closest-side, rgba(172, 36, 255, 0.34), rgba(254, 136, 27, 0.2) 55%, transparent);
}
.c2 .pe-glow--ring {
  left: calc(820 * var(--u));
  top: calc(140 * var(--u));
}
.c2 .pe-glow--dawn {
  left: calc(-120 * var(--u));
  bottom: calc(-380 * var(--u));
  width: calc(1680 * var(--u));
  height: calc(760 * var(--u));
  background: radial-gradient(closest-side, rgba(254, 136, 27, 0.5), rgba(229, 157, 250, 0.26) 50%, transparent);
}
.c2 .pe-glow--count,
.c2 .pe-glow--voice {
  left: calc(320 * var(--u));
  top: calc(80 * var(--u));
  width: calc(820 * var(--u));
  height: calc(680 * var(--u));
  background: radial-gradient(closest-side, rgba(172, 36, 255, 0.34), rgba(27, 77, 254, 0.14) 55%, transparent);
}

/* ---------------- type ---------------- */
.c2 .pe-g {
  display: inline-block;
  padding-bottom: 0.08em;
  background-image: var(--pe-grad, var(--c2-spectrum));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.c2 .pe-g--cool { --pe-grad: var(--pe-cool); }
.c2 .pe-g--warm { --pe-grad: var(--pe-warm); }
.c2 .pe-g--brand { --pe-grad: var(--pex-grad); }
.c2 .pe-g--dawn { --pe-grad: linear-gradient(90deg, #ca45ff, #ffd600 70%, #fe881b); }

.c2 .pe-h1,
.c2 .pe-h2 {
  margin: calc(26 * var(--u)) 0 0;
  color: #fff;
  font-weight: 400;
  line-height: 1.04;
}
.c2 .pe-h1 {
  font-size: calc(73 * var(--u));
  letter-spacing: calc(-2.2 * var(--u));
}
.c2 .pe-h2 {
  font-size: calc(52 * var(--u));
  letter-spacing: calc(-1.5 * var(--u));
}
/* .c2-line2 carries margin-left: auto on the site, which centres a headline line */
.c2 .pe-h1 .c2-line2,
.c2 .pe-h2 .c2-line2 {
  display: block;
  margin-left: 0;
  margin-right: auto;
}
.c2.pe-page .caption {
  display: inline-flex;
}
.c2 .pe-num {
  color: var(--pe-lav);
  font-size: calc(15 * var(--u));
  letter-spacing: calc(2 * var(--u));
}
.c2 .pe-verb {
  margin: calc(18 * var(--u)) 0 0;
  font-size: calc(76 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: calc(-2.3 * var(--u));
  white-space: nowrap;
}
.c2 .pe-verb--call {
  margin-top: calc(26 * var(--u));
  font-size: calc(73 * var(--u));
}
.c2 .pe-sub {
  margin: calc(10 * var(--u)) 0 0;
  color: #f9f9f9;
  font-size: calc(27 * var(--u));
  line-height: 1.12;
  letter-spacing: calc(-0.7 * var(--u));
}
.c2 .pe-p {
  max-width: calc(520 * var(--u));
  margin: calc(24 * var(--u)) 0 0;
  color: var(--pe-lav);
  font-size: calc(18 * var(--u));
  font-weight: 300;
  line-height: 1.5;
}
.c2 .pe-p--small {
  margin-top: calc(16 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.55;
}
.c2 .pe-cap {
  display: block;
  color: var(--pe-lav);
  font-size: calc(12 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  line-height: 1.4;
  text-transform: uppercase;
}
.c2 .pe-col > .pe-cap {
  margin-top: calc(40 * var(--u));
}
.c2 .pe-dev {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border: 1px solid #ffd600;
  border-radius: 100vw;
  color: #ffd600;
  font-size: calc(12 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.c2 .pe-link {
  margin-top: calc(26 * var(--u));
  color: #f9f9f9;
  font-size: calc(16 * var(--u));
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.c2 .pe-link:hover {
  color: #ca45ff;
}

/* ================================================================
   The opening: light, type and motion, the way the site sets its own heroes. The
   copy sits centred over the night. Under it the agentic CRM is drawn once, in the
   site's own materials: a burst of spectrum light behind a mandala ring with the
   client's monogram at its heart, and five agents, each drawn as its work in one line inside a
   hairline ring, on a ring round it, the way the site draws its radar. The orbit turns a little with the scroll (--sp is the scene's
   scroll progress; on a desktop it is about 0.65 when the page opens): the mandala
   and the burst turn, the agents stay put. A radar sweep, the site's own, passes each
   agent once a turn. The field is a 1440 x 640 block in --u on a desktop and a
   342 x 300 block on a phone, where the agents are listed beneath it.
   ================================================================ */
.c2 .pe-open {
  padding-bottom: calc(80 * var(--u));
  background:
    radial-gradient(40% 26% at 50% 80%, rgba(172, 36, 255, 0.22), transparent 72%),
    #100c1c;
}
.c2 .pe-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.c2 .pe-scene-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.c2 .pe-stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: #f4efff; }
.c2 .pe-star-tw { animation: pe-twinkle var(--d) ease-in-out infinite; }

/* the copy, centred */
.c2 .pe-open-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(820 * var(--u));
  margin: 0 auto;
  padding-top: calc(140 * var(--u));
  text-align: center;
}
.c2 .pe-open-copy .c2-line2 { margin-left: auto; margin-right: auto; }
.c2 .pe-mark { width: auto; height: calc(46 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.c2 .pe-lede { max-width: calc(640 * var(--u)); margin-top: calc(22 * var(--u)); }
.c2 .pe-corner {
  position: absolute;
  z-index: 3;
  color: var(--pe-lav);
  font-size: calc(11 * var(--u));
  letter-spacing: calc(3 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.c2 .pe-corner--tr { right: calc(122 * var(--u)); top: calc(150 * var(--u)); }

/* ---- the orbit block ---- */
.c2 .pe-orb {
  --cx: 720;
  --cy: 320;
  --r: 280;
  --turn: calc((var(--sp, 0.65) - 0.65) * 50deg);
  position: relative;
  z-index: 1;
  width: calc(1440 * var(--u));
  height: calc(640 * var(--u));
  margin: calc(74 * var(--u)) auto 0;
}
/* the burst: the site's rays, spectrum by angle, soft beams, behind everything */
.c2 .pe-rays {
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc(var(--cy) * var(--u));
  width: calc(1500 * var(--u));
  height: calc(1500 * var(--u));
  margin: calc(-750 * var(--u)) 0 0 calc(-750 * var(--u));
  transform: rotate(var(--turn));
  pointer-events: none;
}
.c2 .pe-rays::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #1b4dfe, #2ba7ff, #ac24ff, #e59dfa, #fe881b, #ffd600, #ac24ff, #1b4dfe);
  -webkit-mask-image: repeating-conic-gradient(from 0deg, transparent 0deg, #000 3.4deg, transparent 6.8deg), radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0.12) 46%, transparent 62%);
  -webkit-mask-composite: source-in;
  mask-image: repeating-conic-gradient(from 0deg, transparent 0deg, #000 3.4deg, transparent 6.8deg), radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0.12) 46%, transparent 62%);
  mask-composite: intersect;
  opacity: 0.3;
  animation: pe-turn 160s linear infinite;
}
.c2 .pe-rays::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(172, 36, 255, 0.5), rgba(27, 77, 254, 0.18) 55%, transparent);
}
.c2 .pe-orb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c2 .pe-orb-svg--m { display: none; }
.c2 .pe-orb-ring { fill: none; stroke: #c9b6ff; stroke-width: 1; stroke-dasharray: 2 9; opacity: 0.38; }
.c2 .pe-orb-ring--in { opacity: 0.2; }
.c2 .pe-orb-run { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1.6 98.4; opacity: 0.9; filter: drop-shadow(0 0 4px #fff); animation: pe-orb-run 24s linear infinite; }
/* the sweep: the site's radar, one turn every 24 seconds; each agent brightens as it passes */
.c2 .pe-sweep {
  position: absolute;
  left: calc((var(--cx) - var(--r)) * var(--u));
  top: calc((var(--cy) - var(--r)) * var(--u));
  width: calc(var(--r) * 2 * var(--u));
  height: calc(var(--r) * 2 * var(--u));
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(229, 157, 250, 0.02) 18deg, rgba(229, 157, 250, 0.17) 58deg, transparent 59deg);
  animation: pe-turn 24s linear infinite;
  pointer-events: none;
}

/* the core: the site's mandala, with the client's monogram at its heart */
.c2 .pe-core {
  --cr: calc(214 * var(--u));
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc(var(--cy) * var(--u));
  width: var(--cr);
  height: var(--cr);
  margin: calc(var(--cr) / -2) 0 0 calc(var(--cr) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 10, 23, 0.92) 40%, rgba(13, 10, 23, 0.4) 78%, transparent);
}
.c2 .pe-mandala { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(var(--turn)); }
.c2 .pe-mandala-web { fill: none; stroke: #c9b6ff; stroke-width: 0.7; opacity: 0.3; transform-box: fill-box; transform-origin: center; animation: pe-turn 150s linear infinite; }
.c2 .pe-mandala-ring { fill: none; stroke-width: 3.5; }
.c2 .pe-mandala-ring--haze { stroke-width: 14; opacity: 0.22; filter: blur(6px); }
.c2 .pe-core-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  margin: calc(-48 * var(--u)) 0 0 calc(-48 * var(--u));
  border: 1px solid rgba(201, 182, 255, 0.18);
  border-radius: 50%;
  background: radial-gradient(closest-side, #0d0a17 60%, #150f24);
  box-shadow: 0 0 calc(40 * var(--u)) rgba(172, 36, 255, 0.28), inset 0 0 calc(24 * var(--u)) rgba(0, 0, 0, 0.6);
}
.c2 .pe-mono--core { --m: calc(42 * var(--u)); }
.c2 .pe-orb-cap {
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc((var(--cy) + 128) * var(--u));
  transform: translateX(-50%);
  color: var(--pe-lav);
  font-size: calc(11.5 * var(--u));
  letter-spacing: calc(3.4 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}

/* an agent: its work drawn in one line, in its own hue, inside a hairline ring on the orbit */
.c2 .pe-orb-agent {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u));
}
@supports (top: calc(1px * sin(1deg))) {
  .c2 .pe-orb-agent {
    --a: calc(var(--deg) * 1deg);
    left: calc((var(--cx) + var(--r) * cos(var(--a))) * var(--u));
    top: calc((var(--cy) + var(--r) * sin(var(--a))) * var(--u));
  }
}
.c2 .pe-orb-ic {
  --halo: 0 0 calc(18 * var(--u)) color-mix(in srgb, var(--hue) 28%, transparent), inset 0 0 calc(10 * var(--u)) color-mix(in srgb, var(--hue) 14%, transparent);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--hue) 70%, transparent);
  border-radius: 50%;
  background: radial-gradient(closest-side, #0e0b19 70%, #151026);
  box-shadow: var(--halo);
  color: var(--hue);
  /* the sweep's bright edge is 58deg past the top; an agent at --deg (from 3 o'clock, clockwise) is at --deg + 90 from the top */
  animation: pe-orbi 24s ease-out infinite;
  animation-delay: calc(-24s * (var(--deg) + 32) / 360);
}
.c2 .pe-orb-ic svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); filter: drop-shadow(0 0 calc(4 * var(--u)) color-mix(in srgb, var(--hue) 60%, transparent)); }
.c2 .pe-orb-label {
  position: absolute;
  top: 50%;
  left: calc(100% + 16 * var(--u));
  transform: translateY(-50%);
  white-space: nowrap;
  text-align: left;
}
.c2 .pe-orb-agent--left .pe-orb-label { left: auto; right: calc(100% + 16 * var(--u)); text-align: right; }
.c2 .pe-orb-agent--top .pe-orb-label { left: 50%; top: auto; bottom: calc(100% + 10 * var(--u)); transform: translateX(-50%); text-align: center; }
.c2 .pe-orb-label strong { display: block; color: #f9f9f9; font-size: calc(15 * var(--u)); font-weight: 500; letter-spacing: calc(-0.1 * var(--u)); }
.c2 .pe-orb-label span { display: block; margin-top: calc(3 * var(--u)); color: var(--pe-lav); font-size: calc(12 * var(--u)); letter-spacing: calc(0.3 * var(--u)); }
.c2 .pe-orb-key { display: none; }

@keyframes pe-turn { to { transform: rotate(360deg); } }
@keyframes pe-orb-run { to { stroke-dashoffset: -100; } }
@keyframes pe-orbi { 0% { transform: scale(1.14); border-color: var(--hue); box-shadow: 0 0 calc(30 * var(--u)) color-mix(in srgb, var(--hue) 70%, transparent), inset 0 0 calc(14 * var(--u)) color-mix(in srgb, var(--hue) 40%, transparent); } 14%, 100% { transform: scale(1); border-color: color-mix(in srgb, var(--hue) 70%, transparent); box-shadow: var(--halo); } }
@keyframes pe-twinkle { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.6; } }

@media (max-width: 991px) {
  .c2 .pe-open { padding-bottom: calc(52 * var(--u)); }
  .c2 .pe-open-copy { width: calc(342 * var(--u)); padding-top: calc(112 * var(--u)); }
  .c2 .pe-mark { height: calc(38 * var(--u)); margin-bottom: calc(16 * var(--u)); }
  .c2 .pe-lede { max-width: none; margin-top: calc(16 * var(--u)); }
  .c2 .pe-corner--tr { display: none; }
  /* the same, smaller, and the agents listed under it */
  .c2 .pe-orb { --cx: 171; --cy: 150; --r: 118; --turn: calc((var(--sp, 0.8) - 0.8) * 50deg); width: calc(342 * var(--u)); height: calc(300 * var(--u)); margin-top: calc(20 * var(--u)); }
  .c2 .pe-rays { width: calc(700 * var(--u)); height: calc(700 * var(--u)); margin: calc(-350 * var(--u)) 0 0 calc(-350 * var(--u)); }
  .c2 .pe-orb-svg--d { display: none; }
  .c2 .pe-orb-svg--m { display: block; }
  .c2 .pe-orb-ring { stroke-width: 1.4; }
  .c2 .pe-orb-run { stroke-width: 2.2; }
  .c2 .pe-core { --cr: calc(92 * var(--u)); }
  .c2 .pe-mandala-ring { stroke-width: 5; }
  .c2 .pe-mandala-web { stroke-width: 1.1; }
  .c2 .pe-core-disc { width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin: calc(-26 * var(--u)) 0 0 calc(-26 * var(--u)); }
  .c2 .pe-mono--core { --m: calc(24 * var(--u)); }
  .c2 .pe-orb-cap { display: none; }
  .c2 .pe-orb-agent { left: calc(var(--mx) * var(--u)); top: calc(var(--my) * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(-15 * var(--u)) 0 0 calc(-15 * var(--u)); }
  @supports (top: calc(1px * sin(1deg))) {
    .c2 .pe-orb-agent {
      left: calc((var(--cx) + var(--r) * cos(var(--a))) * var(--u));
      top: calc((var(--cy) + var(--r) * sin(var(--a))) * var(--u));
    }
  }
  .c2 .pe-orb-ic svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .c2 .pe-orb-label { display: none; }
  .c2 .pe-orb-key {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(12 * var(--u)) calc(14 * var(--u));
    width: calc(342 * var(--u));
    margin: calc(22 * var(--u)) auto 0;
    padding: 0;
    list-style: none;
  }
  .c2 .pe-orb-key li { position: relative; padding-left: calc(16 * var(--u)); }
  .c2 .pe-orb-key li::before { content: ""; position: absolute; left: 0; top: calc(5 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--hue); box-shadow: 0 0 calc(8 * var(--u)) var(--hue); }
  .c2 .pe-orb-key strong { display: block; color: #f9f9f9; font-size: calc(13.5 * var(--u)); font-weight: 500; }
  .c2 .pe-orb-key span { display: block; margin-top: calc(2 * var(--u)); color: var(--pe-lav); font-size: calc(11.5 * var(--u)); }
}

/* ---------------- who the client is ---------------- */
.c2 .pe-who-grid {
  display: grid;
  grid-template-columns: calc(580 * var(--u)) calc(560 * var(--u));
  column-gap: calc(56 * var(--u));
  padding-top: calc(120 * var(--u));
  padding-bottom: 0;
}
.c2 .pe-who .pe-h2 {
  width: calc(640 * var(--u));
}
.c2 .pe-products {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u)) calc(28 * var(--u));
  width: calc(560 * var(--u));
  margin: calc(34 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  font-size: calc(22 * var(--u));
  font-weight: 300;
  letter-spacing: calc(-0.5 * var(--u));
}
.c2 .pe-doors {
  position: relative;
  height: calc(780 * var(--u));
  margin-top: calc(-60 * var(--u));
}
.c2 .pe-funnel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.c2 .pe-funnel--m {
  display: none;
}
.c2 .pe-funnel path {
  fill: none;
}
.c2 .pe-funnel-in {
  stroke: #f9f9f9;
  stroke-width: 1.5;
  opacity: 0.38;
}
.c2 .pe-funnel-out {
  stroke-width: 2.5;
}
.c2 .pe-funnel-haze {
  stroke-width: 12;
  opacity: 0.18;
}
.c2 .pe-funnel circle {
  fill: #f9f9f9;
}
/* where the lead goes: the client's monogram in a ring of spectrum at the end of the line */
.c2 .pe-funnel .pe-lead-in-halo { fill: rgba(172, 36, 255, 0.16); }
.c2 .pe-funnel .pe-lead-in-ring { fill: #100c1c; stroke-width: 2; }
.c2 .pe-lead-in-cap { fill: var(--pe-lav); font-size: 14px; letter-spacing: 0.3px; }
.c2 .pe-lead-in { transform-box: fill-box; transform-origin: center; }
.c2 .pe-lead-mono {
  --m: calc(28 * var(--u));
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(752 * var(--u));
  transform: translate(-50%, -50%);
}
.c2.pe-js .pe-lead-in,
.c2.pe-js .pe-lead-mono {
  opacity: clamp(0, calc((var(--p, 0) - 0.84) * 8), 1);
  transition: opacity 0.2s linear;
}
.c2 .pe-door {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  padding: calc(11 * var(--u)) calc(20 * var(--u));
  border-radius: 100vw;
  background: var(--pe-pill);
  font-size: calc(17 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}
.c2 .is-live .pe-door {
  animation: pe-bob var(--b) ease-in-out infinite;
}
.c2 .pe-join {
  position: absolute;
  left: calc(328 * var(--u));
  top: calc(562 * var(--u));
}
.c2 .pe-join strong {
  display: block;
  font-size: calc(20 * var(--u));
  font-weight: 400;
}
.c2 .pe-join span {
  color: var(--pe-lav);
  font-size: calc(15 * var(--u));
}

/* ---------------- the exchange: type, never a chat window ---------------- */
.c2 .pe-demo {
  transition: opacity 0.45s var(--c2-ease);
}
.c2 .pe-cap--ex {
  padding: calc(14 * var(--u)) 0 calc(20 * var(--u)) calc(35 * var(--u));
}
.c2 .pe-ex-run {
  display: flex;
  gap: calc(32 * var(--u));
}
.c2 .pe-ex-thread {
  flex-shrink: 0;
  width: calc(3 * var(--u));
  border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0;
  background: var(--pe-thread);
  transform-origin: top center;
}
.c2 .pe-demo--warm .pe-ex-thread {
  border-radius: calc(3 * var(--u));
  background: linear-gradient(180deg, #ac24ff, #e59dfa 40%, #ffd600 75%, #fe881b);
}
.c2 .pe-ex-run--person .pe-ex-thread {
  border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
  background: #f9f9f9;
}
.c2 .pe-ex-lines {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  padding-bottom: calc(24 * var(--u));
}
.c2 .pe-ex-run--person .pe-ex-lines {
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) 0 calc(6 * var(--u));
}
.c2 .pe-line {
  margin: 0;
  color: #f9f9f9;
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.3 * var(--u));
}
.c2 .pe-line--ai {
  display: block;
}
.c2 .pe-demo--warm .pe-line--ai {
  --pe-grad: var(--pe-warm);
}
.c2 .pe-src {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  margin-bottom: calc(7 * var(--u));
  color: var(--pe-lav);
  font-size: calc(12 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  line-height: 1.4;
  text-transform: uppercase;
}
.c2 .pe-src::before {
  content: "";
  flex-shrink: 0;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #e59dfa;
}
.c2 .is-live .pe-src::before {
  animation: pe-dot 1.4s ease-in-out infinite;
}

/* customer: what it knows, when it hands over */
.c2 .pe-knows,
.c2 .pe-when ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.c2 .pe-knows {
  gap: calc(16 * var(--u)) calc(32 * var(--u));
  width: calc(540 * var(--u));
  margin-top: calc(28 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.4;
}
.c2 .pe-when,
.c2 .pe-notes {
  width: calc(540 * var(--u));
  margin-top: calc(28 * var(--u));
  padding-top: calc(22 * var(--u));
  border-top: 1px solid var(--pe-rule);
}
.c2 .pe-when strong,
.c2 .pe-asks strong,
.c2 .pe-after strong,
.c2 .pe-then strong {
  display: block;
  font-size: calc(22 * var(--u));
  font-weight: 400;
  letter-spacing: calc(-0.4 * var(--u));
}
.c2 .pe-when ul {
  gap: calc(8 * var(--u)) calc(32 * var(--u));
  margin-top: calc(12 * var(--u));
  color: var(--pe-lav);
  font-size: calc(16 * var(--u));
  font-weight: 300;
}

/* owner: what to ask, and the pipeline the answers light up */
.c2 .pe-asks {
  width: calc(540 * var(--u));
  margin-top: calc(28 * var(--u));
}
.c2 .pe-asks ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  margin: calc(14 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.c2 .pe-asks li {
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border-radius: 100vw;
  background: var(--pe-pill);
  font-size: calc(15 * var(--u));
  line-height: 1.3;
}
.c2 .pe-notes p {
  margin: 0 0 calc(8 * var(--u));
  color: var(--pe-lav);
  font-size: calc(17 * var(--u));
  font-weight: 300;
  line-height: 1.5;
}
.c2 .pe-pipe-box {
  margin-top: calc(30 * var(--u));
  padding-top: calc(22 * var(--u));
  border-top: 1px solid var(--pe-rule);
}
.c2 .pe-pipe-box strong {
  display: block;
  font-size: calc(17 * var(--u));
  font-weight: 400;
}
.c2 .pe-pipe {
  display: flex;
  align-items: flex-end;
  gap: calc(3.5 * var(--u));
  height: calc(48 * var(--u));
  margin-top: calc(14 * var(--u));
}
.c2 .pe-pipe i {
  flex-shrink: 0;
  width: calc(5 * var(--u));
  height: calc(16 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--pe-dusk);
  transform-origin: bottom center;
}
.c2 .pe-pipe b {
  flex-shrink: 0;
  width: calc(10 * var(--u));
}
.c2 .pe-pipe i.is-lead {
  box-sizing: border-box;
  border: 1px solid var(--pe-lav);
  background: transparent;
  opacity: 0.4;
}
.c2 .pe-pipe-key {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(18 * var(--u));
  margin: calc(14 * var(--u)) 0 0;
  color: #f9f9f9;
  font-size: calc(14 * var(--u));
}
.c2 .pe-pipe-key span:first-child { color: var(--pe-lav); }
.c2 .pe-pipe-key .is-stale { color: #ffb020; }
.c2 .pe-pipe-key .is-lead { color: #f9f9f9; }
.c2 .pe-pipe-key .is-agent { color: #ca45ff; }
/* still page: the answers' marks are simply lit */
.c2 .pe-pipe i.is-stale { background: #ffb020; transform: scaleY(2.6); }
.c2 .pe-pipe i.is-agent { background: #ca45ff; }
.c2 .pe-pipe i.is-lead { opacity: 1; }

/* ---------------- it assigns ---------------- */
.c2 .pe-duo--ring {
  grid-template-areas: "col ring" "none ring";
  grid-template-rows: auto 1fr;
}
.c2 .pe-duo--ring .pe-col { grid-area: col; }
.c2 .pe-ring-wrap {
  grid-area: ring;
  display: flex;
  justify-content: center;
  padding-top: calc(150 * var(--u));
}
.c2 .pe-ring {
  --ring: calc(380 * var(--u));
  position: relative;
  width: var(--ring);
  height: var(--ring);
}
.c2 .pe-ring-line {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 182, 255, 0.24);
  border-radius: 50%;
}
.c2 .pe-node {
  position: absolute;
  box-sizing: border-box;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin: calc(-6 * var(--u)) 0 0 calc(-6 * var(--u));
  border: 1.5px solid #c9b6ff;
  border-radius: 50%;
  background: var(--pe-night);
}
.c2 .pe-node--t { left: 50%; top: 0; }
.c2 .pe-node--r { left: 100%; top: 50%; }
.c2 .pe-node--b { left: 50%; top: 100%; }
.c2 .pe-node--l { left: 0; top: 50%; }
.c2 .pe-node.is-skip { border-style: dashed; border-color: var(--pe-dusk); }
.c2 .pe-orbit {
  position: absolute;
  inset: 0;
}
.c2 .pe-orbit-dot,
.c2 .pe-orbit-pulse {
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 50%;
}
.c2 .pe-orbit-dot {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin: calc(-10 * var(--u)) 0 0 calc(-10 * var(--u));
  background: linear-gradient(135deg, #e59dfa, #ffd600, #fe881b);
}
.c2 .pe-orbit-pulse {
  box-sizing: border-box;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  margin: calc(-16 * var(--u)) 0 0 calc(-16 * var(--u));
  border: 1.5px solid #fe881b;
  opacity: 0;
}
.c2 .is-live .pe-orbit-pulse { animation: pe-pulse 2s ease-out infinite; }
.c2 .pe-agent {
  position: absolute;
  color: #f9f9f9;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}
.c2 .pe-agent small {
  display: block;
  color: var(--pe-lav);
  font-size: calc(14 * var(--u));
}
.c2 .pe-agent--t { left: 50%; bottom: calc(100% + 22 * var(--u)); transform: translateX(-50%); }
.c2 .pe-agent--b { left: 50%; top: calc(100% + 22 * var(--u)); transform: translateX(-50%); }
.c2 .pe-agent--r { left: calc(100% + 26 * var(--u)); top: 50%; transform: translateY(-50%); }
.c2 .pe-agent--l { right: calc(100% + 26 * var(--u)); top: 50%; transform: translateY(-50%); text-align: right; }
.c2 .pe-agent.is-skip span { color: var(--pe-lav); text-decoration: line-through; }
.c2 .pe-ring-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(200 * var(--u));
  transform: translate(-50%, -50%);
  color: var(--pe-lav);
  font-size: calc(17 * var(--u));
  line-height: 1.35;
  text-align: center;
}
.c2 .pe-none {
  grid-area: none;
  align-self: end;
  width: calc(520 * var(--u));
  margin-top: calc(60 * var(--u));
  padding-top: calc(22 * var(--u));
  border-top: 1px dashed rgba(201, 182, 255, 0.3);
}
.c2 .pe-none strong {
  display: block;
  font-size: calc(21 * var(--u));
  font-weight: 400;
  letter-spacing: calc(-0.4 * var(--u));
}
.c2 .pe-none span {
  display: block;
  margin-top: calc(10 * var(--u));
  color: var(--pe-lav);
  font-size: calc(16 * var(--u));
  font-weight: 300;
}

/* ---------------- it tells: the site's drawn path ---------------- */
.c2 .pe-duo--path {
  grid-template-columns: calc(560 * var(--u)) minmax(0, 1fr);
  column-gap: calc(90 * var(--u));
}
.c2 .pe-tells .pe-wrap {
  padding-top: calc(96 * var(--u));
  padding-bottom: 0;
}
.c2 .pe-stops {
  position: relative;
  margin: calc(-96 * var(--u)) 0 0;
  padding: calc(94 * var(--u)) 0 0;
  list-style: none;
}
.c2 .pe-path {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(80 * var(--u));
  height: calc(802 * var(--u));
  overflow: visible;
}
.c2 .pe-path path { fill: none; stroke-linecap: round; }
.c2 .pe-path-base { stroke: #c9b6ff; stroke-width: 1.5; opacity: 0.2; }
.c2 .pe-path-haze { stroke-width: 14; opacity: 0.16; }
.c2 .pe-path-lit { stroke-width: 2.5; }
.c2 .pe-rail { display: none; }
.c2 .pe-stop {
  position: relative;
  box-sizing: border-box;
  height: calc(118 * var(--u));
  padding-left: calc(100 * var(--u));
}
.c2 .pe-stop::before {
  content: "";
  position: absolute;
  left: calc(34 * var(--u));
  top: calc(10 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: #f9f9f9;
}
.c2 .pe-stop-k {
  display: block;
  font-size: calc(22 * var(--u));
  line-height: 1.25;
  letter-spacing: calc(-0.4 * var(--u));
}
.c2 .pe-stop--renamed .pe-stop-k {
  font-size: calc(26 * var(--u));
}
.c2 .pe-stop-k s { color: var(--pe-dusk); }
.c2 .pe-stop-v {
  display: block;
  max-width: calc(440 * var(--u));
  margin-top: calc(4 * var(--u));
  color: var(--pe-lav);
  font-size: calc(16 * var(--u));
  font-weight: 300;
  line-height: 1.4;
}

/* ---------------- it chases ---------------- */
.c2 .pe-chase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(40 * var(--u));
}
.c2 .pe-chase-head > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.c2 .pe-chase-head .pe-p {
  width: calc(480 * var(--u));
  margin: 0 0 calc(10 * var(--u));
}
.c2 .pe-chase-mid {
  display: flex;
  align-items: center;
  gap: calc(72 * var(--u));
  margin-top: calc(44 * var(--u));
}
.c2 .pe-clock {
  flex-shrink: 0;
  /* the digits are proportional, so the box is as wide as the widest time it can show
     (2.66em); the digest beside it then never moves as the clock runs */
  width: 2.7em;
  font-size: calc(190 * var(--u));
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: calc(-7 * var(--u));
  white-space: nowrap;
}
.c2 .pe-digest {
  margin: calc(16 * var(--u)) 0 0;
  font-size: calc(20 * var(--u));
  line-height: 1.42;
  letter-spacing: calc(-0.2 * var(--u));
}
.c2 .pe-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.18em;
  background: #fe881b;
  vertical-align: -0.12em;
}
.c2 .is-live .pe-caret { animation: pe-blink 1.1s linear infinite; }
.c2 .pe-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(32 * var(--u));
  margin-top: calc(48 * var(--u));
}
.c2 .pe-rung {
  padding-top: calc(18 * var(--u));
  border-top: 2px solid #f9f9f9;
}
.c2 .pe-rung:nth-child(2) { border-top-color: rgba(249, 249, 249, 0.55); }
.c2 .pe-rung:nth-child(3) { border-top-color: rgba(249, 249, 249, 0.28); }
.c2 .pe-rung--again { border-top-color: #fe881b; }
.c2 .pe-rung small {
  display: block;
  color: var(--pe-lav);
  font-size: calc(14 * var(--u));
}
.c2 .pe-rung strong {
  display: block;
  margin-top: calc(8 * var(--u));
  font-size: calc(21 * var(--u));
  font-weight: 400;
  letter-spacing: calc(-0.4 * var(--u));
}
.c2 .pe-rung > span {
  display: block;
  margin-top: calc(8 * var(--u));
  color: var(--pe-lav);
  font-size: calc(17 * var(--u));
  font-weight: 300;
  line-height: 1.45;
}

/* ---------------- counted ---------------- */
.c2 .pe-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(32 * var(--u));
  margin-top: calc(48 * var(--u));
}
.c2 .pe-fig {
  display: flex;
  gap: calc(22 * var(--u));
}
.c2 .pe-fig-bar {
  flex-shrink: 0;
  width: calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
  background: linear-gradient(0deg, #1b4dfe, #ac24ff);
  transform-origin: bottom center;
}
.c2 .pe-fig:nth-child(2) .pe-fig-bar { background: linear-gradient(0deg, #ac24ff, #e59dfa); }
.c2 .pe-fig:nth-child(3) .pe-fig-bar { background: linear-gradient(0deg, #e59dfa, #ffd600); }
.c2 .pe-fig:nth-child(4) .pe-fig-bar { background: linear-gradient(0deg, #ffd600, #fe881b); }
.c2 .pe-fig-n {
  display: block;
  padding: calc(6 * var(--u)) 0 0;
  font-size: calc(84 * var(--u));
  font-weight: 300;
  line-height: 1;
  letter-spacing: calc(-3 * var(--u));
  font-variant-numeric: tabular-nums;
}
.c2 .pe-fig-l {
  display: block;
  margin: calc(6 * var(--u)) 0;
  color: var(--pe-lav);
  font-size: calc(17 * var(--u));
  font-weight: 300;
  line-height: 1.4;
}
.c2 .pe-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(60 * var(--u));
  margin-top: calc(48 * var(--u));
  padding-top: calc(34 * var(--u));
  border-top: 1px solid var(--pe-rule);
  color: #f9f9f9;
  text-decoration: none;
}
.c2 .pe-teaser .pe-dev { display: inline-block; }
.c2 .pe-teaser-line {
  display: block;
  margin-top: calc(14 * var(--u));
  font-size: calc(44 * var(--u));
  line-height: 1.04;
  letter-spacing: calc(-1.8 * var(--u));
}
.c2 .pe-teaser-say {
  display: block;
  width: calc(520 * var(--u));
  margin-top: calc(12 * var(--u));
  color: var(--pe-lav);
  font-size: calc(17 * var(--u));
  font-weight: 300;
  line-height: 1.45;
}

/* ---------------- voices ---------------- */
.c2 .pe-wave {
  --wh: calc(64 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  height: var(--wh);
  overflow: hidden;
}
.c2 .pe-wave i {
  flex-shrink: 0;
  width: calc(3 * var(--u));
  height: calc(var(--h) * var(--wh));
  border-radius: calc(4 * var(--u));
  background: var(--c);
}
.c2 .pe-wave--person { opacity: 0.9; }
.c2 .pe-wave--lg { --wh: calc(110 * var(--u)); }
.c2 .is-live .pe-wave i {
  animation: pe-wv var(--d) ease-in-out var(--t) infinite alternate;
}
/* a voice that is not talking is a quiet dotted line */
.c2 .is-live .pe-wave--breath { animation: pe-breath 5s ease-in-out infinite; }

.c2 .pe-rings {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  --ring-c: #8a5bff;
  --dot-c: #2ba7ff;
}
.c2 .pe-rings--out { --ring-c: #ffb020; --dot-c: #fe881b; }
.c2 .pe-rings i {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--ring-c);
  border-radius: 50%;
  opacity: 0.5;
}
.c2 .pe-rings i:nth-child(2) { inset: 18%; opacity: 0.35; animation-delay: -0.8s; }
.c2 .pe-rings i:nth-child(3) { inset: 34%; opacity: 0.25; animation-delay: -1.6s; }
.c2 .pe-rings b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin: calc(-5 * var(--u)) 0 0 calc(-5 * var(--u));
  border-radius: 50%;
  background: var(--dot-c);
}
.c2 .is-live .pe-rings i { inset: 0; animation-name: pe-rin; animation-duration: 2.4s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
.c2 .is-live .pe-rings--out i { animation-name: pe-rout; }

/* the CosmiVoice logo, in the site's own soft-edged circle */
.c2 .pe-cvlogo {
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
}
.c2 .pe-cvlogo--mark { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.c2 .pe-cvlogo--src { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
.c2 .pe-lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: calc(20 * var(--u));
  letter-spacing: calc(-0.4 * var(--u));
  white-space: nowrap;
}
.c2 .pe-built {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  color: var(--pe-lav);
  font-size: calc(14 * var(--u));
}
.c2 .pe-built .pe-lockup { color: #f9f9f9; }

/* ---------------- next, it speaks ---------------- */
.c2 .pe-voice-stage {
  position: relative;
  z-index: 1;
  width: calc(1440 * var(--u));
  height: calc(960 * var(--u));
  margin: 0 auto;
}
.c2 .pe-voice-tag {
  position: absolute;
  left: 0;
  top: calc(110 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
  width: 100%;
  color: var(--pe-lav);
  font-size: calc(15 * var(--u));
}
.c2 .pe-voice-tag strong {
  color: #f9f9f9;
  font-size: calc(22 * var(--u));
  font-weight: 400;
  letter-spacing: calc(-0.3 * var(--u));
}
.c2 .pe-voice-h {
  margin: 0;
  font-size: calc(73 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: calc(-2.2 * var(--u));
}
.c2 .pe-voice-l1,
.c2 .pe-voice-l2 {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}
.c2 .pe-voice-l1 { top: calc(154 * var(--u)); color: #fff; }
.c2 .pe-voice-l2 { top: calc(640 * var(--u)); }
.c2 .pe-voice-orb {
  position: absolute;
  left: 0;
  top: calc(246 * var(--u));
  width: 100%;
  height: calc(440 * var(--u));
}
.c2 .pe-voice-ring {
  position: absolute;
  left: 50%;
  top: 0;
  box-sizing: border-box;
  top: calc(50 * var(--u));
  width: calc(340 * var(--u));
  height: calc(340 * var(--u));
  margin-left: calc(-170 * var(--u));
  border: 1px solid rgba(201, 182, 255, 0.16);
  border-radius: 50%;
}
.c2 .pe-cvlogo--orb {
  position: absolute;
  left: 50%;
  top: calc(58 * var(--u));
  width: calc(324 * var(--u));
  height: calc(324 * var(--u));
  margin-left: calc(-162 * var(--u));
}
.c2 .is-live .pe-cvlogo--orb { animation: pe-float 9s ease-in-out infinite; }
/* streams out of the hair on one side and the microphone on the other */
.c2 .pe-ribbon {
  --wh: calc(90 * var(--u));
  position: absolute;
  left: 0;
  top: calc(208 * var(--u));
  width: 100%;
  gap: calc(6 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 35%, transparent 43%, transparent 58%, #000 66%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 35%, transparent 43%, transparent 58%, #000 66%, #000 92%, transparent);
}
.c2 .pe-ribbon--m { display: none; }
.c2 .pe-ident {
  position: absolute;
  top: calc(264 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(380 * var(--u));
}
.c2 .pe-ident--in { left: calc(122 * var(--u)); }
.c2 .pe-ident--out { right: calc(122 * var(--u)); align-items: flex-end; text-align: right; }
.c2 .pe-ident strong {
  margin-top: calc(14 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: calc(-1.3 * var(--u));
}
.c2 .pe-ident-does {
  font-size: calc(18 * var(--u));
  letter-spacing: calc(-0.3 * var(--u));
}
.c2 .pe-ident-why {
  position: absolute;
  left: 0;
  top: calc(306 * var(--u));
  width: 100%;
  color: var(--pe-lav);
  font-size: calc(17 * var(--u));
  font-weight: 300;
  line-height: 1.45;
}
.c2 .pe-voice-lede {
  position: absolute;
  left: 50%;
  top: calc(758 * var(--u));
  width: calc(900 * var(--u));
  max-width: none;
  margin: 0 0 0 calc(-450 * var(--u));
  font-size: calc(18 * var(--u));
  text-align: center;
}
.c2 .pe-voice-cta {
  position: absolute;
  left: 0;
  top: calc(856 * var(--u));
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---------------- the two calls ---------------- */
.c2 .pe-duo--call {
  grid-template-columns: calc(500 * var(--u)) minmax(0, 1fr);
  column-gap: calc(98 * var(--u));
}
.c2 .pe-duo--call .pe-p { max-width: calc(480 * var(--u)); font-size: calc(18 * var(--u)); }
.c2 .pe-duo--call .pe-sub { font-size: calc(27 * var(--u)); }
.c2 .pe-speaks {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: calc(26 * var(--u)) 0 0;
  color: var(--pe-lav);
  font-size: calc(15 * var(--u));
}
.c2 .pe-speaks b {
  padding: calc(8 * var(--u)) calc(15 * var(--u));
  border-radius: 100vw;
  background: var(--pe-pill);
  color: #f9f9f9;
  font-weight: 400;
}
.c2 .is-live .pe-speaks b {
  animation: pe-lang 9s linear infinite;
  animation-delay: calc(var(--k) * 3s);
}
.c2 .pe-ringrow {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
}
.c2 .pe-time {
  font-size: calc(36 * var(--u));
  font-weight: 300;
  letter-spacing: calc(-1.6 * var(--u));
}
.c2 .pe-ringsay {
  color: var(--pe-lav);
  font-size: calc(17 * var(--u));
}
.c2 .pe-said {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin-top: calc(28 * var(--u));
}
.c2 .pe-said .pe-wave { justify-content: flex-start; }
.c2 .pe-voicesrc {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
.c2 .pe-line--call {
  font-size: calc(24 * var(--u));
  line-height: 1.25;
  letter-spacing: calc(-0.6 * var(--u));
}
.c2 .pe-line--tight { font-size: calc(20 * var(--u)); line-height: 1.3; }
.c2 .pe-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(48 * var(--u));
  margin-top: calc(44 * var(--u));
  padding-top: calc(32 * var(--u));
  border-top: 1px solid var(--pe-rule);
}
.c2 .pe-intent {
  margin-top: calc(14 * var(--u));
  font-size: calc(16 * var(--u));
}
.c2 .pe-intent-track {
  display: block;
  height: calc(5 * var(--u));
  margin-top: calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--pe-rule);
}
.c2 .pe-intent-track i {
  display: block;
  width: calc(var(--w) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--pe-dusk);
  transform-origin: left center;
}
.c2 .pe-intent.is-top i { background: var(--pe-cool); }
.c2 .pe-did {
  position: relative;
  display: block;
  margin-top: calc(14 * var(--u));
  padding-left: calc(32 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.35;
}
.c2 .pe-did::before {
  content: "";
  position: absolute;
  left: calc(3 * var(--u));
  top: 0.2em;
  width: calc(11 * var(--u));
  height: calc(6 * var(--u));
  border: solid #e59dfa;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.c2 .pe-cap--end { margin-top: calc(28 * var(--u)); }

.c2 .pe-dialrow {
  display: flex;
  align-items: flex-start;
  gap: calc(32 * var(--u));
}
.c2 .pe-dialbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
  flex-shrink: 0;
}
.c2 .pe-dial {
  --dial: calc(330 * var(--u));
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1;
  width: var(--dial);
  height: var(--dial);
}
.c2 .pe-dial-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 182, 255, 0.22);
  border-radius: 50%;
}
.c2 .pe-tick {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(4 * var(--u));
  height: 50%;
  margin-left: calc(-2 * var(--u));
  transform: rotate(var(--a));
  transform-origin: 50% 100%;
}
.c2 .pe-tick i {
  display: block;
  width: 100%;
  height: calc(24 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #fe881b;
  opacity: 0.85;
}
.c2 .pe-hand {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 50%;
  margin-left: -1px;
  background: linear-gradient(0deg, rgba(254, 136, 27, 0), #ffd600);
  transform-origin: 50% 100%;
}
.c2 .pe-dial .pe-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  margin: calc(-42 * var(--u)) 0 0 calc(-42 * var(--u));
}
.c2 .pe-dialsay {
  width: calc(300 * var(--u));
  color: var(--pe-lav);
  font-size: calc(15 * var(--u));
  line-height: 1.4;
  text-align: center;
}
.c2 .pe-dialtalk { flex: 1 1 0; min-width: 0; }
.c2 .pe-dialtalk .pe-said:first-child { margin-top: 0; }
.c2 .pe-then { margin-top: calc(52 * var(--u)); }
.c2 .pe-then strong { font-size: calc(22 * var(--u)); }
.c2 .pe-then-row {
  position: relative;
  margin-top: calc(22 * var(--u));
}
.c2 .pe-then-base,
.c2 .pe-then-line {
  position: absolute;
  left: 0;
  top: calc(6 * var(--u));
  width: 100%;
  height: 2px;
  background: var(--pe-rule);
}
.c2 .pe-then-line {
  background: linear-gradient(90deg, #e59dfa, #ffd600, #fe881b);
  transform-origin: left center;
}
.c2 .pe-then-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(20 * var(--u));
}
.c2 .pe-then-node { position: relative; }
.c2 .pe-then-node i {
  display: block;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd600, #fe881b);
}
.c2 .pe-then-node span {
  display: block;
  margin-top: calc(12 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.3;
}


/* ---------------- the scene clock ---------------- */
/* these hold their place on the stage, so they fade without moving */

@keyframes pe-draw { to { stroke-dashoffset: 0; } }
@keyframes pe-sig { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes pe-wv { from { transform: scaleY(0.18); } to { transform: scaleY(1); } }
@keyframes pe-breath { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@keyframes pe-rin { 0% { transform: scale(1.9); opacity: 0; } 25% { opacity: 0.9; } 100% { transform: scale(0.25); opacity: 0; } }
@keyframes pe-rout { 0% { transform: scale(0.25); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes pe-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
@keyframes pe-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
@keyframes pe-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes pe-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pe-pulse { 0% { transform: scale(1); opacity: 0.7; } 50%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes pe-lang { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0.35; } }

/* ================================================================
   Tablet and phone: one column, drawn at 390. Most visitors are here, so every
   scene keeps its motion; nothing depends on hover or on a wide stage.
   ================================================================ */
@media (max-width: 991px) {
  .c2.pe-page { --u: min(calc(100vw / 390), 1.4px); }
  .c2 .pe-wrap {
    width: calc(342 * var(--u));
    min-height: 0;
  }
  .c2 .pe-wrap { padding: calc(36 * var(--u)) 0; }
  .c2 .pe-duo--path,
  .c2 .pe-who-grid { display: block; }
  /* on a phone the demonstration comes straight after the claim, and the lists that
     back it up follow: nobody should scroll a screen of bullets to see the AI work */
  .c2 .pe-duo { display: flex; flex-direction: column; align-items: stretch; }
  .c2 .pe-duo > .pe-col { display: contents; }
  .c2 .pe-duo .pe-verb { align-self: flex-start; }
  .c2 .pe-duo > .pe-demo { order: 1; }
  .c2 .pe-duo .pe-knows,
  .c2 .pe-duo .pe-when,
  .c2 .pe-duo .pe-asks,
  .c2 .pe-duo .pe-notes,
  .c2 .pe-duo .pe-speaks,
  .c2 .pe-duo .pe-link,
  .c2 .pe-duo .pe-p--small { order: 2; }
  .c2 .pe-duo .pe-link { align-self: flex-start; }
  .c2 .pe-duo--path { display: block; }
  .c2 .pe-duo--path > .pe-col { display: flex; }
  .c2 .pe-duo--ring > .pe-ring-wrap { order: 1; }
  .c2 .pe-duo--ring > .pe-none { order: 2; }
  .c2 .pe-glow { opacity: 0.5; }
  .c2 .pe-glow--cool,
  .c2 .pe-glow--warm,
  .c2 .pe-glow--path,
  .c2 .pe-glow--ring,
  .c2 .pe-glow--count,
  .c2 .pe-glow--voice {
    left: 50%;
    top: calc(-20 * var(--u));
    width: calc(440 * var(--u));
    height: calc(440 * var(--u));
    margin-left: calc(-120 * var(--u));
  }
    .c2 .pe-glow--who { right: calc(-60 * var(--u)); width: calc(420 * var(--u)); height: calc(340 * var(--u)); }
  .c2 .pe-glow--dawn { left: calc(-100 * var(--u)); bottom: calc(-200 * var(--u)); width: calc(590 * var(--u)); height: calc(420 * var(--u)); }

  .c2 .pe-h1 { margin-top: calc(18 * var(--u)); font-size: calc(38 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  .c2 .pe-h2 { margin-top: calc(16 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .c2 .pe-who .pe-h2 { width: auto; }
  .c2 .pe-num { font-size: calc(12 * var(--u)); letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; }
  .c2 .pe-verb,
  .c2 .pe-verb--call { margin-top: calc(12 * var(--u)); font-size: calc(46 * var(--u)); letter-spacing: calc(-1.4 * var(--u)); }
  .c2 .pe-sub,
  .c2 .pe-duo--call .pe-sub { margin-top: calc(6 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.15; letter-spacing: calc(-0.5 * var(--u)); }
  .c2 .pe-p,
  .c2 .pe-duo--call .pe-p { max-width: none; margin-top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); }
  .c2 .pe-p--small { margin-top: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
  .c2 .pe-cap { font-size: calc(11 * var(--u)); letter-spacing: calc(1.4 * var(--u)); }
  .c2 .pe-col > .pe-cap { margin-top: calc(18 * var(--u)); }
  .c2 .pe-dev { padding: calc(5 * var(--u)) calc(10 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: calc(1.4 * var(--u)); }
  .c2 .pe-link { margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); }


  .c2 .pe-who-grid { padding-top: calc(92 * var(--u)); padding-bottom: 0; }
  .c2 .pe-products { gap: calc(6 * var(--u)) calc(18 * var(--u)); width: auto; margin-top: calc(18 * var(--u)); font-size: calc(17 * var(--u)); }
  .c2 .pe-doors { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); height: auto; margin-top: calc(30 * var(--u)); }
  .c2 .pe-door { position: static; padding: calc(9 * var(--u)) calc(15 * var(--u)); font-size: calc(14 * var(--u)); }
  .c2 .pe-funnel--d { display: none; }
  .c2 .pe-funnel--m { position: static; display: block; flex: 0 0 100%; width: 100%; height: calc(260 * var(--u)); margin-top: calc(6 * var(--u)); }
  .c2 .pe-join { left: calc(192 * var(--u)); top: auto; bottom: calc(118 * var(--u)); }
  .c2 .pe-lead-mono { --m: calc(22 * var(--u)); left: 50%; top: auto; bottom: calc(24 * var(--u)); transform: translate(-50%, 50%); }
  .c2 .pe-join strong { font-size: calc(19 * var(--u)); }
  .c2 .pe-join span { font-size: calc(13 * var(--u)); }

  .c2 .pe-demo { margin-top: calc(26 * var(--u)); }
  .c2 .pe-chase-mid.pe-demo,
  .c2 .pe-ladder.pe-demo { margin-top: calc(18 * var(--u)); }
  .c2 .pe-cap--ex { padding: 0 0 calc(14 * var(--u)) 0; }
  .c2 .pe-ex-run { gap: calc(16 * var(--u)); }
  .c2 .pe-ex-lines { gap: calc(12 * var(--u)); padding-bottom: calc(16 * var(--u)); }
  .c2 .pe-line { font-size: calc(17 * var(--u)); line-height: 1.28; letter-spacing: calc(-0.2 * var(--u)); }
  .c2 .pe-src { font-size: calc(10 * var(--u)); letter-spacing: calc(1.2 * var(--u)); }
  .c2 .pe-knows,
  .c2 .pe-when ul { grid-template-columns: minmax(0, 1fr); }
  .c2 .pe-knows { gap: calc(8 * var(--u)); width: auto; margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); }
  .c2 .pe-when,
  .c2 .pe-notes,
  .c2 .pe-asks { width: auto; margin-top: calc(18 * var(--u)); }
  .c2 .pe-when,
  .c2 .pe-notes { padding-top: calc(16 * var(--u)); }
  .c2 .pe-when strong,
  .c2 .pe-asks strong,
  .c2 .pe-after strong,
  .c2 .pe-then strong { font-size: calc(17 * var(--u)); }
  .c2 .pe-when ul { gap: calc(6 * var(--u)); font-size: calc(15 * var(--u)); }
  .c2 .pe-asks ul { gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
  .c2 .pe-asks li { padding: calc(7 * var(--u)) calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
  .c2 .pe-notes p { font-size: calc(14 * var(--u)); }
  .c2 .pe-pipe-box { margin-top: calc(18 * var(--u)); padding-top: calc(14 * var(--u)); }
  .c2 .pe-pipe-box strong { font-size: calc(15 * var(--u)); }
  .c2 .pe-pipe { gap: calc(2.6 * var(--u)); height: calc(36 * var(--u)); margin-top: calc(10 * var(--u)); }
  .c2 .pe-pipe i { width: calc(3 * var(--u)); height: calc(12 * var(--u)); }
  .c2 .pe-pipe b { width: calc(6 * var(--u)); }
  .c2 .pe-pipe-key { gap: calc(4 * var(--u)) calc(14 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); }

  .c2 .pe-ring-wrap { padding: calc(64 * var(--u)) 0 calc(56 * var(--u)); }
  .c2 .pe-ring { --ring: calc(180 * var(--u)); }
  .c2 .pe-agent { font-size: calc(16 * var(--u)); }
  .c2 .pe-agent small { font-size: calc(11 * var(--u)); white-space: normal; width: calc(70 * var(--u)); margin-left: auto; }
  .c2 .pe-agent--t { bottom: calc(100% + 14 * var(--u)); }
  .c2 .pe-agent--b { top: calc(100% + 14 * var(--u)); }
  .c2 .pe-agent--r { left: calc(100% + 14 * var(--u)); }
  .c2 .pe-agent--l { right: calc(100% + 14 * var(--u)); }
  .c2 .pe-orbit-dot { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u)); }
  .c2 .pe-orbit-pulse { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: calc(-12 * var(--u)) 0 0 calc(-12 * var(--u)); }
  .c2 .pe-ring-center { width: calc(100 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.3; }
  .c2 .pe-none { width: auto; margin-top: calc(22 * var(--u)); padding-top: calc(16 * var(--u)); }
  .c2 .pe-none strong { font-size: calc(19 * var(--u)); line-height: 1.25; }
  .c2 .pe-none span { margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); }

  .c2 .pe-tells .pe-wrap { padding: calc(36 * var(--u)) 0; }
  .c2 .pe-stops { display: flex; flex-direction: column; gap: calc(22 * var(--u)); margin: calc(28 * var(--u)) 0 0; padding: 0 0 0 calc(30 * var(--u)); }
  .c2 .pe-path { display: none; }
  .c2 .pe-rail { position: absolute; left: calc(4 * var(--u)); top: calc(8 * var(--u)); bottom: calc(30 * var(--u)); display: block; width: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--pe-thread); transform-origin: top center; }
  .c2 .pe-stop { height: auto; padding-left: 0; }
  .c2 .pe-stop::before { left: calc(-30 * var(--u)); top: calc(6 * var(--u)); }
  .c2 .pe-stop-k { font-size: calc(18 * var(--u)); }
  .c2 .pe-stop--renamed .pe-stop-k { font-size: calc(23 * var(--u)); }
  .c2 .pe-stop-v { max-width: none; font-size: calc(14 * var(--u)); }

  .c2 .pe-chase-head { display: block; }
  .c2 .pe-chase-head .pe-p { width: auto; margin: calc(16 * var(--u)) 0 0; }
  .c2 .pe-chase-mid { display: block; }
  .c2 .pe-clock { display: block; font-size: calc(92 * var(--u)); line-height: 0.95; letter-spacing: calc(-5 * var(--u)); }
  .c2 .pe-digest-box { margin-top: calc(16 * var(--u)); }
  .c2 .pe-digest { margin-top: calc(10 * var(--u)); font-size: calc(17 * var(--u)); }
  .c2 .pe-digest .pe-seq { display: block; margin-top: calc(8 * var(--u)); }
  .c2 .pe-ladder { display: block; }
  .c2 .pe-rung { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) 0; }
  .c2 .pe-rung small { order: 2; flex-shrink: 0; font-size: calc(12 * var(--u)); }
  .c2 .pe-rung strong { margin: 0; font-size: calc(17 * var(--u)); }
  .c2 .pe-rung--again { margin-top: calc(8 * var(--u)); }
  .c2 .pe-rung--again small { order: 0; color: #f9f9f9; font-size: calc(17 * var(--u)); }
  .c2 .pe-rung > span { margin: 0; font-size: calc(14 * var(--u)); line-height: 1.4; }

  .c2 .pe-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(26 * var(--u)) calc(20 * var(--u)); margin-top: calc(28 * var(--u)); }
  .c2 .pe-fig { gap: calc(14 * var(--u)); }
  .c2 .pe-fig-bar { width: calc(5 * var(--u)); }
  .c2 .pe-fig-n { padding: 0; font-size: calc(52 * var(--u)); letter-spacing: calc(-2.4 * var(--u)); }
  .c2 .pe-fig-l { margin: calc(4 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: 1.35; }
  .c2 .pe-teaser { display: block; margin-top: calc(30 * var(--u)); padding-top: calc(24 * var(--u)); }
  .c2 .pe-teaser-line { margin-top: calc(12 * var(--u)); font-size: calc(30 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .c2 .pe-teaser-say { width: auto; font-size: calc(14 * var(--u)); }
  .c2 .pe-teaser .pe-wave { margin-top: calc(18 * var(--u)); }

  .c2 .pe-wave { --wh: calc(32 * var(--u)); gap: calc(4 * var(--u)); }
  .c2 .pe-wave i.x { display: none; }
  .c2 .pe-wave--lg { --wh: calc(40 * var(--u)); }
  .c2 .pe-rings { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .c2 .pe-cvlogo--mark { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .c2 .pe-cvlogo--src { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .c2 .pe-lockup { gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); }
  .c2 .pe-built { gap: calc(10 * var(--u)); font-size: calc(12 * var(--u)); }

  .c2 .pe-voice-stage { display: flex; flex-direction: column; box-sizing: border-box; width: calc(342 * var(--u)); height: auto; padding: calc(510 * var(--u)) 0 calc(64 * var(--u)); }
  .c2 .pe-voice-tag { left: calc(-24 * var(--u)); top: calc(96 * var(--u)); gap: calc(10 * var(--u)); width: calc(390 * var(--u)); font-size: calc(12 * var(--u)); }
  .c2 .pe-voice-tag strong { font-size: calc(15 * var(--u)); }
  .c2 .pe-voice-h { font-size: calc(44 * var(--u)); letter-spacing: calc(-1.7 * var(--u)); }
  .c2 .pe-voice-l1,
  .c2 .pe-voice-l2 { left: calc(-24 * var(--u)); width: calc(390 * var(--u)); }
  .c2 .pe-voice-l1 { top: calc(132 * var(--u)); }
  .c2 .pe-voice-l2 { top: calc(422 * var(--u)); }
  .c2 .pe-voice-orb { left: calc(-24 * var(--u)); top: calc(178 * var(--u)); width: calc(390 * var(--u)); height: calc(268 * var(--u)); }
  .c2 .pe-voice-ring { top: calc(26 * var(--u)); width: calc(216 * var(--u)); height: calc(216 * var(--u)); margin-left: calc(-108 * var(--u)); }
  .c2 .pe-cvlogo--orb { top: calc(32 * var(--u)); width: calc(204 * var(--u)); height: calc(204 * var(--u)); margin-left: calc(-102 * var(--u)); }
  .c2 .pe-ribbon { --wh: calc(46 * var(--u)); top: calc(124 * var(--u)); gap: calc(4 * var(--u)); }
  .c2 .pe-ribbon--d { display: none; }
  .c2 .pe-ribbon--m { display: flex; }
  .c2 .pe-voice-lede { position: static; order: -1; width: auto; margin: 0 0 calc(8 * var(--u)); font-size: calc(15 * var(--u)); text-align: left; }
  .c2 .pe-ident,
  .c2 .pe-ident--out { position: relative; left: auto; right: auto; top: auto; align-items: flex-start; width: auto; margin-top: calc(22 * var(--u)); padding-left: calc(76 * var(--u)); text-align: left; }
  .c2 .pe-ident .pe-rings { position: absolute; left: calc(14 * var(--u)); top: calc(8 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .c2 .pe-ident strong { margin-top: 0; font-size: calc(22 * var(--u)); letter-spacing: calc(-0.7 * var(--u)); }
  .c2 .pe-ident-does { font-size: calc(16 * var(--u)); }
  .c2 .pe-ident-why { position: static; margin-top: calc(3 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.4; }
  .c2 .pe-voice-cta { position: static; justify-content: flex-start; margin-top: calc(26 * var(--u)); }

  .c2 .pe-speaks { flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(13 * var(--u)); }
  .c2 .pe-speaks b { padding: calc(6 * var(--u)) calc(12 * var(--u)); }
  .c2 .pe-ringrow { gap: calc(14 * var(--u)); }
  .c2 .pe-time { font-size: calc(26 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .c2 .pe-ringsay { font-size: calc(13 * var(--u)); line-height: 1.35; }
  .c2 .pe-said { gap: calc(6 * var(--u)); margin-top: calc(16 * var(--u)); }
  .c2 .pe-voicesrc { gap: calc(10 * var(--u)); }
  .c2 .pe-line--call { font-size: calc(17 * var(--u)); line-height: 1.28; letter-spacing: calc(-0.2 * var(--u)); }
  .c2 .pe-line--tight { font-size: calc(17 * var(--u)); }
  .c2 .pe-after { display: block; margin-top: calc(18 * var(--u)); padding-top: calc(14 * var(--u)); }
  .c2 .pe-after > div + div { margin-top: calc(16 * var(--u)); }
  .c2 .pe-intent { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(9 * var(--u)); font-size: calc(13 * var(--u)); }
  .c2 .pe-intent > span:first-child { flex: 0 0 calc(150 * var(--u)); }
  .c2 .pe-intent-track { flex: 1 1 0; height: calc(4 * var(--u)); margin-top: 0; }
  .c2 .pe-did { margin-top: calc(8 * var(--u)); padding-left: calc(24 * var(--u)); font-size: calc(14 * var(--u)); }
  .c2 .pe-did::before { width: calc(9 * var(--u)); height: calc(5 * var(--u)); }
  .c2 .pe-cap--end { margin-top: calc(16 * var(--u)); }
  .c2 .pe-dialrow { display: block; }
  .c2 .pe-dialbox { flex-direction: row; gap: calc(18 * var(--u)); }
  .c2 .pe-dial { --dial: calc(150 * var(--u)); }
  .c2 .pe-tick i { height: calc(12 * var(--u)); }
  .c2 .pe-dial .pe-rings { width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: calc(-20 * var(--u)) 0 0 calc(-20 * var(--u)); }
  .c2 .pe-dialsay { width: auto; font-size: calc(13 * var(--u)); line-height: 1.45; text-align: left; }
  .c2 .pe-dialtalk .pe-said:first-child { margin-top: calc(16 * var(--u)); }
  .c2 .pe-then { margin-top: calc(18 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid var(--pe-rule); }
  .c2 .pe-then strong { font-size: calc(17 * var(--u)); }
  .c2 .pe-then-row { display: flex; flex-direction: column; gap: calc(9 * var(--u)); margin-top: calc(10 * var(--u)); }
  .c2 .pe-then-base { display: none; }
  .c2 .pe-then-line { left: calc(4 * var(--u)); top: calc(6 * var(--u)); width: 2px; height: calc(100% - 14 * var(--u)); background: linear-gradient(180deg, #e59dfa, #ffd600, #fe881b); transform-origin: top center; }
  .c2 .pe-then-node { display: flex; align-items: center; gap: calc(12 * var(--u)); }
  .c2 .pe-then-node i { flex-shrink: 0; width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
  .c2 .pe-then-node span { margin: 0; font-size: calc(14 * var(--u)); }

}

/* ================================================================
   Motion is scroll, not time. c2/paisaexpress.js writes two numbers:
     --q on anything that arrives (.pe-seq, [data-pe-in]): 0 below the fold, 1 once it
         has risen a fifth of the screen, so a line is always there by the time it
         can be read, however fast the page is scrolled;
     --p on a mechanism ([data-pe-track]): how far that block has travelled up the
         screen, which draws threads, sweeps the dial, fills bars.
   Without the script none of this applies and the page is complete and still.
   ================================================================ */
.c2.pe-js .pe-seq,
.c2.pe-js [data-pe-in] {
  opacity: var(--q, 0);
  transform: translate3d(0, calc((1 - var(--q, 0)) * 22 * var(--u)), 0);
  transition: opacity 0.2s linear, transform 0.3s var(--c2-ease);
}
/* these hold their place on the voice stage, so they fade without moving */
.c2.pe-js .pe-voice-l1[data-pe-in],
.c2.pe-js .pe-voice-l2[data-pe-in],
.c2.pe-js .pe-ident[data-pe-in],
.c2.pe-js .pe-voice-lede[data-pe-in] { transform: none; }

/* threads and paths draw with the block they belong to */
.c2.pe-js .pe-ex-thread--grow {
  transform: scaleY(clamp(0, calc(var(--p, 0) * 1.15), 1));
  transition: transform 0.2s linear;
}
.c2.pe-js .pe-funnel path { stroke-dasharray: 100; transition: stroke-dashoffset 0.2s linear; }
.c2.pe-js .pe-funnel-in { stroke-dashoffset: calc(100 - clamp(0, calc(var(--p, 0) * 1.7), 1) * 100); }
.c2.pe-js .pe-funnel-out { stroke-dashoffset: calc(100 - clamp(0, calc((var(--p, 0) - 0.5) * 2.6), 1) * 100); }
.c2.pe-js .pe-path-haze,
.c2.pe-js .pe-path-lit {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - clamp(0, calc(var(--p, 0) * 1.1), 1) * 100);
  transition: stroke-dashoffset 0.2s linear;
}

/* the owner's answers light the marks they are about */
.c2.pe-js .pe-pipe i { transition: transform 0.5s var(--c2-ease), background-color 0.5s linear, opacity 0.5s linear; }
.c2.pe-js .pe-pipe i.is-stale { background: var(--pe-dusk); transform: none; }
.c2.pe-js .pe-pipe i.is-agent { background: var(--pe-dusk); }
.c2.pe-js .pe-pipe i.is-lead { opacity: 0.4; transform: none; }
.c2.pe-js .has-stale .pe-pipe i.is-stale { background: #ffb020; transform: scaleY(2.6); }
.c2.pe-js .has-lead .pe-pipe i.is-lead { opacity: 1; transform: translate3d(0, calc(-8 * var(--u)), 0); }
.c2.pe-js .has-agent .pe-pipe i.is-agent { background: #ca45ff; }
.c2.pe-js .pe-pipe-key span:not(:first-child) { opacity: 0; transition: opacity 0.4s linear; }
.c2.pe-js .has-stale .pe-pipe-key .is-stale,
.c2.pe-js .has-lead .pe-pipe-key .is-lead,
.c2.pe-js .has-agent .pe-pipe-key .is-agent { opacity: 1; }

/* a voice stands up while it is the one talking, and is a quiet dotted line otherwise */
.c2.pe-js .pe-wave--talk { transform: scaleY(0.1); transition: transform 0.45s var(--c2-ease); }
.c2.pe-js .is-talking .pe-wave--talk { transform: scaleY(1); }
.c2.pe-js .pe-intent-track i { transform: scaleX(var(--q, 0)); transition: transform 0.4s var(--c2-ease); }

/* the dial: the hand sweeps with the scroll and each file lights as it is reached */
.c2.pe-js .pe-hand { transform: rotate(calc(var(--p, 0) * 360deg)); transition: transform 0.2s linear; }
.c2.pe-js .pe-tick i {
  opacity: clamp(0.22, calc((var(--p, 0) - var(--at)) * 40 + 0.22), 1);
  transition: opacity 0.2s linear;
}
.c2.pe-js .pe-then-line { transform: scaleX(clamp(0, calc(var(--p, 0) * 1.2), 1)); transition: transform 0.2s linear; }

/* the lead goes round the ring by steps the script reads off the scroll */
.c2.pe-js .pe-orbit { transform: rotate(var(--orbit, 0deg)); transition: transform 0.6s var(--c2-ease); }

.c2.pe-js .pe-fig-bar { transform: scaleY(var(--q, 0)); transition: transform 0.4s var(--c2-ease); }
.c2.pe-js .pe-glow--dawn {
  transform: translate3d(0, calc((1 - var(--sp, 0)) * 260 * var(--u)), 0);
  opacity: calc(0.12 + var(--sp, 0) * 0.5);
}

@media (max-width: 991px) {
  .c2.pe-js .pe-rail { transform: scaleY(clamp(0, calc(var(--p, 0) * 1.1), 1)); transition: transform 0.2s linear; }
  .c2.pe-js .pe-then-line { transform: scaleY(clamp(0, calc(var(--p, 0) * 1.2), 1)); }
}

/* ---------------- whose this is: PaisaExpress ---------------- */
.c2 .pe-glow--brand {
  background: radial-gradient(closest-side, rgba(30, 111, 184, 0.5), rgba(0, 169, 165, 0.2) 55%, transparent);
}
/* their monogram, cut from their own logo */
.c2 .pe-mono {
  --m: calc(26 * var(--u));
  flex-shrink: 0;
  width: var(--m);
  height: var(--m);
  background: url("media/work/paisaexpress/logo.webp") no-repeat;
  background-size: auto 100%;
  background-position: calc(var(--m) * -0.13) 0;
}
.c2 .pe-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u)) calc(10 * var(--u));
  color: var(--pe-lav);
  font-size: calc(12 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  line-height: 1.4;
  text-transform: uppercase;
}
.c2 .pe-from strong {
  padding-right: calc(10 * var(--u));
  border-right: 1px solid var(--pe-rule);
  background-image: var(--pex-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.c2 .pe-from--ex { padding: calc(10 * var(--u)) 0 calc(20 * var(--u)) calc(35 * var(--u)); }
.c2 .pe-from--col { margin-top: calc(36 * var(--u)); }
.c2 .pe-who-logo {
  width: auto;
  height: calc(66 * var(--u));
}
.c2 .pe-products li {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.c2 .pe-products li::before {
  content: "";
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: var(--pex-blue);
}
.c2 .pe-products li:nth-child(3n + 2)::before { background: var(--pex-teal); }
.c2 .pe-products li:nth-child(3n)::before { background: var(--pex-gold); }
.c2 .pe-funnel-in { stroke: #6fb6ee; }

.c2 .pe-signoff-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(1196 * var(--u));
  margin: 0 auto;
  padding: calc(64 * var(--u)) 0 calc(96 * var(--u));
  text-align: center;
}
.c2 .pe-glow--signoff {
  left: 50%;
  top: calc(-40 * var(--u));
  width: calc(1100 * var(--u));
  height: calc(620 * var(--u));
  margin-left: calc(-550 * var(--u));
}
/* the closing scene: the site's own intelligence video, edges lost in the night */
.c2 .pe-signoff-scene {
  width: calc(400 * var(--u));
  height: calc(400 * var(--u));
  margin: calc(-36 * var(--u)) 0 calc(-44 * var(--u));
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}
.c2 .pe-signoff-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #171022;
}
.c2 .pe-signoff-rule {
  width: calc(120 * var(--u));
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pex-blue), var(--pex-teal) 55%, var(--pex-gold));
}
.c2 .pe-signoff-logo {
  width: auto;
  height: calc(84 * var(--u));
  margin-top: calc(34 * var(--u));
}
.c2 .pe-signoff-line {
  max-width: calc(620 * var(--u));
  margin: calc(22 * var(--u)) 0 0;
  color: var(--pe-lav);
  font-size: calc(18 * var(--u));
  font-weight: 300;
  line-height: 1.5;
}
.c2 .pe-signoff-link {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(26 * var(--u));
  padding: calc(15 * var(--u)) calc(28 * var(--u));
  border: 1px solid var(--pex-teal);
  border-radius: 100vw;
  color: #f9f9f9;
  font-size: calc(17 * var(--u));
  text-decoration: none;
  transition: background-color 0.3s var(--c2-ease);
}
.c2 .pe-signoff-link:hover { background-color: rgba(0, 169, 165, 0.18); color: #f9f9f9; }
.c2 .pe-signoff-link span:first-of-type { color: var(--pe-lav); }
.c2 .pe-signoff-by {
  margin: calc(28 * var(--u)) 0 0;
  color: var(--pe-dusk);
  font-size: calc(14 * var(--u));
  letter-spacing: calc(1.4 * var(--u));
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .c2 .pe-mono { --m: calc(22 * var(--u)); }
  .c2 .pe-from { font-size: calc(10.5 * var(--u)); letter-spacing: calc(1.2 * var(--u)); }
  .c2 .pe-from strong { font-size: calc(14 * var(--u)); }
  .c2 .pe-from--ex { padding: 0 0 calc(14 * var(--u)); }
  .c2 .pe-from--col { margin-top: calc(18 * var(--u)); }
  .c2 .pe-who-logo { height: calc(52 * var(--u)); }
    .c2 .pe-products li { gap: calc(8 * var(--u)); }
  .c2 .pe-products li::before { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
  .c2 .pe-signoff-in { width: calc(342 * var(--u)); padding: calc(40 * var(--u)) 0 calc(84 * var(--u)); }
  .c2 .pe-signoff-scene { width: calc(300 * var(--u)); height: calc(300 * var(--u)); margin: calc(-10 * var(--u)) 0 calc(-24 * var(--u)); }
  .c2 .pe-glow--signoff { width: calc(520 * var(--u)); height: calc(420 * var(--u)); margin-left: calc(-260 * var(--u)); }
  .c2 .pe-signoff-logo { height: calc(60 * var(--u)); margin-top: calc(30 * var(--u)); }
    .c2 .pe-signoff-line { margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); }
  .c2 .pe-signoff-link { flex-wrap: wrap; justify-content: center; margin-top: calc(24 * var(--u)); padding: calc(13 * var(--u)) calc(22 * var(--u)); font-size: calc(15 * var(--u)); }
  .c2 .pe-signoff-by { margin-top: calc(26 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .c2.pe-page *,
  .c2.pe-page *::before {
    animation: none !important;
    transition: none !important;
  }
}