:root{
  --rushd-navy:#0E1F3D;
  --rushd-red:#E43036;
  --rushd-cream:#F7F4EE;
  --rushd-ease:cubic-bezier(.22,.8,.22,1);
}


/* =========================================================
   MOBILE + PORTRAIT CTA ONLY
========================================================= */

.rushd-mobile-portrait-cta{
  display:none;

  position:absolute;
  top:10.5vh;
  left:50%;

  width:min(88vw,680px);

  transform:translateX(-50%);

  z-index:25;

  direction:rtl;
  text-align:center;

  pointer-events:none;
}


.rushd-mobile-portrait-cta.is-active{
  display:block;
  pointer-events:auto;
}


.rushd-mobile-portrait-cta__inner{
  position:relative;
  width:100%;
}


.rushd-mobile-portrait-cta__kicker{
  display:inline-block;

  margin-bottom:7px;

  color:var(--rushd-red);

  font-size:clamp(.62rem,1.6vw,.78rem);
  font-weight:900;
  line-height:1;

  letter-spacing:.18em;
  direction:ltr;
}


.rushd-mobile-portrait-cta__title{
  margin:0;

  color:var(--rushd-navy);

  font-size:clamp(3.5rem,11vw,7rem);
  font-weight:900;
  line-height:.88;

  letter-spacing:-.045em;
}


.rushd-mobile-portrait-cta__text{
  width:min(84vw,590px);

  margin:15px auto 0;

  color:#43526A;

  font-size:clamp(.82rem,2.6vw,1.05rem);
  font-weight:500;
  line-height:1.75;
}


.rushd-mobile-portrait-cta__button{
  position:relative;
  isolation:isolate;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:60px;

  margin-top:28px;
  padding:0 39px;

  color:#FFFFFF;

  font-size:1.01rem;
  font-weight:900;
  letter-spacing:.14em;

  cursor:pointer;

  border:1px solid rgba(255,255,255,.16);
  border-radius:17px;

  /*
    RUSHD CTA:
    idle = brand red
    hover = navy wipe entering from LEFT,
    matching the header interaction language.
  */
  background-image:
    linear-gradient(90deg,var(--rushd-navy) 0%,var(--rushd-navy) 100%),
    linear-gradient(90deg,var(--rushd-red) 0%,var(--rushd-red) 100%);

  background-size:
    0% 100%,
    100% 100%;

  background-position:
    left top,
    left top;

  background-repeat:no-repeat;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 24px rgba(228,48,54,.24);

  -webkit-backdrop-filter:
    blur(12px) saturate(130%);

  backdrop-filter:
    blur(12px) saturate(130%);

  overflow:visible;
  transform:translateZ(0);

  transition:
    transform .28s var(--rushd-ease),
    color .18s ease .10s,
    border-color .24s ease,
    box-shadow .28s var(--rushd-ease),
    background-size .38s cubic-bezier(.22,.8,.2,1);
}


.rushd-mobile-portrait-cta__button > span{
  position:relative;
  z-index:3;
}


/* RUSHD web texture is permanently INSIDE the CTA button. */
.rushd-mobile-portrait-cta__button::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  border-radius:inherit;
  pointer-events:none;
  opacity:.42;

  /* Same organic web language as the RUSHD header, clipped to the button. */
  background:
    radial-gradient(
      circle at 18% 110%,
      transparent 0 21%,
      rgba(255,255,255,.72) 22% 22.9%,
      transparent 23.8% 100%
    ),
    repeating-conic-gradient(
      from 10deg at 18% 110%,
      rgba(255,255,255,.56) 0deg 1.15deg,
      transparent 1.15deg 28deg
    ),
    radial-gradient(
      circle at 88% -15%,
      transparent 0 17%,
      rgba(255,255,255,.48) 18% 18.8%,
      transparent 19.7% 100%
    ),
    repeating-conic-gradient(
      from 194deg at 88% -15%,
      rgba(255,255,255,.42) 0deg 1deg,
      transparent 1deg 34deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0);

  transition:
    opacity .22s ease,
    filter .28s var(--rushd-ease);
}


