@font-face {
  font-family: 'Montserrat';
  src: url('/wraps/assets/fonts/montserrat-var.woff2') format('woff2-variations'), url('/wraps/assets/fonts/montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* Homepage feature for ResponseIQ Wraps (#tesla-wraps). Lives beside the shop so the homepage's own
   styles-v2.css is never edited; it reads that file's tokens (Sora display, ink, accent) where they exist. */
.riq-wraps { padding: clamp(3rem, 7vw, 6rem) 0; }
.riq-wraps__card {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  background: radial-gradient(70% 110% at 30% 55%, #232227 0%, #161619 62%, #141416 100%); color: #EEF2F7;
  border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(10, 22, 40, .55), 0 2px 8px rgba(10, 22, 40, .12);
}
.riq-wraps__card { position: relative; }
.riq-wraps__media { margin: 0; }   /* static: the badge anchors to the card's corner, not the centred image */
.riq-wraps__badge { position: absolute; left: clamp(14px, 2.4vw, 28px); top: clamp(14px, 2.4vw, 26px); z-index: 1; font: 600 .66rem/1 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E7ECF3; border: 1px solid rgba(231, 236, 243, .34); border-radius: 4px; padding: .5rem .65rem .46rem; white-space: nowrap; }
/* The whole car stays in frame; its studio floor fades into the card instead of ending on a hard edge. */
.riq-wraps__media img { width: 100%; height: auto; display: block; -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); }
.riq-wraps__copy { padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 3rem) clamp(1rem, 1.5vw, 1.5rem); }
.riq-wraps__title { font-family: var(--font-display, 'Sora', sans-serif); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1rem; color: #fff; text-wrap: balance; }
.riq-wraps__lede { margin: 0 0 1.4rem; color: #B9C3D1; font-size: var(--fs-lede, 1.1rem); line-height: 1.55; max-width: 40ch; }
.riq-wraps__lede strong { color: #fff; font-weight: 600; }
.riq-wraps__tiers { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.riq-wraps__tiers li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.riq-wraps__tiers b { font-weight: 700; color: #fff; }
.riq-wraps__tiers span { grid-column: 1; color: #9AA6B6; font-size: .92rem; }
.riq-wraps__tiers em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 800; font-size: 1.35rem; color: #fff; font-variant-numeric: tabular-nums; }
.riq-wraps__cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.riq-wraps__link { color: #9CC4FF; font-weight: 600; text-underline-offset: 4px; }
.riq-wraps__link:hover { color: #fff; }
.riq-wraps__fine { margin: 1.25rem 0 0; color: #8793A4; font-size: .82rem; line-height: 1.5; }
.riq-wraps__strip { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: clamp(1.25rem, 3vw, 2rem); }
.riq-wraps__strip img { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: var(--shadow-md, 0 4px 12px rgba(10, 22, 40, .08)); }
.riq-wraps__strip p { margin: 0; color: var(--text-secondary, #47546e); font-size: var(--fs-body, 1.05rem); line-height: 1.6; max-width: 52ch; }
.riq-wraps__strip strong { color: var(--text-primary, #0a1628); }
@media (max-width: 900px) {
  .riq-wraps__card, .riq-wraps__strip { grid-template-columns: 1fr; }
  .riq-wraps__media { padding-top: 40px; }   /* room for the badge above the stacked car */
  .riq-wraps__copy { padding: 1.5rem 1.25rem 1.75rem; }
}

/* ── Launch card: the first-viewport invitation, dismissible for 30 days ──
   Compact and horizontal at every width. On desktop it sits under the header in the hero's empty top-right
   corner, clear of the headline, lede and calls to action; on phones it docks at the bottom. */
.riq-wraps-pop[hidden] { display: none; }   /* the grid rule below must never beat the hidden attribute */
.riq-wraps-pop {
  --pop-font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--pop-font);
  --pop-shift: 14px;
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(392px, calc(100vw - 32px)); display: grid; grid-template-columns: 116px 1fr; overflow: hidden;
  background: #141518; color: #EEF2F7; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  box-shadow: 0 24px 50px -24px rgba(5, 10, 20, .6), 0 6px 16px -8px rgba(5, 10, 20, .35);
  transform: translateY(var(--pop-shift)); opacity: 0; transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .45s cubic-bezier(.16, 1, .3, 1);
}
.riq-wraps-pop.is-in { transform: none; opacity: 1; }
.riq-wraps-pop:not(.is-in) { pointer-events: none; }
.riq-wraps-pop.is-out { transform: translateY(var(--pop-shift)); opacity: 0; transition-duration: .28s; }
.riq-wraps-pop__media { position: relative; overflow: hidden; background: #17171a; }
.riq-wraps-pop__media img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 58%; display: block; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.riq-wraps-pop.is-in .riq-wraps-pop__media img { transform: none; }
.riq-wraps-pop__body { padding: .8rem 3rem .85rem .9rem; min-width: 0; }
.riq-wraps-pop__title { margin: 0 0 .6rem; font: 600 1rem/1.25 var(--pop-font); letter-spacing: -.015em; color: #fff; }
.riq-wraps-pop__title b { font-weight: 700; }
.riq-wraps-pop__text { display: none; }
.riq-wraps-pop__row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.riq-wraps-pop__cta.riq-btn { min-height: 40px; padding: .5rem 1.1rem; font: 600 .86rem/1 var(--pop-font); letter-spacing: .01em; white-space: nowrap; }
.riq-wraps-pop__price { color: #fff; font: 500 .86rem/1 var(--pop-font); white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.riq-wraps-pop__price b { font-weight: 700; }
.riq-wraps-pop__close {
  position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: #AEB8C6; display: grid; place-items: center; transition: background .15s, color .15s;
}
.riq-wraps-pop__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.riq-wraps-pop__close:focus-visible { outline: 2px solid #4EA7FD; outline-offset: -2px; }
@media (min-width: 1200px) {
  .riq-wraps-pop { --pop-shift: -12px; top: calc(var(--riq-pop-top, 76px) + 12px); bottom: auto; right: max(20px, env(safe-area-inset-right)); }
}
/* Under 1200px a floating card would cover the hero's buttons, so it joins the page flow above the hero. */
.riq-wraps-pop.is-inline { position: relative; inset: auto; width: auto; max-width: 560px; margin: 12px auto; }
@media (max-width: 1199px) { .riq-wraps-pop.is-inline { margin: 12px 16px; } }
@media (min-width: 641px) and (max-width: 1199px) { .riq-wraps-pop.is-inline { margin: 14px auto; width: min(560px, calc(100% - 32px)); } }
/* The desktop nav has no room for an eighth link below 1280px (the logo collapsed to 0px at 1024);
   there the card above the hero and the phone menu carry the way in. */
@media (max-width: 1279px) { .riq-nav__links a[href="/wraps/"] { display: none; } }
@media (max-width: 640px) {
  .riq-wraps-pop { grid-template-columns: 88px 1fr; border-radius: 16px; }
  .riq-wraps-pop__title { font-size: .9rem; margin-bottom: .45rem; }
  .riq-wraps-pop__row { flex-wrap: nowrap; gap: .55rem; }
  .riq-wraps-pop__cta.riq-btn { min-height: 38px; padding: .4rem .85rem; font-size: .82rem; }
  .riq-wraps-pop__price { font-size: .82rem; }
  .riq-wraps-pop.is-inline { margin: 8px 12px; }
  .riq-wraps-pop__body { padding: .6rem 2.9rem .6rem .75rem; }
  .riq-wraps-pop__body { padding: .7rem 2.9rem .75rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .riq-wraps-pop, .riq-wraps-pop__media img { transition: none; }
}