/* Home hero as two slides: car rental and car dealer, real screenshots on each.
   Wording "Your cars. Your money. One screen." / "Your buyers. Their payments. One screen.", key-tag points, plate-label strip.
   Built from comp-hero2.html (idea 3 wording + idea 1 look), approved 5 Oct 2026. */
.hero-slides .hs-view { overflow: hidden; }
.hero-slides .hs-track { display: flex; transition: transform .7s cubic-bezier(.6,.05,.25,1); }
.hero-slides .hs-slide { flex: 0 0 100%; min-width: 0; }
.hero-slides .hs-slide .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hero-slides .hero-copy .eyebrow .snum { font-family: var(--mono); color: var(--muted); margin-right: 2px; }
.hero-slides .hero-copy .eyebrow .snum::after { content: ' /'; }
.hero-slides .screen.side { width: 320px; inset-inline-end: -20px; top: 300px; }
.hero-slides .live.ca { inset-inline-start: -26px; top: 420px; z-index: 4; }
.hero-slides .live.cb { inset-inline-start: 300px; top: 492px; z-index: 4; }
.hero-slides .live.swap div { animation: hs-chip .5s ease; }
@keyframes hs-chip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* key-tag points */
.hm-tags { margin-top: 38px; display: flex; gap: 14px; }
.hm-tag { position: relative; width: 156px; padding: 26px 12px 12px; border-radius: 30px 30px 12px 12px; background: #F4F1EA; color: #1A2220; transform: rotate(var(--r)); box-shadow: 0 14px 20px -14px rgba(0,0,0,.8); }
.hm-tag .hole { position: absolute; left: 50%; top: 9px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--bg); }
.hm-tag b { display: block; font: 700 14px/1.2 var(--rf-font); }
.hm-tag small { display: block; font-size: 12px; opacity: .78; margin-top: 3px; line-height: 1.3; }

/* slide switch */
.hs-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 46px; }
.hs-tabs { display: flex; gap: 28px; }
.hs-tabs button { position: relative; display: flex; gap: 10px; align-items: baseline; background: none; border: 0; padding: 0 0 10px; cursor: pointer; color: var(--muted); font: 500 15px var(--rf-font); }
.hs-tabs button .n { font: 600 12px var(--mono); }
.hs-tabs button i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-2); }
.hs-tabs button[aria-selected="true"] { color: var(--head); }
.hs-tabs button[aria-selected="true"] .n { color: var(--accent); }
.hs-tabs button[aria-selected="true"] i { background: var(--brand); }
.hs-arrows { display: flex; gap: 8px; }
.hs-arrows button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: none; color: var(--head); font-size: 16px; cursor: pointer; }
.hs-arrows button:hover, .hs-tabs button:hover { color: var(--head); border-color: var(--brand-edge); }
.hero-slides .hero-rule { margin-top: 18px; }

/* plate-label strip */
.pstrip { display: flex; justify-content: space-between; padding: 22px 0 26px; }
.pstrip > span { font: 500 12.5px var(--mono); color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.pstrip .dy { font-style: normal; background: #1D2A5A; color: #F1F4FA; font: 700 11px/1 var(--mono); letter-spacing: .06em; padding: 6px 8px 5px; border-radius: 2px; box-shadow: 0 1px 0 rgba(0,0,0,.4); }

@media (max-width: 900px) {
  .hero-slides .hs-slide .wrap { grid-template-columns: 1fr; gap: 32px; }
  .hm-tags { flex-wrap: wrap; }
  .hm-tag { width: calc(50% - 10px); box-sizing: border-box; }
  .hero-slides .screen.side { display: none; }
  .pstrip { flex-direction: column; gap: 10px; }
  .hs-tabs { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero-slides .hs-track, .hero-slides .live div { transition: none !important; animation: none !important; } }
.hero .wrap.hs-nav { display: flex; }
/* the dealer headline runs to four lines; a slightly smaller size keeps both slides the same weight */
.hero-slides .hs-slide[data-slide="1"] h1 { font-size: clamp(38px, 5vw, 62px); }

/* autoplay: the active tab fills over 8 s; pause button beside the arrows */
.hs-tabs button b.fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--head); opacity: .55; }
.hero-slides.playing .hs-tabs button[aria-selected="true"] b.fill { animation: hs-fill 8s linear forwards; }
@keyframes hs-fill { to { width: 100%; } }
.hs-play { display: grid; place-items: center; }
.hs-play .ic-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.hs-play .ic-play { display: none; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.hero-slides.paused .hs-play .ic-pause { display: none; } .hero-slides.paused .hs-play .ic-play { display: block; }
@media (prefers-reduced-motion: reduce) { .hs-play { display: none; } .hs-tabs button b.fill { display: none; } }
.hero-slides.playing .hs-tabs button[aria-selected="true"] i { background: var(--brand-edge); opacity: .45; }
.hs-tabs button b.fill { background: var(--brand); opacity: 1; }
@media (max-width: 760px) {
  .hero-slides .live.ca { inset-inline-start: 4px; top: auto; bottom: 18px; }
  .hero-slides .live.cb { display: none; }
  .hs-tabs button { font-size: 14px; }
}