/* ── Pricing Hero ── */

.pricing-hero {
  padding: 156px 0 48px;
  text-align: center;
}

.pricing-hero-content {
  max-width: 80%;
  margin: 0 auto;
}

.pricing-hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--black);
  margin: 0;
}

.pricing-hero-sub {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--grey-text);
  max-width: var(--text-max);
  margin: 16px auto 0;
  line-height: 1.5;
}

/* ── Pricing Cards ── */

.pricing-cards-section {
  padding: 48px 0 0;
}

.pricing-cards {
  display: flex;
  gap: 28px;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
}

.pricing-card {
  flex: 1;
  max-width: 420px;
  border: 2.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: 36px;
  padding-top: 48px;
  position: relative;
}

.pricing-card--popular {
  border-color: var(--blue);
}

.pricing-card-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ── Card internals ── */

.pricing-card-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 16px;
}

.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
}

.pricing-price {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.02em;
}

.pricing-period {
  font-size: 15px;
  color: var(--grey-text);
}

.pricing-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 28px;
}

/* ── Feature list ── */

.pricing-features {
  margin: 0;
}

.pricing-feature-group {
  margin-top: 20px;
}

.pricing-feature-group:first-child {
  margin-top: 0;
}

.pricing-feature-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-text);
  margin-bottom: 8px;
}

.pricing-feature-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-feature-group li {
  font-size: 16px;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-feature-group li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ED1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

.pricing-feature-group li.is-negative {
  color: var(--grey-text);
}

.pricing-feature-group li.is-negative::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5484D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* ── Tooltip ── */

.pricing-tooltip-trigger {
  text-decoration: underline dotted var(--grey-text);
  text-underline-offset: 3px;
  cursor: help;
  position: relative;
}

.pricing-tooltip-trigger::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--grey-surface);
  color: var(--black);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  max-width: 260px;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
  font-weight: 400;
}

.pricing-tooltip-trigger:hover::after,
.pricing-tooltip-trigger:focus-visible::after {
  opacity: 1;
}

/* ── Testimonial spacing ── */

.pricing-testimonial {
  padding: 80px 0 0;
}

/* ── Product Hunt spacing ── */

.pricing-product-hunt {
  padding: 48px 0 0;
  text-align: center;
}

/* ── Social Proof spacing ── */

.pricing-social-proof {
  padding: 64px 0 0;
}

.pricing-social-proof-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--black);
  text-align: center;
  margin: 0;
}

.pricing-social-proof .social-proof-logos {
  margin-top: 56px;
}

.pricing-ph-link {
  display: block;
  text-align: center;
  margin-top: 80px;
}

/* ── FAQ Section ── */

.faq-section {
  padding: 100px 0 0;
}

.faq-heading {
  text-align: center;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--black);
  margin: 0 0 48px;
  letter-spacing: -0.02em;
}

.faq-list {
  max-width: var(--text-max);
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  text-align: left;
}

.faq-question:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.faq-icon {
  font-size: 22px;
  color: var(--grey-text);
  flex-shrink: 0;
  transition: transform 0.25s ease;
  line-height: 1;
  user-select: none;
}

.faq-item--open .faq-icon {
  transform: rotate(45deg);
}

/* ── FAQ Answer animation ── */

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-answer > p {
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  color: var(--grey-text);
  line-height: 1.6;
}

.faq-item--open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item--open .faq-answer > p {
  padding-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer {
    transition: none;
  }
  .faq-icon {
    transition: none;
  }
  .pricing-tooltip-trigger::after {
    transition: none;
  }
  .btn-outline {
    transition: none;
  }
}

/* ── Credit Packs ── */

.credit-packs-section {
  padding: 80px 0 0;
}

.credit-packs-heading {
  text-align: center;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--black);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.credit-packs-sub {
  text-align: center;
  color: var(--grey-text);
  max-width: var(--text-max);
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.5;
}