.rushd-mobile-portrait-cta__button:hover,
.rushd-mobile-portrait-cta__button:focus-visible{
  color:#FFFFFF;

  transform:
    translateY(-3px)
    scale(1.02);

  border-color:rgba(228,48,54,.44);

  /* Navy still wipes from LEFT exactly like the header buttons. */
  background-size:
    100% 100%,
    100% 100%;

  box-shadow:
    inset 0 1px 0 rgba(247,244,238,.12),
    0 10px 22px rgba(14,31,61,.14),
    0 0 0 1px rgba(228,48,54,.08),
    0 0 18px rgba(228,48,54,.10);
}


.rushd-mobile-portrait-cta__button:hover::after,
.rushd-mobile-portrait-cta__button:focus-visible::after{
  /* Keep the web ON the button during hover; only boost it slightly. */
  opacity:.50;
  filter:brightness(1.08);
}


/* =========================================================
   SMALL CHARACTER ON BUTTON
========================================================= */

.rushd-mobile-portrait-cta__character{
  position:absolute;

  left:50%;
  bottom:calc(100% - 12px);

  width:clamp(48px,13vw,78px);
  height:auto;

  transform:translateX(-50%);

  z-index:8;

  pointer-events:none!important;
  user-select:none!important;

  filter:
    drop-shadow(
      0 7px 10px
      rgba(14,31,61,.11)
    );
}


/* =========================================================
   EXIT — FRAME 11
========================================================= */

.rushd-mp-exit-right,
.rushd-mp-exit-left,
.rushd-mp-exit-up,
.rushd-mp-exit-down{
  will-change:transform,opacity,filter;

  transition:
    transform .78s cubic-bezier(.18,.82,.18,1),
    opacity .44s ease,
    filter .44s ease;
}


/* title -> RIGHT */
.rushd-mobile-portrait-cta.is-leaving
.rushd-mp-exit-right{
  transform:
    translateX(115vw)
    rotate(3deg)!important;

  opacity:0!important;
  filter:blur(7px);
}


/* button -> LEFT */
.rushd-mobile-portrait-cta.is-leaving
.rushd-mp-exit-left{
  transform:
    translateX(-115vw)
    rotate(-3deg)!important;

  opacity:0!important;
  filter:blur(7px);
}


/* text -> UP */
.rushd-mobile-portrait-cta.is-leaving
.rushd-mp-exit-up{
  transform:
    translateY(-110vh)
    rotate(-1deg)!important;

  opacity:0!important;
  filter:blur(7px);
}


/* kicker -> DOWN */
.rushd-mobile-portrait-cta.is-leaving
.rushd-mp-exit-down{
  transform:
    translateY(110vh)
    rotate(2deg)!important;

  opacity:0!important;
  filter:blur(7px);
}


.rushd-mobile-portrait-cta.is-leaving{
  pointer-events:none!important;
}


/* =========================================================
   PHONE
========================================================= */

@media(max-width:767px){

  .rushd-mobile-portrait-cta{
    top:10.5vh;
    width:88vw;
  }

  .rushd-mobile-portrait-cta__text{
    width:84vw;
  }
}


/* =========================================================
   PORTRAIT
========================================================= */

@media(min-width:768px) and (orientation:portrait){

  .rushd-mobile-portrait-cta{
    top:10vh;
    width:min(78vw,680px);
  }

  .rushd-mobile-portrait-cta__text{
    width:min(72vw,590px);
  }

  .rushd-mobile-portrait-cta__character{
    width:clamp(58px,8vw,86px);
  }
}


/* =========================================================
   DESKTOP LANDSCAPE — NEVER SHOW
========================================================= */

@media(min-width:768px) and (orientation:landscape){

  .rushd-mobile-portrait-cta{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}