/* -------------------------------------------------------- */
/* 🔹 Pricing Section                                       */
/* -------------------------------------------------------- */
/* Free to use — one card listing what Premium adds          */

.pricing {
  padding-block: var(--website-section-spacing);
  background-color: var(--color-primary-container);
}

.pricing__card {
  max-width: 520px;
  margin-inline: auto;
  padding: var(--space-xxxl) var(--space-xl);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}


/* -------------------------------------------------------- */
/* 🔹 Hero — Crown + headline                               */
/* -------------------------------------------------------- */

.pricing__hero {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* -------------------------------------------------------- */
/* 🔹 Premium Checklist                                     */
/* -------------------------------------------------------- */

.pricing__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
  list-style: none;
  padding: 0;
}

.pricing__item {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  font-size: var(--text-body-large);
  color: var(--color-on-surface);
}

.pricing__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-primary);
}


/* -------------------------------------------------------- */
/* 🔹 Plan Cards                                            */
/* -------------------------------------------------------- */

.pricing__plans {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.pricing__plan {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-l);
  border-radius: var(--radius);
  border: 1px solid var(--color-divider);
  background-color: var(--color-surface);
}

.pricing__plan-info {
  flex: 1;
}

.pricing__plan-name {
  font-size: var(--text-body-large);
  font-weight: 400;
  color: var(--color-on-surface);
}

/* Corner tag on the year plan — pinned to the top-right edge */
.pricing__plan-badge {
  position: absolute;
  top: -9px;
  right: var(--space-m);
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background-color: var(--color-secondary);
  border-radius: 6px;
}

.pricing__plan-price {
  flex-shrink: 0;
  font-size: var(--text-body-large);
  font-weight: 400;
  color: var(--color-on-surface);
}


/* -------------------------------------------------------- */
/* 🔹 CTA                                                   */
/* -------------------------------------------------------- */

.pricing__cta {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-s);
}

.pricing__app-store img {
  height: 54px;
}

.pricing__trust {
  text-align: center;
  font-size: var(--text-body-small);
  color: var(--color-on-surface-variant);
}