/* HerCar mobile calculator discovery — desktop design remains unchanged. */
.mobile-calculator-link,
.mobile-calculator-promo{display:none}

@media(max-width:650px){
  .nav{gap:10px}
  .mobile-calculator-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-left:auto;
    min-height:42px;
    padding:0 13px;
    border:1px solid rgba(237,28,36,.34);
    border-radius:12px;
    background:#fff;
    color:#111;
    font-size:.78rem;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 7px 18px rgba(10,10,12,.06);
  }
  .mobile-calculator-link:active{transform:translateY(1px)}
  .mobile-calculator-icon{color:var(--red);font-size:1.05rem;line-height:1}
  .menu-btn{
    flex:0 0 42px;
    width:42px;
    height:42px;
    margin-left:0;
    border-radius:12px;
    font-size:1.12rem;
    line-height:1;
  }
  .mobile-calculator-promo{
    display:block;
    padding:16px 0 0;
    background:#fff;
  }
  .mobile-calculator-promo-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 28px;
    align-items:center;
    gap:14px;
    padding:18px 16px;
    border:1px solid rgba(237,28,36,.26);
    border-radius:18px;
    background:
      radial-gradient(circle at 92% 50%,rgba(237,28,36,.20),transparent 25%),
      linear-gradient(115deg,#09090b 0%,#111116 58%,#1b0b0d 100%);
    box-shadow:
      0 14px 34px rgba(10,10,12,.12),
      0 0 0 1px rgba(255,255,255,.03) inset;
    color:#fff;
  }
  .mobile-calculator-promo-card::before{
    content:"Know your car’s true depreciation.";
    position:absolute;
    left:82px;
    top:12px;
    color:#ff4a51;
    font-size:.52rem;
    font-weight:900;
    letter-spacing:.18em;
    line-height:1;
    z-index:1;
  }
  .mobile-calculator-promo-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:130px;
    height:130px;
    right:-42px;
    top:50%;
    border:22px solid rgba(237,28,36,.09);
    border-radius:50%;
    transform:translateY(-50%);
  }
  .mobile-calculator-promo-icon{
    position:relative;
    z-index:1;
    width:52px;
    height:52px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:var(--red);
    color:#fff;
    font-size:1.45rem;
    font-weight:900;
    box-shadow:
      0 10px 20px rgba(237,28,36,.28),
      0 0 0 6px rgba(237,28,36,.10);
  }
  .mobile-calculator-promo-copy{
    position:relative;
    z-index:1;
    min-width:0;
    padding-top:12px;
  }
  .mobile-calculator-promo-copy strong{
    display:block;
    color:#fff;
    font-size:1rem;
    line-height:1.2;
    letter-spacing:-.02em;
  }
  .mobile-calculator-promo-copy small{
    display:block;
    margin-top:6px;
    color:rgba(255,255,255,.72);
    font-size:.76rem;
    line-height:1.38;
    max-width:18rem;
  }
  .mobile-calculator-promo-arrow{
    position:relative;
    z-index:1;
    color:#fff;
    font-size:1.35rem;
    font-weight:900;
    text-align:right;
  }
}

@media(max-width:380px){
  .mobile-calculator-link{padding:0 10px;font-size:.72rem}
  .mobile-calculator-link span:last-child{display:none}
  .mobile-calculator-link{width:42px;padding:0}
  .mobile-calculator-promo-card{grid-template-columns:48px minmax(0,1fr) 24px;gap:10px;padding:17px 14px}
  .mobile-calculator-promo-card::before{left:74px;top:11px;font-size:.49rem}
  .mobile-calculator-promo-icon{width:48px;height:48px;border-radius:14px;font-size:1.3rem}
  .mobile-calculator-promo-copy{padding-top:11px}
  .mobile-calculator-promo-copy strong{font-size:.92rem}
  .mobile-calculator-promo-copy small{font-size:.72rem}
  .mobile-calculator-promo-arrow{font-size:1.2rem}
}


/* HerCar staging patch v23
   Desktop depreciation-calculator discovery banner.
   The existing mobile design remains unchanged. */
