:root{
  --brand-blue:#249FE8;
  --blue:#2F8CFF;
  --ink:#0D1420;
  --muted:#778194;
  --line:#E8EBF0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#fff;
  color:var(--ink);
}
a{text-decoration:none;color:inherit}
button{font:inherit}
h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,sans-serif}

/* =========================
   SCROLL 1 — LOCKED HERO
   ========================= */
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:var(--brand-blue);
  isolation:isolate;
  padding-bottom:0;
}
.bg-image{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url('/hero-background.png');
  background-image:image-set(url('/hero-background.webp') type('image/webp'),url('/hero-background.png') type('image/png'));
  background-size:cover;
  background-position:center 35%;
  transform:scale(1.01);
}
.bg-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  /* This single layer does the entire blue -> white fade.
     No separate colored seam or rule exists below the demo. */
  background:linear-gradient(
    to bottom,
    rgba(28,154,230,.98) 0%,
    rgba(35,160,232,.92) 19%,
    rgba(49,169,235,.58) 40%,
    rgba(116,201,244,.31) 58%,
    rgba(189,228,249,.24) 70%,
    rgba(230,245,253,.48) 80%,
    rgba(248,252,255,.78) 91%,
    #ffffff 100%
  );
}

.nav{
  width:min(1360px,calc(100% - 64px));
  height:92px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:32px;
  position:relative;
  z-index:10;
}
.brand{justify-self:start;display:flex;align-items:center}
.brand img{display:block;width:196px;height:auto;object-fit:contain}
.nav-center{display:flex;gap:34px;font-size:14px;font-weight:500;color:rgba(255,255,255,.94)}
.nav-center a,.nav-center button{transition:opacity .2s ease,transform .2s ease}
.nav-center a:hover,.nav-center button:hover{opacity:1;transform:translateY(-1px)}
.nav-cta{
  justify-self:end;
  padding:12px 18px;
  background:rgba(8,14,22,.94);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.nav-cta.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-cta:hover{box-shadow:0 0 0 5px rgba(144,213,255,.10),0 10px 32px rgba(0,0,0,.22)}
.menu{display:none}
.mobile-nav-menu{display:none}

.hero-copy{
  width:min(980px,calc(100% - 40px));
  margin:68px auto 0;
  text-align:center;
}
.hero-copy h1{
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(64px,5.55vw,90px);
  line-height:.95;
  letter-spacing:-.025em;
  color:#fff;
  text-shadow:0 3px 28px rgba(0,92,150,.10);
}
.hero-number{
  display:inline-block;
  font-size:1.326em;
  line-height:.78;
  vertical-align:-.025em;
  letter-spacing:-.03em;
}
.hero-copy p{
  width:min(720px,95%);
  margin:28px auto 0;
  font-size:18px;
  line-height:1.5;
  font-weight:500;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 14px rgba(0,75,130,.18);
}
.hero-cta{
  margin-top:28px;
  display:inline-flex;
  min-height:50px;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:12px;
  background:linear-gradient(180deg,#238FF0,#1676E8);
  color:#fff;
  font-size:15px;
  font-weight:600;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 12px 28px rgba(0,78,150,.18),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
  position:relative;
}
.hero-cta::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:inherit;
  background:rgba(78,192,255,.34);
  filter:blur(16px);
  opacity:0;
  z-index:-1;
  transition:opacity .22s ease;
}
.hero-cta:hover{
  transform:translateY(-2px) scale(1.015);
  filter:saturate(1.08);
  box-shadow:0 14px 34px rgba(0,90,170,.3),inset 0 1px 0 rgba(255,255,255,.24)
}
.hero-cta:hover::before{opacity:1}

/* Final demo/video slot. Replace the contents of .demo-window with the real
   demo video later; the responsive footprint and rounded corners are locked. */
.demo-stage{
  width:min(1280px,82vw);
  margin:54px auto 48px;
  position:relative;
  z-index:2;
  aspect-ratio:16/10;
}
.demo-stage::before{display:none}
.demo-window{
  height:100%;
  background:rgba(9,13,18,.97);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 28px 60px rgba(10,46,75,.18);
  overflow:hidden;
}
.demo-top{
  height:54px;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:600;
}
.left-dot{width:7px;height:7px;border-radius:50%;background:#90D5FF;box-shadow:0 0 14px rgba(144,213,255,.7)}
.live{justify-self:end;padding:5px 9px;border-radius:999px;color:#9edfff;border:1px solid rgba(144,213,255,.22);font-size:10px}
.demo-grid{display:grid;grid-template-columns:230px 1fr 270px;height:calc(100% - 54px)}
.inbox{padding:22px 15px;border-right:1px solid rgba(255,255,255,.08)}
.inbox>small,.intel-card small,.signal small{font-size:9px;letter-spacing:.12em;color:#718096;font-weight:600}
.lead{display:flex;gap:10px;align-items:center;padding:11px;border-radius:12px;margin-top:8px;color:#fff}
.lead.active{background:#151c25;border:1px solid rgba(144,213,255,.11)}
.lead b{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#1d2937;font-size:10px}
.lead span,.lead strong,.lead em{display:block}
.lead strong{font-size:11px}
.lead em{font-size:9px;color:#7c8799;font-style:normal;margin-top:3px}
.conversation{padding:24px}
.conversation-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:18px}
.conversation-head span,.conversation-head strong,.conversation-head small{display:block}
.conversation-head strong{font-size:13px}
.conversation-head small{font-size:9px;color:#7c8799;margin-top:4px}
.conversation-head i{font-size:9px;font-style:normal;color:#a8e4ff;border:1px solid rgba(144,213,255,.18);background:rgba(144,213,255,.07);padding:6px 9px;border-radius:999px}
.messages{padding:28px 0 14px}
.bubble{max-width:78%;padding:11px 13px;border-radius:13px;margin-bottom:12px;font-size:11px;line-height:1.45}
.incoming{background:#171e29;color:#e2e7ee;border-top-left-radius:4px}
.outgoing{background:#1e6e9b;color:#fff;margin-left:auto;border-top-right-radius:4px}
.signal{
  margin-top:20px;
  padding:15px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(31,120,173,.18),rgba(144,213,255,.04));
  border:1px solid rgba(144,213,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.signal span,.signal strong{display:block}
.signal strong{font-size:12px;margin-top:5px}
.signal button{border:0;background:#90D5FF;color:#0b0f14;border-radius:999px;padding:8px 11px;font-weight:700;font-size:10px}
.intel{padding:22px 15px;border-left:1px solid rgba(255,255,255,.08)}
.intel-card{padding:15px;border-radius:14px;background:#121822;border:1px solid rgba(255,255,255,.05);margin-bottom:12px}
.intel-card strong{display:block;margin-top:7px;font-size:12px}
.intel-card p{font-size:9px;color:#7c8799;line-height:1.5}
.intel-card .metric{font-size:30px;color:#9edfff}

/* Pure white bridge. No grey or blue line. */
.hero-to-white{
  height:64px;
  margin:0;
  background:#fff;
}

/* =========================
   SCROLL 2 — CLEAN BUILD
   ========================= */
.sell-section{
  background:#fff;
  padding:34px 0 74px;
}
.sell-inner{
  width:min(1390px,calc(100% - 96px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,600px) minmax(0,1fr);
  gap:92px;
  align-items:center;
}
.agent-visual-shell{
  background:#F1F6FD;
  border-radius:34px;
  padding:42px 44px;
}
.agent-card{
  width:100%;
  background:#fff;
  border:1px solid #E7ECF3;
  border-radius:18px;
  overflow:visible;
  box-shadow:0 16px 40px rgba(29,70,116,.055);
}
.agent-head{
  min-height:68px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 22px 15px;
}
.agent-head h3{margin:0;font-size:22px;letter-spacing:-.03em}
.agent-actions{display:flex;align-items:center;gap:14px}
.agent-live{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.agent-live i{width:8px;height:8px;border-radius:50%;background:#34C983}
.agent-settings{font-size:12px;color:#7B8596;font-weight:500;white-space:nowrap}

.agent-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  padding:0 22px 16px;
}
.mini-card{
  border:1px solid #E8EBF0;
  border-radius:10px;
  min-height:68px;
  padding:10px 11px;
}
.mini-card b,.mini-card span{display:block}
.mini-card b{font-size:11px;margin-bottom:5px}
.mini-card span{font-size:11px;line-height:1.45;color:#495365}
.chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.chips span{background:#F2F4F7;border-radius:8px;padding:4px 7px;color:#303947}
.more-link{
  display:inline-flex;
  align-items:center;
  margin-left:2px;
  font-size:9px;
  color:#2F8CFF;
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
}

.live-convo{
  border-top:1px solid #E8EBF0;
  padding:14px 22px 17px;
}
.live-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.live-row b{font-size:12px}
.live-row span{font-size:11px;color:#8790A1}
.msg-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-top:10px;
}
.lead-msg{width:88%}
.lead-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1D2530;
  color:#fff;
  font-size:10px;
}
.message-stack{display:flex;flex-direction:column;min-width:0}
.lead-msg .message-stack{flex:1;max-width:420px}
.right-stack{align-items:flex-end;flex:1;max-width:430px}
.chat-bubble{
  font-size:11px;
  line-height:1.45;
  padding:10px 12px;
  border-radius:12px;
}
.chat-bubble.left{
  background:#F0F2F6;
  color:#1B2430;
  border-bottom-left-radius:4px;
  min-width:285px;
  max-width:100%;
}
.chat-bubble.right{
  width:100%;
  background:#E8F1FF;
  color:#1B2430;
  border-bottom-right-radius:4px;
}
.message-time{margin-top:4px;font-size:8.5px;color:#8A94A5}
.left-time{padding-left:4px}
.right-time{padding-right:4px}

/* Exact mirror of EC avatar: same 34x34 geometry, opposite side. */
.agent-msg{
  width:88%;
  margin-left:auto;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
}
.agent-msg img{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  padding:0;
  margin:0;
  border:0;
  display:block;
  background:transparent;
}

.content-performance{
  border-top:1px solid #E8EBF0;
  padding:13px 22px 19px;
}
.content-grid{
  display:grid;
  grid-template-columns:repeat(3,108px);
  gap:18px;
  align-items:start;
}
.content-card{position:relative;width:108px}
.thumb{
  width:108px;
  height:108px;
  border-radius:9px;
  overflow:hidden;
  position:relative;
  background:#E9EEF5;
}
.thumb img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.pause{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:rgba(16,22,30,.78);
  border:2px solid rgba(255,255,255,.96);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.pause>span{display:block;width:3px;height:10px;border-radius:1px;background:#fff}
.content-card>b{
  display:block;
  font-size:10.5px;
  margin-top:7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.content-card small{
  display:block;
  color:#778194;
  font-size:9.5px;
  line-height:1.35;
  margin-top:3px;
}
.client-results-card{overflow:visible}
.sell-copy{align-self:center}
.sell-copy h2{
  margin:0;
  font-size:clamp(58px,4.4vw,74px);
  line-height:.96;
  letter-spacing:-.055em;
  font-weight:600;
}
.sell-intro{
  margin:26px 0 42px;
  max-width:650px;
  color:#737D8F;
  font-size:18px;
  line-height:1.52;
}
.feature-row{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:28px;
  padding:31px 0;
  border-top:1px solid var(--line);
}
.feature-row:first-of-type{border-top:0}
.feature-no{
  font-size:25px;
  color:var(--blue);
  font-weight:500;
  line-height:1.1;
}
.feature-row h3{
  font-size:27px;
  letter-spacing:-.035em;
  margin:0 0 9px;
  font-weight:600;
}
.feature-row p{
  margin:0;
  max-width:600px;
  color:#778194;
  font-size:16px;
  line-height:1.55;
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:900px){
  .nav{
    width:calc(100% - 34px);
    height:78px;
    grid-template-columns:1fr auto;
  }
  .brand img{width:175px}
  .nav-center,.nav-cta{display:none}
  .menu{
    display:flex;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.08);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
  }
  .menu span{width:16px;height:1.5px;background:#fff;transition:transform .22s ease,opacity .22s ease}
  .menu[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .menu[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .mobile-nav-menu{
    position:absolute;
    top:70px;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    padding:10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    background:rgba(8,14,22,.96);
    box-shadow:0 18px 44px rgba(0,0,0,.24);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .mobile-nav-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  .mobile-nav-menu a,.mobile-nav-menu button{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:0 14px;
    border-radius:12px;
    color:#fff;
    font-size:15px;
    font-weight:500;
  }
  .mobile-nav-menu a:active,.mobile-nav-menu button:active{background:rgba(255,255,255,.08)}
  .hero-copy{margin-top:54px}
  .hero-copy h1{font-size:clamp(52px,10.8vw,76px)}
  .demo-stage{
    width:calc(100% - 28px);
    margin-top:40px;
    margin-bottom:36px;
    aspect-ratio:16/9;
  }
  .demo-grid{grid-template-columns:190px 1fr}
  .intel{display:none}
  .hero-to-white{height:52px}

  .sell-section{padding:28px 0 72px}
  .sell-inner{
    width:min(100% - 40px,760px);
    display:flex;
    flex-direction:column;
    gap:42px;
  }
  .sell-copy{order:1}
  .agent-visual-shell{order:2;width:100%;padding:32px}
  .sell-copy h2{font-size:58px}
  .sell-intro{font-size:17px}
}

@media(max-width:600px){
  .brand img{width:160px}
  .hero-copy{
    margin-top:50px;
    width:calc(100% - 28px);
  }
  .hero-copy h1{
    font-size:clamp(47px,13.2vw,62px);
    line-height:.95;
  }
  .hero-copy p{
    font-size:16px;
    width:96%;
    margin-top:22px;
  }
  .hero-cta{
    margin-top:24px;
    width:min(330px,92%);
    min-height:52px;
  }
  .demo-stage{
    width:calc(100% - 20px);
    margin-top:34px;
    margin-bottom:28px;
    aspect-ratio:4/5;
  }
  .demo-window{border-radius:14px}
  .demo-grid{grid-template-columns:1fr}
  .inbox,.intel{display:none}
  .conversation{padding:17px}
  .hero-to-white{height:42px}

  .sell-section{padding:24px 0 64px}
  .sell-inner{width:calc(100% - 28px);gap:30px}
  .sell-copy h2{font-size:48px;line-height:.98}
  .sell-intro{font-size:15px;line-height:1.5;margin:18px 0 22px}
  .feature-row{
    grid-template-columns:48px 1fr;
    gap:10px;
    padding:23px 0;
  }
  .feature-no{font-size:20px}
  .feature-row h3{font-size:22px;margin-bottom:7px}
  .feature-row p{font-size:14px;line-height:1.48}

  .agent-visual-shell{padding:14px;border-radius:24px}
  .agent-head{padding:15px 14px 11px}
  .agent-head h3{font-size:18px}
  .agent-grid{
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    padding:0 14px 12px;
  }
  .mini-card{min-height:62px;padding:7px}
  .mini-card b{font-size:9px}
  .mini-card span{font-size:8.5px}
  .chips{gap:2px}
  .chips span{padding:3px 4px;font-size:7px}
  .more-link{font-size:7px;margin-left:1px}

  .live-convo{padding:11px 14px 13px}
  .lead-msg,.agent-msg{width:100%}
  .lead-msg .message-stack{max-width:none}
  .chat-bubble.left{min-width:0;max-width:82%}
  .agent-msg .right-stack{max-width:86%}

  .content-performance{padding:11px 14px 14px}
  .content-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .content-card,.thumb{width:100%}
  .thumb{height:auto;aspect-ratio:1/1}
  .content-card>b{font-size:9px}
  .content-card small{font-size:8px}
  .pause{width:26px;height:26px}
  }


/* =========================================================
   V12 — MATCH APPROVED LAYOUT TARGET, KEEP REAL ASSETS
   ========================================================= */

/* Transition / spacing target */
.demo-stage{
  margin-bottom:22px !important;
}
.hero-to-white{
  height:74px !important;
  background:#fff !important;
}
.sell-section{
  padding:22px 0 72px !important;
}

/* Desktop composition */
.sell-inner{
  width:min(1420px,calc(100% - 86px)) !important;
  grid-template-columns:minmax(0,610px) minmax(0,1fr) !important;
  gap:86px !important;
  align-items:center !important;
}

/* Left product visual */
.agent-visual-shell{
  padding:38px 40px !important;
  border-radius:32px !important;
}
.agent-card{
  border-radius:18px !important;
}
.agent-head{
  min-height:64px !important;
  padding:18px 20px 14px !important;
}
.agent-head h3{
  font-size:22px !important;
}
.agent-grid{
  gap:8px !important;
  padding:0 20px 14px !important;
}
.mini-card{
  min-height:66px !important;
  padding:9px 10px !important;
}
.live-convo{
  padding:12px 20px 15px !important;
}
.content-performance{
  padding:12px 20px 17px !important;
}

/* Content performance spreads evenly like target */
.content-grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  padding-right:28px !important;
}
.content-card{
  width:auto !important;
  min-width:0 !important;
}
.thumb{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
}
/* Reply avatar mirrors EC exactly */
.agent-msg{
  width:88% !important;
  margin-left:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-end !important;
  gap:10px !important;
}
.agent-msg img{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  flex:0 0 34px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Right copy geometry */
.sell-copy h2{
  font-size:clamp(58px,4.3vw,72px) !important;
  line-height:.95 !important;
}
.sell-intro{
  margin:24px 0 38px !important;
  max-width:650px !important;
}
.feature-row{
  grid-template-columns:72px 1fr !important;
  gap:28px !important;
  padding:29px 0 !important;
}
.feature-row h3{
  font-size:26px !important;
}

/* Mobile stays compact and uses actual assets */
@media(max-width:900px){
  .sell-inner{
    width:min(100% - 40px,760px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:40px !important;
  }
  .sell-copy{order:1 !important}
  .agent-visual-shell{order:2 !important;width:100% !important}
}
@media(max-width:600px){
  .sell-section{padding-top:20px !important}
  .agent-visual-shell{padding:14px !important}
  .content-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    padding-right:18px !important;
  }
  }


/* V13 requested corrections only */

/* 1) Remove any grey band/shadow beneath the demo. */
.demo-window{
  box-shadow:none !important;
}
.demo-stage{
  box-shadow:none !important;
}
.hero-to-white{
  background:#ffffff !important;
  box-shadow:none !important;
  border:0 !important;
}
.hero-to-white::before,
.hero-to-white::after{
  content:none !important;
  display:none !important;
}
.sell-section{
  background:#ffffff !important;
}

/* 2) Reply avatar = exact EC-style circle, mirrored to the right, with "A". */
.agent-reply-avatar{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  flex:0 0 34px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:#1D2530 !important;
  color:#ffffff !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.agent-msg{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  gap:10px !important;
}

/* 3) Keep current content spacing, just move arrow upward to true visual center. */
@media(max-width:600px){
  .agent-reply-avatar{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    flex-basis:34px !important;
  }
  }


/* V14 requested fixes only */

/* Ensure text avatar is used and matches EC exactly. */
.agent-reply-avatar{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  flex:0 0 34px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:#1D2530 !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Arrow moved upward to center against the square image. */
@media(max-width:600px){
  }


/* V15 — only change: vertically center Client Results arrow */
@media(max-width:600px){
  }


/* V16 — only change: exact vertical centering of Client Results arrow */
@media(max-width:600px){
  }
\n\n/* V18 — demo media only. Locked V17 layout remains unchanged. */
.demo-window{position:relative !important;}
.demo-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#0b0d12;
}
.demo-video-mobile{display:none;}
@media(max-width:600px){
  .demo-video-desktop{display:none;}
  .demo-video-mobile{display:block;}
}

/* V19 motion only */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
[data-reveal="hero-title"]{transform:translateY(18px);transition-delay:.04s}
[data-reveal="hero-sub"]{transform:translateY(16px);transition-delay:.13s}
[data-reveal="hero-cta"]{transform:translateY(14px);transition-delay:.20s}
[data-reveal="hero-demo"]{transform:translateY(34px) scale(.985);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);transition-delay:.24s}
[data-reveal="scroll2-visual"]{transform:translateY(30px) scale(.988)}
[data-reveal="scroll2-title"]{transform:translateY(20px)}
[data-reveal="scroll2-intro"]{transform:translateY(18px);transition-delay:.08s}
[data-reveal^="feature-"]{transform:translateY(22px)}
[data-reveal].is-visible{opacity:1;transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}


/* V20 motion refinements only */
[data-reveal="hero-title"]{
  transition-duration:1.12s !important;
  transition-delay:.05s !important;
}
[data-reveal="hero-sub"]{
  transition-duration:1.05s !important;
  transition-delay:.22s !important;
}
/* Keep the CTA's existing entrance feel */
[data-reveal^="feature-"]{
  transition-duration:.98s !important;
  transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
}


/* V21 motion refinements only */

/* Slower, more premium hero text reveal */
[data-reveal="hero-title"]{
  transition-duration:1.55s !important;
  transition-delay:.06s !important;
  transition-timing-function:cubic-bezier(.16,1,.3,1) !important;
}
[data-reveal="hero-sub"]{
  transition-duration:1.40s !important;
  transition-delay:.32s !important;
  transition-timing-function:cubic-bezier(.16,1,.3,1) !important;
}

/* CTA gets its own distinct pop/fade behavior */
[data-reveal="hero-cta"]{
  opacity:0;
  transform:translateY(12px) scale(.94);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.34,1.56,.64,1) !important;
  transition-delay:.58s !important;
}
[data-reveal="hero-cta"].is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Slower, softer staggered reveal for points 01–03 */
[data-reveal^="feature-"]{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity 1.18s cubic-bezier(.16,1,.3,1),
    transform 1.32s cubic-bezier(.16,1,.3,1) !important;
}
[data-reveal="feature-1"]{transition-delay:.04s !important;}
[data-reveal="feature-2"]{transition-delay:.10s !important;}
[data-reveal="feature-3"]{transition-delay:.16s !important;}

[data-reveal^="feature-"].is-visible{
  opacity:1;
  transform:translateY(0);
}


/* V22 hero timing refinements only */
/* Slow hero title/subtitle/CTA by roughly one additional second.
   Scroll 2 points 01–03 remain exactly as in V21. */

[data-reveal="hero-title"]{
  transition-duration:2.45s !important;
  transition-delay:.06s !important;
}
[data-reveal="hero-sub"]{
  transition-duration:2.30s !important;
  transition-delay:.42s !important;
}
[data-reveal="hero-cta"]{
  transition:
    opacity 1.62s cubic-bezier(.22,1,.36,1),
    transform 1.72s cubic-bezier(.34,1.56,.64,1) !important;
  transition-delay:.72s !important;
}


/* V23 hero sequence only:
   title finishes first → subtitle → CTA.
   Scroll 2 remains untouched. */

[data-reveal="hero-title"]{
  transition-duration:2.95s !important;
  transition-delay:.06s !important;
}

[data-reveal="hero-sub"]{
  transition-duration:2.30s !important;
  transition-delay:3.01s !important;
}

[data-reveal="hero-cta"]{
  transition:
    opacity 1.62s cubic-bezier(.22,1,.36,1),
    transform 1.72s cubic-bezier(.34,1.56,.64,1) !important;
  transition-delay:5.31s !important;
}


/* V24 hero sequence: word-by-word title → subtitle → CTA */
[data-reveal="hero-title"]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

.hero-word{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  filter:blur(3px);
  animation:heroWordIn .72s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.14s * var(--word-index));
}

@keyframes heroWordIn{
  0%{
    opacity:0;
    transform:translateY(18px);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

/* Title has 10 words. Final word begins at 1.26s and finishes at ~1.98s.
   Subtitle begins only after the full headline completes. */
[data-reveal="hero-sub"]{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity 1.35s cubic-bezier(.16,1,.3,1),
    transform 1.45s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:2.08s !important;
}

[data-reveal="hero-sub"].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* CTA begins only after subtitle has completed. */
[data-reveal="hero-cta"]{
  opacity:0;
  transform:translateY(12px) scale(.94);
  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform .92s cubic-bezier(.34,1.56,.64,1) !important;
  transition-delay:3.55s !important;
}

[data-reveal="hero-cta"].is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

@media(prefers-reduced-motion:reduce){
  .hero-word{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }
}


/* V25 hero sequence refinement only:
   word-by-word title → quicker bottom-up subtitle → CTA immediately after subtitle */

[data-reveal="hero-sub"]{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:2.08s !important;
}

[data-reveal="hero-sub"].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Subtitle completes at ~3.03s, so CTA begins immediately then. */
[data-reveal="hero-cta"]{
  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform .92s cubic-bezier(.34,1.56,.64,1) !important;
  transition-delay:3.03s !important;
}


/* V26 hero timing fix only:
   title words → faster subtitle rise/fade → visible CTA pop/fade */

/* Subtitle is 0.4s quicker than V25 */
[data-reveal="hero-sub"]{
  opacity:0 !important;
  transform:translateY(18px) !important;
  transition:
    opacity .45s cubic-bezier(.16,1,.3,1),
    transform .55s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:2.08s !important;
}
[data-reveal="hero-sub"].is-visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* CTA starts the instant subtitle is fully in.
   Stronger starting state makes the fade/pop clearly visible. */
[data-reveal="hero-cta"]{
  opacity:0 !important;
  transform:translateY(18px) scale(.90) !important;
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .78s cubic-bezier(.34,1.56,.64,1) !important;
  transition-delay:2.63s !important;
}
[data-reveal="hero-cta"].is-visible{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}


/* V27 root-cause CTA reveal fix */
.hero-cta[data-reveal="hero-cta"]{
  opacity:0 !important;
  transform:translateY(18px) scale(.90) !important;
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .78s cubic-bezier(.34,1.56,.64,1) !important;
  transition-delay:2.63s !important;
}

.hero-cta[data-reveal="hero-cta"].is-visible{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}


/* V28 timing only. No visual/logic changes.
   Subtitle begins 1.0s earlier.
   CTA begins 0.4s after subtitle begins. */
[data-reveal="hero-sub"]{
  transition-delay:1.08s !important;
}

.hero-cta[data-reveal="hero-cta"]{
  transition-delay:1.48s !important;
}


/* V29 approved content refinements only */

/* Restore locked #1 scale: ~1.326x the rest of the hero headline */
[data-reveal="hero-title"] .hero-word:first-child{
  font-size:1.326em !important;
  line-height:.82 !important;
  vertical-align:baseline;
}

/* Let the EC lead bubble use a natural conversational width */
.chat-row.lead .bubble,
.chat-row:first-child .bubble{
  max-width:82% !important;
  width:auto !important;
}

@media(max-width:600px){
  [data-reveal="hero-title"] .hero-word:first-child{
    font-size:1.326em !important;
  }
}

/* V30: Scroll 3 only. V29 Scrolls 1–2 remain untouched. */
.funnel-section{background:#fff;color:#0b101a;padding:128px 6vw 110px;overflow:hidden}
.funnel-head{text-align:center;max-width:980px;margin:0 auto 74px}
.funnel-head h2{font-size:clamp(48px,5.2vw,82px);line-height:.98;letter-spacing:-.055em;margin:0 0 26px;font-weight:650}
.funnel-head p{max-width:760px;margin:auto;font-size:20px;line-height:1.55;color:#778196}
.funnel-visual{max-width:1380px;margin:auto;display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr;align-items:stretch;gap:12px}
.funnel-stage{min-height:330px;border-radius:30px;background:#eef3fb;padding:34px 30px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.stage-kicker{font-size:12px;font-weight:800;letter-spacing:.15em;color:#788398;margin-bottom:18px}
.stage-number{font-size:clamp(58px,5.4vw,86px);line-height:1;font-weight:700;letter-spacing:-.055em}
.stage-copy{font-size:16px;line-height:1.45;color:#667186;max-width:250px;margin:20px auto 0}
.funnel-arrow{display:grid;place-items:center;font-size:28px;color:#a7b0c0}
.funnel-note{text-align:center;font-size:12px;color:#9aa3b2;margin-top:18px}
.diagnosis{text-align:center;max-width:880px;margin:92px auto 84px}
.diagnosis h3{font-size:clamp(34px,3.5vw,56px);line-height:1.04;letter-spacing:-.045em;margin:0 0 22px}
.diagnosis p{font-size:19px;line-height:1.55;color:#737d90;max-width:780px;margin:auto}
.proof-strip{max-width:1180px;margin:0 auto;padding:38px 0 42px;border-top:1px solid #e5e9ef;border-bottom:1px solid #e5e9ef;text-align:center}
.proof-overline{font-size:11px;letter-spacing:.2em;font-weight:800;color:#8b95a7;margin-bottom:18px}
.proof-main{display:flex;align-items:center;justify-content:center;gap:16px}
.proof-avatars{display:flex;padding-left:12px}
.proof-avatar{width:50px;height:50px;border-radius:50%;border:3px solid #fff;margin-left:-12px;background-image:url("proof-results-reference.png");background-size:340% auto;background-repeat:no-repeat;box-shadow:0 2px 10px rgba(15,23,42,.10)}
.avatar-one{background-position:8% 10%}.avatar-two{background-position:50% 8%}.avatar-three{background-position:92% 9%}
.proof-dot{width:10px;height:10px;border-radius:50%;background:#20b77a}
.proof-line{font-size:25px;color:#6f7785}.proof-line strong{color:#10151f;font-weight:750}
.proof-mini{display:flex;justify-content:center;gap:12px;margin-top:20px}
.proof-mini>div{display:flex;align-items:baseline;gap:7px;padding:9px 14px;border-radius:999px;background:#f4f6fa;font-size:13px;color:#7c8594}
.proof-mini strong{font-size:15px;color:#151a23}.proof-mini span{text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.calc-transition{text-align:center;max-width:780px;margin:94px auto 0}
.calc-transition h3{font-size:clamp(38px,4vw,62px);letter-spacing:-.045em;line-height:1.02;margin:0 0 18px}
.calc-transition p{font-size:18px;line-height:1.5;color:#778196;max-width:650px;margin:0 auto 30px}
.calc-cta{display:inline-flex;gap:12px;align-items:center;text-decoration:none;background:#1685f8;color:#fff;font-weight:750;border-radius:14px;padding:17px 24px;box-shadow:0 12px 30px rgba(22,133,248,.2)}
@media(max-width:700px){
 .funnel-section{padding:88px 20px 78px}
 .funnel-head{margin-bottom:40px}.funnel-head h2{font-size:43px}.funnel-head p{font-size:17px}
 .funnel-visual{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 3px 14px;scrollbar-width:none}
 .funnel-visual::-webkit-scrollbar{display:none}
 .funnel-stage{min-width:88vw;min-height:420px;scroll-snap-align:center;padding:36px 28px}
 .funnel-arrow{display:none}.stage-number{font-size:84px}.stage-copy{font-size:17px}
 .funnel-note{margin-top:8px}
 .diagnosis{margin:70px auto 64px}.diagnosis h3{font-size:37px}.diagnosis p{font-size:17px}
 .proof-strip{padding:30px 0 32px}.proof-main{flex-wrap:wrap;gap:12px}.proof-line{font-size:19px;width:100%;margin-top:3px}
 .proof-avatar{width:48px;height:48px}.proof-dot{display:none}
 .proof-mini{gap:7px;flex-wrap:wrap}.proof-mini>div{padding:8px 11px}
 .calc-transition{margin-top:70px}.calc-transition h3{font-size:40px}.calc-transition p{font-size:16px}
}

/* V31: requested Scroll 3 refinements only */
.funnel-section{padding-top:96px}
.mobile-swipe{display:none}
.proof-strip{max-width:1240px;padding-top:42px;padding-bottom:44px}
.proof-overline{margin-bottom:20px}
.proof-dot{
  background:#1685f8;
  box-shadow:0 0 0 0 rgba(22,133,248,.45);
  animation:proofPulse 1.8s ease-out infinite;
}
@keyframes proofPulse{
  0%{box-shadow:0 0 0 0 rgba(22,133,248,.42)}
  70%{box-shadow:0 0 0 9px rgba(22,133,248,0)}
  100%{box-shadow:0 0 0 0 rgba(22,133,248,0)}
}
.proof-results{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:920px;
  margin:30px auto 0;
}
.proof-result{
  background:#f4f6fa;
  border-radius:16px;
  padding:16px 18px;
  text-align:center;
}
.proof-result strong{
  font-size:18px;
  letter-spacing:-.02em;
  color:#1685f8;
}
.proof-quote{
  margin:24px auto 0;
  max-width:760px;
  padding:0;
  border:0;
  font-size:17px;
  line-height:1.5;
  color:#687286;
  text-align:center;
  font-style:normal;
}
.proof-mini{display:none!important}

@media(max-width:700px){
  .funnel-section{padding-top:70px}
  .mobile-swipe{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:34px;
    font-size:12px;
    font-weight:750;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#8d97a8;
  }
  .mobile-swipe span{font-size:17px;line-height:1}
  .proof-results{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:24px;
  }
  .proof-result{padding:13px 14px}
  .proof-result strong{font-size:16px}
  .proof-quote{font-size:15px;margin-top:20px;padding:0 10px}
}

/* V32: exact requested Scroll 3 proof/order refinements */
.funnel-head h2{max-width:980px;margin-left:auto;margin-right:auto}
.funnel-section{padding-top:82px}

/* Divider begins immediately after the example funnel */
.proof-strip{
  margin-top:58px;
  padding-top:42px;
  border-top:1px solid #e1e6ee;
}
.trusted-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:2px;
}
.trusted-copy{
  font-size:22px;
  line-height:1.35;
  color:#6f7785;
  letter-spacing:-.02em;
}
.trusted-copy strong{color:#11151d;font-weight:700}
.trusted-copy span{color:#737b88}
.million-proof{
  margin-top:27px;
  text-align:center;
  font-size:28px;
  line-height:1.2;
  color:#727b8b;
  letter-spacing:-.025em;
}
.million-proof strong{color:#11151d;font-weight:760}
.proof-results{margin-top:31px}
.proof-result{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.proof-result span{
  font-size:13px;
  font-weight:700;
  color:#222832;
}
.mobile-swipe{display:none}

@media(max-width:700px){
  .funnel-section{padding-top:58px}
  .funnel-head h2{font-size:43px;line-height:1.02}
  .mobile-swipe{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:13px;
    font-size:11px;
    line-height:1;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#9aa3b2;
  }
  .mobile-swipe span{font-size:14px}
  .proof-strip{margin-top:38px;padding-top:30px}
  .trusted-row{flex-wrap:wrap;gap:10px}
  .trusted-copy{
    width:100%;
    text-align:center;
    font-size:15px;
    line-height:1.45;
  }
  .million-proof{font-size:22px;margin-top:22px}
  .proof-results{grid-template-columns:1fr;margin-top:24px}
  .proof-result{gap:6px}
}

/* V33: exact Scroll 3 requested refinements */
.funnel-section{padding-top:58px}
.proof-avatar{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.proof-avatar.avatar-one{background-image:url("trusted-avatar-1.png");background-position:center}
.proof-avatar.avatar-two{background-image:url("trusted-avatar-2.png");background-position:center}
.proof-avatar.avatar-three{background-image:url("trusted-avatar-3.png");background-position:center}
@media(max-width:700px){
  .funnel-section{padding-top:32px}
}

/* V34: subtle shine on $1,000,000+ and refined calculator CTA copy */
.shine-number{
  display:inline-block;
  background:linear-gradient(
    105deg,
    #11151d 0%,
    #11151d 42%,
    #5faeff 49%,
    #d8ecff 52%,
    #5faeff 55%,
    #11151d 62%,
    #11151d 100%
  );
  background-size:240% 100%;
  background-position:120% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  animation:ccMillionShine 4.8s ease-in-out infinite;
}
@keyframes ccMillionShine{
  0%,68%{background-position:120% 0}
  86%{background-position:-35% 0}
  100%{background-position:-35% 0}
}
@media (prefers-reduced-motion: reduce){
  .shine-number{
    animation:none;
    background:none;
    color:#11151d !important;
    -webkit-text-fill-color:#11151d;
  }
}

/* V35: constant black reflective sheen + final approved calculator copy */
.shine-number{
  display:inline-block;
  background:
    linear-gradient(
      110deg,
      #11151d 0%,
      #11151d 34%,
      #2f333a 43%,
      #6b7077 48%,
      #d7d9dc 51%,
      #656a71 54%,
      #2c3036 59%,
      #11151d 68%,
      #11151d 100%
    );
  background-size:220% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  animation:ccMillionBlackShine 2.9s linear infinite;
}
@keyframes ccMillionBlackShine{
  from{background-position:115% 0}
  to{background-position:-115% 0}
}
@media (prefers-reduced-motion: reduce){
  .shine-number{
    animation:none;
    background:#11151d;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
    -webkit-text-fill-color:transparent;
  }
}


/* V46 shared blue CTA interaction system.
   Add class="blue-cta" to every current/future blue primary CTA.
   Reveal state remains independent; hover only takes over after reveal. */
.blue-cta{
  position:relative;
  isolation:isolate;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.blue-cta::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:inherit;
  background:rgba(78,192,255,.34);
  filter:blur(16px);
  opacity:0;
  z-index:-1;
  pointer-events:none;
  transition:opacity .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .blue-cta:hover{
    transform:translateY(-2px) scale(1.015);
    filter:saturate(1.08);
    box-shadow:0 14px 34px rgba(0,90,170,.30),inset 0 1px 0 rgba(255,255,255,.24);
  }
  .blue-cta:hover::before{opacity:1}
  /* The hero has a locked reveal transform with !important. This override
     activates only after reveal so entry animation and hover never compete. */
  .hero-cta.blue-cta[data-reveal="hero-cta"].is-visible:hover{
    transform:translateY(-2px) scale(1.015) !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .blue-cta,.blue-cta::before{transition:none!important}
  .blue-cta:hover{transform:none!important}
}

/* V47: all launch CTAs share the same blue surface + V46 interaction system. */
.calculator-demo-button.blue-cta{
  background:#1685f8;
  color:#fff;
  box-shadow:0 12px 30px rgba(22,133,248,.20);
}

/* Floating launch CTA: appears from Scroll 3 onward. */
.floating-launch-cta{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:120;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:14px;
  background:#1685f8;
  color:#fff;
  text-decoration:none;
  font:700 14px/1 Arial,sans-serif;
  box-shadow:0 12px 30px rgba(22,133,248,.20);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.floating-launch-cta.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
@media (hover:hover) and (pointer:fine){
  .floating-launch-cta.blue-cta.visible:hover{
    transform:translateY(-2px) scale(1.015);
  }
}
@media(max-width:700px){
  .floating-launch-cta{
    right:16px;
    bottom:16px;
    min-height:50px;
    padding:0 19px;
    font-size:13px;
  }
}
@media(prefers-reduced-motion:reduce){
  .floating-launch-cta{transition:none!important}
  .floating-launch-cta.visible{transform:none!important}
}

/* V50 approved refinements. */
.hero-cta-note{
  display:block;
  margin-top:10px;
  font:400 13px/1.4 Arial,sans-serif;
  color:rgba(235,241,246,.72);
}
[data-reveal="hero-cta-note"]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1);
  transition-delay:1.66s;
}
[data-reveal="hero-cta-note"].is-visible{opacity:1;transform:translateY(0)}

/* V51: hero note + demo reveal as one beat. */
[data-reveal="hero-demo"]{
  transition-delay:1.66s !important;
}

/* Desktop/laptop-only floating CTA adjustment. Mobile stays exactly as before. */
@media(min-width:701px){
  .floating-launch-cta{
    right:32px;
    bottom:46px;
    min-height:60px;
    padding:0 28px;
    border-radius:15px;
    font-size:15px;
  }
}

/* Smooth entrance system for Scrolls 3-9. The JS adds this class only when
   enhancement is available, so content remains visible if JavaScript fails. */
.cc-scroll-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.cc-scroll-reveal.cc-reveal-visible{opacity:1;transform:translateY(0)}
.cc-scroll-reveal[data-reveal-delay="1"]{transition-delay:.06s}
.cc-scroll-reveal[data-reveal-delay="2"]{transition-delay:.12s}
.cc-scroll-reveal[data-reveal-delay="3"]{transition-delay:.18s}
.cc-scroll-reveal[data-reveal-delay="4"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .hero-cta-note,.cc-scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* V52: blue divider between calculator CTA transition and calculator */
.funnel-section{padding-bottom:0}
.calculator-glow-divider{
  width:min(86vw,1366px);
  height:1px;
  margin:56px auto 0;
  background:linear-gradient(90deg,rgba(22,133,248,0),rgba(22,133,248,.2) 10%,rgba(72,184,255,.82) 50%,rgba(22,133,248,.2) 90%,rgba(22,133,248,0));
  box-shadow:0 0 10px rgba(72,184,255,.32),0 0 24px rgba(22,133,248,.12);
}
@media(max-width:700px){
  .funnel-section{padding-bottom:0}
  .calculator-glow-divider{width:calc(100% - 8px);margin-top:44px}
}

/* V76: anonymized main-site proof presentation */
.proof-strip-anon .proof-overline{margin-bottom:22px}
.proof-strip-anon .million-proof{margin-top:0}
.proof-strip-anon .proof-result{justify-content:center;min-height:118px}
.proof-strip-anon .proof-result-type{font-size:9px!important;letter-spacing:.14em;font-weight:800!important;color:#8b95a7!important}
.proof-strip-anon .proof-result>span:last-child{font-size:12px;font-weight:600;color:#7b8492}
@media(max-width:700px){.proof-strip-anon .proof-result{min-height:104px}}

/* V77: creator-led service proof cards */
.proof-strip-anon .proof-result{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:190px;padding:18px 18px 16px}
.proof-strip-anon .proof-result>span:not(.proof-result-type){font-size:12px;font-weight:600;color:#7b8492;line-height:1.35}
.proof-strip-anon .proof-result blockquote{margin:auto 0 0;padding:12px 0 0;border:0;border-top:1px solid rgba(15,23,42,.08);font-size:11px;line-height:1.4;color:#687286;font-weight:500}
@media(max-width:700px){
  .proof-strip-anon .proof-result{min-height:176px;padding:16px}
  .proof-strip-anon .proof-result blockquote{font-size:11px}
}


/* V79: stronger proof hierarchy and card readability */
.proof-strip-anon{
  padding-top:48px;
}
.proof-strip-anon .proof-overline{
  margin-bottom:18px;
  font-size:11px;
  letter-spacing:.20em;
  font-weight:800;
  color:#8b95a7;
}
.proof-strip-anon .million-proof{
  margin-top:0;
  font-size:29px;
  line-height:1.15;
  font-weight:450;
  color:#7c8595;
}
.proof-strip-anon .million-proof .shine-number{
  display:inline-block;
  margin-right:5px;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.045em;
  color:#11151d;
}
.proof-strip-anon .proof-results{
  max-width:940px;
  gap:18px;
  margin-top:34px;
}
.proof-strip-anon .proof-result{
  min-height:218px;
  padding:22px 22px 18px;
  gap:9px;
  justify-content:flex-start;
  background:#f5f7fb;
  border:1px solid rgba(17,21,29,.035);
  border-radius:18px;
  box-shadow:0 7px 24px rgba(17,24,39,.035);
}
.proof-strip-anon .proof-result-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:#eaf3ff;
  color:#6e86a5!important;
  font-size:9px!important;
  letter-spacing:.16em;
  font-weight:800!important;
}
.proof-strip-anon .proof-result>strong{
  margin-top:3px;
  font-size:24px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.035em;
  color:#1685f8;
}
.proof-strip-anon .proof-result>span:not(.proof-result-type){
  max-width:255px;
  font-size:13px;
  line-height:1.42;
  font-weight:500;
  color:#707b8d;
}
.proof-strip-anon .proof-result blockquote{
  width:100%;
  margin:auto 0 0;
  padding:14px 8px 0;
  border-top:1px solid rgba(15,23,42,.08);
  font-size:11.5px;
  line-height:1.45;
  font-weight:500;
  font-style:italic;
  color:#596477;
}
@media(max-width:700px){
  .proof-strip-anon{padding-top:38px}
  .proof-strip-anon .proof-overline{margin-bottom:15px;font-size:10px}
  .proof-strip-anon .million-proof{font-size:21px;line-height:1.25;padding:0 10px}
  .proof-strip-anon .million-proof .shine-number{display:block;margin:0 0 3px;font-size:30px}
  .proof-strip-anon .proof-results{gap:12px;margin-top:26px}
  .proof-strip-anon .proof-result{min-height:196px;padding:20px 18px 16px}
  .proof-strip-anon .proof-result>strong{font-size:23px}
  .proof-strip-anon .proof-result>span:not(.proof-result-type){font-size:13px}
  .proof-strip-anon .proof-result blockquote{font-size:11.5px}
}


/* V80: proof -> calculator is now one direct flow; remove duplicate calculator gate. */
.revenue-calculator-section{padding-top:82px}
@media(max-width:700px){.revenue-calculator-section{padding-top:64px}}

/* V87: Revenue leak section, clearer pain-point framing and restrained visual hierarchy */
.funnel-head{max-width:1040px;margin-bottom:48px}
.funnel-eyebrow{font-size:11px;line-height:1;font-weight:850;letter-spacing:.2em;color:#1685f8;margin-bottom:22px}
.funnel-head h2{max-width:1000px;margin-left:auto;margin-right:auto}
.funnel-head p{max-width:720px;color:#69758a}
.funnel-now-label{max-width:1380px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:10px;font-weight:850;letter-spacing:.16em;color:#8b96a8}
.funnel-now-label span{width:7px;height:7px;border-radius:50%;background:#1685f8;box-shadow:0 0 0 5px rgba(22,133,248,.08)}
.funnel-stage{background:#f5f8fc;border:1px solid #e5ebf3;box-shadow:0 14px 38px rgba(23,47,78,.045);transition:transform .25s ease,box-shadow .25s ease}
.funnel-stage-start{background:linear-gradient(180deg,#edf6ff 0%,#f5f9fd 100%);border-color:#d8eaff}
.funnel-stage-start .stage-number{color:#1685f8}
.funnel-stage-end{background:#111720;border-color:#111720;box-shadow:0 20px 45px rgba(11,16,26,.13)}
.funnel-stage-end .stage-kicker{color:#8fcaff}
.funnel-stage-end .stage-number{color:#fff}
.funnel-stage-end .stage-copy{color:#b8c2d0}
.funnel-arrow{position:relative;color:#b4bdca}
.funnel-arrow span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f5f7fa;border:1px solid #e8ecf1;font-size:20px}
.funnel-gravity{max-width:900px;margin:34px auto 0;text-align:center;display:flex;flex-direction:column;gap:7px}
.funnel-gravity strong{font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;color:#0b101a}
.funnel-gravity span{font-size:17px;color:#69758a}
.funnel-note{margin-top:16px;color:#a0a8b5}
@media (hover:hover){.funnel-stage:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(23,47,78,.07)}.funnel-stage-end:hover{box-shadow:0 24px 52px rgba(11,16,26,.16)}}
@media(max-width:700px){
 .funnel-head{margin-bottom:32px}.funnel-eyebrow{margin-bottom:17px}
 .funnel-head h2{font-size:41px;line-height:1.01}.funnel-head p{font-size:17px;line-height:1.5}
 .funnel-now-label{justify-content:flex-start;padding-left:4px;margin-bottom:13px}
 .funnel-stage{min-height:390px}.funnel-gravity{margin-top:25px;padding:0 8px}.funnel-gravity strong{font-size:24px}.funnel-gravity span{font-size:16px;line-height:1.45}
}
@media(prefers-reduced-motion:reduce){.funnel-stage{transition:none}}

/* V88 funnel refinements */
.funnel-arrow span{width:auto;height:auto;border-radius:0;background:transparent;border:0;font-size:24px;color:#aab4c2}


/* V91: one identical demo UI and playback behavior on desktop + iPhone. */
.demo-video{
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.demo-video::-webkit-media-controls,
.demo-video::-webkit-media-controls-panel,
.demo-video::-webkit-media-controls-play-button,
.demo-video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
}
@media(max-width:900px){
  .demo-stage{aspect-ratio:16/10;}
}
@media(max-width:600px){
  .demo-stage{
    width:calc(100% - 20px);
    aspect-ratio:16/10;
  }
  .demo-video{display:block !important;}
}


/* V97: mobile-only hero demo presentation + CTA note color. */
@media(max-width:600px){
  .demo-stage{aspect-ratio:4/5;}
  .hero-cta-note{color:#a8b0bc;}
}

/* =========================================================
   LOCKED BASELINE — DO NOT MODIFY DURING DEMO VIDEO SWAPS
   These rules intentionally preserve the approved hero background and CTA note.
   Future demo work may replace video files / intentional demo sizing only.
   ========================================================= */
.hero-cta-note{
  color:#fff !important;
}
.hero{
  background:var(--brand-blue) !important;
}
.bg-image{
  inset:0 !important;
  background-image:url('/hero-background.png') !important;
  background-image:image-set(url('/hero-background.webp') type('image/webp'),url('/hero-background.png') type('image/png')) !important;
  background-size:cover !important;
  background-position:center 35% !important;
  transform:scale(1.01) !important;
}
.bg-overlay{
  inset:0 !important;
  background:linear-gradient(
    to bottom,
    rgba(28,154,230,.98) 0%,
    rgba(35,160,232,.92) 19%,
    rgba(49,169,235,.58) 40%,
    rgba(116,201,244,.31) 58%,
    rgba(189,228,249,.24) 70%,
    rgba(230,245,253,.48) 80%,
    rgba(248,252,255,.78) 91%,
    #ffffff 100%
  ) !important;
}
.demo-video{
  pointer-events:none !important;
}
.demo-video::-webkit-media-controls,
.demo-video::-webkit-media-controls-enclosure,
.demo-video::-webkit-media-controls-panel,
.demo-video::-webkit-media-controls-play-button,
.demo-video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none !important;
  opacity:0 !important;
}

/* Entry motion stays on the wrapper; the restored #1 keeps its approved scale. */
#heroCta{padding-inline:28px;letter-spacing:.035em;gap:12px}
.hero-copy h1,.sell-copy h2{text-wrap:balance}
.hero-cta-entry{display:flow-root}
@media(prefers-reduced-motion:reduce){
  .hero-copy [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}
@media(hover:none),(pointer:coarse){
  .hero-cta:hover{transform:none;filter:none;box-shadow:0 12px 28px rgba(0,78,150,.18),inset 0 1px 0 rgba(255,255,255,.18)}
  .hero-cta:hover::before{opacity:0}
}

/* Main navigation section controls share the existing link presentation. */
:where(.nav button[data-scroll-target]){appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
@media(max-width:900px){.mobile-nav-menu button[data-scroll-target]{width:100%;text-align:left}}

/* Main-page Build Session cards, using the approved apply card palette. */
.main-landing .cc-call-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.main-landing .cc-call-card-entry{min-width:0}
.main-landing .cc-call-card{height:100%;padding:28px;border-radius:16px;border:1px solid rgba(79,177,241,.16);background:linear-gradient(180deg,rgba(13,29,49,.96),rgba(8,20,35,.96));box-shadow:0 18px 42px rgba(0,0,0,.18);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.main-landing .cc-call-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(36,159,232,.12);border:1px solid rgba(74,175,242,.22);color:#74c9ff}
.main-landing .cc-call-icon svg{width:24px;height:24px}
.main-landing .cc-call-card h3{margin:22px 0 12px;color:#f2f7fc;font-size:21px;line-height:1.3;letter-spacing:-.025em}
.main-landing .cc-call-card h3 span{color:#74c9ff}
.main-landing .cc-call-card p{margin:0;color:#a7b7cb;font-size:15px;line-height:1.65}
@media(hover:hover) and (pointer:fine){.main-landing .cc-call-card:hover{transform:translateY(-4px);border-color:rgba(79,177,241,.34);box-shadow:0 22px 46px rgba(0,0,0,.24)}}
@media(max-width:800px){.main-landing .cc-call-cards{grid-template-columns:1fr;gap:16px;margin-top:28px}.main-landing .cc-call-card{padding:24px}}
/* Deployed reveal timing, with entry on the wrapper and hover on the link. */
@media(prefers-reduced-motion:no-preference){
  .main-landing .hero-cta-entry[data-reveal="hero-cta"]{transition-delay:1.48s!important}
}
@media(prefers-reduced-motion:reduce){.main-landing .hero-word{animation:none;opacity:1;transform:none;filter:none}.main-landing .cc-call-card{transition:none}.main-landing .cc-call-card:hover{transform:none}}

/* The large deployed heading leads into the existing call cards. */
.main-landing .cc-how-hero + .cc-call-cards{margin-top:88px}
@media(max-width:800px){.main-landing .cc-how-hero + .cc-call-cards{margin-top:58px}.main-landing .cc-how-hero h2 span{display:block}}
/* Production visibility motion lives outside the floating button hover. */
.main-landing .floating-cta-presence{position:fixed;right:32px;bottom:46px;z-index:120;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}
.main-landing .floating-cta-presence.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.main-landing .floating-cta-presence .floating-launch-cta{position:static;opacity:1;visibility:inherit;pointer-events:inherit;transform:none}
@media(hover:hover) and (pointer:fine){.main-landing .floating-cta-presence.visible .floating-launch-cta:hover{transform:translateY(-2px) scale(1.015)}}
@media(max-width:700px){.main-landing .floating-cta-presence{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.main-landing .floating-cta-presence{transition:none;transform:none}}