@layer components {
  .support {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    border: 1px solid var(--color-line);
    border-radius: calc(var(--radius-large) * 1.4);
    background:
      radial-gradient(30rem 18rem at 10% 0%, color-mix(in oklch, var(--color-coffee) 16%, transparent), transparent),
      radial-gradient(30rem 18rem at 90% 100%, var(--color-primary-surface), transparent),
      var(--color-surface);
    text-align: center;
    overflow: hidden;

    h2 {
      font-size: clamp(1.9rem, 4vw, 2.8rem);
    }

    p {
      max-width: 34rem;
      margin: 1rem auto 0;
      color: var(--color-ink-muted);
    }
  }

  .support__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
  }
}