@media(min-width:651px){
  .mobile-calculator-promo{
    display:block;
    padding:28px 0 12px;
    background:#fff;
  }

  .mobile-calculator-promo-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:grid;
    grid-template-columns:76px minmax(0,1fr) auto;
    align-items:center;
    gap:24px;
    min-height:144px;
    padding:28px 32px;
    border:1px solid rgba(237,28,36,.30);
    border-radius:26px;
    background:
      radial-gradient(circle at 88% 50%,rgba(237,28,36,.22),transparent 26%),
      linear-gradient(115deg,#09090b 0%,#111116 58%,#1b0b0d 100%);
    box-shadow:
      0 22px 55px rgba(10,10,12,.15),
      0 0 0 1px rgba(255,255,255,.025) inset;
    color:#fff;
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease;
  }

  .mobile-calculator-promo-card::before{
    content:"Know your car’s true depreciation.";
    position:absolute;
    left:132px;
    top:23px;
    z-index:1;
    color:#ff4a51;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.20em;
    line-height:1;
  }

  .mobile-calculator-promo-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:270px;
    height:270px;
    right:-85px;
    top:50%;
    border:46px solid rgba(237,28,36,.08);
    border-radius:50%;
    transform:translateY(-50%);
  }

  .mobile-calculator-promo-card:hover{
    transform:translateY(-3px);
    border-color:rgba(237,28,36,.55);
    box-shadow:
      0 28px 68px rgba(10,10,12,.21),
      0 0 0 1px rgba(255,255,255,.035) inset;
  }

  .mobile-calculator-promo-icon{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:76px;
    height:76px;
    border-radius:22px;
    background:var(--red);
    color:#fff;
    font-size:2rem;
    font-weight:900;
    box-shadow:
      0 15px 30px rgba(237,28,36,.30),
      0 0 0 7px rgba(237,28,36,.10);
  }

  .mobile-calculator-promo-copy{
    position:relative;
    z-index:1;
    min-width:0;
    padding-top:16px;
  }

  .mobile-calculator-promo-copy strong{
    display:block;
    color:#fff;
    font-size:clamp(1.55rem,2.5vw,2.25rem);
    font-weight:900;
    letter-spacing:-.035em;
    line-height:1.08;
  }

  .mobile-calculator-promo-copy small{
    display:block;
    max-width:690px;
    margin-top:9px;
    color:rgba(255,255,255,.70);
    font-size:.98rem;
    line-height:1.55;
  }

  .mobile-calculator-promo-arrow{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-width:196px;
    min-height:54px;
    padding:0 22px;
    border-radius:15px;
    background:#fff;
    color:#111;
    font-size:1.35rem;
    font-weight:900;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
  }

  .mobile-calculator-promo-arrow::before{
    content:"Open calculator";
    font-size:.86rem;
    font-weight:900;
    white-space:nowrap;
  }

  .mobile-calculator-promo-card:focus-visible{
    outline:3px solid rgba(237,28,36,.38);
    outline-offset:4px;
  }
}

@media(min-width:651px) and (max-width:900px){
  .mobile-calculator-promo-card{
    grid-template-columns:64px minmax(0,1fr) auto;
    gap:18px;
    padding:25px 24px;
  }

  .mobile-calculator-promo-card::before{
    left:106px;
  }

  .mobile-calculator-promo-icon{
    width:64px;
    height:64px;
    border-radius:19px;
    font-size:1.7rem;
  }

  .mobile-calculator-promo-arrow{
    min-width:58px;
    width:58px;
    padding:0;
  }

  .mobile-calculator-promo-arrow::before{
    display:none;
  }
}


/* HerCar staging patch v25
   Animated trust-stat banner for desktop and mobile. */
.stats .stat strong{
  display:inline-block;
  min-width:4.4ch;
  font-variant-numeric:tabular-nums;
  transform-origin:left center;
  transition:color .25s ease,transform .25s ease;
}

.stats .stat{
  position:relative;
  overflow:hidden;
}

.stats .stat::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--red),rgba(237,28,36,0));
  opacity:0;
}

.stats-count-active .stat::after{
  animation:hercar-stat-sweep 1.15s ease-out both;
}

.stats-count-active .stat:nth-child(2)::after{animation-delay:.13s}
.stats-count-active .stat:nth-child(3)::after{animation-delay:.26s}
.stats-count-active .stat:nth-child(4)::after{animation-delay:.39s}

.stats .stat.is-counting strong{
  color:var(--red);
  animation:hercar-stat-number-pulse .54s ease-out both;
}

.stats .stat.count-complete strong{
  color:#111;
}

.stats .stat.is-counting .stat-icon{
  animation:hercar-stat-icon-pulse .62s ease-out both;
}

@keyframes hercar-stat-number-pulse{
  0%{transform:translateY(7px);opacity:.45}
  55%{transform:translateY(-2px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}

@keyframes hercar-stat-icon-pulse{
  0%{transform:scale(.88)}
  55%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@keyframes hercar-stat-sweep{
  0%{right:100%;opacity:0}
  20%{opacity:1}
  100%{right:0;opacity:0}
}

@media(max-width:650px){
  .stats .stat strong{
    min-width:0;
  }

  .stats-count-active .stat::after{
    height:1.5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .stats .stat,
  .stats .stat strong,
  .stats .stat-icon,
  .stats .stat::after{
    animation:none!important;
    transition:none!important;
  }
}


/* HerCar staging patch v26
   Add clear spacing between animated trust numbers and their descriptions. */
.stats .stat > div:not(.stat-icon){
  min-width:0;
}

.stats .stat strong{
  display:block;
  margin:0;
  line-height:1.05;
}

.stats .stat span{
  display:block;
  margin-top:7px;
  line-height:1.35;
}

@media(max-width:650px){
  .stats .stat > div:not(.stat-icon){
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
  }

  .stats .stat strong{
    width:100%;
  }

  .stats .stat span{
    width:100%;
    margin-top:9px;
  }
}


/* HerCar staging patch v33 — updated depreciation banner hierarchy. */
.mobile-calculator-promo-card::before{
  white-space:nowrap;
}
@media(max-width:650px){
  .mobile-calculator-promo-card::before{
    right:42px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.48rem;
    letter-spacing:.12em;
  }
  .mobile-calculator-promo-copy strong{
    font-size:.96rem;
  }
}
@media(min-width:651px){
  .mobile-calculator-promo-card::before{
    letter-spacing:.14em;
  }
}