@layer views {

  .vwc-ContactPage {
    background: var(--vwc-bg-primary);
    padding: 4rem 1rem;
  }

  .vwc-ContactIntro {
    text-align: center;
    margin-block-end: 3rem;
  }

  .vwc-ContactIntro h1 {
    font-size: var(--text-4xl);
    margin-block-end: 1rem;
  }

  .vwc-ContactIntro p {
    font-size: var(--text-lg);
    color: var(--vwc-text-secondary);
  }

  .vwc-ContactLayout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-block: 3rem;
  }

  .vwc-ContactBox {
    background: var(--vwc-bg-elevated);
    border: 2px solid var(--vwc-border-default);
    border-radius: var(--radius);
    padding: 2rem;
  }

  .vwc-ContactBox h2 {
    color: var(--vwc-accent-primary);
    margin-block-end: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .vwc-ContactBox-icon {
    font-size: 2rem;
  }

  .vwc-ContactForm {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .vwc-ImportantBox {
    background: var(--vwc-bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-block-start: 2rem;
  }

  .vwc-ImportantBox h3 {
    color: var(--vwc-accent-primary);
    margin-block-end: 1rem;
  }

  .vwc-ImportantBox p {
    margin-block: 0.5rem;
  }

  .vwc-ImportantBox a {
    color: var(--vwc-accent-primary);
    text-decoration: none;
  }

  .vwc-ImportantBox a:hover {
    text-decoration: underline;
  }

  .vwc-PrivacyBox {
    background: var(--vwc-bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-block-start: 2rem;
  }

  .vwc-PrivacyBox h3 {
    color: var(--vwc-accent-primary);
    margin-block-end: 1rem;
  }

  .vwc-PrivacyBox a {
    color: var(--vwc-accent-primary);
    text-decoration: none;
  }

  .vwc-PrivacyBox a:hover {
    text-decoration: underline;
  }
}