/* Styled like the site's other surface cards: surface-1 fill, 32px padding
   (24 on mobile), xs radius — with a 3px brand-gradient border (padding-box /
   border-box layering, since border-color can't be a gradient). */
.upgrade-cta {
  margin-top: var(--spacing-16);
  padding: var(--spacing-32);
  border: 3px solid transparent;
  border-radius: var(--corner-radius-xs);
  background:
    linear-gradient(var(--background-surface-1), var(--background-surface-1)) padding-box,
    var(--brand-gradient) border-box;
}
@media (max-width: 47.999rem) {
  .upgrade-cta { padding: var(--spacing-24); }
}

.upgrade-cta-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);

  & .upgrade-cta-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
    margin-top: var(--spacing-2);
    flex-shrink: 0;
  }

  & .upgrade-cta-title {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-600);
    color: var(--text-primary);
  }

  & .upgrade-cta-text {
    font-size: var(--font-size-12);
    color: var(--text-secondary);
    margin-top: var(--spacing-4);
  }
}

.upgrade-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12);
  margin-top: var(--spacing-12);

  & .upgrade-cta-tag {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-600);
    color: var(--text-primary);
  }

  & .upgrade-cta-promo-link {
    font-size: var(--font-size-12);
    color: var(--text-primary);

    &:hover { color: var(--text-hover); }
  }
}
html.theme-dark .upgrade-cta-promo-link,
html.theme-dark .upgrade-cta-promo-link:hover { color: var(--text-hover); }