/* v6.29: an editorial composition for the mobile animated hero. */
@media (max-width:699px) {
  html body.complete-home .reference-main-hero[data-hero-gif] {
    min-height:max(800px,calc(var(--tme-header-h,60px) + 177.734375vw));
    padding:calc(var(--tme-header-h,60px) + 32px) 6% 76px;
  }
  html body.complete-home [data-hero-gif] .reference-main-copy {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    text-shadow:0 2px 20px #07121b70;
  }
  html body.complete-home [data-hero-gif] .reference-main-copy h1 {
    width:100%;
    max-width:480px;
    margin:0 0 18px;
    font-size:clamp(32px,9.3vw,49px);
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:400;
  }
  html body.complete-home [data-hero-gif] .reference-main-copy h1 em {
    display:block;
    margin-top:2px;
    font-size:1.18em;
    font-style:italic;
    line-height:1.06;
    color:#efd097;
  }
  html body.complete-home [data-hero-gif] .reference-main-copy>p.tme-hero-intro {
    max-width:32ch;
    margin:0;
    font-size:15px;
    font-weight:400;
    line-height:1.6;
    color:#f6f1e8;
  }
  html body.complete-home [data-hero-gif] .tme-hero-description {display:block;text-wrap:balance}
  html body.complete-home [data-hero-gif] .tme-hero-price {
    display:block;
    margin-top:15px;
    font-size:13px;
    line-height:1.5;
    letter-spacing:.025em;
    color:#efd4a4;
  }
  html body.complete-home [data-hero-gif] .reference-main-actions {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    width:100%;
    max-width:390px;
    gap:9px 10px;
    margin: auto 0 0;
    padding-top:64px;
  }
  html body.complete-home [data-hero-gif] .reference-main-actions .button {
    width:100%;
    min-width:0;
    min-height:50px;
    padding:13px 10px;
    justify-content:center;
    gap:7px;
    font-size:12px!important;
    line-height:1.3;
    white-space:nowrap;
    border-radius:999px;
    letter-spacing:0;
  }
  html body.complete-home [data-hero-gif] .reference-main-actions .reference-hero-editions {
    background:#0b182840;
    border-color:#f5ead780;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  html body.complete-home [data-hero-gif] .reference-hero-report {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0;
    font-size:12px;
    font-weight:500;
    line-height:1.4;
    text-decoration:underline;
    text-decoration-color:#efd4a46b;
    text-underline-offset:5px;
  }
  html body.complete-home [data-hero-gif] .reference-main-copy .tme-hero-call {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:0 4px;
    min-height:44px;
    margin:0;
    font-size:12px;
    line-height:1.5;
    text-decoration:none;
    color:#f4eadbcc;
  }
  html body.complete-home [data-hero-gif] .tme-call-label {
    color:#fff5e6;
    text-decoration:underline;
    text-decoration-color:#efd4a46b;
    text-underline-offset:4px;
  }
  html body.complete-home [data-hero-gif] .reference-main-copy .hero-guarantee {
    width:100%;
    max-width:300px;
    margin:12px 0 0;
    padding-top:15px;
    border-top:1px solid #e9c99145;
    font-size:11px;
    font-weight:400;
    line-height:1.65;
    letter-spacing:.025em;
    color:#f4eadbce;
    text-wrap:balance;
  }
  html body.complete-home [data-hero-gif] .reference-main-shade {
    background:linear-gradient(180deg,#081524c9 0%,#0815249c 27%,#08152426 48%,#08152455 60%,#081524d9 82%,#081524e8 100%);
  }
  html body.complete-home [data-hero-gif] .tme-hero-gif {
    object-fit:cover;
    object-position:center;
  }
  html body.complete-home [data-hero-gif] .tme-hero-motion {
    right:50%;
    bottom:16px;
    transform:translateX(50%);
    background:#1423308c;
    border-color:#ead6b838;
  }
}
@media (max-width:359px) {
  html body.complete-home [data-hero-gif] .reference-main-actions {grid-template-columns:1fr;max-width:280px;padding-top:40px;gap:9px}
  html body.complete-home [data-hero-gif] .reference-main-copy h1 {font-size:31px}
}

/* Leave the moving faces clear between the headline and supporting copy. */
@media (max-width:699px) {
 html body.complete-home .reference-main-hero[data-hero-gif] {padding-top:calc(var(--tme-header-h,60px) + 44px)}
 html body.complete-home [data-hero-gif] .reference-main-copy {
  display:grid;
  grid-template-columns:100%;
  grid-template-rows:max(436px,calc(84vw + 88px)) auto auto auto auto;
  align-content:start;
  align-items:start;
  justify-items:center;
 }
 html body.complete-home [data-hero-gif] .reference-main-copy h1 {margin-bottom:0;position:relative;top:28px}
 html body.complete-home [data-hero-gif] .reference-main-actions {margin:24px 0 0;padding-top:0}
 html body.complete-home [data-hero-gif] .tme-hero-gif {
  top:90px;
  height:calc(100% - 90px);
  object-position:center top;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 80px);
  mask-image:linear-gradient(180deg,transparent,#000 80px);
 }
 html body.complete-home [data-hero-gif] .reference-main-shade {
  background:linear-gradient(180deg,#081524b8 0%,#08152494 19%,#08152414 31%,#08152414 47%,#08152491 57%,#081524db 77%,#081524e8 100%);
 }
}
@media (max-width:359px) {
 html body.complete-home [data-hero-gif] .reference-main-copy {grid-template-rows:464px auto auto auto auto}
}

/* v6.31: bring the mobile supporting copy and controls 20px higher. */
@media(max-width:699px){
 html body.complete-home [data-hero-gif] .reference-main-copy>p,
 html body.complete-home [data-hero-gif] .reference-main-actions,
 html body.complete-home [data-hero-gif] .reference-main-copy>.tme-hero-call{position:relative;top:-20px}
 html body.complete-home [data-hero-gif] .tme-hero-motion{bottom:36px}
}