/* Brand overrides + runtime-added classes not in the compiled output. */

/* Inter everywhere (brand rule: Inter only) — replaces the original's typeface */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Footer: brand Night ground with a quiet violet glow (replaces blurred rainbow) */
nav.bg-footer-gradient {
  background-image: radial-gradient(70% 90% at 50% 0%, rgba(145, 132, 217, 0.28), transparent 65%) !important;
  background-color: #161826 !important;
}
nav.bg-footer-gradient.shadow-footer-inset { box-shadow: none !important; }
nav.bg-footer-gradient .text-black\/50 { color: rgba(233, 233, 237, 0.55) !important; }

/* Nav active/hover ring: quiet single-tone lavender instead of a gradient ring */
.navbar .bg-gradient-to-r { background-image: none !important; background-color: #cfc7f2 !important; }

/* Brand radii on primary CTAs */
.btn-lg-highlighted, .btn-md-highlighted { border-radius: 8px !important; }

/* Dark CTA card (rocket): subtle dot texture instead of the removed star image */
.rounded-lg.bg-gradient-to-r.from-\[\#3A3560\] {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.5px),
    radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.5px),
    linear-gradient(to right, #3A3560, #8B6FA8);
  background-size: 46px 46px, 29px 29px, 100% 100%;
  background-position: 0 0, 14px 21px, 0 0;
}

/* tailwindcss-animate equivalents (used by the tab screen switcher + video embed) */
@keyframes clone-enter { from { opacity: var(--tw-enter-opacity, 1); } to { opacity: 1; } }
.animate-in { animation: clone-enter 1s both; }
.fade-in { --tw-enter-opacity: 0; }
.duration-1000 { animation-duration: 1s; transition-duration: 1s; }

/* Swiper core (css-mode) — minimal equivalent of swiper/css */
.swiper { position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }
.swiper-wrapper { position: relative; display: flex; width: 100%; height: 100%; box-sizing: content-box; }
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; }
.swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; }
.swiper-slide { flex-shrink: 0; width: 100%; position: relative; }
.swiper-horizontal { touch-action: pan-y; }

/* pagination bullets (swiper defaults) */
.swiper-pagination-bullet {
  width: 8px; height: 8px; display: inline-block; border-radius: 50%;
  background: #000; opacity: .2; margin: 0 4px; cursor: pointer; border: 0; padding: 0;
}
.swiper-pagination-bullet-active { opacity: 1; }

/* ---------- mini-site: live miniature homepage in the Websites slide ----------
   Replaces that slide's SCREEN placeholder img (see build.mjs). Keeps the img's
   16:9 footprint. All internal sizes are cqw so it scales with the slide.
   Inert (pointer-events:none) so carousel drag/click-through still works. */
