/* ---- 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:-124px;
}
.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;
  }
  /* Mobile: the hull is purely the backdrop the title sits on, so the only ship
   * layer left is --back at z 0, under .home-hero-title at z 2.
   *
   * The bow that rides above ACTUALLY on the wide layouts is a second copy of the
   * same art, same position, hard-clipped to a rectangle. At this width that
   * rectangle is 40x33px and lands in the whitespace beside SHIPS. rather than on
   * the word, so it buys no depth - and in the fallback path it actively hurts:
   * cloth.js:173 gives every .ship-campaign-art its own random ride phase, so the
   * two copies drift a few px apart on the 11s cycle and the clip edge detaches
   * from the hull it belongs to. Hidden rather than re-registered because at 393
   * there is nothing here worth registering. Wide layouts keep it (line 108). */
  .ship-campaign-stage--home-hero .ship-campaign-layer--hero-bow{display:none}
  .ship-campaign-stage--home-cta{
    /* Big enough to stop being an object the stacked buttons have to dodge and
     * become the section's backdrop — it sits under .right (z 4) and the
     * buttons (z 5), so they stay fully legible over it. */
    --ship-width:clamp(308px,81vw,364px);
    --ship-right:-36px;
    /* The section's own bottom rule is the waterline: dip the hull past it and
     * overflow:hidden cuts it at its widest point, the same fifth-of-the-hull
     * the wide layouts submerge. Tracks --ship-width, since the art is square
     * and the cut has to stay at the same place on the hull. */
    --ship-bottom:clamp(-73px,-16.2vw,-62px);
    --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;
  }
}

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