/* Homepage hero carousel (Hexxo hero redesign, handoff 2a).
   Everything is namespaced under .home-hero so the legacy #hero / .slide /
   .slider-arrow / .indicator rules in style2.css (still used on other pages)
   can't leak in. */

.home-hero {
  --hero-red: #f30c1e;
  --hero-red-hover: #b91c1c;
  --hero-black: #070707;
  --hero-pad-x: 72px;

  position: relative;
  width: 100%;
  background: var(--hero-black);
  overflow: hidden;
  color: #fff;
}

/* All slides share one grid cell instead of being position:absolute.
   The stage then sizes itself to the tallest slide, so long copy on mobile
   can never be clipped by a fixed height. */
.home-hero__stage {
  display: grid;
  /* minmax(0, 1fr) instead of the default auto track: otherwise the widest
     slide's min-content (nowrap buttons, offer card) pushes the shared column
     wider than the viewport on phones. */
  grid-template-columns: minmax(0, 1fr);
  min-height: 720px;
}

.home-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.home-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Shared type & buttons ---------- */

.home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 13px/1 Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

.home-hero__eyebrow--brand {
  gap: 10px;
  color: var(--hero-red);
}

.home-hero__eyebrow--brand i {
  font-size: 15px;
}

.home-hero__eyebrow-bar {
  display: inline-block;
  width: 26px;
  height: 3px;
  background: var(--hero-red);
}

/* global.css forces h1-h6 to weight 600 with !important, so matching the
   design's 700 needs !important here as well. */
.home-hero__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}

.home-hero__title--xl {
  font-size: 80px;
  line-height: 0.98;
  max-width: 900px;
}

.home-hero__title--lg {
  font-size: 72px;
  line-height: 1;
  max-width: 640px;
}

.home-hero__title--md {
  font-size: 62px;
  line-height: 1;
}

.home-hero__body {
  margin: 0;
  font: 400 21px/1.5 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.88);
  max-width: 620px;
  text-wrap: pretty;
}

.home-hero__body--sm {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
}

.home-hero__note {
  font: 400 14px Inter, sans-serif;
  color: rgba(255, 255, 255, 0.55);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.home-hero__actions--center {
  align-items: center;
  margin-top: 0;
}

.home-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 5px;
  font: 600 16px Inter, sans-serif;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.home-hero__btn:hover,
.home-hero__btn:focus-visible {
  color: #fff;
}

.home-hero__btn--primary {
  background: var(--hero-red);
  border: 0;
}

.home-hero__btn--primary:hover {
  background: var(--hero-red-hover);
}

.home-hero__btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.home-hero__btn--ghost:hover {
  opacity: 0.8;
}

.home-hero a:focus-visible,
.home-hero button:focus-visible,
.home-hero input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Slide A: photo hero ---------- */

.home-hero__slide--photo {
  display: flex;
  flex-direction: column;
  background: url(/images/hero_2.jpg) center 28% / cover no-repeat;
}

.home-hero__slide--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

.home-hero__photo-content {
  position: relative;
  flex: 1;
  box-sizing: border-box;
  /* 96px bottom padding clears the absolutely-positioned proof strip */
  padding: 0 var(--hero-pad-x) 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.home-hero__proof {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 20px var(--hero-pad-x);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 64px;
  align-items: center;
  background: rgba(7, 7, 7, 0.88);
}

.home-hero__proof li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 400 14px Inter, sans-serif;
  color: rgba(255, 255, 255, 0.66);
}

.home-hero__stat {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ---------- Slide B: split hero ---------- */

.home-hero__slide--split {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  background: var(--hero-black);
}

.home-hero__split-copy {
  box-sizing: border-box;
  padding: 64px 56px 56px var(--hero-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.home-hero__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.home-hero__feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.home-hero__feature i {
  font-size: 18px;
  color: var(--hero-red);
}

.home-hero__feature-title {
  font: 600 16px Inter, sans-serif;
  color: #fff;
}

.home-hero__feature-detail {
  font: 400 13px/1.45 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.6);
}

.home-hero__split-photo {
  position: relative;
  min-height: 260px;
  background: url(/images/hero_5.jpg) center / cover no-repeat;
}

/* Edge-blend so the photo fades into the black copy panel */
.home-hero__split-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--hero-black) 0%,
    rgba(7, 7, 7, 0.55) 22%,
    transparent 60%
  );
}

/* ---------- Slide C: seller offer ---------- */

.home-hero__slide--offer {
  display: flex;
  background: var(--hero-black);
}

.home-hero__slide--offer::before,
.home-hero__slide--offer::after {
  content: "";
  position: absolute;
  inset: 0;
}