.jp-mini-frame { width: 100%; max-width: 1200px; }
.jp-mini-host { width: 100%; }
.jp-mini {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1200 / 675;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #E4E7F5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  font-family: Inter, Arial, sans-serif;
  text-align: left;
}
.jp-mini-chrome {
  display: flex; align-items: center; gap: 2cqw;
  padding: 1.4cqw 2cqw;
  background: #F3F5FE;
  border-bottom: 1px solid #E4E7F5;
}
.jp-mini-dots { display: flex; gap: 0.8cqw; }
.jp-mini-dots i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #D8DCEE; }
.jp-mini-url {
  flex: 1; text-align: center;
  background: #fff; border-radius: 1cqw;
  box-shadow: 0 0 0 1px #E4E7F5;
  font-size: 1.7cqw; line-height: 2.6; color: #595D6C;
}
.jp-mini-page { flex: 1; display: flex; flex-direction: column; background: #fff; min-height: 0; }
.jp-mini-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6cqw 3cqw;
  border-bottom: 1px solid #EEF0FB;
  position: relative;
}
.jp-mini-brand {
  font-size: 2cqw; font-weight: 500; letter-spacing: -0.04em; color: #2B2741;
  border-bottom: 0.35cqw solid #796CBF; padding-bottom: 0.5cqw;
}
.jp-mini-links { display: flex; align-items: center; gap: 2.2cqw; font-size: 1.6cqw; font-weight: 600; color: #2B2741; }
.jp-mini-chev { width: 1.4cqw; display: inline-block; vertical-align: middle; margin-left: 0.35cqw; color: #6B6880; }
/* active nav pill: the site's quiet lavender ring (see .navbar override above) */
.jp-mini-navpill {
  border-radius: 1.3cqw; padding: 0.7cqw 1.5cqw;
  box-shadow: inset 0 0 0 0.22cqw #cfc7f2; background: #fff;
}
/* solid lavender CTA — miniature of .btn-lg-highlighted (#9184D9, white text) */
.jp-mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #9184D9; color: #fff;
  border-radius: 0.8cqw; padding: 1.15cqw 2.2cqw;
  font-size: 1.7cqw; font-weight: 600;
}
.jp-mini-btn-sm { padding: 0.7cqw 1.6cqw; font-size: 1.6cqw; background: #111; }
/* text link with arrow — miniature of the hero's "See how it works" link */
.jp-mini-link {
  display: inline-flex; align-items: center; gap: 0.6cqw;
  font-size: 1.7cqw; font-weight: 600; color: #2B2741;
}
.jp-mini-link svg { width: 2cqw; }
.jp-mini-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 4.2cqw 8cqw 0;
  position: relative;
}
.jp-mini-spark {
  width: 2.6cqw; color: #B5ABFC;
  display: inline; position: relative; top: -1.6cqw; margin-right: 0.4cqw;
}
.jp-mini-h1 {
  font-size: 5.2cqw; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  color: #2B2741;
}
.jp-mini-grad {
  background: linear-gradient(to right, #93B8E4, #F2A8CE, #93B8E4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jp-mini-sub {
  font-size: 2.1cqw; line-height: 1.55; color: #595D6C;
  max-width: 62cqw; margin-top: 1.8cqw;
}
.jp-mini-ctas { display: flex; align-items: center; gap: 2.6cqw; margin-top: 2.6cqw; }
.jp-mini-screen {
  width: 64cqw; height: 13cqw; margin: 3.6cqw auto 0;
  border-radius: 1.6cqw 1.6cqw 0 0;
  background: repeating-linear-gradient(135deg, #E4E7F5 0 0.8cqw, #EEF0FB 0.8cqw 1.6cqw);
  box-shadow: 0 0 0 1px #E4E7F5;
}
/* purple cursor-follow glow inside the mini (driven by initMiniSite) */
.jp-mini-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 22cqw; height: 22cqw; border-radius: 50%;
  left: 0; top: 0; margin: -11cqw 0 0 -11cqw;
  background: radial-gradient(circle, rgba(145, 132, 217, 0.5), rgba(181, 171, 252, 0.22) 55%, transparent 72%);
  filter: blur(1.4cqw);
  opacity: 0; transition: opacity 0.3s ease;
}
.jp-mini-page { position: relative; }

/* ---------- page glow: purple circle that follows the cursor over every
   page (initPageGlow, clone.js). One fixed element painted at z-index -1,
   so it lights the page's plain ground and slides UNDER anything that
   paints its own background: cards, demo screens, testimonial panels, the
   footer. Compositor-only transform/opacity updates on its own layer, so
   it costs nothing measurable per frame. ---------- */
/* the glow is a body child at z-index -1, which paints ABOVE the html
   background but BELOW body's own background. Both were white; body goes
   transparent (html keeps the white page ground) so the glow shows through
   everywhere content hasn't painted its own background. */
body { background-color: transparent !important; }
.jp-page-glow {
  position: fixed; z-index: -1; pointer-events: none;
  width: 340px; height: 340px; border-radius: 50%;
  left: 0; top: 0; margin: -170px 0 0 -170px;
  background: radial-gradient(circle, rgba(145, 132, 217, 0.45), rgba(181, 171, 252, 0.2) 55%, transparent 72%);
  filter: blur(24px);
  opacity: 0; transition: opacity 0.35s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .jp-page-glow, .jp-mini-glow { display: none; }
}
/* entrance: same restrained fade + rise the page itself uses, staggered.
   initMiniSite (clone.js) adds .jp-in when the slide scrolls into view. */
.jp-mini [data-jp-reveal] {
  opacity: 0; transform: translateY(2cqw);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.jp-mini .jp-mini-h1 { transition-delay: 0.1s; }
.jp-mini .jp-mini-sub { transition-delay: 0.2s; }
.jp-mini .jp-mini-ctas { transition-delay: 0.3s; }
.jp-mini .jp-mini-screen { transition-delay: 0.4s; }
.jp-mini.jp-in [data-jp-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .jp-mini [data-jp-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Pillar carousel: span more of the page on desktop so the slide screens
   read large and the tab descriptions stop wrapping awkwardly. Gated to
   >=1024px; phones and tablets keep the stock layout untouched. */
@media (min-width: 1024px) {
  .relative[class*="max-w-[632px]"] {
    width: min(1080px, 94vw);
    max-width: 1080px;
    min-width: 0;
  }
}

/* pillar tab headers: independent rounded-rect cards (8px, same as the nav
   CTA), lavender perimeter + soft tint when active, per-pillar accent icons
   drawn from the hero "Hi," gradient family. Buttons are tagged jp-tab /
   jp-tab-N by build.mjs. */
div.jp-tabs { gap: 12px; flex-wrap: wrap; }
.jp-tab {
  border: 1px solid #E7E5F2; border-radius: 8px;
  padding: 10px 16px; background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.jp-tab.opacity-50 { opacity: 1; color: #6B6880; }
.jp-tab.opacity-50:hover { border-color: #CFC7F2; }
.jp-tab.opacity-100 {
  border-color: #9184D9;
  box-shadow: inset 0 0 0 1px #9184D9;
  background: var(--jp-tint, #F1EEFC);
}
.jp-tab-1 { --jp-acc: #9184D9; --jp-tint: #F1EEFC; }
.jp-tab-2 { --jp-acc: #6E9AD6; --jp-tint: #EAF2FB; }
.jp-tab-3 { --jp-acc: #DE8ABB; --jp-tint: #FBEDF5; }
.jp-tab-4 { --jp-acc: #8A9BE0; --jp-tint: #EEF1FB; }
.jp-tab .jp-tab-ico svg { color: var(--jp-acc); }

/* ---------- "Built with" logo marquee (home) ----------
   Replaces the captured partner-logo strip under the hero (see build.mjs).
   Cleaned single-colour brand SVGs from clone-assets/logos/ are inlined by
   the build; currentColor sets the one muted grey. Two identical tracks
   each slide -100% for a seamless 40s loop; hover pauses it. Reduced
   motion: no animation, first track wraps into a static centred row. */
.jp-builtwith-label {
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #8A8EA0;
  margin-bottom: 30px;
}
.jp-builtwith {
  --jp-bw-gap: 72px;
  display: flex; overflow: hidden;
  color: #8A8EA0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  /* grab-and-fling (initBuiltWith in clone.js): pan-y keeps vertical page
     scroll working on touch while horizontal drags spin the strip */
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
.jp-builtwith.jp-grabbing { cursor: grabbing; }
.jp-builtwith-track {
  flex: 0 0 auto;
  display: flex; align-items: center;
  gap: var(--jp-bw-gap); padding-right: var(--jp-bw-gap);
  min-width: max-content;
  animation: jp-builtwith-scroll 40s linear infinite;
  will-change: transform;
}
.jp-builtwith:hover .jp-builtwith-track { animation-play-state: paused; }
@keyframes jp-builtwith-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
/* uniform optical height: glyphs sit at the full 28px, wide wordmarks a
   touch lower so no single mark dominates the row */
.jp-builtwith-logo { height: 28px; width: auto; display: block; flex: 0 0 auto; }
.jp-logo-elevenlabs, .jp-logo-cloudflare { height: 20px; }   /* very wide lockups */
.jp-logo-mailgun, .jp-logo-openai { height: 24px; }          /* wide lockups */
.jp-logo-anthropic { height: 30px; }                          /* lone square glyph */
.jp-logo-whatsapp { height: 22px; }                           /* wide lockup */
@media (max-width: 767px) {
  .jp-builtwith { --jp-bw-gap: 44px; }
  .jp-builtwith-logo { height: 22px; }
  .jp-logo-elevenlabs, .jp-logo-cloudflare { height: 16px; }
  .jp-logo-mailgun, .jp-logo-openai { height: 19px; }
  .jp-logo-anthropic { height: 24px; }
  .jp-logo-whatsapp { height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .jp-builtwith { -webkit-mask-image: none; mask-image: none; }
  .jp-builtwith-track {
    animation: none;
    flex: 1 1 auto; min-width: 0;
    flex-wrap: wrap; justify-content: center; row-gap: 24px;
    padding-right: 0;
  }
  .jp-builtwith-track[aria-hidden="true"] { display: none; }
}

/* ---------- pillar slide descriptions: larger, seamless type ----------
   The captured typography-body-3 reads small once the carousel spans the
   page; build.mjs tags the four pillar descriptions jp-pillar-desc. */
p.jp-pillar-desc { font-size: 16px; line-height: 1.6; max-width: 560px; }
@media (min-width: 1024px) {
  p.jp-pillar-desc { font-size: 18px; max-width: 720px; }
}

/* ---------- pillar process demos (Lead generation / Bookings & service /
   One app slides) ----------
   Video-like looping mocks in the mini-site pattern: pure DOM + CSS, cqw
   units so everything scales with the slide, GHL as the example app in the
   chrome bar. The .jp-s1..jp-s10 classes are a shared step timeline over
   one 14s loop: each element pops in at its step, holds, then the whole
   scene fades and restarts together. Paused until initDemos (clone.js)
   adds .jp-in on scroll-into-view; paused again off-screen. Reduced
   motion: the finished scene shows statically. */
.jp-demo {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1200 / 675;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #E4E7F5;
  pointer-events: none;
  display: flex; flex-direction: column;
  font-family: Inter, Arial, sans-serif;
  text-align: left;
}
.jp-demo-chrome {
  display: flex; align-items: center; gap: 2cqw;
  padding: 1.4cqw 2cqw;
  background: #F3F5FE;
  border-bottom: 1px solid #E4E7F5;
}
.jp-demo-dots { display: flex; gap: 0.8cqw; }
.jp-demo-dots i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #D8DCEE; }
.jp-demo-url {
  flex: 1; text-align: center;
  background: #fff; border-radius: 1cqw;
  box-shadow: 0 0 0 1px #E4E7F5;
  font-size: 1.7cqw; line-height: 2.6; color: #595D6C;
}
.jp-demo-body {
  flex: 1; min-height: 0;
  display: flex; gap: 2cqw;
  padding: 2.4cqw;
  background: #F6F7FD;
}
.jp-demo-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2cqw; }
.jp-demo-col-side { flex: 0 0 34cqw; min-width: 0; display: flex; flex-direction: column; gap: 2cqw; }
.jp-demo-card {
  background: #fff; border-radius: 1.4cqw;
  box-shadow: 0 0 0 1px #E4E7F5;
  padding: 2cqw;
}
.jp-demo-card-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jp-demo-cardhead { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 1.6cqw; }
.jp-demo-cardtitle { font-size: 2cqw; font-weight: 600; color: #2B2741; }
.jp-demo-cardsub {
  font-size: 1.4cqw; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8A8EA0; margin-bottom: 1.2cqw;
}
.jp-demo-chip {
  margin-left: auto;
  font-size: 1.4cqw; font-weight: 600; color: #6B6880;
  background: #F1F1F6; border-radius: 2cqw; padding: 0.5cqw 1.3cqw;
  white-space: nowrap;
}
.jp-demo-chip-live { background: #E7F6EC; color: #2E7D4F; }
.jp-demo-chip-booked { background: #F1EEFC; color: #6E5FC0; }
.jp-demo-chip-new { background: #EAF2FB; color: #4A72A8; }
.jp-demo-chip-agent { background: #F1EEFC; color: #6E5FC0; }
.jp-demo-row { font-size: 1.7cqw; color: #6B6880; display: flex; align-items: center; gap: 0.8cqw; }
.jp-demo-num { font-size: 2.6cqw; font-weight: 700; color: #2B2741; }
.jp-demo-divider { height: 1px; background: #EEF0FB; margin: 1.6cqw 0; }
.jp-demo-seq { display: flex; flex-direction: column; gap: 1cqw; }
.jp-demo-seqrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1cqw;
  font-size: 1.6cqw; color: #2B2741;
  background: #F6F7FD; border-radius: 1cqw; padding: 1.1cqw 1.4cqw;
}
.jp-demo-tick { font-size: 1.4cqw; font-weight: 600; color: #2E7D4F; white-space: nowrap; }
.jp-demo-tick-stop { color: #8A8EA0; }
.jp-demo-thread { display: flex; flex-direction: column; gap: 1.2cqw; margin-top: auto; }
.jp-demo-bub {
  max-width: 82%;
  font-size: 1.7cqw; line-height: 1.5; color: #2B2741;
  border-radius: 1.4cqw; padding: 1.2cqw 1.6cqw;
}
.jp-demo-bub-in { align-self: flex-start; background: #F1F1F6; border-bottom-left-radius: 0.4cqw; }
.jp-demo-bub-out {
  align-self: flex-end; background: #F1EEFC;
  border-bottom-right-radius: 0.4cqw;
  box-shadow: inset 0 0 0 1px #DCD4FE;
}
.jp-demo-day, .jp-demo-caption {
  align-self: center; text-align: center;
  font-size: 1.4cqw; color: #8A8EA0;
}
.jp-demo-caption { margin-top: 0.6cqw; }
.jp-demo-avatar {
  flex: 0 0 auto;
  width: 3.2cqw; height: 3.2cqw; border-radius: 50%;
  background: #DCD4FE; color: #6E5FC0;
  font-size: 1.7cqw; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.jp-demo-slot {
  font-size: 1.6cqw; color: #2B2741;
  border-radius: 1cqw; padding: 1.1cqw 1.4cqw;
  background: #F6F7FD; margin-bottom: 1cqw;
}
.jp-demo-slot-faint { color: #B4B2C4; }
.jp-demo-slot-new { background: #F1EEFC; box-shadow: inset 0 0 0 1px #9184D9; font-weight: 600; }
.jp-demo-stars { display: flex; gap: 0.8cqw; color: #E8B94A; margin: 0.6cqw 0 0.4cqw; }
.jp-demo-stars svg { width: 3cqw; height: 3cqw; }
/* steps demos (Three steps section): these frames run about half the width
   of the pillar slides, so type runs slightly larger relative to the frame
   to stay legible at 484px. Sizing lives here, not in Tailwind classes on
   the host: the replaced img sized itself with w-[512px] + preflight
   max-width:100%, but on a div inside the shrink-wrapping step frame that
   percentage is circular and the fixed width wins, pushing the whole step
   group past a phone screen. Below md (the group is a column) frame and
   host go full-width; from md up (side-by-side row) the host takes the
   img's old fixed width. */
.jp-step-frame { width: 100%; }
.jp-step-host { width: 100%; }
@media (min-width: 768px) {
  /* side-by-side row: back to the img's old fixed width, frame shrinks to fit */
  .jp-step-frame { width: auto; }
  .jp-step-host { width: 484px; max-width: 100%; }
}
.jp-demo-step .jp-demo-seqrow { font-size: 1.9cqw; }
.jp-demo-step .jp-demo-bub { font-size: 1.9cqw; }
.jp-demo-step .jp-demo-slot { font-size: 1.8cqw; }
.jp-demo-step .jp-demo-cardtitle { font-size: 2.2cqw; }
.jp-demo-step .jp-demo-chip { font-size: 1.5cqw; }
.jp-demo-step .jp-demo-day, .jp-demo-step .jp-demo-caption { font-size: 1.5cqw; }

/* bookings demo: longer conversation, so its thread runs slightly denser */
.jp-demo-book .jp-demo-thread { gap: 1cqw; }
.jp-demo-book .jp-demo-bub { font-size: 1.6cqw; padding: 1cqw 1.4cqw; max-width: 88%; }
.jp-demo-col-wide { flex: 1.5; }
/* bookings: Sarah's and Mike's conversations share one panel and take
   turns. Each scene overlays the card; scene A plays the first half of the
   14s loop, scene B the second (jp-scene-a/b keyframes below). */
.jp-demo-card-scenes { position: relative; padding: 0; }
.jp-demo-scene {
  position: absolute; inset: 2cqw;
  display: flex; flex-direction: column;
}
.jp-demo-scene-a { animation-name: jp-scene-a; }
.jp-demo-scene-b { animation-name: jp-scene-b; }
@keyframes jp-scene-a { 0%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes jp-scene-b { 0%, 48% { opacity: 0; } 52%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* scenes overlay, so the static fallback shows scene A only */
  .jp-demo-scene-b { display: none; }
}
/* the shared panel is wide, so bubbles keep standard chat proportions */
.jp-demo-scene .jp-demo-bub { max-width: 72%; }
/* unhappy path: the conversation is handed to a human, no review link */
.jp-demo-handoff {
  font-size: 1.45cqw; font-weight: 600; line-height: 1.4;
  color: #B85E93; background: #FBEDF5;
  border-radius: 1cqw; padding: 0.9cqw 1.2cqw;
}
/* compact review thread in the After-the-job card */
.jp-demo-thread-sm { margin-top: 0; gap: 1cqw; }
.jp-demo-thread-sm .jp-demo-stars { align-self: flex-start; margin: 0.2cqw 0; }
.jp-demo-bub-sm { max-width: 100%; font-size: 1.45cqw; padding: 0.9cqw 1.2cqw; }
.jp-demo-link { color: #6E5FC0; text-decoration: underline; text-underline-offset: 0.25cqw; }

/* one-app dashboard layout */
.jp-demo-body-app { gap: 0; padding: 0; }
.jp-demo-rail {
  flex: 0 0 6cqw;
  background: #fff; border-right: 1px solid #EEF0FB;
  display: flex; flex-direction: column; align-items: center;
  gap: 2.6cqw; padding-top: 2.6cqw;
  color: #B4B2C4;
}
.jp-demo-rail svg { width: 2.4cqw; height: 2.4cqw; }
.jp-demo-rail-on { color: #9184D9; }
.jp-demo-main { flex: 1; min-width: 0; padding: 2.4cqw; display: flex; flex-direction: column; }
.jp-demo-stats { display: flex; gap: 1.6cqw; margin-bottom: 2cqw; }
.jp-demo-stat {
  flex: 1;
  background: #fff; border-radius: 1.2cqw; box-shadow: 0 0 0 1px #E4E7F5;
  padding: 1.4cqw 1.6cqw;
  font-size: 1.5cqw; color: #6B6880;
  display: flex; flex-direction: column; gap: 0.3cqw;
}
.jp-demo-inbox { display: flex; flex-direction: column; gap: 1cqw; }
.jp-demo-inrow {
  display: flex; align-items: center; gap: 1.4cqw;
  background: #fff; border-radius: 1.2cqw; box-shadow: 0 0 0 1px #E4E7F5;
  padding: 1.3cqw 1.6cqw;
  font-size: 1.6cqw; color: #6B6880;
}
.jp-demo-inrow .jp-demo-chip { font-size: 1.3cqw; }
.jp-demo-inrow-on { box-shadow: 0 0 0 1px #9184D9, inset 0 0 0 1px #9184D9; }
.jp-demo-inwho { font-weight: 600; color: #2B2741; white-space: nowrap; }
.jp-demo-insnip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-demo-chan {
  flex: 0 0 auto; text-align: center; min-width: 7cqw;
  font-size: 1.3cqw; font-weight: 600;
  border-radius: 0.8cqw; padding: 0.4cqw 1cqw;
}
/* channel hand-off inside one conversation (Call -> Text -> WhatsApp) */
.jp-demo-chanflow {
  flex: 0 0 auto; display: flex; align-items: center; gap: 0.4cqw;
  color: #B4B2C4; font-size: 1.2cqw;
}
.jp-demo-chanflow .jp-demo-chan { min-width: 0; font-size: 1.2cqw; padding: 0.3cqw 0.7cqw; }
.jp-demo-chan-call { background: #EEF1FB; color: #5A6DB8; }
.jp-demo-chan-wa { background: #E7F6EC; color: #2E7D4F; }
.jp-demo-chan-sms { background: #F1EEFC; color: #6E5FC0; }
.jp-demo-chan-mail { background: #FBEDF5; color: #B85E93; }
.jp-demo-contact { padding: 2.4cqw 2.4cqw 2.4cqw 0; }
/* calendar + pipeline strip under the inbox (One app demo) */
.jp-demo-duo { display: flex; gap: 1.6cqw; margin-top: 2cqw; }
.jp-demo-duo .jp-demo-card-sm { flex: 1; min-width: 0; padding: 1.4cqw; }
.jp-demo-duo .jp-demo-card-pipe { flex: 1.3; }
.jp-demo-duo .jp-demo-cardsub { margin-bottom: 0.8cqw; }
.jp-demo-slot-sm { font-size: 1.4cqw; padding: 0.6cqw 1.2cqw; margin-bottom: 0.8cqw; }
.jp-demo-pipe { display: flex; gap: 1.2cqw; }
.jp-demo-pipecol { flex: 1; min-width: 0; background: #F6F7FD; border-radius: 1cqw; padding: 0.8cqw; }
.jp-demo-pipelabel {
  font-size: 1.1cqw; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8A8EA0; margin-bottom: 0.6cqw;
}
.jp-demo-pipecard {
  background: #fff; border-radius: 0.8cqw;
  box-shadow: 0 0 0 1px #E4E7F5;
  font-size: 1.3cqw; font-weight: 600; color: #2B2741;
  padding: 0.7cqw 1cqw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jp-demo-pipecard-on { background: #F1EEFC; box-shadow: 0 0 0 1px #9184D9, inset 0 0 0 1px #9184D9; }
.jp-demo-hist { display: flex; flex-direction: column; gap: 1.2cqw; }
.jp-demo-histrow {
  font-size: 1.5cqw; color: #6B6880;
  border-left: 0.3cqw solid #DCD4FE; padding-left: 1.2cqw;
}

/* ---------- testimonials: review + reserved video spot, zigzag ----------
   Three rows on the home page (build.mjs): the video placeholder sits
   right, then left, then right. Honest reserved slots, no fake faces. */
.jp-testi { display: flex; flex-direction: column; gap: 72px; }
.jp-testi-row { display: flex; align-items: center; gap: 56px; }
.jp-testi-row-flip { flex-direction: row-reverse; }
.jp-testi-quote { flex: 1; min-width: 0; }
.jp-testi-author { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.jp-testi-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.jp-testi-video {
  flex: 1; min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #F6F7FD;
  box-shadow: 0 0 0 1px #E7E5F2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
}
.jp-testi-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: #9184D9;
  box-shadow: 0 0 0 1px #E7E5F2, 0 8px 24px rgba(145, 132, 217, 0.18);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.jp-testi-play svg { width: 24px; margin-left: 3px; }
.jp-testi-vlabel { font-weight: 600; font-size: 15px; color: #2B2741; }
.jp-testi-vsub { font-size: 13px; color: #8A8EA0; }
@media (max-width: 767px) {
  .jp-testi { gap: 56px; }
  .jp-testi-row, .jp-testi-row-flip { flex-direction: column; align-items: stretch; gap: 24px; }
}

/* shared step timeline: one 14s loop, ~1s between steps, everything fades
   out together at 90% and the scene restarts. Steps are invisible until
   their window so a paused (off-screen) demo shows an empty frame, and the
   whole loop stays a single set of GPU-cheap opacity/transform tweens. */
.jp-demo [class*="jp-s"] { opacity: 0; }
.jp-demo [class*="jp-s"], .jp-demo-scene {
  animation-duration: 14s; animation-timing-function: ease-out;
  animation-iteration-count: infinite; animation-fill-mode: both;
  animation-play-state: paused;
}
.jp-demo.jp-in [class*="jp-s"], .jp-demo.jp-in .jp-demo-scene { animation-play-state: running; }
.jp-s1 { animation-name: jp-s1; } .jp-s2 { animation-name: jp-s2; }
.jp-s3 { animation-name: jp-s3; } .jp-s4 { animation-name: jp-s4; }
.jp-s5 { animation-name: jp-s5; } .jp-s6 { animation-name: jp-s6; }
.jp-s7 { animation-name: jp-s7; } .jp-s8 { animation-name: jp-s8; }
.jp-s9 { animation-name: jp-s9; } .jp-s10 { animation-name: jp-s10; }
@keyframes jp-s1 { 0%, 2% { opacity: 0; transform: translateY(8px); } 5%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s2 { 0%, 8% { opacity: 0; transform: translateY(8px); } 11%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s3 { 0%, 14% { opacity: 0; transform: translateY(8px); } 17%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s4 { 0%, 21% { opacity: 0; transform: translateY(8px); } 24%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s5 { 0%, 28% { opacity: 0; transform: translateY(8px); } 31%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s6 { 0%, 36% { opacity: 0; transform: translateY(8px); } 39%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s7 { 0%, 44% { opacity: 0; transform: translateY(8px); } 47%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s8 { 0%, 53% { opacity: 0; transform: translateY(8px); } 56%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s9 { 0%, 62% { opacity: 0; transform: translateY(8px); } 65%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes jp-s10 { 0%, 70% { opacity: 0; transform: translateY(8px); } 73%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .jp-demo [class*="jp-s"], .jp-demo-scene { animation: none; opacity: 1; transform: none; }
}

/* hero agent-picker demo (.jp-demo-pick): fills the SCREEN 1 slot. Sized by
   the hero's own responsive classes on .jp-pick-host, so the shared
   aspect-ratio is off and it fills the host (2:1). Four agents on a 16s
   loop, ~4s each: the list item opens while the right card crossfades —
   GHL's agent-picker pacing in this site's design. Its own keyframes (16s,
   not the shared 14s) but the same pause / reduced-motion contract. None of
   these class names may contain "jp-s" or the shared timeline grabs them.
   Type runs smaller than the other demos on purpose: the hierarchy comes
   from weight and muting (inactive list items go pale, the active one gets
   a dark underline), tracking tightens on the large sizes only, and the
   card floats on shadow with no border ring. */
.jp-demo-pick { aspect-ratio: auto; height: 100%; background: #F6F7FD; pointer-events: auto; }
.jp-pick-body { flex: 1; min-height: 0; display: flex; gap: 4cqw; padding: 3.2cqw 3.6cqw; }
.jp-pick-list { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jp-pick-label { font-size: 1.3cqw; font-weight: 600; color: #A5A3B5; margin-bottom: 1cqw; }
.jp-pick-label-sub { display: block; font-weight: 400; color: #B7B5C6; margin-top: 0.3cqw; }
.jp-pick-item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; font: inherit;
  color: #B7B5C6;
  border-bottom: 1px solid #ECEAF4;
  padding: 2.2cqw 0;
  cursor: pointer;
}
.jp-pick-item:hover { color: #8A87A0; }
.jp-pick-item:focus-visible { outline: 2px solid #9184D9; outline-offset: 2px; border-radius: 0.4cqw; }
.jp-pick-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2cqw; }
.jp-pick-name { font-size: 1.8cqw; font-weight: 600; letter-spacing: -0.01em; color: inherit; }
.jp-pick-note { font-size: 1.3cqw; color: #A5A3B5; white-space: nowrap; }
.jp-pick-desc { display: block; max-height: 0; opacity: 0; overflow: hidden; }
.jp-pick-desc .jp-pick-para { display: block; font-size: 1.5cqw; line-height: 1.55; color: #75718A; margin: 1cqw 0 0; max-width: 92%; }
.jp-pick-go {
  display: inline-block; margin: 1.1cqw 0 0.4cqw;
  font-size: 1.4cqw; font-weight: 600; color: #6E5FC0;
  text-decoration: underline; text-underline-offset: 0.3cqw;
}
.jp-pick-panes { flex: 1.1; min-width: 0; position: relative; }
.jp-pick-pane {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 2cqw;
  box-shadow: 0 0.2cqw 0.5cqw rgba(43, 39, 65, 0.04), 0 1.8cqw 4.5cqw rgba(43, 39, 65, 0.07);
  padding: 2.6cqw 3cqw;
  opacity: 0;
}
.jp-pick-panehead { display: flex; align-items: center; gap: 1.5cqw; }
.jp-pick-icon {
  flex: 0 0 auto; width: 4.2cqw; height: 4.2cqw; border-radius: 1.1cqw;
  background: #F1EEFC; color: #6E5FC0;
  display: flex; align-items: center; justify-content: center;
}
.jp-pick-icon svg { width: 2.3cqw; height: 2.3cqw; }
.jp-pick-headtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4cqw; }
.jp-pick-title { font-size: 1.8cqw; font-weight: 600; letter-spacing: -0.01em; color: #1D1A2E; }
.jp-pick-sub { font-size: 1.3cqw; color: #A5A3B5; display: flex; align-items: flex-start; gap: 0.7cqw; }
.jp-pick-sub i { flex: 0 0 auto; width: 0.8cqw; height: 0.8cqw; margin-top: 0.55cqw; border-radius: 50%; background: #9184D9; }
.jp-pick-pane .jp-demo-chip {
  font-size: 1.25cqw;
  background: #F9F8FE; color: #6E5FC0;
  box-shadow: inset 0 0 0 1px #E4DEF8;
}
.jp-pick-stats {
  display: flex; margin: 2cqw 0;
  border-top: 1px solid #F0EEF8; border-bottom: 1px solid #F0EEF8;
}
.jp-pick-stat { flex: 1; min-width: 0; text-align: center; padding: 1.5cqw 0.8cqw; border-left: 1px solid #F0EEF8; }
.jp-pick-stat:first-child { border-left: 0; }
.jp-pick-stat b { display: block; font-size: 2.1cqw; font-weight: 700; letter-spacing: -0.01em; color: #1D1A2E; }
.jp-pick-stat span { font-size: 1.2cqw; color: #A5A3B5; }
.jp-pick-ticks { display: flex; flex-direction: column; gap: 1.6cqw; margin-bottom: 2.4cqw; }
.jp-pick-tick { display: flex; align-items: center; gap: 1.1cqw; font-size: 1.45cqw; color: #55516B; }
.jp-pick-tick svg { flex: 0 0 auto; width: 1.9cqw; height: 1.9cqw; color: #34A363; }
.jp-pick-btn {
  display: block; margin-top: auto;
  background: #9184D9; color: #fff;
  border-radius: 1cqw; padding: 1.35cqw;
  text-align: center; font-size: 1.5cqw; font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.jp-pick-btn:hover { background: #8578D3; }
.jp-pick-btn:active { transform: scale(0.98); }
/* 16s loop, four ~4s phases, 0.4s crossfades. fill-mode both means the
   paused frame is agent 1 fully shown — the hero is above the fold, so it
   must never sit empty. */
.jp-pick-pane, .jp-pick-item, .jp-pick-desc {
  animation-duration: 16s; animation-timing-function: ease;
  animation-iteration-count: infinite; animation-fill-mode: both;
  animation-play-state: paused;
}
.jp-demo.jp-in .jp-pick-pane, .jp-demo.jp-in .jp-pick-item, .jp-demo.jp-in .jp-pick-desc { animation-play-state: running; }
.jp-pick-p1 { animation-name: jp-pick-p1; } .jp-pick-p2 { animation-name: jp-pick-p2; }
.jp-pick-p3 { animation-name: jp-pick-p3; } .jp-pick-p4 { animation-name: jp-pick-p4; }
.jp-pick-i1 { animation-name: jp-pick-n1; } .jp-pick-i2 { animation-name: jp-pick-n2; }
.jp-pick-i3 { animation-name: jp-pick-n3; } .jp-pick-i4 { animation-name: jp-pick-n4; }
.jp-pick-i1 .jp-pick-desc { animation-name: jp-pick-d1; }
.jp-pick-i2 .jp-pick-desc { animation-name: jp-pick-d2; }
.jp-pick-i3 .jp-pick-desc { animation-name: jp-pick-d3; }
.jp-pick-i4 .jp-pick-desc { animation-name: jp-pick-d4; }
@keyframes jp-pick-p1 { 0%, 22.5% { opacity: 1; } 25%, 97.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes jp-pick-p2 { 0%, 25% { opacity: 0; } 27.5%, 47.5% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes jp-pick-p3 { 0%, 50% { opacity: 0; } 52.5%, 72.5% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes jp-pick-p4 { 0%, 75% { opacity: 0; } 77.5%, 97.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jp-pick-n1 { 0%, 22.5% { color: #1D1A2E; border-bottom-color: #2B2741; } 25%, 97.5% { color: #B7B5C6; border-bottom-color: #ECEAF4; } 100% { color: #1D1A2E; border-bottom-color: #2B2741; } }
@keyframes jp-pick-n2 { 0%, 25% { color: #B7B5C6; border-bottom-color: #ECEAF4; } 27.5%, 47.5% { color: #1D1A2E; border-bottom-color: #2B2741; } 50%, 100% { color: #B7B5C6; border-bottom-color: #ECEAF4; } }
@keyframes jp-pick-n3 { 0%, 50% { color: #B7B5C6; border-bottom-color: #ECEAF4; } 52.5%, 72.5% { color: #1D1A2E; border-bottom-color: #2B2741; } 75%, 100% { color: #B7B5C6; border-bottom-color: #ECEAF4; } }
@keyframes jp-pick-n4 { 0%, 75% { color: #B7B5C6; border-bottom-color: #ECEAF4; } 77.5%, 97.5% { color: #1D1A2E; border-bottom-color: #2B2741; } 100% { color: #B7B5C6; border-bottom-color: #ECEAF4; } }
@keyframes jp-pick-d1 { 0%, 22.5% { max-height: 16cqw; opacity: 1; } 25%, 97.5% { max-height: 0; opacity: 0; } 100% { max-height: 16cqw; opacity: 1; } }
@keyframes jp-pick-d2 { 0%, 25% { max-height: 0; opacity: 0; } 27.5%, 47.5% { max-height: 16cqw; opacity: 1; } 50%, 100% { max-height: 0; opacity: 0; } }
@keyframes jp-pick-d3 { 0%, 50% { max-height: 0; opacity: 0; } 52.5%, 72.5% { max-height: 16cqw; opacity: 1; } 75%, 100% { max-height: 0; opacity: 0; } }
@keyframes jp-pick-d4 { 0%, 75% { max-height: 0; opacity: 0; } 77.5%, 97.5% { max-height: 16cqw; opacity: 1; } 100% { max-height: 0; opacity: 0; } }
.jp-pick-manual .jp-pick-pane, .jp-pick-manual .jp-pick-item, .jp-pick-manual .jp-pick-desc { animation: none; }
.jp-pick-manual .jp-pick-pane { transition: opacity 0.35s ease; }
.jp-pick-manual .jp-pick-pane.jp-pick-on { opacity: 1; }
.jp-pick-manual .jp-pick-item { transition: color 0.3s ease, border-color 0.3s ease; }
.jp-pick-manual .jp-pick-item.jp-pick-on { color: #1D1A2E; border-bottom-color: #2B2741; }
.jp-pick-manual .jp-pick-desc { transition: max-height 0.35s ease, opacity 0.35s ease; }
.jp-pick-manual .jp-pick-item.jp-pick-on .jp-pick-desc { max-height: 16cqw; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .jp-pick-pane, .jp-pick-item, .jp-pick-desc { animation: none; transition: none; }
  .jp-demo-pick:not(.jp-pick-manual) .jp-pick-p1 { opacity: 1; }
  .jp-demo-pick:not(.jp-pick-manual) .jp-pick-i1 { color: #1D1A2E; border-bottom-color: #2B2741; }
  .jp-demo-pick:not(.jp-pick-manual) .jp-pick-i1 .jp-pick-desc { max-height: none; opacity: 1; }
}

/* hero type balance (2026-08-29): the "judge the agents yourself" subline is
   the hook, so it gets the size; the greeting steps back. Overrides the
   captured typography utilities, hence the !important. */
.jp-hero-h1 { font-size: clamp(28px, 3.6vw, 44px) !important; line-height: 1.18 !important; }
.jp-hero-sub {
  font-size: clamp(19px, 2.1vw, 28px) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #2B2741 !important;
  max-width: 720px !important;
}

/* ---------- about page (research rebuild 2026-08-29) ---------- */
/* Hero photo: the captured slot stretched to 1042px, which turns a headshot
   into a wall of face — cap it and keep the white frame. */
.jp-about-photo { max-width: min(540px, 100%) !important; }
.jp-about-block { max-width: 720px; margin: 0 auto 96px; }
.jp-about-block-wide { max-width: 984px; margin: 0 auto 96px; }
.jp-about-block-wide h2 { text-align: center; }
.jp-about-link { color: #7A6BD0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jp-about-link:hover { color: #5D4FB8; }
.jp-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jp-about-card { border: 1px solid #E9E5F8; background: #FBFAFE; border-radius: 12px; padding: 24px; }
.jp-about-card h3 { margin-bottom: 8px; }
.jp-about-card p { color: #55506B; }
@media (max-width: 900px) {
  .jp-about-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .jp-about-grid { grid-template-columns: 1fr; }
  .jp-about-block, .jp-about-block-wide { margin-bottom: 72px; }
}

/* mobile pillar tabs (2026-08-30): the captured design hides inactive tabs
   under 768px because the original switched pillars by swipe (Swiper JS,
   stripped from the clone). Without it, phones could never reach Websites /
   Lead generation / One app. Show all four tabs, wrapped, tappable. */
@media (max-width: 767px) {
  .jp-tabs { flex-wrap: wrap; justify-content: center; gap: 8px; row-gap: 8px; }
  .jp-tabs .jp-tab { display: flex !important; font-size: 16px; padding: 8px 12px; }
}

/* decorative blobs give the scroll container an 868px scrollWidth on a 375px
   phone. overflow-x hidden stops touch-scrolling but still allows programmatic
   sideways shifts (focus jumps, scrollIntoView). clip forbids those too. */
#page-scrolling-element { overflow-x: clip !important; }

/* mobile services cards (2026-08-30): the captured page swiped between the
   three tier cards with Swiper JS, which the clone strips - leaving Advanced
   and Premium unreachable on phones. Native scroll-snap replaces it. Scoped
   to the mobile-only card block so the index pillar carousel (tab-driven)
   is untouched. */
div[class~="lg:hidden"] .swiper-wrapper {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
div[class~="lg:hidden"] .swiper-wrapper::-webkit-scrollbar { display: none; }
div[class~="lg:hidden"] .swiper-slide { scroll-snap-align: center; }