/* ── 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: 820px;
  margin: 0 auto;
}

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

/* ── 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 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.pricing-features 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;
}

/* ── Testimonial spacing ── */

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

/* ── Product Hunt spacing ── */

/* ── 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;
  }
}

/* ── 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;
}

.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(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--black);
  margin: 0;
  letter-spacing: -0.02em;
}

.annual-banner-highlight {
  color: var(--blue);
  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='60' height='60' viewBox='0 0 60 60' 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: 93px 93px;
  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;
}

/* ── Shimmer variants ── */

/* Shared shimmer layer base — same icon grid at higher opacity, masked */
.annual-banner--sweep .annual-banner-anim .shimmer-overlay,
.annual-banner--wave .annual-banner-anim .shimmer-overlay,
.annual-banner--sparkle .annual-banner-anim .shimmer-overlay {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' 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='%231EB18E'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 93px 93px;
  transform: rotate(-15deg);
  opacity: 0.35;
}

/* Variant 1 — Diagonal sweep: mask reveals brighter icons */
.annual-banner--sweep .annual-banner-anim .shimmer-overlay {
  -webkit-mask-image: linear-gradient(120deg, transparent 0%, transparent 46%, black 48.5%, black 51.5%, transparent 54%, transparent 100%);
  mask-image: linear-gradient(120deg, transparent 0%, transparent 46%, black 48.5%, black 51.5%, transparent 54%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 200% 0;
  mask-position: 200% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Variant 2 — Wave pulse: horizontal mask sweep */
.annual-banner--wave .annual-banner-anim .shimmer-overlay {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 47%, black 49%, black 51%, transparent 53%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 47%, black 49%, black 51%, transparent 53%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 200% 0;
  mask-position: 200% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Variant 3 — Random sparkle */
.annual-banner--sparkle .annual-banner-anim .shimmer-overlay {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
}

.sparkle-dot {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,31,48,0.25) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .annual-banner--sweep .annual-banner-anim .shimmer-overlay {
    animation: banner-shimmer-sweep 7s ease-in-out infinite;
    will-change: mask-position, -webkit-mask-position;
  }

  .annual-banner--wave .annual-banner-anim .shimmer-overlay {
    animation: banner-shimmer-wave 7s ease-in-out infinite;
    will-change: mask-position, -webkit-mask-position;
  }

  .sparkle-dot {
    animation: sparkle-flash 7s ease-in-out infinite;
  }
}

@keyframes banner-shimmer-sweep {
  0%, 30% { -webkit-mask-position: 200% 0; mask-position: 200% 0; }
  100%     { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
}

@keyframes banner-shimmer-wave {
  0%, 30% { -webkit-mask-position: 200% 0; mask-position: 200% 0; }
  100%    { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
}

@keyframes sparkle-flash {
  0%, 80%  { opacity: 0; }
  90%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* ── 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;
  }

  .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;
  }
}

@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;
  }
}