[data-page="pricing"] {
  padding-bottom: 5rem;

  [data-component="content"] {
    padding: 4rem 5rem 6rem;

    @media (max-width: 60rem) {
      padding: 3rem 1.5rem;
    }
  }

  [data-component="pricing-hero"] {
    text-align: center;
    margin-bottom: 3rem;

    h1 {
      font-size: 2rem;
      font-weight: 700;
      color: var(--color-text-strong);
      margin-bottom: 12px;

      @media (max-width: 40rem) {
        font-size: 1.5rem;
      }
    }

    p {
      color: var(--color-text);
      max-width: 40rem;
      margin: 0 auto;
      line-height: 1.6;
    }
  }

  [data-slot="plans"] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;

    @media (max-width: 60rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 34rem) {
      grid-template-columns: 1fr;
    }
  }

  [data-slot="plan"] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--color-border-weak);
    border-radius: 8px;
    background: var(--color-background);
  }

  [data-slot="plan"][data-highlighted] {
    border-color: var(--color-background-strong);
    box-shadow: 0 0 0 1px var(--color-background-strong);
  }

  [data-slot="badge"] {
    position: absolute;
    top: -0.75rem;
    left: 1.5rem;
    background: var(--color-background-interactive);
    color: var(--color-text-inverted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1;
  }

  [data-slot="plan-head"] {
    margin-bottom: 1.25rem;

    h2 {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--color-text-strong);
      margin-bottom: 6px;
    }

    [data-slot="tagline"] {
      color: var(--color-text-weak);
      font-size: 0.875rem;
      line-height: 1.5;
      min-height: 2.6em;
    }
  }

  [data-slot="price"] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 1.25rem;

    strong {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--color-text-strong);
    }

    span {
      color: var(--color-text-weak);
      font-size: 0.875rem;
    }
  }

  [data-slot="plan"] [data-slot="cta-button"] {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    background: var(--color-background-weak);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    transition:
      background 0.15s ease,
      transform 0.1s ease;

    &:hover {
      background: var(--color-background-weak-hover);
      text-decoration: none;
    }

    &:active {
      transform: scale(0.98);
    }
  }

  [data-slot="plan"] [data-slot="cta-button"][data-highlighted] {
    background: var(--color-background-strong);
    color: var(--color-text-inverted);
    border-color: var(--color-background-strong);
    transition: all 33ms ease-in-out;

    &:hover {
      background: #fdffcc;
      color: var(--color-text-inverted);
    }
  }

  [data-slot="features"] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;

    li {
      display: flex;
      gap: 10px;
      color: var(--color-text);
      font-size: 0.875rem;
      line-height: 1.5;

      span[aria-hidden] {
        color: var(--color-text-weak);
        flex-shrink: 0;
      }
    }
  }
}