.zen-get-app {
  padding: 0 60px 40px;
  position: relative;
}

.zen-get-app-parallax {
  position: absolute !important;
  z-index: 10;
  top: -30px;
  width: 200px;
  left: 0;
  bottom: calc(100% - 480px);
}

/* ---------- INNER CARD ---------- */

.zen-get-app__inner {
  --icon-size: 152px;
  --radius:    16px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 0 30px;
}

@media (max-width: 1450px) {
  .zen-get-app__inner {
    max-width: 1128px;
  }
}

/*
 * Card background anchored to the BOTTOM.
 * Height stops before the icon midpoint so the
 * icon squares appear to float above the card.
 */
.zen-get-app__inner::before {
    content: '';
    position: absolute;
    bottom: 0;
    left:   0;
    right:  0;
    height: calc(100% - 79px);
    border-radius: var(--radius);
    z-index: 0;
}

/* All direct children sit above the ::before bg layer */
.zen-get-app__icons,
.zen-get-app__copy,
.zen-get-app__badges,
.zen-get-app__btn,
.zen-get-app__bottom-text {
    position: relative;
    z-index: 1;
}

/* ---------- ICONS ROW ---------- */

.zen-get-app__icons {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 59px;
    align-items: center;
}

.zen-get-app__icon {
    position: relative;
    display: flex;
    width: 132px;
    height: 132px;
    border-radius: 40px;
    flex-shrink:   0;
    background:    #fff;
    box-shadow:    1px 2px 4px 0 rgba(0, 0, 0, .20);
}

.zen-get-app__icon::before {
    content: '';
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zen-get-app__icon--zen::before {
    width:  65.5%;
    aspect-ratio: 1;
    -webkit-mask-image: url('../../../homepage-new/assets/images/zen-tail.svg');
    mask-image:         url('../../../homepage-new/assets/images/zen-tail.svg');
    -webkit-mask-position: center;
    -webkit-mask-size:     cover;
    -webkit-mask-repeat:   no-repeat;
    mask-position: center;
    mask-size:     cover;
    mask-repeat:   no-repeat;
}

.zen-get-app__icon--qr {
    width: 143px;
    height: 143px;
    border-radius: 40px;
    border:        2px solid #222;
    background:    #fff;
    box-shadow:    1px 2px 4px 0 rgba(0, 0, 0, .20);
}

.zen-get-app__qr-img {
    width:  80%;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 4px;
}

/* ---------- COPY ---------- */

.zen-get-app__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 50%;
    width: 100%;
    margin-bottom: 36px;
}

.zen-get-app__copy--has-btn {
    margin-bottom: 0;
}

.zen-get-app__eyebrow {
    color: #22E243;
    text-align: center;
    font-family: Nunito, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    display: none;
}

.zen-get-app__eyebrow--mobile  { display: none; }
.zen-get-app__eyebrow--desktop { display: block; }

.zen-get-app__heading {
  color: #000;
  text-align: center;
  font-family: Nunito;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 29px;
}

.zen-get-app__heading--mobile  { display: none; }
.zen-get-app__heading--desktop { display: block; }

.zen-get-app__btn-label--mobile  { display: none; }
.zen-get-app__btn-label--desktop { display: inline; }

.zen-get-app__text {
  color: #000;
  text-align: center;
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  margin: 0 !important;
}

.zen-get-app__text--mobile { display: none; }
.zen-get-app__text--desktop { display: block; }

.zen-get-app__bottom-text {
  color: #222;
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  margin: 0 !important;
}

.zen-get-app__bottom-text a {
    color: #222;
    display: inline-block;
    padding-right: 50px;
    text-decoration: underline;
    position: relative;
    transition: .2s all ease-in-out;
}
.zen-get-app__bottom-text a:focus-visible {
    color: #20BB3B;
}
.zen-get-app__bottom-text a:after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 50%;
    background: #20BB3B url(../images/link-arrow.svg) no-repeat center;
    background-size: 17px;
    transition: .2s all ease-in-out;
}
.zen-get-app__bottom-text a:focus-visible:after {
    background-color: #000;
}
@media (min-width: 992px) {
    .zen-get-app__bottom-text a:hover {
        color: #20BB3B;
    }
    .zen-get-app__bottom-text a:hover:after {
        background-color: #000;
    }
}

.zen-get-app__bottom-text--mobile { display: none; }
.zen-get-app__bottom-text--desktop { display: block; }

