/* ===========================================================================
   YELP PREMIER PARTNER ADVERTISING — page styles           added 2026-09-24
   Copy source: "Media tamer web copy .docx", YELP ADVERTISING.
   Only what is unique to this page. The hero shell, the tile grid, the
   entrance animation and the closing CTA all come from assets/mt-shared.css,
   which loads first.
   =========================================================================== */

/* --- 01 hero --------------------------------------------------------------
   One button, so the row is spaced with padding rather than the margin
   utility the build ships. Tailwind's pt-8 does not survive this build's
   purge - only pt-7 does, at 28px - so the 32px is set here to match the
   spacing every other hero uses. */
.mt-yp-hero-cta {
  padding-top: 32px
}

/* Hidden at the client’s request, never deleted. */
[data-yp-hide] {
  display: none !important
}

/* The partner panel stands in for the badge graphic. It is set in our own
   type on our own card - it does not imitate Yelp's badge artwork, which is
   Yelp's to supply. Sized like the photo frame the other heroes carry so the
   column balances the same way. */
.mt-yp-badge {
  width: 100%;
  max-width: 480px;
  padding: 34px 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(160deg, rgba(45, 53, 72, .96), rgba(26, 31, 46, .98));
  box-shadow: 0 30px 80px rgba(26, 31, 46, .34), inset 0 1px 0 rgba(255, 255, 255, .06)
}

@media (max-width:919px) {
  .mt-yp-badge {
    max-width: 420px
  }
}

.mt-yp-badge__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt-orange)
}

.mt-yp-badge__name {
  margin: 14px 0 0;
  font-family: var(--font-heading), "Arial Narrow", sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: #fff
}

.mt-yp-badge__rank {
  margin: 2px 0 0;
  font-family: var(--font-heading), "Arial Narrow", sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--mt-orange)
}

.mt-yp-badge__note {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-size: 14px;
  line-height: 1.65;
  color: var(--mt-text-on-dark)
}

/* --- 02 why yelp works ----------------------------------------------------
   Three reasons, so the shared four-column tile grid narrows to three. */
@media (min-width:1024px) {
  .mt-tile-grid.mt-yp-three {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* --- 03 industry applicability -------------------------------------------
   A row per industry, read as a chart rather than a list: name, bar, rating.
   The bar carries only the two levels the build document states; the words
   beside it are the source of truth and the panel footnote says so, so no
   finer precision is implied than the source has.
   The bars grow as each row reveals. They are sized in CSS by default and
   zeroed only under .mt-anim, so with no script they are simply drawn at
   their full length rather than staying empty. */
.mt-yp-panel {
  margin-top: 48px;
  padding: 14px 30px 26px;
  border-radius: 24px;
  border: 1px solid var(--mt-border);
  background: #fff;
  box-shadow: 0 30px 70px -44px rgba(26, 31, 46, .45)
}

@media (min-width:768px) {
  .mt-yp-panel {
    padding: 18px 40px 30px
  }
}

.mt-yp-roi {
  list-style: none;
  margin: 0;
  padding: 0
}

.mt-yp-roi__row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--mt-border)
}

.mt-yp-roi__row:last-child {
  border-bottom: 0
}

.mt-yp-roi__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--mt-navy)
}

.mt-yp-roi__track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 107, 53, .14)
}

.mt-yp-roi__bar {
  position: relative;
  display: block;
  height: 100%;
  width: var(--v);
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(90deg, var(--mt-orange), var(--mt-orange-dark))
}

/* A highlight that keeps travelling along the filled part once it has grown.
   It is a transform sweep on a pseudo-element, so it composites - animating
   background-position would repaint the bar every frame instead. Rows are
   offset so the five do not pulse in unison. */
.mt-yp-roi__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%,
      transparent 100%);
  transform: translateX(-100%);
  animation: mt-yp-sheen 2.6s linear infinite
}

@keyframes mt-yp-sheen {
  to {
    transform: translateX(100%)
  }
}

.mt-yp-roi__row:nth-child(2) .mt-yp-roi__bar::after {
  animation-delay: .28s
}

.mt-yp-roi__row:nth-child(3) .mt-yp-roi__bar::after {
  animation-delay: .56s
}

.mt-yp-roi__row:nth-child(4) .mt-yp-roi__bar::after {
  animation-delay: .84s
}

.mt-yp-roi__row:nth-child(5) .mt-yp-roi__bar::after {
  animation-delay: 1.12s
}

.mt-anim .mt-yp-roi__row .mt-yp-roi__bar {
  width: 0;
  transition: width .9s cubic-bezier(.22, 1, .36, 1) .12s
}

.mt-anim .mt-yp-roi__row.is-in .mt-yp-roi__bar {
  width: var(--v)
}

.mt-yp-roi__label {
  min-width: 7rem;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--mt-text-muted)
}

.mt-yp-panel__foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--mt-border);
  font-size: 12px;
  line-height: 1.6;
  color: var(--mt-text-muted)
}

@media (max-width:640px) {
  .mt-yp-roi__row {
    grid-template-columns: 1fr auto;
    gap: 10px 14px
  }

  .mt-yp-roi__track {
    grid-column: 1 / -1;
    order: 3
  }

  .mt-yp-roi__label {
    min-width: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .mt-anim .mt-yp-roi__row .mt-yp-roi__bar {
    width: var(--v);
    transition: none
  }

  .mt-yp-roi__bar::after {
    animation: none;
    opacity: 0
  }
}