.credit-packs {
  display: flex;
  gap: 20px;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
}

.credit-pack-card {
  flex: 1;
  max-width: 200px;
  background: var(--grey-surface);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.credit-pack-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.credit-pack-currency {
  font-size: 16px;
  color: var(--grey-text);
  font-weight: 700;
}

.credit-pack-amount {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: var(--black);
}

.credit-pack-type {
  font-size: 14px;
  color: var(--grey-text);
  margin: 4px 0 16px;
}

.credit-pack-searches {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.credit-pack-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
}

.credit-pack-unit {
  font-size: 14px;
  color: var(--grey-text);
}

.btn-outline {
  border: 2px solid var(--blue);
  color: var(--blue);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 8px 24px;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-outline:hover {
  background: var(--blue);
  color: #fff;
}

.btn-outline:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Contact Prompt ── */

.contact-prompt {
  padding: 64px 0 100px;
}

.contact-prompt-text {
  text-align: center;
  font-size: 18px;
  color: var(--grey-text);
  margin: 0;
}

.contact-prompt-text a {
  color: var(--blue);
  text-decoration: none;
}

.contact-prompt-text a:hover {
  text-decoration: underline;
}

/* ── Annual Banner ── */

.annual-banner-section {
  padding: 32px 0 0;
}

.annual-banner {
  background: var(--grey-surface);
  border: none;
  border-radius: var(--radius-card);
  padding: 24px 48px;
  text-align: left;
  position: relative;
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
}

.annual-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.annual-banner-text-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.annual-banner-header {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  color: var(--black);
  margin: 0;
  letter-spacing: -0.02em;
}

.annual-banner-highlight {
  color: var(--green);
  font-weight: 700;
}

.annual-banner-text {
  font-size: 16px;
  color: var(--grey-text);
  margin: 0;
}

.annual-banner-cta {
  padding: 8px 24px;
  min-height: auto;
  flex-shrink: 0;
}

/* ── Gift grid animation ── */

.annual-banner-anim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.annual-banner-anim::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 7.00028H17.65C17.8782 6.53305 17.9979 6.02027 18 5.50028C18.003 4.80361 17.7975 4.12197 17.4098 3.54311C17.0221 2.96425 16.4701 2.51467 15.8247 2.25222C15.1794 1.98977 14.4703 1.92648 13.7886 2.07049C13.107 2.2145 12.4841 2.55922 12 3.06028C11.5159 2.55922 10.893 2.2145 10.2114 2.07049C9.52975 1.92648 8.82061 1.98977 8.17525 2.25222C7.5299 2.51467 6.97786 2.96425 6.59019 3.54311C6.20252 4.12197 5.99697 4.80361 6 5.50028C6.00213 6.02027 6.12178 6.53305 6.35 7.00028H6C5.20435 7.00028 4.44129 7.31635 3.87868 7.87896C3.31607 8.44157 3 9.20463 3 10.0003V12.0003C3 12.2655 3.10536 12.5199 3.29289 12.7074C3.48043 12.8949 3.73478 13.0003 4 13.0003H5V19.0003C5 19.7959 5.31607 20.559 5.87868 21.1216C6.44129 21.6842 7.20435 22.0003 8 22.0003H16C16.7956 22.0003 17.5587 21.6842 18.1213 21.1216C18.6839 20.559 19 19.7959 19 19.0003V13.0003H20C20.2652 13.0003 20.5196 12.8949 20.7071 12.7074C20.8946 12.5199 21 12.2655 21 12.0003V10.0003C21 9.20463 20.6839 8.44157 20.1213 7.87896C19.5587 7.31635 18.7956 7.00028 18 7.00028ZM11 20.0003H8C7.73478 20.0003 7.48043 19.8949 7.29289 19.7074C7.10536 19.5199 7 19.2655 7 19.0003V13.0003H11V20.0003ZM11 11.0003H5V10.0003C5 9.73506 5.10536 9.48071 5.29289 9.29318C5.48043 9.10564 5.73478 9.00028 6 9.00028H11V11.0003ZM11 7.00028H9.5C9.20333 7.00028 8.91332 6.91231 8.66665 6.74749C8.41997 6.58266 8.22771 6.3484 8.11418 6.07431C8.00065 5.80022 7.97094 5.49862 8.02882 5.20765C8.0867 4.91667 8.22956 4.6494 8.43934 4.43962C8.64912 4.22984 8.91639 4.08698 9.20736 4.0291C9.49834 3.97123 9.79994 4.00093 10.074 4.11446C10.3481 4.22799 10.5824 4.42025 10.7472 4.66693C10.912 4.9136 11 5.20361 11 5.50028V7.00028ZM13 5.50028C13 5.20361 13.088 4.9136 13.2528 4.66693C13.4176 4.42025 13.6519 4.22799 13.926 4.11446C14.2001 4.00093 14.5017 3.97123 14.7926 4.0291C15.0836 4.08698 15.3509 4.22984 15.5607 4.43962C15.7704 4.6494 15.9133 4.91667 15.9712 5.20765C16.0291 5.49862 15.9994 5.80022 15.8858 6.07431C15.7723 6.3484 15.58 6.58266 15.3334 6.74749C15.0867 6.91231 14.7967 7.00028 14.5 7.00028H13V5.50028ZM17 19.0003C17 19.2655 16.8946 19.5199 16.7071 19.7074C16.5196 19.8949 16.2652 20.0003 16 20.0003H13V13.0003H17V19.0003ZM19 11.0003H13V9.00028H18C18.2652 9.00028 18.5196 9.10564 18.7071 9.29318C18.8946 9.48071 19 9.73506 19 10.0003V11.0003Z' fill='%23071F30'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  transform: rotate(-15deg);
  opacity: 0.15;
}

.annual-banner-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #F6F7F9 0%, transparent 60%);
  z-index: 1;
}

