@layer base {
  .vwc-Container {
    width: min(100% - 2rem, 1280px);
    margin-inline: auto;

    &--narrow {
      max-width: 800px;
    }

    &--wide {
      max-width: 1440px;
    }
  }

  .vwc-SkipLink {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 1rem 1.5rem;
    background: var(--vwc-accent-primary);
    color: var(--vwc-navy-deep);
    font-weight: 700;
    text-decoration: none;
    z-index: 9999;

    &:focus {
      top: 0;
    }
  }

  .vwc-Lead {
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--vwc-text-secondary);
  }

  .vwc-Intro {
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-block: 2rem;
  }

  .vwc-SectionTitle {
    font-size: var(--text-3xl);
    margin-block: 2.5rem 1.5rem;
    text-align: center;
    color: var(--vwc-accent-primary);
  }

  .vwc-SectionSubtitle {
    font-size: var(--text-lg);
    text-align: center;
    color: var(--vwc-text-secondary);
    margin-block-end: 3rem;
  }
}