/**
 * DiscoverPulse marketing page (/about/discover-pulse).
 *
 * Measurements follow the Figma "Final Version" frame (node 10401:8842,
 * 1440px wide). Everything is scoped to .dp-page so the shared header and
 * footer keep their own styles.
 */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.dp-page {
  --dp-ink: #101828;
  --dp-heading: #252728;
  --dp-text: #485569;
  --dp-purple: #7b3eb7;
  --dp-blue: #375db7;
  --dp-border: #f0f2f5;
  --dp-tile: linear-gradient(0deg, rgba(62, 104, 183, 0.024) 0%, rgba(98, 128, 184, 0.072) 100%);
  --dp-gutter: 69px;
  background-color: #fbfbfe;
}
.dp-main {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--dp-text);
  padding-bottom: 40px;
}
.dp-main :where(*, *::before, *::after) {
  box-sizing: border-box;
}
.dp-main :where(h1, h2, h3, h4, p, ul, blockquote) {
  margin: 0;
  padding: 0;
}
.dp-main :where(ul) {
  list-style: none;
}
.dp-main :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Hero title and share row. */
.dp-hero {
  width: 1280px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding-top: 57.5px;
}
.dp-hero__title {
  max-width: 1240px;
  color: var(--dp-ink);
  font-size: 44px;
  font-weight: 500;
  line-height: 57.5px;
  letter-spacing: 0;
}
.dp-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  margin-top: 33px;
  margin-right: -1.5px;
}
.dp-share__label {
  margin-right: 1px;
  color: var(--dp-text);
  font-size: 16.5px;
  line-height: 20px;
}
.dp-share__icon {
  display: block;
  width: 36px;
  height: 36px;
}
.dp-share__icon img {
  width: 36px;
  height: 36px;
}

/* White content panel that runs the full page height. */
.dp-panel {
  width: 1278px;
  max-width: 100%;
  margin: 25px auto 0;
  padding: 56px var(--dp-gutter) 0;
  border-radius: 12px;
  background: #fff;
}
.dp-section + .dp-section {
  margin-top: 0;
}
/* Figma places the closing section on its own card, 4.5px left of the panel. */
.dp-panel--advantage {
  display: flow-root;
  width: 1280px;
  margin-top: 0;
  padding: 0 var(--dp-gutter) 63px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  transform: translateX(-4.5px);
}
.dp-panel:not(.dp-panel--advantage) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Typography. */
.dp-lead {
  color: var(--dp-heading);
  font-size: 18.25px;
  font-weight: 500;
  line-height: 24px;
}
.dp-lead--countries {
  margin-top: 33.5px;
}
.dp-text {
  color: var(--dp-text);
  font-size: 16.75px;
  font-weight: 400;
  line-height: 27px;
}
.dp-intro > .dp-text {
  margin-top: 26px;
}
.dp-h2 {
  color: var(--dp-heading);
  font-size: 36.5px;
  font-weight: 500;
  line-height: 44px;
}
.dp-h3 {
  color: var(--dp-heading);
  font-size: 29.6px;
  font-weight: 500;
  line-height: 36px;
}

/* Buttons (Figma Buttons/Button: Subscribe Now + Schedule a demo today). */
.dp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  padding: 0 17px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  text-decoration: none;
  white-space: nowrap;
}
.dp-btn--primary {
  background: var(--dp-purple);
  color: #fff;
}
.dp-btn--secondary {
  border: 1px solid #eaecf0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  color: var(--dp-blue);
}
.dp-btn:hover,
.dp-btn:focus {
  text-decoration: none;
}
.dp-btn--primary:hover,
.dp-btn--primary:focus {
  background: #6a32a1;
  color: #fff;
}
.dp-btn--secondary:hover,
.dp-btn--secondary:focus {
  border-color: #d0d5dd;
  color: var(--dp-blue);
}