/* ── Drift animation ── */

@media (prefers-reduced-motion: no-preference) {
  .annual-banner-anim::before {
    animation: banner-drift 15s linear infinite;
  }
}

@keyframes banner-drift {
  0%   { transform: rotate(-15deg) translate(0, 0); }
  100% { transform: rotate(-15deg) translate(128px, 128px); }
}

/* ── Responsive ── */

@media (max-width: 767px) {
  .pricing-hero {
    padding: 180px 0 32px;
  }

  .pricing-hero-content {
    max-width: 100%;
  }

  .pricing-cards {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .pricing-card {
    max-width: 100%;
    width: 100%;
  }

  .annual-banner-section {
    padding: 24px 0 0;
  }

  .annual-banner {
    padding: 32px 24px;
  }

  .annual-banner-cta {
    width: 100%;
    text-align: center;
    min-height: 48px;
    padding: 12px 24px;
  }

  .annual-banner-anim::after {
    background: linear-gradient(to right, #F6F7F9 0%, transparent 80%);
  }

  .pricing-testimonial {
    padding: 48px 0 0;
  }

  .pricing-social-proof {
    padding: 40px 0 0;
  }

  .faq-section {
    padding: 64px 0 0;
  }

  .faq-heading {
    margin-bottom: 32px;
  }

  .contact-prompt {
    padding: 48px 0 64px;
  }

  .credit-packs-section {
    padding: 48px 0 0;
  }

  .credit-packs {
    flex-direction: column;
    align-items: center;
  }

  .credit-pack-card {
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pricing-testimonial {
    padding: 64px 0 0;
  }

  .pricing-social-proof {
    padding: 48px 0 0;
  }

  .faq-section {
    padding: 80px 0 0;
  }

  .contact-prompt {
    padding: 48px 0 80px;
  }

  .credit-packs {
    flex-wrap: wrap;
  }

  .credit-pack-card {
    max-width: none;
    flex: 0 0 calc(50% - 10px);
  }
}