/* Chop Awoof page-specific layout. */

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-xl) var(--space-2xl);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero__headline {
  font-size: var(--fs-3xl);
  color: var(--color-ink-900);
}

/* The positioning line is a full sentence, so it runs a step smaller. */
.hero__headline--long {
  font-size: var(--fs-2xl);
}

.hero__headline .accent {
  color: var(--color-orange-700);
}

.hero__subhead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 36rem;
  margin-bottom: var(--space-md);
}

.hero__order-note {
  margin-top: var(--space-sm);
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero__bag {
  width: min(100%, 22rem);
  animation: float-bag 6s ease-in-out infinite;
}

@keyframes float-bag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

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

.hero__phone {
  position: absolute;
  right: -1rem;
  bottom: -1.5rem;
  width: 10.5rem;
}

@media (max-width: 30rem) {
  .hero__phone {
    position: static;
    margin-top: var(--space-sm);
    width: 11rem;
  }
}

.inline-capture {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  max-width: 28rem;
}

.inline-capture input {
  flex: 1 1 12rem;
  min-height: var(--touch-target-min);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-neutral-300);
  font-size: var(--fs-sm);
}

/* ---------- Problem & promise ---------- */
.promise-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 55rem) {
  .promise-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Explainer (Specific Offer vs Mystery Bag) ---------- */
.explainer-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 55rem) {
  .explainer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.explainer-intro {
  margin-bottom: var(--space-lg);
}

/* ---------- Trust & safety ---------- */
.trust-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.trust-item {
  display: flex;
  gap: var(--space-sm);
  background: var(--color-neutral-0);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.trust-item svg {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--color-green-700);
}

/* ---------- Merchant teaser / merchant page ---------- */
.merchant-teaser {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 55rem) {
  .merchant-teaser {
    grid-template-columns: 1fr 1fr;
  }
}

.benefit-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.benefit-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.benefit-list svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-orange-700);
  margin-top: 2px;
}

.onboard-steps {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .onboard-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.merchant-ready-note {
  margin-top: var(--space-lg);
  max-width: 44rem;
}

/* What it costs to join, under the merchants hero. */
.free-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.free-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-green-50);
  border: 2px solid var(--color-green-600);
  color: var(--color-green-800);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.free-points svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.merchant-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .merchant-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .merchant-benefits {
    grid-template-columns: repeat(3, 1fr);
  }
}

.merchant-benefit h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2xs);
}

.merchant-benefit p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.free-callout {
  background: var(--color-orange-50);
  border: 2px solid var(--color-orange-500);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.free-callout p {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.merchant-signup-actions {
  justify-content: center;
  margin-top: var(--space-md);
}

/* ---------- FAQ page ---------- */
.faq-page-header {
  max-width: 40rem;
}

/* ---------- Legal pages ---------- */
.legal-notice {
  background: var(--color-orange-50);
  border: 2px solid var(--color-orange-500);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  font-weight: 600;
}

.legal-content h2 {
  margin-top: var(--space-xl);
}

.legal-content p, .legal-content li {
  color: var(--color-text-muted);
}

/* ---------- 404 ---------- */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-2xl);
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  color: var(--color-orange-700);
  margin-bottom: 0;
}

/* ---------- Waitlist section ---------- */
.waitlist-panel {
  max-width: 32rem;
  margin-inline: auto;
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}

/* ---------- Category texture images (optional supplementary imagery) ---------- */
.category-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

@media (min-width: 40rem) {
  .category-strip {
    grid-template-columns: repeat(6, 1fr);
  }
}

.category-strip__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}

.category-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-strip__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(46,13,1,0.75), transparent);
  color: var(--color-neutral-0);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: var(--space-2xs);
}