.zen-get-app__copy-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    padding:          20px 24px;
    height:           64px;
    border-radius:    200px;
    border:           2px solid transparent;
    background-color: #22E243;
    color:            #000;
    font-family:      Nunito, sans-serif;
    font-size:        14px;
    font-weight:      800;
    line-height:      normal;
    text-transform:   uppercase;
    cursor:           pointer;
    transition:       all .3s ease-in-out;
}

.zen-get-app__copy-btn:hover {
    border:           2px solid #000;
    background:       #f7f7f7;
    color:            #222;
    box-shadow:       1px 2px 4px 0 rgba(0,0,0,.15);
}

.zen-get-app__copied {
    color:         #22E243;
    font-family:   Nunito, sans-serif;
    font-size:     14px;
    font-weight:   500;
    line-height:   18px;
    min-height:    18px;
    margin-top:    1vw;
    margin-bottom: 0 !important;
    opacity:       0;
    transition:    opacity .3s ease;
}

.zen-get-app__copied.is-visible {
    opacity: 1;
}

.zen-get-app__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    height: 64px;
    border-radius: 200px;
    border: 2px solid transparent;
    background-color: #22E243;
    color: #000;
    font-family: Nunito, sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.zen-get-app__btn:hover {
    border: 2px solid #000;
    background: #f7f7f7;
    color: #222;
    box-shadow: 1px 2px 4px 0 rgba(0,0,0,.15);
    background-image: url('https://www.zen.com/wp-content/themes/zen/images/deals-landing/patern.webp');
    background-position: center;
    background-size: cover;
}

/* ---------- BADGES ---------- */

.zen-get-app__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-bottom: 52px;
}

.zen-get-app__badge {display: flex;vertical-align: top;}

.zen-get-app__badge img {
    width: auto;
    vertical-align: top;
    height: 60px;
    transition: filter .2s ease-in-out;
}

.zen-get-app__badge:hover img,
.zen-get-app--cream .zen-get-app__badge:hover img,
.zen-get-app--pattern .zen-get-app__badge:hover img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(500%) hue-rotate(90deg) brightness(0.85);
}

/* =============================================
   COLOUR VARIANTS
   ============================================= */

/* --- DARK --- */
.zen-get-app--dark {
    color: #fff;
}

