.upgrade-cta {
  margin-top: var(--spacing-16);
  padding: var(--spacing-16);
  border: var(--stroke-weight-1) solid var(--border-default);
  border-radius: var(--corner-radius-md);
}
html.theme-dark .upgrade-cta {
  background-image: linear-gradient(to bottom right, color-mix(in oklab, var(--color-pink-800) 30%, transparent), color-mix(in oklab, var(--color-spring-green-30) 30%, transparent));
  border-color: var(--border-default);
}

.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-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-600);
    color: var(--text-primary);
    background-color: var(--background-surface-2);
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--corner-radius-sm);
    transition: background-color 150ms;

    &:hover { background-color: var(--background-surface-2); }
  }

  /* Primary plan (Deep) — filled with the brand gradient so it reads as the
     recommended option next to the grey Lifetime button. */
  & .upgrade-cta-button--primary {
    background-color: transparent;
    background-image: var(--brand-gradient);
    color: var(--text-light);

    &:hover {
      background-color: transparent;
      background-image: var(--brand-gradient-hover);
    }
  }

  & .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); }