.home-hero__slide--offer::before {
  background: url(/images/banner_1.jpg) center 35% / cover no-repeat;
  opacity: 0.45;
}

.home-hero__slide--offer::after {
  background: linear-gradient(
    to right,
    rgba(7, 7, 7, 0.95) 0%,
    rgba(7, 7, 7, 0.8) 50%,
    rgba(7, 7, 7, 0.6) 100%
  );
}

.home-hero__offer-grid {
  position: relative;
  z-index: 1;
  flex: 1;
  box-sizing: border-box;
  padding: 64px var(--hero-pad-x);
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 72px;
  align-items: center;
}

.home-hero__offer-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* .home-hero__signup is a class selector, so it beats the bare `form`
   width rules in style2.css's mobile media queries. */
.home-hero__signup {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 560px;
  margin-top: 6px;
}

.home-hero__input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 15px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #fff;
  color: var(--hero-black);
  font: 400 16px Inter, sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}

.home-hero__input:focus,
.home-hero__input[aria-invalid="true"] {
  border-color: var(--hero-red);
}

.home-hero__error {
  margin: -10px 0 0;
  font: 500 14px Inter, sans-serif;
  color: #ff5a66;
}

.home-hero__login-link {
  color: #fff;
}

.home-hero__login-link:hover {
  color: #fff;
  opacity: 0.8;
}

.home-hero__offer-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: rgba(7, 7, 7, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 32px 64px rgba(0, 0, 0, 0.35);
}

.home-hero__offer-label {
  font: 600 12px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.home-hero__offer-headline {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.home-hero__offer-number {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--hero-red);
}

.home-hero__offer-caption {
  max-width: 200px;
  font: 600 18px/1.3 Inter, sans-serif;
  color: #fff;
}

.home-hero__slots {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.home-hero__slots li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
}

.home-hero__slot-num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}

.home-hero__slot-tag {
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-red);
}

.home-hero__steps {
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.home-hero__steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 15px Inter, sans-serif;
  color: #fff;
}

.home-hero__steps i {
  width: 18px;
  color: var(--hero-red);
}

