/* ============================================================== *
 * /pricing footer                                                *
 *                                                                *
 * The shared Footer component is styled by landing-globals.css,  *
 * which /pricing deliberately does not load (its Webflow .gap-*  *
 * and .container rules collide with this page's Tailwind         *
 * layout). This file carries just the footer's own rules,        *
 * scoped under .pricing-page so nothing leaks either way,        *
 * plus the light treatment the agencies page and light home      *
 * already give the footer on white pages.                        *
 * ============================================================== */

/* --- layout (from landing-globals.css, footer subtree only) --- */

.pricing-page .padding-footer {
  padding-top: 64px;
  padding-bottom: 38px;
}
.pricing-page .padding-footer .container {
  width: 100%;
  max-width: 1320px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-page .footer-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 48px;
}
.pricing-page .footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.pricing-page .footer-logo {
  width: 140px;
}
.pricing-page .footer-links-wrapper {
  display: flex;
  align-items: flex-start;
  column-gap: 64px;
}
.pricing-page .footer-links-row {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.pricing-page .padding-footer .gap-8 {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.pricing-page .footer-links-title {
  font-size: 20px;
  font-weight: 500;
}
.pricing-page .footer-link {
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
}
.pricing-page .footer-bottom {
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pricing-page .horisontal-flex-16 {
  display: flex;
  align-items: center;
  column-gap: 16px;
}
.pricing-page .border-radius-60 {
  border-radius: 60px;
}
.pricing-page .market-icon {
  width: 140px;
  transition: all 300ms 0ms ease;
}
.pricing-page .market-icon:hover {
  transform: scale(0.99, 0.99);
}

/* --- light treatment (same recipe as agencies / light home:     *
 *     a black slab would cut the white page in half)             */

.pricing-page .padding-footer {
  background: transparent;
  border-top: 1px solid #e7e7ea;
}
.pricing-page .footer-links-title {
  color: #0a0a0a;
}
.pricing-page .footer-link,
.pricing-page .footer-bottom {
  color: #6b6b74;
}
.pricing-page .footer-link:hover {
  /* the shared hover paints a pink→gold gradient into the text */
  background: linear-gradient(200deg, #ec008c 0%, #fc8b67 70%, #ffd46d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the component hardcodes the white wordmark; paint the dark one the
   navbar already serves on light pages (content:url() is Chrome-only,
   so push the intrinsic image out of its box instead) */
.pricing-page .padding-footer .footer-logo {
  width: 140px;
  height: 35px;
  object-position: -9999px 0;
  background: url("/assets/c98549a0324e9861b0d30226b687035d_4649.svg") no-repeat
    left center / contain;
}
/* the store badges are self-contained white pills; give them an edge */
.pricing-page .footer-bottom img {
  border: 1px solid #e7e7ea;
  border-radius: 9px;
}

/* --- responsive (from landing-globals.css) --- */

@media screen and (max-width: 1167px) {
  .pricing-page .footer-top {
    flex-direction: column;
    row-gap: 20px;
  }
  .pricing-page .footer-links-wrapper {
    grid-template-columns: 1fr 1fr;
    display: grid;
    row-gap: 20px;
  }
  .pricing-page .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .pricing-page .padding-footer {
    padding-top: 32px;
  }
  .pricing-page .footer-wrapper {
    row-gap: 32px;
  }
}
@media screen and (max-width: 500px) {
  .pricing-page .border-radius-60 {
    border-radius: 40px;
  }
  .pricing-page .footer-links-row {
    row-gap: 14px;
  }
  .pricing-page .footer-link {
    font-size: 16px;
  }
  .pricing-page .footer-bottom {
    font-size: 12px;
  }
}