/* ==========================================================================
   Page: pricing (/pricing/) — loaded after site.css by site/pricing/index.html only
   ========================================================================== */

/* "From Data to Dominance!" — purple band with the identifier pattern */
.pricing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* live: 55vh tall, starting 99px under the header */
  min-height: calc(55vh - 99px);
  padding: 1px 0 50px;
  background: var(--c-purple) url("/assets/img/MRL-Visual-IdentifierBW.png") no-repeat 152px 341px / 48% auto;
  text-align: center;
}

.pricing-hero__title {
  margin-top: 30px;
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  color: var(--c-white);
}

.pricing-hero__text,
.pricing-hero__text:last-child {
  margin: 0 0 14.4px;
  padding: 15px 10px 0;
  font-size: 18px;
  line-height: 27px;
  color: #adadad;
}

/* "Fuel Your Performance" + Stripe pricing table */
.pricing-plans {
  padding-bottom: 70px;
  background: var(--c-white);
}

.pricing-plans__inner {
  display: flex;
  flex-direction: column;
  max-width: var(--container);
  margin-inline: auto;
}

.pricing-plans__body,
.pricing-plans__table {
  margin-top: 100px;
  padding-left: 15px;
}
/* live runs the text to the right screen edge on phones; give it a gutter */
.pricing-plans__body { padding-right: 15px; }

.pricing-plans__title {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  color: var(--c-text);
}

.pricing-plans__text { display: flow-root; margin-top: 30px; }
.pricing-plans__text p,
.pricing-plans__text p:last-child { margin-bottom: 14.4px; }

.pricing-plans__subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 23px;
  color: var(--c-text);
}

.pricing-plans .dot-list { margin-top: 10px; }

.pricing-plans__table stripe-pricing-table {
  display: block;
  padding: 0 5px;
}

/* Video CTA (the shared .cta-banner, taller here at every width) */
.pricing-cta .cta-banner { min-height: 630px; }

@media (min-width: 768px) {
  .pricing-hero {
    min-height: 0;
    padding: clamp(80px, 7.8125vw + 20px, 100px) 0 clamp(50px, 246px - 19.14vw, 99px);
    background-position: 0 0;
  }
  .pricing-hero__title {
    margin-top: 0;
    font-size: clamp(40px, 13.672vw - 65px, 75px);
    line-height: clamp(40px, 16.016vw - 83px, 81px);
  }
  .pricing-hero__text,
  .pricing-hero__text:last-child { padding: clamp(15px, 1.953vw, 20px) 10px 0; }

  .pricing-plans__inner { flex-direction: row; gap: 20px; }
  .pricing-plans__body { width: 50%; padding-right: 0; }
  .pricing-plans__table { width: 43%; }
  .pricing-plans__title {
    font-size: clamp(30px, 5.859vw - 15px, 45px);
    line-height: clamp(30px, 3.906vw, 40px);
  }
}

@media (min-width: 1025px) {
  .pricing-hero { padding: 100px 0 50px; background-position: -165px 59px; }
  .pricing-hero__title { line-height: 81px; }
  .pricing-hero__text,
  .pricing-hero__text:last-child { padding: 20px 0 0; }

  .pricing-plans__title { font-size: 45px; line-height: 40px; }
  .pricing-plans__table stripe-pricing-table { padding: 10px; }

  .pricing-cta { padding: 10px 0; }
}

/* with the desktop header (85px) the live hero starts 3px up, under the header */
@media (min-width: 1024px) {
  .pricing-hero { margin-top: -3px; }
}