.home-hero__disclaimer {
  margin-top: -14px;
  font: 400 12px/1.4 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Controls ---------- */

.home-hero__controls {
  position: absolute;
  right: var(--hero-pad-x);
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-hero__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(7, 7, 7, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hero__dots {
  display: flex;
  gap: 8px;
}

.home-hero__dot {
  width: 8px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.3s ease;
}

.home-hero__dot[aria-current="true"] {
  width: 28px;
  background: var(--hero-red);
}


/* Bigger tap target for the 6px-tall dots without changing how they look */
.home-hero__dot {
  position: relative;
}

.home-hero__dot::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

/* ---------- Tablet: 768px–1199px ----------
   Keeps the desktop two-column structure; tighter padding, H1s ~15% smaller,
   Slide B photo column at 40%, Slide C offer card at 400px. */

@media (min-width: 768px) and (max-width: 1199px) {
  .home-hero {
    --hero-pad-x: 40px;
  }

  .home-hero__title--xl {
    font-size: 68px;
  }

  .home-hero__title--lg {
    font-size: 61px;
  }

  .home-hero__title--md {
    font-size: 53px;
  }

  /* The proof strip can wrap to two rows here, so the content needs more
     clearance above it, and the strip leaves room for the controls on the
     right so stats never slide underneath the arrows. */
  .home-hero__photo-content {
    padding-bottom: 140px;
  }

  .home-hero__proof {
    gap: 16px 40px;
    padding-right: calc(var(--hero-pad-x) + 190px);
  }

  .home-hero__slide--split {
    grid-template-columns: 1fr 40%;
  }

  .home-hero__split-copy {
    padding: 56px 40px 72px var(--hero-pad-x);
  }

  .home-hero__offer-grid {
    grid-template-columns: 1fr 400px;
    gap: 40px;
    padding-bottom: 72px;
  }

  .home-hero__signup {
    flex-wrap: wrap;
  }

  .home-hero__input {
    flex: 1 1 200px;
  }
}

/* ---------- Mobile: below 768px (designed at 402px, mocks 3a/3b/3c) ---------- */

@media (max-width: 767px) {
  .home-hero {
    --hero-pad-x: 20px;
  }

  .home-hero__stage {
    min-height: 0;
  }

  /* Shared mobile type + buttons */
  .home-hero__eyebrow {
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.16em;
  }

  .home-hero__eyebrow-bar {
    flex-shrink: 0;
    width: 22px;
  }

  .home-hero__eyebrow--brand i {
    font-size: 14px;
  }

  .home-hero__title {
    line-height: 1.02;
  }

  .home-hero__title--xl {
    font-size: 40px;
  }

  .home-hero__title--md {
    font-size: 38px;
  }

  .home-hero__title--lg {
    font-size: 42px;
  }

  .home-hero__body,
  .home-hero__body--sm {
    font-size: 16px;
    line-height: 1.5;
  }

  .home-hero__note {
    text-align: center;
  }

  .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
  }

  .home-hero__btn {
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }

  /* Controls: dots only, centered. Each slide keeps 40px of bottom padding
     for them to sit in, and swipe (heroCarousel.js) replaces the arrows. */
  .home-hero__controls {
    left: 0;
    right: 0;
    justify-content: center;
  }

  .home-hero__arrow {
    display: none;
  }

  /* 3a: photo block on top, proof strip as a 2x2 grid underneath.
     The photo + scrim move from the slide onto the content block so the
     proof strip below it sits on solid black instead of the photo. */
  .home-hero__slide--photo {
    background: var(--hero-black);
  }

  .home-hero__slide--photo::before {
    content: none;
  }

  .home-hero__photo-content {
    isolation: isolate;
    min-height: 560px;
    justify-content: flex-end;
    /* Desktop uses flex-start, which shrinks the button row to its content
       width; stretch lets the stacked buttons fill the full width. */
    align-items: stretch;
    gap: 16px;
    padding: 0 var(--hero-pad-x) 28px;
    background: url(/images/hero_2.jpg) 62% 28% / cover no-repeat;
  }

  .home-hero__photo-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(7, 7, 7, 0.95) 100%
    );
  }

  .home-hero__proof {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
    padding: 20px var(--hero-pad-x) 40px;
    background: var(--hero-black);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .home-hero__proof li {
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.35;
  }

  /* 3b: photo, then copy + CTA, then 2x2 cards */
  .home-hero__slide--split {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .home-hero__split-photo {
    order: -1;
    height: 260px;
    min-height: 0;
  }

  .home-hero__split-photo::after {
    background: linear-gradient(to bottom, transparent 40%, var(--hero-black) 100%);
  }

  .home-hero__split-copy {
    justify-content: flex-start;
    gap: 18px;
    padding: 4px var(--hero-pad-x) 40px;
  }

  .home-hero__features {
    gap: 10px;
  }

  .home-hero__feature {
    gap: 6px;
    padding: 14px;
  }

  .home-hero__feature i {
    font-size: 17px;
  }

  .home-hero__feature-title {
    font-size: 15px;
    line-height: 1.25;
  }

  .home-hero__feature-detail {
    line-height: 1.4;
  }

  /* 3c: stacked sign-up, offer card below */
  .home-hero__slide--offer::before {
    background-position: center top;
    opacity: 0.4;
  }

  .home-hero__slide--offer::after {
    background: linear-gradient(
      to bottom,
      rgba(7, 7, 7, 0.6) 0%,
      rgba(7, 7, 7, 0.9) 45%,
      var(--hero-black) 100%
    );
  }

  .home-hero__offer-grid {
    grid-template-columns: 1fr;
    align-content: start;
    /* 18px column gap + the card's 6px top margin from the mock */
    gap: 24px;
    padding: 36px var(--hero-pad-x) 40px;
  }

  .home-hero__offer-copy {
    gap: 18px;
  }

  .home-hero__signup {
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
  }

  .home-hero__input {
    flex: none;
    min-height: 48px;
  }

  .home-hero__error {
    margin-top: -8px;
  }

  .home-hero__offer-card {
    gap: 18px;
    padding: 22px;
    box-shadow: none;
  }

  .home-hero__offer-label {
    font-size: 11px;
  }

  .home-hero__offer-headline {
    gap: 12px;
  }

  .home-hero__offer-number {
    font-size: 64px;
  }

  .home-hero__offer-caption {
    max-width: none;
    font-size: 16px;
  }

  .home-hero__slots {
    gap: 8px;
  }

  .home-hero__slots li {
    gap: 6px;
    padding: 10px 0;
  }

  .home-hero__slot-num {
    font-size: 18px;
  }

  .home-hero__slot-tag {
    font-size: 9px;
  }

  .home-hero__steps {
    padding-top: 16px;
  }

  .home-hero__disclaimer {
    margin-top: -8px;
  }
}

@media (max-width: 359px) {
  .home-hero__features {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__slide,
  .home-hero__dot,
  .home-hero__btn {
    transition: none;
  }
}