/* ---- Customer.io ship campaign / layered implementation path ---- */
.ship-campaign-stage{
  --ship-width:clamp(320px,48vw,720px);
  --ship-left:auto;
  --ship-right:auto;
  --ship-top:auto;
  --ship-bottom:auto;
  --ship-flip:1;
  --ship-rotate:0deg;
  --ship-back-opacity:.24;
  --ship-front-opacity:.9;
  --ship-front-clip:inset(66% 0 0 0);
  --ship-front-mask:linear-gradient(to bottom,transparent 0 58%,#000 66% 94%,transparent 100%);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.ship-campaign-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  user-select:none;
  overflow:hidden;
}
.ship-campaign-layer--back{z-index:0}
.ship-campaign-layer--front{z-index:3}
.ship-campaign-layer--bow-tip{display:none}
.ship-campaign-stage .ship-campaign-art{
  position:absolute;
  left:var(--ship-left);
  right:var(--ship-right);
  top:var(--ship-top);
  bottom:var(--ship-bottom);
  display:block;
  width:var(--ship-width);
  max-width:none;
  max-height:none;
  height:auto;
  transform:rotate(var(--ship-rotate)) scaleX(var(--ship-flip));
  transform-origin:50% 70%;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.ship-campaign-layer--back .ship-campaign-art{opacity:var(--ship-back-opacity)}
.ship-campaign-layer--front .ship-campaign-art{
  opacity:var(--ship-front-opacity);
  clip-path:none;
  -webkit-mask-image:var(--ship-front-mask);
  mask-image:var(--ship-front-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.ship-campaign-art.css-facing-left{--ship-flip:-1}

/* Keep page structure between the two art passes. Interactive UI always wins. */
.hero.ship-campaign-stage > .wrap{z-index:auto}
.ship-campaign-stage--cio-hero :is(.hero-top,.hero-intake-copy,.metrics),
.ship-campaign-stage--cio-migration > .l,
.ship-campaign-stage--cio-cta .row > h2,
.ship-campaign-stage--cio-cta .row > .right > p{
  position:relative;
  z-index:1;
}
.ship-campaign-stage :is(.hero-intake-panel,.partner-form-card,form,button,.btn,.act){
  position:relative;
  z-index:5;
}
.ship-campaign-stage--cio-hero .metrics{z-index:auto}
.ship-campaign-stage--cio-hero .metrics :is(.k,.n,.d){
  position:relative;
  z-index:1;
}
.ship-campaign-stage--cio-hero .metrics .ship-contact-invert{
  z-index:4;
  color:#fff;
  mix-blend-mode:difference;
}
.ship-campaign-stage--home-hero .home-hero-main{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-bottom:20px;
}
.ship-campaign-stage--home-hero .home-hero-main::after{
  content:"";
  position:absolute;
  z-index:4;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:var(--hairline-on-ink);
  pointer-events:none;
}
.ship-campaign-stage--home-hero .home-hero-main > :is(.hero-top,.home-hero-title){
  position:relative;
  z-index:2;
}
.ship-campaign-stage--home-hero .home-hero-title .u{
  position:relative;
  z-index:4;
  isolation:isolate;
}
.ship-campaign-stage--home-hero .ship-campaign-art{mix-blend-mode:normal}
.ship-campaign-stage--home-hero .ship-campaign-layer--front{display:none}
/* Intentional regression guard: keep this hard-clipped bow above ACTUALLY. */
.ship-campaign-stage--home-hero .ship-campaign-layer--hero-bow{
  z-index:3;
}
.ship-campaign-stage--home-hero .ship-campaign-layer--hero-bow .ship-campaign-art{
  opacity:1;
  clip-path:polygon(82% 50%,100% 50%,100% 63%,82% 63%);
  -webkit-mask-image:none;
  mask-image:none;
  mix-blend-mode:normal;
}
.ship-campaign-stage--home-hero .hero-sub{
  z-index:5;
  margin-top:0;
  border-top:0;
}

/* 01 — homepage launch: a right-facing ship is submerged beneath the red cutoff. */
.ship-campaign-stage--home-hero{
  --ship-width:clamp(540px,38vw,590px);
  --ship-left:clamp(28px,5vw,76px);
  --ship-top:auto;
  --ship-bottom:clamp(-130px,-8vw,-104px);
  --ship-flip:1;
  --ship-back-opacity:1;
  --ship-rotate:0deg;
}

/* Homepage close: one clean vessel resolves the implementation path at the CTA. */
.ship-campaign-stage--home-cta{
  --ship-width:clamp(340px,28vw,420px);
  --ship-left:clamp(556px,42vw,646px);
  --ship-top:auto;
  --ship-bottom:-80px;
  --ship-flip:1;
  --ship-back-opacity:1;
  --ship-rotate:0deg;
}
.ship-campaign-stage--home-cta .ship-campaign-layer--back{z-index:1}
@media (min-width:1101px){
  .ship-campaign-stage--home-cta .ship-campaign-layer--back{z-index:3}
}
.ship-campaign-stage--home-cta .ship-campaign-art{
  filter:none;
  mix-blend-mode:normal;
}
.ship-campaign-stage--home-cta > .wrap{position:relative}
.ship-campaign-stage--home-cta h2{
  position:relative;
  z-index:2;
}
.ship-campaign-stage--home-cta :is(h2 .u,.right){
  position:relative;
  z-index:4;
}

/* 02 — Customer.io gateway: HMS Arrogant turns left toward the implementation path. */
.prt-cell.ship-campaign-stage--home-gateway,
.prt-cell .ship-campaign-stage--home-gateway{
  --ship-width:clamp(230px,24vw,340px);
  --ship-right:-72px;
  --ship-bottom:-48px;
  --ship-flip:-1;
  --ship-back-opacity:.2;
  --ship-front-opacity:.78;
  --ship-front-clip:inset(66% 0 0 0);
  --ship-rotate:2deg;
}
.prt-cell.ship-campaign-stage--home-gateway > img:not(.ship-campaign-art),
.prt-cell.ship-campaign-stage--home-gateway > .prt-label{
  position:relative;
}
.prt-cell.ship-campaign-stage--home-gateway > img:not(.ship-campaign-art){z-index:4}
.prt-cell.ship-campaign-stage--home-gateway > .prt-label{z-index:1}
.prt-cell.ship-campaign-stage--home-gateway .ship-campaign-art,
.prt-cell .ship-campaign-stage--home-gateway .ship-campaign-art{
  width:var(--ship-width);
  max-width:none;
  max-height:none;
  height:auto;
}

/* 03 — Customer.io hero: a right-facing launch behind type, with the hull above it. */
.ship-campaign-stage--cio-hero{
  --ship-width:clamp(540px,49vw,760px);
  --ship-left:clamp(-170px,-7vw,-56px);
  --ship-top:clamp(118px,11vw,164px);
  --ship-back-opacity:.27;
  --ship-front-opacity:.9;
  --ship-front-clip:inset(68% 3% 0 3%);
  --ship-rotate:-2deg;
}

/* 05 — migration gate: the dark ship moves right through the cutover band. */
.ship-campaign-stage--cio-migration{
  --ship-width:clamp(330px,32vw,470px);
  --ship-right:clamp(70px,17vw,260px);
  --ship-top:-202px;
  --ship-back-opacity:.32;
  --ship-front-opacity:.88;
  --ship-front-clip:inset(65% 0 0 0);
  --ship-rotate:-1deg;
  min-height:236px;
}
.ship-campaign-stage--cio-migration > .l{max-width:760px}
.ship-campaign-stage--cio-migration > .act{justify-self:end}
.ship-campaign-stage--cio-migration .ship-campaign-layer--bow-tip{
  display:block;
  z-index:6;
  clip-path:polygon(79.5% 37%,100% 37%,100% 62%,79.5% 62%);
}
.ship-campaign-stage--cio-migration .ship-campaign-layer--bow-tip .ship-campaign-art{opacity:1}

/* 06 — handoff: the final ship faces back left toward the scoped build. */
.ship-campaign-stage--cio-cta{
  --ship-width:clamp(500px,46vw,700px);
  --ship-right:clamp(-150px,-5vw,-58px);
  --ship-top:-210px;
  --ship-back-opacity:.21;
  --ship-front-opacity:.88;
  --ship-front-clip:inset(63% 0 0 0);
  --ship-rotate:1.5deg;
}

/* The migration route uses different full-ship silhouettes, so its waterline
   anchors are calibrated to those source hulls without changing implementation. */
.page-migrate-customerio .ship-campaign-stage--cio-hero{
  --ship-top:clamp(78px,8vw,118px);
}
.page-migrate-customerio .ship-campaign-stage--cio-migration{
  --ship-top:-172px;
}
.page-migrate-customerio .ship-campaign-stage--cio-cta{
  --ship-top:auto;
  --ship-bottom:calc(clamp(-48px,-3.2vw,-35px) - 20px);
}

@media (max-width:1100px){
  .ship-campaign-stage--home-hero{
    --ship-width:clamp(390px,46vw,480px);
    --ship-left:-28px;
    --ship-top:auto;
    --ship-bottom:clamp(-116px,-11vw,-88px);
    --ship-back-opacity:1;
  }
  .ship-campaign-stage--home-cta{
    --ship-width:clamp(300px,42vw,380px);
    --ship-left:auto;
    --ship-right:-24px;
    --ship-top:auto;
    --ship-bottom:-70px;
    --ship-flip:1;
  }
  .ship-campaign-stage--cio-hero{
    --ship-width:clamp(450px,49vw,540px);
    --ship-left:-116px;
    --ship-top:-96px;
    --ship-back-opacity:.22;
    --ship-front-opacity:.82;
    --ship-front-mask:radial-gradient(ellipse 20% 13% at 91% 69%,#000 0 44%,transparent 74%);
  }
  .ship-campaign-stage--cio-migration{
    --ship-right:-28px;
    --ship-top:-118px;
  }
  .ship-campaign-stage--cio-cta{
    --ship-width:clamp(450px,58vw,620px);
    --ship-right:-132px;
    --ship-top:-58px;
  }
  .page-migrate-customerio .ship-campaign-stage--cio-hero{
    --ship-top:-118px;
  }
  .page-migrate-customerio .ship-campaign-stage--cio-migration{
    --ship-top:-88px;
  }
  .page-migrate-customerio .ship-campaign-stage--cio-cta{
    --ship-top:auto;
    --ship-bottom:-60px;
  }
}

@media (max-width:720px){
  .ship-campaign-stage{
    --ship-back-opacity:.17;
    --ship-front-opacity:.66;
  }
  .ship-campaign-stage--home-hero{
    --ship-width:clamp(230px,58vw,285px);
    --ship-left:auto;
    --ship-right:-72px;
    --ship-top:auto;
    --ship-bottom:clamp(-74px,-13vw,-56px);
    --ship-flip:-1;
    --ship-back-opacity:1;
  }
  .ship-campaign-stage--home-cta{
    --ship-width:clamp(220px,58vw,260px);
    --ship-right:-36px;
    /* The first CTA button is the mobile waterline: the full hull ends at its top edge. */
    --ship-bottom:167px;
    --ship-back-opacity:1;
  }
  .ship-campaign-stage--home-cta .ship-campaign-layer--back{z-index:3}
  .prt-cell.ship-campaign-stage--home-gateway,
  .prt-cell .ship-campaign-stage--home-gateway{
    --ship-width:240px;
    --ship-right:-88px;
    --ship-bottom:-38px;
  }
  .ship-campaign-stage--cio-hero{
    --ship-width:clamp(320px,92vw,430px);
    --ship-left:-126px;
    --ship-top:92px;
    --ship-back-opacity:.17;
    --ship-front-opacity:.58;
    --ship-front-mask:linear-gradient(to bottom,transparent 0 64%,#000 72% 84%,transparent 92% 100%);
  }
  .ship-campaign-stage--cio-migration{
    --ship-width:320px;
    --ship-right:-118px;
    --ship-top:-70px;
    --ship-front-clip:inset(69% 0 0 0);
    min-height:0;
  }
  .ship-campaign-stage--cio-migration > .act{justify-self:start}
  .ship-campaign-stage--cio-migration .ship-campaign-layer--bow-tip{display:none}
  .ship-campaign-stage--cio-cta{
    --ship-width:360px;
    --ship-right:-146px;
    --ship-top:-36px;
    --ship-front-clip:inset(69% 0 0 0);
  }

  /* Migration route: face each mobile vessel back into the copy and let the
     containing section create the waterline from a complete source ship. */
  .page-migrate-customerio .ship-campaign-stage--cio-hero{
    --ship-width:clamp(280px,78vw,360px);
    --ship-left:auto;
    --ship-right:-74px;
    --ship-top:70px;
    --ship-bottom:auto;
    --ship-flip:-1;
  }
  .page-migrate-customerio .ship-campaign-stage--cio-migration{
    --ship-width:280px;
    --ship-left:auto;
    --ship-right:-64px;
    --ship-top:auto;
    --ship-bottom:-38px;
    --ship-flip:-1;
  }
  .page-migrate-customerio .ship-campaign-stage--cio-cta{
    --ship-width:344px;
    --ship-left:auto;
    --ship-right:-100px;
    --ship-top:auto;
    --ship-bottom:-38px;
    --ship-flip:1;
  }
}

/* ---- Integration marquees / six-ship opposing migration lanes ---- */
.integr .marquee{
  --carousel-row-height:96px;
  --carousel-ship-width:132px;
  --carousel-ship-height:98px;
  --carousel-ship-bottom:-16px;
  --carousel-ship-padding:18px;
  --carousel-ship-slot:calc(var(--carousel-ship-width) + var(--carousel-ship-padding) + var(--carousel-ship-padding));
  height:var(--carousel-row-height);
  isolation:isolate;
}
.integr .marquee .track{
  height:100%;
  align-items:stretch;
}
.integr .marquee .track > .l:not(.carousel-ship){
  --carousel-word-z:2;
  position:relative;
}
.integr .marquee .track > .l.carousel-depth--back{--carousel-word-z:2}
.integr .marquee .track > .l.carousel-depth--front{--carousel-word-z:4}
.integr .marquee .carousel-platform-word{
  position:relative;
  z-index:var(--carousel-word-z,2);
}
.integr .marquee .track > .l > .n{
  position:relative;
  z-index:5;
}
.integr .marquee .track > .l.carousel-ship{
  --carousel-ship-flip:1;
  --carousel-ship-scale:1;
  --carousel-ship-bottom-adjust:0px;
  flex:0 0 var(--carousel-ship-slot);
  width:var(--carousel-ship-slot);
  min-width:var(--carousel-ship-slot);
  height:100%;
  padding:0!important;
  position:relative;
  overflow:visible;
  z-index:3;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.integr .marquee .track > .carousel-ship > img{
  position:absolute;
  left:50%;
  bottom:calc(var(--carousel-ship-bottom) + var(--carousel-ship-bottom-adjust));
  display:block;
  width:var(--carousel-ship-width);
  height:var(--carousel-ship-height);
  max-width:none;
  max-height:none;
  object-fit:contain;
  opacity:1;
  filter:none;
  mix-blend-mode:normal;
  transform:translateX(-50%) scaleX(var(--carousel-ship-flip)) scale(var(--carousel-ship-scale));
  transform-origin:50% 100%;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.integr .marquee .track > .carousel-ship.carousel-ship--dulcibella{
  --carousel-ship-flip:-1;
  --carousel-ship-scale:1;
  --carousel-ship-bottom-adjust:-2px;
}
.integr .marquee .track > .carousel-ship.carousel-ship--when-and-if{
  --carousel-ship-flip:-1;
  --carousel-ship-scale:.93;
  --carousel-ship-bottom-adjust:-4px;
}
.integr .marquee .track > .carousel-ship.carousel-ship--pirate-6{
  --carousel-ship-scale:.96;
  --carousel-ship-bottom-adjust:-2px;
}
.integr .marquee .track > .carousel-ship.carousel-ship--shell{
  --carousel-ship-scale:.96;
  --carousel-ship-bottom-adjust:-5px;
}
.integr .marquee .track > .carousel-ship.carousel-ship--hms-arrogant{
  --carousel-ship-scale:1;
}
.integr .marquee .track > .carousel-ship.carousel-ship--pirate-9{
  --carousel-ship-scale:.94;
  --carousel-ship-bottom-adjust:-3px;
}

@media (max-width:1100px){
  .integr .marquee{
    --carousel-row-height:86px;
    --carousel-ship-width:120px;
    --carousel-ship-height:90px;
    --carousel-ship-bottom:-14px;
    --carousel-ship-padding:16px;
  }
}

@media (max-width:720px){
  .integr .marquee{
    --carousel-row-height:68px;
    --carousel-ship-width:92px;
    --carousel-ship-height:70px;
    --carousel-ship-bottom:-10px;
    --carousel-ship-padding:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .ship-campaign-art{animation:none!important;transition:none!important}
  .integr .marquee .track{animation:none!important;transform:none!important}
}