/* Tracked countries map and region grid. */
.dp-map {
  width: 1140px;
  margin-top: 34px;
}
.dp-regions {
  display: grid;
  grid-template-columns: 590px 1fr;
  row-gap: 28px;
  margin-top: 27px;
}
.dp-region h4 {
  color: var(--dp-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
}
.dp-region p {
  margin-top: 2px;
  color: var(--dp-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
}
.dp-region--wide {
  grid-column: 1 / -1;
}
.dp-regions__col > .dp-region + .dp-region {
  margin-top: 28px;
}
.dp-regions__col > .dp-region + .dp-region--offset {
  margin-top: 35.5px;
}
.dp-regions__col--left .dp-region p {
  max-width: 430px;
}
.dp-region--cta {
  align-self: start;
  padding-top: 21px;
}
.dp-region--cta .dp-btn {
  height: 40px;
  padding: 0 16px;
}

/* Feature grids with 100px icon tiles. */
.dp-matters .dp-h2 {
  margin-top: 57px;
}
.dp-features {
  display: grid;
  grid-template-columns: 590px 1fr;
  row-gap: 16px;
}
.dp-matters .dp-features {
  row-gap: 42px;
  margin-top: 42.5px;
}
.dp-feature {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.dp-why .dp-feature,
.dp-features--filters .dp-feature {
  align-items: center;
}
.dp-why .dp-feature h3,
.dp-features--filters .dp-feature h3 {
  padding-top: 0;
}
.dp-feature__tile {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
}
.dp-feature h3 {
  padding-top: 15px;
  color: var(--dp-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.02em;
}
.dp-feature p {
  max-width: 426px;
  margin-top: 7.5px;
  color: var(--dp-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.dp-features--large .dp-feature:nth-child(n+3) .dp-feature__tile {
  margin-top: -4px;
}
.dp-features--large .dp-feature h3 {
  padding-top: 0;
}
.dp-features--large .dp-feature p {
  max-width: 437px;
  margin-top: 7.5px;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
}

/* Traffic distribution card. */
.dp-traffic {
  width: 1139px;
  max-width: 100%;
  margin-top: 37.3px;
  padding: 40px;
  box-shadow: inset 0 0 0 1px var(--dp-border);
  border-radius: 16px;
  background: var(--dp-tile);
}
.dp-traffic__title {
  color: var(--dp-heading);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.02em;
}
.dp-traffic img {
  width: 100%;
  margin-top: 27px;
}
.dp-text--spaced {
  margin-top: 24.5px;
}
.dp-matters > .dp-cta {
  margin-top: 50.5px;
}

/* Why DiscoverPulse. */
.dp-why .dp-h2 {
  margin-top: 75px;
}
.dp-mock {
  width: 1140px;
}
.dp-mock--articles {
  margin-top: 30px;
}
.dp-why .dp-features {
  margin-top: 16px;
}
.dp-why .dp-feature p {
  line-height: 18px;
}
.dp-features--filters .dp-feature:nth-child(odd) p {
  line-height: 16.5px;
}
.dp-features--filters .dp-feature:nth-child(even) p {
  line-height: 18.5px;
}

/* Purple pricing band (Figma "Form"). */
.dp-anchor {
  display: block;
  height: 0;
}
.dp-pricing {
  margin: 81px -73px 0;
  padding: 40px;
  background: linear-gradient(180deg, #8f3dca 0%, #4b0082 100%);
}
.dp-key + .dp-pricing {
  margin: 80px -77px 0 -69px;
}
.dp-pricing__title {
  color: #fff;
  font-family: "Satoshi", "Inter", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: -0.01em;
}
.dp-pricing__card {
  display: grid;
  grid-template-columns: 445px 1fr;
  margin-top: 35.5px;
  padding: 40px;
  border: 1px solid #eff3f6;
  border-radius: 12px;
  background: #fff;
}
.dp-pricing__plan {
  position: relative;
  /* The live Stripe table renders 536px tall; reserve it so the band does
     not jump when the lazily loaded iframe appears. */
  min-height: 536px;
  padding-right: 40px;
  border-right: 1px solid #eaecf0;
}
.dp-pricing__plan stripe-pricing-table {
  display: block;
}
.dp-pricing__plan .discover-pricing-preview {
  display: none;
}
.dp-pricing__plan.discover-pricing-table--fallback stripe-pricing-table {
  display: none;
}
.dp-pricing__plan.discover-pricing-table--fallback .discover-pricing-preview {
  display: block;
}
.dp-pricing__benefits {
  padding: 8.5px 0 0 40px;
}
.dp-pricing__benefits-title {
  color: #1b1b1b;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
.dp-benefits {
  margin-top: 18px;
}
.dp-benefit {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dp-benefit + .dp-benefit {
  margin-top: 16px;
}
.dp-benefit__tile {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}
.dp-benefit h4 {
  padding-top: 0;
  color: var(--dp-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.02em;
}
.dp-benefit p {
  margin-top: 6px;
  color: var(--dp-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}

/* Key features. */
.dp-key .dp-h2 {
  margin-top: 122px;
}
.dp-key .dp-h3 {
  margin-top: 38px;
}
.dp-mock--insights {
  margin-top: 28.4px;
}
.dp-bullets {
  margin-top: 18.5px;
}
.dp-h3 + .dp-bullets {
  margin-top: 21px;
}
.dp-bullets li {
  position: relative;
  padding-left: 32px;
  color: var(--dp-text);
  font-size: 16.9px;
  line-height: 27px;
}
.dp-bullets li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.dp-key .dp-bullets + .dp-cta,
.dp-advantage .dp-bullets + .dp-cta {
  margin-top: 36px;
}
.dp-quote {
  max-width: 1112px;
  margin-top: 53px;
  padding: 0 0 0 46px;
  border-left: 4px solid var(--dp-purple);
  color: var(--dp-heading);
  font-size: 29.6px;
  font-weight: 500;
  line-height: 40px;
}
.dp-key .dp-h3--filters {
  margin-top: 87.6px;
}
.dp-mock--filters {
  margin: 27px 0 0 -13px;
}
.dp-features--filters {
  margin: 36px 0 0 -13px;
}
.dp-key .dp-h3 + .dp-text {
  margin-top: 20.5px;
}
.dp-mock--wide {
  width: 1164px;
  max-width: none;
  margin: 22px 0 0 -13px;
}
.dp-mock-pair {
  display: grid;
  grid-template-columns: 570px 570px;
  gap: 24px;
  margin: 0 0 0 -13px;
}
.dp-mock-pair + .dp-bullets {
  margin-top: 28.6px;
}
.dp-key .dp-h3--spaced {
  margin-top: 151.5px;
}
.dp-key .dp-features--filters + .dp-h3 {
  margin-top: 78px;
}
.dp-key .dp-mock--after-cta + .dp-h3 {
  margin-top: 58.8px;
}
.dp-key .dp-mock--seasonality {
  margin-top: 33.4px;
}
.dp-mock--after-cta {
  margin: 22.7px 0 0 -8px;
}

/* Advantage, strategy and Search Console FAQ. */
.dp-advantage .dp-h2 {
  margin-top: 115px;
}
.dp-advantage .dp-h3 {
  margin-top: 38px;
}
.dp-advantage .dp-h2--spaced {
  margin-top: 88px;
}
.dp-advantage .dp-text {
  margin-top: 30.5px;
}
.dp-advantage .dp-text p + p {
  margin-top: 16px;
}
.dp-advantage .dp-text .dp-bullets + p {
  margin-top: 16px;
}
.dp-advantage .dp-text__intro {
  max-width: 1100px;
}
.dp-advantage .dp-text__outro {
  max-width: 1104px;
}
.dp-advantage .dp-bullets li {
  font-size: 16.75px;
}
.dp-advantage .dp-text .dp-bullets {
  margin-top: 0;
}
.dp-advantage .dp-text .dp-text__gap {
  margin-top: 27px;
}
.dp-advantage .dp-h3--faq {
  margin-top: 59px;
  line-height: 48px;
}
.dp-advantage .dp-h3--faq + .dp-text {
  margin-top: 14.5px;
}
.dp-bullets--nested ul {
  margin-top: 0;
}
.dp-bullets--nested ul li::before {
  border: 1px solid currentColor;
  background: transparent;
}
.dp-bullets--nested ul ul li::before {
  border: 0;
  border-radius: 0;
  background: currentColor;
}
.dp-advantage .dp-text + .dp-cta {
  margin-top: 20.5px;
}

/* Tablet and mobile. */
@media (max-width: 1320px) {
  .dp-panel--advantage {
    transform: none;
  }
  .dp-panel {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .dp-mock,
  .dp-mock--wide,
  .dp-map {
    width: 100%;
  }
  .dp-mock--filters,
  .dp-mock--wide,
  .dp-features--filters,
  .dp-mock-pair,
  .dp-mock--after-cta {
    margin-left: 0;
  }
  .dp-mock--wide {
    max-width: 100%;
  }
  .dp-mock-pair {
    grid-template-columns: 1fr 1fr;
  }
  .dp-regions,
  .dp-features {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
  .dp-pricing,
  .dp-key + .dp-pricing {
    margin-left: -40px;
    margin-right: -40px;
  }
}
@media (max-width: 900px) {
  .dp-pricing__card {
    grid-template-columns: 1fr;
  }
  .dp-pricing__plan {
    min-height: 0;
    padding: 0 0 32px;
    border-right: 0;
    border-bottom: 1px solid #eaecf0;
  }
  .dp-pricing__benefits {
    padding: 32px 0 0;
  }
}
@media (max-width: 767px) {
  .dp-hero {
    padding-top: 32px;
  }
  .dp-hero__title {
    font-size: 30px;
    line-height: 38px;
  }
  .dp-share {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 20px 0 0;
  }
  .dp-panel {
    margin: 20px 0 0;
    padding: 32px 16px 40px;
    border-radius: 0;
  }
  .dp-panel--advantage {
    margin-top: 0;
    padding-top: 0;
  }
  .dp-h2,
  .dp-traffic__title {
    font-size: 26px;
    line-height: 34px;
  }
  .dp-h3,
  .dp-quote {
    font-size: 22px;
    line-height: 30px;
  }
  .dp-quote {
    padding-left: 20px;
  }
  .dp-regions,
  .dp-features,
  .dp-mock-pair {
    grid-template-columns: 1fr;
  }
  .dp-mock-pair {
    gap: 16px;
    margin-top: 16px;
  }
  .dp-region--cta {
    padding-top: 0;
  }
  .dp-feature {
    gap: 16px;
  }
  .dp-feature__tile {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
  .dp-feature h3,
  .dp-features--large .dp-feature:nth-child(n+3) .dp-feature__tile {
  margin-top: -4px;
}
.dp-features--large .dp-feature h3 {
    padding-top: 0;
  }
  .dp-features--large .dp-feature p {
    font-size: 15px;
    line-height: 23px;
  }
  .dp-traffic {
    padding: 20px;
  }
  .dp-pricing,
  .dp-key + .dp-pricing {
    margin-left: -16px;
    margin-right: -16px;
    padding: 32px 16px;
  }
  .dp-pricing__title {
    font-size: 28px;
    line-height: 36px;
  }
  .dp-pricing__card {
    padding: 20px;
  }
  .dp-matters .dp-h2,
  .dp-why .dp-h2,
  .dp-key .dp-h2,
  .dp-advantage .dp-h2,
  .dp-h3--spaced,
  .dp-key .dp-h3--filters {
    margin-top: 56px;
  }
  .dp-pricing {
    margin-top: 72px;
  }
}
