/* ===== Original shared styles (previous style.css) ===== */
html, body {
  margin: 0;
}
.animation_row img {
  vertical-align: top;
  height: auto;
}

.animation_row {
  max-width: 1472px;
  position: relative;
  font-family: 'Host Grotesk', sans-serif;
  color: #1A263C;

  overflow: hidden;
 
}

.animation_row * {
  pointer-events: none;
}
  
.animation_scalable {
  transform-origin: left top;
      width: 1472px;
    position: absolute;
    left: 0;
    top: 0;
}

.animation_full {
  width: 100%;
  height: auto;
  vertical-align: top;
  position: relative;
}
.animation_text {
  position: absolute;
  right: 38px;
  top: 123px;
  width: 546px;
  padding: 0px 65px 0 47px;
  box-sizing: border-box;
  color: #19263c;
  height: 479px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.animation_heading {
  font-weight: 700;
      font-size: 62px;
    line-height: 1.2em;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3em;
}
.animation_p {
  margin: 32px 0 0 0;
  font-size: 20px;
  line-height: 1.4em;
  font-weight: 700;
}
.animation_abs {
  position: absolute;
}

/*animation1*/
.animation1_replay {
  visibility: hidden;
  opacity: 0;
  left: 221px;
  top: 433px;
  width: 296px;
  height: 35px;
  cursor: pointer;
  pointer-events: all!important;
}
.animation1_fireworks {
  width: 420px;
  height: 535px;
  left: 160px;
  top: 103px;
  width: 660px;
    height: 575px;
    left: 40px;
    top: 73px;
}
.animation1_fireworks canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.animation1_img {
  
}
.animation1_svg1 {
  left: 149px;
  top: 117px;
}
.animation1_onetime {
  left: 75px;
  top: 118px;
}
.animation1_s50 {
  left: 173px;
  top: 177px;
}
.animation1_cursor {
  left: 830px;
  top: 500px;
}
.animation1_svg2 {
  left: 149px;
  top: 91px;
}
.animation1_s15 {
  left: 173px;
  top: 131px;
}
.animation1_svg3 {
  left: 149px;
  top: 91px;
}
.animation1_50input {
  font-size: 14px;
  color: #1A263C;
  line-height: 1em;
  left: 81px;
  width: 120px;
  top: 271px;
  background: #fff;
  text-align: left;
}
.animation1_subtotal {
  width: 206px;
  text-align: right;
  left: 142px;
  top: 325.61px;
  font-weight: bold;
  font-size: 14px;
  color: #2F3135;
  line-height: 1em;
}
.animation1_info_2 {
  left: 93px;
  top: 295.61px;
}


/*animation3*/
.animation3_fireworks {
  width: 420px;
  height: 535px;
  left: 355px;
  top: 103px;
}
.animation3_fireworks canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.animation_center {
  position: absolute;
  left: 391px;
  top: 172px;
  width: 346px;
  height: 410px;
}
.animation_img1 {
  width: 100%;
  height: auto;
}
.animation_heading1 {
  text-align: center;
  font-size: 16px;
  color: #FAA718;
  line-height: 18px;
  margin: 23px 18px 0 18px;
}
.animation_p1 {
  margin: 8px 20px 0 20px;
  font-size: 8px;
  color:#1A263C;
  line-height: 1em;
  text-align: center;
}
.animation_p2 {
  font-weight: bold;
  font-size: 8px;
  width: 110%;
  position: absolute;
  left: -5%;
  bottom: 25px;
  text-align: center;
}
.animation_button1 {
  position: absolute;
  bottom: 58px;
  left: 0;
  width:100% ;
  height: auto;
}
.animation_button2 {
  position: absolute;
  bottom: 77.89px;
  height: auto;
  left: 96px;
}
.animation_box1 {
  left: 176px;
  top: 268px;
}
.animation_cursor1 {
  left: 350px;
    top: 400px;
}
.animation_hidden {
  opacity: 0;
}
.animation_button2_text {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 15px;
  color: #fff;
  line-height: 1em;
  white-space: nowrap;
}
.animation_button2_text.after::after {
  content:"|";
}


/*animation2*/
.animation2_phone {
  left: 366px;
  top: 146px;
}
.animation2_phone1 {
  width: 470px;
  height: auto;
}
.animation2_finger {
  left: 0px;
    top: 248px;
    width:140px;
}
.animation2_frame {
  position: absolute;
    left: 0;
    top: 518px;
  width: 300px;
  height: 250px;
    transform-origin: left top;
}
.animation2_mask {
  left: 57px;
  top: 121px;
  padding-top: 10px;
  width: 300px;
  height: 449px;
    transform-origin: left top;
    transform: scale(0.67);
    overflow: hidden;
    border-radius: 25px;
    box-sizing: border-box;

}
.animation2_scroll_img {
  width: 100%;
  height: 268px;
}
.animation_row3 iframe {
  background: url(https://www.feathr.co/hubfs/banners/for_199065818941/images/Iphone-spinner.gif) center no-repeat ;
  background-size: 50% auto;
}
.animation2_frame160x600 {
  left: 168px;
  top: 355px;
  transform-origin: left top;
  transform: scale(0.075);
  width: 160px;
  height: 600px;
}
.animation2_frame300x250 {
  left: 148px;
  top: 408px;
  transform-origin: left top;
  transform: scale(0.172);
  width: 300px;
  height: 250px;
}
.animation2_frame300x600 {
  left: 163px;
  top: 460px;
  transform-origin: left top;
  transform: scale(0.07);
  width: 300px;
  height: 600px;
}
.animation2_frame320x50 {
  left: 142px;
  top: 515px;
  transform-origin: left top;
  transform: scale(0.2);
  width: 320px;
  height: 50px;
}
.animation2_frame728x90 {
  left: 142px;
  top: 542px;
  transform-origin: left top;
  transform: scale(0.09);
  width: 728px;
  height: 90px;
}
.animation2_frame970x250 {
  left: 142px;
  top: 564px;
  transform-origin: left top;
  transform: scale(0.065);
  width: 970px;
  height: 250px;
}
.animation2_nums {
  left: 257px;
  width: 152px;
  top: 278px;
  color: #23DFF2;
  font-weight: bold;
  line-height: 1em;
  font-size: 26.25px;
  text-align: left;
}

/*animation4*/
.animation4_nums1 {
  left: 33px;
  top: 55px;
  font-size: 34.67px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums2 {
  left:28px;
  top: 45px;
  font-size: 27px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums3 {
  left: 29px;
  top: 48px;
  font-size: 29px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums4 {
  left: 32px;
  top:53px;
  font-size: 33px;
  line-height: 1em;
  font-weight: bold;
}
.animation_tr_rb {
  transform-origin: right bottom;
}
.animation_tr_lb {
  transform-origin: left bottom;
}
.animation_tr_lt {
  transform-origin: left top;
}
.animation_tr_rt {
  transform-origin: right top;
}

/* ===== Section embed base styles (previously inline in each page) ===== */
.animation_scalable {
  transform-origin: center top;
    width: 880px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -440px;
}
.animation_full.animation_base {
  aspect-ratio: 530 / 261;
}

/*1*/
.animation1_svg1, .animation1_svg2, .animation1_svg3 {
    left: 50%;
    margin-left: calc(-435px / 2);
}
.animation1_img {
    left: 10px;
    width: 120%;
    top: 42px;
   
}
/* 1: the laptop and the form overlays are centred now, so the cursor path,
   the replay hotspot and the confetti move right by the same offset (440 - 366.5) */
.animation1_cursor {
    left: 903.5px;
}
.animation1_replay {
    left: 294.5px;
}
.animation1_fireworks {
    left: 113.5px;
}
.animation_row {
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
    transform: scale(1.4);
}
 .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_module {
    z-index:1
  }
  @media (max-width: 767px) {
  .row-depth-1.row-number-15 .row-fluid , .row-depth-1.row-number-21 .row-fluid {
      display: flex;
      flex-direction: column-reverse;
  }


  .animation_row {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .animation_row.animation_row1 {
    margin-left: 10vw;
  }
}

/* ===== Page 01 Reporting: total tile caption ===== */
/* Total tile: small 2-line caption to the right of the number */
.animation4_sub{left:180px;top:57px;font-size:11px;line-height:1.2em;font-weight:700;color:#19263C;white-space:nowrap}

/* ===== Page 02 Registration: AAE laptop and registration form ===== */
/* ===== Registration page: AAE laptop + live-HTML registration form ===== */
.animation1_img{}
.animation1_pulse{left:736.1px;top:109.4px;width:60px;height:22px;margin:-11px 0 0 -30px;opacity:0}
.animation_scalable .rform{left:50%;margin-left:-170px;width:340px;box-sizing:border-box;background:#fff;border-radius:10px;
  box-shadow:0 18px 50px rgba(0,16,40,.38);font-family:'Host Grotesk',sans-serif;color:#0e172a;overflow:hidden;line-height:1.2}
.animation_scalable .rform1{top:127px}.animation_scalable .rform2{top:133px}.animation_scalable .rform3{top:133px}
.rtitle{font-size:15px;font-weight:600;text-align:center;padding:16px 0 10px}
.rstep{display:flex;gap:6px;padding:0 16px 12px;border-bottom:1px solid #ececef}
.rstep i{flex:1;height:5px;border-radius:3px;background:#e4e4e7}.rstep i.on{background:#0ca6e9}
.rbody{padding:12px 16px 12px}
.rtoggle{display:flex;gap:6px;padding:3px;border:1px solid #e4e4e7;border-radius:7px;background:#f4f4f5}
.rtoggle div{flex:1;text-align:center;padding:8px 0;font-size:13px;border:1px solid #d9d9de;background:#fff;border-radius:5px;transition:background .2s,border-color .2s}
.rlabel{font-size:12.5px;font-weight:600;margin:11px 0 6px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rcard{border:1px solid #e4e4e7;border-radius:6px;padding:10px 6px;text-align:center;background:#fff;transition:background .2s,border-color .2s}
.rcard b{display:block;font-size:12.5px;font-weight:500;margin-bottom:5px}.rcard span{font-size:16px;font-weight:700}
.rlist{display:flex;flex-direction:column;gap:7px}
.rrow{display:flex;justify-content:space-between;align-items:center;border:1px solid #e4e4e7;border-radius:6px;padding:9px 12px;background:#fff;transition:background .2s,border-color .2s}
.rrow b{display:block;font-size:13.5px;font-weight:600}.rrow small{display:block;font-size:11px;color:#6b7280;margin-top:3px}.rrow>span{font-size:17px;font-weight:700}
.sel{background:#e7f7fd!important;border-color:#a0cef2!important}
.rinput{height:34px;border:1px solid #e4e4e7;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:13px;background:#fff;transition:border-color .2s,box-shadow .2s}
.rinput.focus{border-color:#0ca6e9;box-shadow:0 0 0 3px rgba(12,166,233,.18)}
.rph,.rtype:empty::before{color:#9ca3af}.rtype:empty::before{content:attr(data-ph)}
.rtype.cur::after{content:"|";color:#0ca6e9;margin-left:1px}
.rfield .rlabel{margin:9px 0 5px}
.rrow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rsum{display:flex;justify-content:space-between;background:#f7f7f8;border:1px solid #ececef;border-radius:6px;padding:9px 11px;font-size:12.5px;margin-top:12px}.rsum b{font-size:13.5px}
.rbtn{height:38px;background:#0e172a;color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;margin-top:13px}
.rpow{height:28px;border-top:1px solid #ececef;background:#fcfcfc;position:relative}
.rpow i{position:absolute;left:50%;top:50%;width:100px;height:18px;margin:-9px 0 0 -50px;background:url(https://www.feathr.co/hubfs/banners/for_199065818941/images/screen_1.svg) -171px -358px no-repeat}
.rdone{text-align:center;padding:20px 16px 4px}.rbadge{display:block;margin:0 auto 8px}
.rh1{font-size:25px;font-weight:700;letter-spacing:-.2px}.rsub{font-size:13.5px;color:#4b5563;margin-top:4px}
.rwhen{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:9px;font-size:12.5px;font-weight:600;color:#0e172a}.rwhen span{margin-right:8px}.rwhen span:last-child{margin-right:0}
.rsumbox{background:#f7f7f8;border:1px solid #ececef;border-radius:6px;padding:10px 12px;margin-top:4px}
.rsh{font-size:13px;font-weight:600;margin-bottom:6px}.rl{display:flex;justify-content:space-between;font-size:12px;color:#374151;padding:2px 0}
.rl.rtot{border-top:1px solid #e1e1e5;margin-top:6px;padding-top:7px;font-weight:700;font-size:13.5px;color:#0e172a}
.animation1_cursor{left:903.5px}

/* ===== Page 03 Digital ads: AAE rows in dashboard table and feed gif ===== */
/* ===== Digital ads: AAE rows in the dashboard table (covers the original CRF rows) ===== */
.aae_rows{left:138px;top:352px;width:648px;height:234px;background:#fff;font-family:'Host Grotesk',sans-serif;overflow:hidden}
.aae_row{position:absolute;left:0;width:648px;border-top:1px solid #e5e7eb;box-sizing:border-box}
.aae_row.aae_first{border-top:0}
.aae_row span,.aae_row em,.aae_row u{position:absolute;top:50%;font-size:8.2px;line-height:1;color:#4b5563;white-space:nowrap;transform:translate(-50%,-50%);font-style:normal}
.aae_row u{transform:translate(0,-50%);color:#1d7bd8;text-decoration:none}
.aae_row em{font-size:7px;color:#1fa56b;background:#e8fbf1;border:1px solid #67d9a4;border-radius:2px;padding:2px 6px}
/* thumbnails (natural gif size scaled down, same trick as the old iframes) */
.animation2_frame160x600{left:167.5px;top:355.5px;transform:scale(.075);width:160px;height:600px}
.animation2_frame300x250{left:148px;top:408.7px;transform:scale(.17);width:300px;height:250px}
.animation2_frame180x150{left:153.7px;top:462.5px;transform-origin:left top;transform:scale(.22);width:180px;height:150px}
.animation2_frame125x125{left:156px;top:507.5px;transform-origin:left top;transform:scale(.28);width:125px;height:125px}
.animation2_frame728x90{left:142.5px;top:563.2px;transform:scale(.085);width:728px;height:90px}
/* the ad inside the phone feed is a gif now */
.animation2_frame{width:300px;height:250px}

/* ===== Reporting tile: live HTML label (no small caption any more) ===== */
.animation4_tile{margin:10px 0 0 10px;height:86px;border-radius:8.83px;background:#21EBFF;box-shadow:5px 5px 15px rgba(33,235,255,.25);box-sizing:border-box;padding:17px 0 0 22px;font-size:17.5px;line-height:1;color:#19263C;white-space:nowrap}

/* ===== Email button: HTML pill, left/right padding is 2x the old SVG pill (8.5px -> 17px) ===== */
.animation_button2{left:0;right:0;margin:0 auto;width:max-content;height:32px;border-radius:8px;background:#FAA718}
.animation_button2_size{display:block;padding:0 17px;line-height:32px;font-size:15px;color:transparent;white-space:nowrap}