/* Pricing page (/pricing). Classes use the pr- prefix so they never collide with deploy.css (dp-). */
[hidden] {
  display: none !important;
}
.cls-hero {
  overflow: hidden;
}
.pr-hero {
  padding-bottom: var(--cl-gap-xxxl);
}
.pr-billing {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: var(--cl-gap-m);
  border-radius: var(--cl-radius-pill);
  background: var(--cl-bg);
  box-shadow: var(--cl-shadow-card-blue);
  position: relative;
}
.pr-billing button {
  display: inline-flex;
  align-items: center;
  gap: var(--cl-gap-xxs);
  border: 0;
  background: transparent;
  padding: 10px 22px;
  border-radius: var(--cl-radius-pill);
  font: inherit;
  font-size: var(--cl-text-m);
  font-weight: var(--cl-w-medium);
  color: var(--cl-fg-2);
  cursor: pointer;
}
.pr-billing button.is-active {
  background: var(--cl-gradient-blue);
  color: var(--cl-bg);
  box-shadow: var(--cl-inset-highlight);
}
.pr-billing button.is-active .cl-tag {
  background: rgba(255, 255, 255, 0.25);
  color: var(--cl-bg);
}
.pr-note {
  margin: var(--cl-gap-s) 0 0;
  font-size: var(--cl-text-s);
  color: var(--cl-fg-3);
  position: relative;
}

.pr-plans {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cl-gap-m);
  align-items: stretch;
}
.pr-plan {
  position: relative;
  padding: var(--cl-gap-l) 28px;
  gap: var(--cl-gap-xs);
}
.pr-plan--featured {
  border-color: var(--cl-blue);
  box-shadow: var(--cl-shadow-card-blue);
}
.pr-plan__badge {
  position: absolute;
  top: -14px;
  left: 28px;
  background: var(--cl-blue);
  color: var(--cl-bg);
}
.pr-plan__name {
  margin: 0;
  font-size: var(--cl-heading-m);
  font-weight: var(--cl-w-bold);
  line-height: var(--cl-lh-snug);
}
.pr-plan__lead {
  margin: 0;
  font-size: var(--cl-text-s);
  color: var(--cl-fg-3);
  line-height: var(--cl-lh-normal);
  min-height: 42px;
}
.pr-plan__was {
  margin: var(--cl-gap-xs) 0 0;
  display: flex;
  align-items: center;
  gap: var(--cl-gap-xxs);
  font-size: var(--cl-text-s);
  color: var(--cl-fg-4);
  min-height: 28px;
}
.pr-plan__was s {
  color: var(--cl-fg-3);
}
.pr-promo {
  background: rgba(214, 92, 40, 0.1);
  color: rgb(214, 92, 40);
}
.pr-plan__price {
  margin: 4px 0 0;
  line-height: 1;
  font-family: var(--cl-font-display);
  font-size: 40px;
  font-weight: var(--cl-w-bold);
  letter-spacing: -0.02em;
}
.pr-plan__price small {
  font-size: var(--cl-text-l);
  font-weight: var(--cl-w-medium);
  letter-spacing: 0;
}
.pr-plan__unit {
  margin: 0 0 var(--cl-gap-xs);
  font-size: var(--cl-text-s);
  color: var(--cl-fg-3);
}
.pr-plan__credit {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--cl-radius-s);
  background: var(--cl-blue-bg-2);
  color: var(--cl-blue-deepest);
  font-size: var(--cl-text-s);
  font-weight: var(--cl-w-medium);
  line-height: var(--cl-lh-normal);
}
.pr-checks {
  gap: var(--cl-gap-xs);
  flex: 1;
}
.pr-checks li {
  font-size: 15px;
  align-items: flex-start;
}
.pr-checks li::before {
  width: 22px;
  height: 22px;
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.pr-plan__cta {
  margin-top: var(--cl-gap-s);
  align-self: stretch;
  justify-content: center;
  text-decoration: none;
}

.pr-values {
  max-width: var(--cl-content-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cl-gap-m);
}
.pr-value {
  padding: var(--cl-gap-l) 28px;
  gap: var(--cl-gap-xs);
}
.pr-value h3 {
  margin: 0;
  font-size: var(--cl-text-xl);
  font-weight: var(--cl-w-bold);
  line-height: var(--cl-lh-snug);
}
.pr-value p {
  margin: 0;
  color: var(--cl-fg-3);
  font-size: 15px;
  line-height: var(--cl-lh-body);
}

.pr-table-wrap {
  max-width: var(--cl-content-w);
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--cl-radius-l);
  border: 1px solid var(--cl-border);
  background: var(--cl-bg);
}
.pr-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.pr-table th,
.pr-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cl-border-soft);
  text-align: center;
  color: var(--cl-fg-2);
}
.pr-table th:first-child,
.pr-table td:first-child {
  text-align: left;
  color: var(--cl-fg-1);
}
.pr-table thead th {
  position: sticky;
  top: 0;
  background: var(--cl-bg);
  font-size: var(--cl-text-m);
  font-weight: var(--cl-w-bold);
  color: var(--cl-fg-1);
  border-bottom: 1px solid var(--cl-border);
}
.pr-table thead th.is-featured {
  color: var(--cl-blue);
}
.pr-table tr.pr-group td {
  background: var(--cl-bg-tint);
  font-size: var(--cl-text-xs);
  font-weight: var(--cl-w-semibold);
  color: var(--cl-fg-3);
  padding-top: 10px;
  padding-bottom: 10px;
}
.pr-yes {
  color: var(--cl-blue);
  font-weight: var(--cl-w-bold);
}
.pr-no {
  color: var(--cl-fg-4);
}
.pr-soon {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--cl-radius-full);
  background: rgba(128, 32, 248, 0.1);
  color: var(--cl-ai-purple);
  font-weight: var(--cl-w-medium);
  vertical-align: 1px;
}

