/* Device choreography composes with the existing screen transforms. */
body.marketing-motion :is(.fx-device-stage,.px-stage){
  isolation:isolate;
  scale:var(--mm-device-scale,1);
  transform-origin:50% 52%;
}
body.marketing-motion :is(.fx-device-stage,.px-stage)::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  width:78%;height:25%;left:11%;bottom:0;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(23,24,22,.15),transparent 70%);
  opacity:var(--mm-shadow-opacity,.3);
  transform:translateY(25%) scaleX(var(--mm-shadow-scale,1));
}
body.marketing-motion :is(.fx-handset,.px-phone){
  translate:var(--mm-phone-x,0px) var(--mm-phone-y,0px);
}
body.marketing-motion .px-scene{overflow-x:clip;overflow-y:visible}
body.marketing-motion .fx-device-stage{margin-block:28px 52px}
body.marketing-motion .px-stage{margin-block:24px 44px}
body.marketing-motion :is(.fx-paused,.motion-off) :is(.fx-device-stage,.px-stage){scale:1}
body.marketing-motion :is(.fx-paused,.motion-off) :is(.fx-handset,.px-phone){translate:none}

/* Editorial steps: a still divider, a quiet number, plenty of room. */
body.marketing-motion main :is(.px-steps,.steps){
  counter-reset:mm-step;
  list-style:decimal-leading-zero;
  padding:0;
  margin-block:60px 42px;
  gap:clamp(32px,5vw,80px);
}
body.marketing-motion main :is(.px-steps,.steps)>li{
  counter-increment:mm-step;
  position:relative;
  padding:36px 0 24px;
  border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);
  min-width:0;
}
body.marketing-motion main :is(.px-steps,.steps)>li::marker{font-size:0;color:transparent}
body.marketing-motion main :is(.px-steps,.steps)>li::before{
  content:counter(mm-step,decimal-leading-zero);
  display:block;
  width:auto;height:auto;
  margin:0 0 42px;
  padding:0;
  border:0;border-radius:0;background:none;
  color:inherit;
  font:500 clamp(28px,3vw,40px)/1 Aventa,Arial,sans-serif;
  letter-spacing:-.04em;
}
body.marketing-motion main :is(.px-steps,.steps)>li::after,
body.marketing-motion .offer-grid>a::after{
  content:"";position:absolute;inset:-1px 0 auto;
  height:2px;background:currentColor;
  opacity:.75;pointer-events:none;
}
body.marketing-motion main :is(.px-steps,.steps) h3{
  font:500 clamp(23px,2.3vw,31px)/1.2 Aventa,Arial,sans-serif;
  letter-spacing:-.025em;
  margin:0 0 20px;
  max-width:18ch;
}
body.marketing-motion main :is(.px-steps,.steps) p{
  font-size:15px;line-height:1.75;max-width:34ch;margin:0;
}
body.marketing-motion .offer-grid{gap:clamp(36px,5vw,80px)}
body.marketing-motion .offer-grid>a{position:relative;padding-block:36px}
body.marketing-motion .offer-grid>a>span{
  font:500 13px/1.5 Inter,Arial,sans-serif;letter-spacing:0;
}
body.marketing-motion .offer-grid h3{margin-block:42px 20px}
body.marketing-motion .cs-numbered{margin-top:48px}
body.marketing-motion .cs-numbered li{
  padding-block:30px;gap:30px;align-items:baseline;
}
body.marketing-motion .cs-numbered li::before{
  width:32px;height:auto;border-radius:0;background:none;color:inherit;
  font:500 27px/1 Aventa,Arial,sans-serif;
}
body.marketing-motion.gallery-editorial #our-process .process-tabs{
  gap:30px;padding-bottom:0;margin-bottom:32px;
}
body.marketing-motion.gallery-editorial #our-process .process-tabs button{
  padding-block:14px 20px;min-height:76px;white-space:normal;text-align:left;
  line-height:1.35;
}
body.marketing-motion.gallery-editorial #our-process .process-tabs button>span{
  display:block;font-size:11px;line-height:1;margin:0 0 12px;opacity:1;color:inherit;
}
@media(min-width:900px) and (min-height:840px){
  body.marketing-motion .px-scene.scene-ready:not(.motion-off) .px-stage{margin-block:16px 28px}
  body.marketing-motion .fx-showcase:not(.fx-paused) .fx-device-stage{margin-block:16px 32px}
}
@media(max-width:700px){
  body.marketing-motion :is(.fx-device-stage,.px-stage){transform-origin:50% 50%}
  body.marketing-motion .fx-device-stage{margin-block:18px 30px}
  body.marketing-motion .px-stage{margin-block:20px 28px}
  body.marketing-motion main :is(.px-steps,.steps){grid-template-columns:1fr;gap:34px;margin-block:42px 32px}
  body.marketing-motion main :is(.px-steps,.steps)>li{padding:30px 0 4px 60px}
  body.marketing-motion main :is(.px-steps,.steps)>li::before{position:absolute;left:0;top:31px;margin:0;font-size:27px}
  body.marketing-motion main :is(.px-steps,.steps) h3{font-size:25px;margin-bottom:16px}
  body.marketing-motion main :is(.px-steps,.steps) p{font-size:14px;line-height:1.7}
  body.marketing-motion .offer-grid{gap:26px}
  body.marketing-motion .offer-grid>a{padding-block:30px 16px}
  body.marketing-motion .offer-grid h3{margin-top:28px}
  body.marketing-motion .offer-grid>a>span{font-size:12px}
  body.marketing-motion .cs-numbered li{padding-block:25px;gap:20px}
  body.marketing-motion.gallery-editorial #our-process .process-tabs{gap:8px;margin-bottom:16px}
  body.marketing-motion.gallery-editorial #our-process .process-tabs button{
    flex:0 0 auto;padding:12px 14px 14px;min-height:68px;white-space:nowrap;font-size:13px;
  }
  body.marketing-motion.gallery-editorial #our-process .process-tabs button>span{margin-bottom:9px}
}
@media(max-width:700px) and (min-height:800px){
  body.marketing-motion .px-scene.scene-ready:not(.motion-off) .px-stage{margin-block:4px 16px}
  body.marketing-motion .fx-showcase:not(.fx-paused) .fx-device-stage{margin-block:8px 24px}
}
@media(prefers-reduced-motion:reduce){
  body.marketing-motion :is(.fx-device-stage,.px-stage){scale:1!important}
  body.marketing-motion :is(.fx-handset,.px-phone){translate:none!important}
}