/*
  ≤767 (Frames C/D): stacked. 768–1439 (Frames A/B): price left, text + button right.
  ≥1440: the narrow vertical card next to the table. Rem values are Figma px / 16, scaled by --k.
*/

.price-card {
  --btn-height: 3rem;
  --btn-padding-x: 1.6875rem;
  --btn-font-size: 1.125rem;
  --btn-weight: 600;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--price-card-bg, var(--gradient-blue));
  color: var(--white);
}

.price-card-purple {
  --price-card-bg: var(--gradient-purple);
}

.price-card > picture {
  display: contents;
}

.price-card > picture > source {
  display: none;
}

.price-card-glow {
  position: absolute;
  z-index: -1;
  left: calc(23.975rem * var(--k, 1));
  top: calc(-39.9438rem * var(--k, 1));
  width: calc(75.3rem * var(--k, 1));
  height: calc(75.3rem * var(--k, 1));
  max-width: none;
  pointer-events: none;
}

.price-card-top,
.price-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-card-top {
  gap: calc(1.5rem * var(--k, 1));
}

.price-card-bottom {
  gap: calc(0.8569rem * var(--k, 1));
}

.price-card .badge {
  --badge-padding: calc(0.3214rem * var(--k, 1)) calc(0.75rem * var(--k, 1));
  --badge-font-size: calc(0.8569rem * var(--k, 1));
  --badge-line-height: calc(1.0625rem * var(--k, 1));
  --badge-border-width: calc(0.1071rem * var(--k, 1));
}

.price-figure {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.price-figure strong {
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 4.5625rem;
}

.price-card-text {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.375rem;
  letter-spacing: -0.02em;
}

/* 480–767 (480 frame): token sizes, its own glow asset and position; CTA text in the card colour. */
@media (min-width: 480px) and (max-width: 767.98px) {
  .price-card {
    --btn-height: var(--btn-h);
    --btn-padding-x: var(--space-6);
    --btn-font-size: var(--text-btn);
    gap: var(--space-4);
    padding: var(--card-pad);
    border-radius: var(--radius-md);
  }

  .price-card-top {
    gap: var(--space-6);
  }

  .price-card-bottom {
    gap: var(--space-3);
  }

  .price-card .badge {
    --badge-padding: var(--space-1-5) var(--space-3);
    --badge-font-size: var(--text-caption);
    --badge-line-height: var(--leading-body);
  }

  .price-figure {
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .price-figure strong {
    font-size: var(--text-price);
    line-height: var(--leading-price);
  }

  .price-card-text {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .price-card-glow {
    left: 21rem;
    top: -42.9194rem;
    width: 81.25rem;
    height: 81.25rem;
  }

  .price-card-blue .btn-light {
    color: var(--blue);
  }

  .price-card-purple .btn-light {
    color: var(--purple);
  }
}

@media (min-width: 768px) {
  .price-card {
    --btn-height: calc(3rem * var(--k));
    --btn-padding-x: calc(1.6875rem * var(--k));
    --btn-font-size: calc(1.125rem * var(--k));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0;
    padding: calc(2.25rem * var(--k));
    border-radius: calc(var(--radius-lg) * var(--k));
  }

  .price-card-blue {
    --btn-font-family: var(--font-ui);
    --btn-font-size: calc(1rem * var(--k));
    --btn-weight: 700;
    --btn-letter-spacing: 0;
  }

  .price-card-bottom {
    align-items: stretch;
  }

  .price-figure {
    font-size: calc(1.25rem * var(--k));
    line-height: calc(1.5rem * var(--k));
  }

  .price-figure strong {
    font-size: calc(4.8569rem * var(--k));
    line-height: calc(5.1431rem * var(--k));
  }

  .price-card-text {
    font-size: calc(1.25rem * var(--k));
    line-height: 1.2;
  }
}

@media (min-width: 1440px) {
  .price-card {
    display: flex;
    flex: 0 0 24.2857rem;
    align-items: stretch;
    justify-content: space-between;
    min-height: 26.8569rem;
  }

  .price-card-purple {
    position: sticky;
    top: 0;
  }

  .price-card-top {
    gap: 3.1875rem;
  }

  .price-card .badge {
    --badge-padding: 0.4288rem 0.75rem;
  }

  .price-card-glow {
    left: 6.2856rem;
    top: -26.9288rem;
    width: 49.2857rem;
    height: 49.2857rem;
  }

  .price-card-text {
    line-height: normal;
  }
}