.pr-usage {
  max-width: var(--cl-content-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cl-gap-m);
}
.pr-usage .cl-card {
  gap: var(--cl-gap-s);
}
.pr-usage h3 {
  margin: 0;
  font-size: var(--cl-heading-m);
  font-weight: var(--cl-w-bold);
}
.pr-usage p {
  margin: 0;
  font-size: 15px;
  line-height: var(--cl-lh-body);
  color: var(--cl-fg-3);
}
.pr-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.pr-mini th {
  text-align: left;
  font-weight: var(--cl-w-medium);
  font-size: var(--cl-text-xs);
  color: var(--cl-fg-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--cl-border);
  white-space: nowrap;
}
.pr-mini td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--cl-border-soft);
  color: var(--cl-fg-2);
  white-space: nowrap;
}
.pr-mini td b {
  color: var(--cl-fg-1);
}
.pr-mini tr:last-child td {
  border-bottom: 0;
}
.pr-mini-wrap {
  overflow-x: auto;
}
.pr-free {
  max-width: 1040px;
  margin: var(--cl-gap-l) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cl-gap-m);
  padding: 20px 28px;
  border-radius: var(--cl-radius-m);
  border: 1px dashed var(--cl-border-strong);
  background: var(--cl-bg);
  font-size: 15px;
  color: var(--cl-fg-2);
  line-height: var(--cl-lh-body);
}
.pr-free b {
  color: var(--cl-fg-1);
}
.pr-free .cl-btn {
  flex-shrink: 0;
  text-decoration: none;
}
.pr-trial {
  margin: var(--cl-gap-xxs) 0 0;
  font-size: var(--cl-text-xs);
  color: var(--cl-fg-3);
  text-align: center;
}
.pr-checks li b {
  font-weight: var(--cl-w-bold);
  color: var(--cl-fg-1);
}
.pr-vs {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cl-gap-m);
}
.pr-vs__card {
  gap: var(--cl-gap-s);
}
.pr-vs__card--ours {
  border-color: var(--cl-blue);
  box-shadow: var(--cl-shadow-card-blue);
}
.pr-vs__label {
  margin: 0;
  font-size: var(--cl-text-m);
  font-weight: var(--cl-w-semibold);
  color: var(--cl-fg-3);
}
.pr-vs__card--ours .pr-vs__label {
  color: var(--cl-blue);
}
.pr-vs__num {
  margin: 0;
  font-family: var(--cl-font-display);
  font-size: var(--cl-heading-xl);
  font-weight: var(--cl-w-bold);
  letter-spacing: -0.02em;
}
.pr-vs__num span {
  font-size: var(--cl-text-l);
  font-weight: var(--cl-w-regular);
  color: var(--cl-fg-3);
  letter-spacing: 0;
}
.pr-vs__card:not(.pr-vs__card--ours) .pr-vs__num {
  color: var(--cl-fg-3);
}
.pr-vs__list {
  margin: 0;
}
.pr-values--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pr-faq {
  max-width: 860px;
}

@media (max-width: 1100px) {
  .pr-plans,
  .pr-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--cl-gap-xl);
  }
}
@media (max-width: 980px) {
  .pr-usage,
  .pr-vs,
  .pr-values--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .pr-plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }
  .pr-free {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .section {
    padding: 72px 16px;
  }
  .pr-plans,
  .pr-values {
    grid-template-columns: minmax(0, 1fr);
  }
  .cl-card {
    padding: 28px 20px;
  }
}