.zen-get-app--dark .zen-get-app__inner::before {
    border-radius: 16px;
    border:        1px solid #727272;
    background:    linear-gradient(143deg, #222 0.72%, #000 100%);
}

.zen-get-app--dark .zen-get-app__icon--zen::before {
    background-color: #000;
}

.zen-get-app--dark .zen-get-app__bottom-text,
.zen-get-app--dark .zen-get-app__bottom-text a,
.zen-get-app--dark-pattern .zen-get-app__bottom-text,
.zen-get-app--dark-pattern .zen-get-app__bottom-text a {
    color: #fff;
    text-decoration-color: #fff;
}

/* --- CREAM --- */
.zen-get-app--cream {
    color: #111;
}

.zen-get-app--cream .zen-get-app__inner::before {
    border-radius: 16px;
    border: 1px solid var(--Stroke-Card-Brightside, #FFF);
    background: var(--Gradient-Brightside, linear-gradient(235deg, #FFF 0%, rgba(255, 255, 255, 0.20) 100%));
}

.zen-get-app--cream .zen-get-app__icon {
    border: 2px solid #000;
}

.zen-get-app--cream .zen-get-app__icon--zen::before {
    background-color: #111;
}

.zen-get-app--cream .zen-get-app__badge img {
}

/* --- PATTERN (cream bg + repeat) --- */
.zen-get-app--pattern {
    color: #111;
}

.zen-get-app--pattern .zen-get-app__inner::before {
    border-radius:       20px;
    border:              1px solid var(--Stroke-Card-Brightside, #FFF);
    background-image:    var(--pattern-bg);
    background-size:     cover;
    background-repeat:   no-repeat;
}

.zen-get-app--pattern .zen-get-app__icon {
    border: 1.842px solid var(--Shades-Dark-Side-Rich-Black, #000);
}

.zen-get-app--pattern .zen-get-app__icon--zen::before {
    background-color: #111;
}

.zen-get-app--pattern .zen-get-app__badge img {
    filter: invert(1);
}

/* --- BLACK-PATTERN (dark bg + repeat + dark overlay) --- */
.zen-get-app--dark-pattern {
    color: #fff;
}

.zen-get-app--dark-pattern .zen-get-app__inner::before {
    border-radius:    20px;
    border:           1px solid var(--Stroke-Card-Darkside, #727272);
    background-color: #111;
    background-image: var(--dark-pattern-bg);
    background-size:  cover;
    background-repeat: no-repeat;
}


.zen-get-app--dark-pattern .zen-get-app__icon {
    border: 1.842px solid var(--Shades-Dark-Side-Rich-Black, #000);
}

.zen-get-app--dark-pattern .zen-get-app__icon--zen::before {
    background-color: #111;
}


/* ---------- BEFORE / AFTER BACKGROUND IMAGES ---------- */

    .zen-get-app--has-before,
    .zen-get-app--has-after {
        position: relative;
        overflow: visible;
    }

    .zen-get-app--has-before::before {
        content: "";
        background-image: url(../images/footer-tail.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width:    calc(100vw - 30px);
        height:   calc((100vw - 30px) / 1783 * 852);
        bottom:   -17.7vw;
        left:     0;
        position: absolute;
        z-index:  -1;
        pointer-events: none;
        max-width: 2000px;
        max-height: 1000px;
    }

    .zen-get-app--has-after::after {
        content: "";
        background-image: var(--after-image);
        background-size: contain;
        background-repeat: no-repeat;
        width:    var(--after-width,  1878px);
        height:   var(--after-height, 1227px);
        top:      var(--after-top,    -200px);
        right:    var(--after-right,  0);
        position: absolute;
        z-index:  -1;
        pointer-events: none;
        max-width: 2000px;
        max-height: 1000px;
    }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 991px) {
    .zen-get-app__inner {
      --icon-size: 10rem;
      --pad-x: 3.2rem;
      --pad-y: 3.2rem;
    }

    .zen-get-app {
      padding: 0 20px 160px;
    }
    .zen-get-app__inner {
      padding: 0 40px;
    }

    .zen-get-app__icons {
      margin-bottom: 44px;
    }
    .zen-get-app__icon {
      width: 100px;
      height: 100px;
      border-radius: 28px;
    }

    .zen-get-app__copy {
      max-width: 100%;
      margin-bottom: 35px;
    }

    .zen-get-app__heading {
      font-size: 24px;
      line-height: 32px;
      margin-bottom: 18px;
    }
    .zen-get-app__text {
      font-size: 16px;
      line-height: 24px;
    }

    .zen-get-app__badges  {
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 48px;
    }

    .zen-get-app__eyebrow--desktop { display: none; }
    .zen-get-app__eyebrow--mobile  { display: block; }

    .zen-get-app__btn-label--desktop { display: none; }
    .zen-get-app__btn-label--mobile  { display: inline; }

    .zen-get-app__heading--desktop { display: none; }
    .zen-get-app__heading--mobile  { display: block; }

    .zen-get-app__text--desktop { display: none; }
    .zen-get-app__text--mobile  { display: block; }


    .zen-get-app__btn { height: 48px; padding: 16px 24px; font-size: 14px; }

    .zen-get-app--has-before::before {
      display: none;
    }

    .zen-get-app--cream .zen-get-app__inner::before {
      border-radius: 16px;
      border: 1px solid #FFF;
      height: calc(100% - 46px);
      background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
      mask-image: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }

    .zen-get-app__eyebrow {
      display: block;
      color: #22E243;
      text-align: center;
      font-family: Nunito;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 18px;
      margin-bottom: 12px !important;
    }
    .zen-get-app__bottom-text--mobile {
      font-size: 20px;
      line-height: 28px;
      position: absolute;
      bottom: -42px;
      transform: translate(0, 100%);
    }
    .zen-get-app__bottom-text a {
      padding-right: 30px;
    }
    .zen-get-app__bottom-text a:after {
      width: 22px;
      height: 22px;
      background-size: 12px;
    }
    .zen-get-app-parallax {
      left: -30px;
      width: 160px;
      bottom: calc(100% - 260px);
      top: -50px;
    }
}

@media (max-width: 800px) {
    .zen-get-app__icon--qr { display: none; }
}

@media (max-width: 767px) {
    .zen-get-app__inner {
        --pad-x: 2rem;
        --pad-y: 2rem;
        max-width: 100%;
    }

    .zen-get-app__bottom-text--desktop { display: none; }
    .zen-get-app__bottom-text--mobile  { display: block; }

    .zen-get-app__bottom-text {
        margin-top: 1.2rem;
    }
}