/* Phase 1 homepage redesign — Hero, StatBar, StartWithQuestion.
   All selectors are prefixed .hp1- (or reuse existing global utility
   classes .cta-primary/.cta-secondary/.eyebrow/.pill/.pill-gray) so this
   file cannot collide with global.css or another component's styles. */

/* ---------- Hero ---------- */

.hp1-hero {
  position: relative;
  padding: 3rem 0 2.5rem;
  overflow: hidden;
}

/* Faded monogram sitting behind the headline — decorative texture, not
   content, so it's aria-hidden and never competes with the actual text for
   attention. Anchored to the top of the hero and roughly centered behind
   "Who bought who?" rather than the whole section, per spec. */
.hp1-hero-logo-bg {
  position: absolute;
  top: -4%;
  left: 50%;
  transform: translateX(-50%);
  width: min(50vw, 520px);
  height: auto;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* The mark is mostly black fill, which nearly disappears into the dark
   theme's near-black background at the same opacity that reads clearly on
   the light theme's white one — bumped up slightly there so it stays
   visibly present instead of vanishing. */
@media (prefers-color-scheme: dark) {
  .hp1-hero-logo-bg { opacity: 0.08; }
}

.hp1-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hp1-headline {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0.6rem 0 0.4rem;
  color: var(--fg);
}

.hp1-subhead {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 1.75rem;
}

.hp1-search-wrap {
  position: relative;
}

.hp1-search-box {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raised);
  padding: 0.9rem 1rem;
  transition: border-color 0.15s var(--ease-out-cubic, ease);
}

.hp1-search-box:focus-within {
  border-color: var(--accent);
}

.hp1-search-icon {
  flex: none;
  color: var(--muted);
}

.hp1-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.05rem;
}

.hp1-search-input::placeholder {
  color: var(--muted);
}

.hp1-kbd-hint {
  flex: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
}

.hp1-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.4rem;
}

.hp1-search-results[hidden] {
  display: none;
}

.hp1-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--fg);
}

.hp1-result-row:hover,
.hp1-result-row.is-active {
  background: var(--bg-raised);
}

.hp1-result-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hp1-result-name {
  font-size: 0.92rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp1-result-sub {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp1-result-type {
  flex: none;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
}

.hp1-result-empty {
  padding: 0.75rem 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.hp1-popular-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.hp1-popular-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-right: 0.15rem;
}

.hp1-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Subtle marquee strip of real acquirer -> target pairs */
.hp1-marquee {
  margin-top: 2.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.hp1-marquee-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: hp1-marquee-scroll 38s linear infinite;
}

/* Pause the scroll on hover/focus so a moving item can actually be clicked. */
.hp1-marquee-track:has(.hp1-marquee-item:hover),
.hp1-marquee-track:has(.hp1-marquee-item:focus-visible) {
  animation-play-state: paused;
}

.hp1-marquee-item {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.hp1-marquee-item:hover,
.hp1-marquee-item:focus-visible {
  opacity: 1;
  color: var(--fg);
}

.hp1-marquee-arrow {
  color: var(--muted);
  opacity: 0.6;
}

.hp1-marquee-price {
  color: var(--accent-dim);
}

@keyframes hp1-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- StatBar ---------- */

.hp1-statbar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 2rem 0;
}

.hp1-statbar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hp1-stat-cell {
  padding: 1.5rem 1.25rem;
  text-align: center;
  border-left: 1px solid var(--border);
}

.hp1-stat-cell:first-child {
  border-left: none;
}

.hp1-stat-number {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.hp1-stat-word {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
}

.hp1-stat-label {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- StartWithQuestion ---------- */

.hp1-swq {
  padding: 1.5rem 0 3rem;
}

.hp1-swq-headline {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--fg);
}

.hp1-swq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.hp1-swq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.18s var(--ease-out-cubic, ease);
  min-height: 9.5rem;
}

.hp1-swq-card:hover,
.hp1-swq-card:focus-visible {
  background: var(--bg-raised);
}

.hp1-swq-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-dim);
}

.hp1-swq-title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hp1-swq-body {
  font-size: 0.88rem;
  color: var(--muted);
}

.hp1-swq-example {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-dim);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s var(--ease-out-cubic, ease), transform 0.18s var(--ease-out-cubic, ease);
}

.hp1-swq-card:hover .hp1-swq-example,
.hp1-swq-card:focus-visible .hp1-swq-example {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hp1-swq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hp1-hero {
    padding: 2rem 0 1.5rem;
  }

  .hp1-hero-ctas {
    display: none;
  }

  .hp1-marquee {
    display: none;
  }

  .hp1-statbar-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp1-stat-cell:nth-child(2n+1) {
    border-left: none;
  }

  .hp1-stat-cell:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }

  .hp1-swq {
    padding: 1rem 0 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp1-marquee-track {
    animation: none;
  }

  .hp1-swq-example {
    transition: none;
  }

  .hp1-search-box {
    transition: none;
  }
}

/* ---------- Centered hero + full-bleed bands (layout rework) ----------
   The hero reads better centered, and the stat bar / deal ticker are meant
   to span the full viewport rather than sit inside main's 1100px column.
   overflow-x: clip (NOT hidden) keeps the page from gaining a horizontal
   scrollbar off the 100vw bleed while still allowing position: sticky to
   work — hidden would turn the root into a scroll container and break it.
   This rule is safe to put here because home-phase1.css only loads on the
   homepage. */
html {
  overflow-x: clip;
}

.hp1-hero-inner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hp1-hero-inner .hp1-search-wrap {
  margin-left: auto;
  margin-right: auto;
}

.hp1-hero-inner .hp1-popular-row,
.hp1-hero-inner .hp1-hero-ctas {
  justify-content: center;
}

/* Search results read as a left-aligned list even though the hero is
   centered — centred result rows would be much harder to scan. */
.hp1-hero-inner .hp1-search-results,
.hp1-hero-inner .hp1-search-input {
  text-align: left;
}

.hp1-marquee,
.hp1-statbar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}

/* Edge-to-edge: only a short fade at each end so the ticker genuinely
   travels the full width instead of dying 8% in from either side. */
.hp1-marquee {
  mask-image: linear-gradient(to right, transparent, black 3rem, black calc(100% - 3rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3rem, black calc(100% - 3rem), transparent);
}

.hp1-statbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}