/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties;
.storybook-component--card-pricing {
  max-width: 300px;
  padding: calc(var(--hg-spacing, 4px) * 4);
}
@layer components {
  .card-pricing {
    background-color: var(--hgc-card-price-bg);
    border-color: var(--hgc-card-price-border);
    color: var(--hgc-card-price-text);
    &:hover, &:focus {
      border-color: var(--hgc-card-price-border-hover);
    }
    &.promote {
      background-color: var(--hgc-card-price-bg-promoted);
      border-color: var(--hgc-card-price-border-promoted);
      color: var(--hgc-card-price-text-promoted);
      --hgc-card-price-price: var(--hgc-card-price-price-promoted);
      --hgc-card-price-bg: var(--hgc-card-price-bg-promoted);
      --hgc-card-price-title: var(--hgc-card-price-title-promoted);
      &:hover, &:focus {
        background-color: var(--hgc-card-price-bg-promoted-hover);
        border-color: var(--hgc-card-price-border-promoted-hover);
        .card-pricing--features {
          background-color: var(--hgc-card-price-bg-promoted-hover);
        }
      }
    }
    .card-title {
      font-size: 1.375rem;
      --tw-leading: var(--hg-leading-tight, 1.25);
      line-height: var(--hg-leading-tight, 1.25);
      --tw-font-weight: var(--hg-font-weight-bold, 700);
      font-weight: var(--hg-font-weight-bold, 700);
      color: var(--hgc-card-price-title);
    }
    .card-description {
      font-size: var(--hg-text-lg, 1.125rem);
      line-height: var(--tw-leading, var(--hg-text-lg--line-height, 1.5));
      --tw-leading: 1.2;
      line-height: 1.2;
    }
    .card-price {
      font-size: var(--hg-text-4xl, 2.5rem);
      line-height: var(--tw-leading, var(--hg-text-4xl--line-height, 1.2));
      --tw-leading: 1;
      line-height: 1;
      color: var(--hgc-card-price-price);
      @media (width >= 64rem) {
        font-size: var(--hg-text-5xl, 3rem);
        line-height: var(--tw-leading, var(--hg-text-5xl--line-height, 1.083333));
      }
      @media (width >= 96rem) {
        font-size: 3.15rem;
      }
      font-family: var(--hgc-font-display);
      sup {
        font-size: 60% !important;
      }
    }
    .card-pricing--features {
      border-color: var(--hgc-card-price-divider);
      background-color: var(--hgc-card-price-bg);
      padding-top: calc(var(--hg-spacing, 4px) * 4);
      color: inherit;
      @media (width >= 48rem) {
        padding-top: calc(var(--hg-spacing, 4px) * 6);
      }
      @media (width >= 96rem) {
        padding-top: calc(var(--hg-spacing, 4px) * 7);
      }
      ul {
        margin-block: calc(var(--hg-spacing, 4px) * 0);
      }
      li {
        font-size: var(--hg-text-base, 1rem);
        line-height: var(--tw-leading, var(--hg-text-base--line-height, 1.5));
      }
    }
    .columns & {
      height: 100%;
    }
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
    }
  }
}
