@layer components {
  .vt-eyebrow {
    align-items: center;
    color: var(--color-accent);
    display: flex;
    font-family: var(--font-family-body);
    font-size: var(--type-eyebrow);
    font-weight: var(--weight-eyebrow);
    gap: var(--space-4);
    letter-spacing: var(--tracking-label);
    line-height: 1.2;
    text-transform: uppercase;
  }

  .vt-eyebrow::before {
    background: currentColor;
    block-size: 1px;
    content: "";
    inline-size: 1.875rem;
  }

  .vt-section-intro {
    max-width: 48rem;
  }

  .vt-section-intro__title {
    margin-block-start: var(--space-5);
  }

  .vt-section-intro__copy {
    color: var(--color-text-muted);
    font-size: var(--type-section-copy);
    line-height: var(--line-height-copy);
    margin-block-start: var(--space-6);
    max-width: var(--width-copy);
  }

  .vt-section--dark .vt-section-intro__copy {
    color: var(--color-text-inverse-muted);
  }

  .vt-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .vt-button {
    align-items: center;
    appearance: none;
    background: var(--color-accent);
    border: var(--border-width-subtle) solid var(--color-accent);
    border-radius: var(--radius-0);
    color: var(--color-forest-950);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family-body);
    font-size: var(--type-action);
    font-weight: var(--weight-action);
    gap: var(--space-3);
    justify-content: center;
    letter-spacing: var(--tracking-wide);
    min-block-size: 3.25rem;
    padding: 0.875rem 1.375rem;
    text-decoration: none;
    text-transform: uppercase;
    transition:
      background-color var(--duration-hover) var(--ease-out),
      border-color var(--duration-hover) var(--ease-out),
      box-shadow var(--duration-hover) var(--ease-out),
      color var(--duration-hover) var(--ease-out),
      translate var(--duration-hover) var(--ease-out);
  }

  .vt-button--secondary {
    background: transparent;
    border-color: rgb(255 255 255 / 58%);
    color: var(--color-text-inverse);
  }

  .vt-button--dark {
    background: var(--color-forest-900);
    border-color: var(--color-forest-900);
    color: var(--color-text-inverse);
  }

  .vt-chip {
    border: var(--border-width-subtle) solid var(--color-border);
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: var(--font-size-00);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    padding: var(--space-2) var(--space-4);
    text-transform: uppercase;
  }

  .vt-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: var(--space-10);
  }

  .vt-card {
    background: transparent;
    border: var(--border-width-card) solid var(--border-color-card);
    min-block-size: 22rem;
    padding: var(--layout-card-padding);
    position: relative;
    transition:
      background-color var(--duration-hover) var(--ease-out),
      border-color var(--duration-hover) var(--ease-out),
      box-shadow var(--duration-hover) var(--ease-out),
      scale var(--duration-hover) var(--ease-out),
      translate var(--duration-hover) var(--ease-out);
  }

  .vt-card__number {
    color: var(--color-accent);
    font-family: var(--font-family-display);
    font-size: var(--type-card-number);
    font-weight: var(--font-weight-regular);
  }

  .vt-card__title {
    font-size: var(--type-card-title);
    margin-block-start: auto;
  }

  .vt-card__copy {
    color: var(--color-text-inverse-muted);
    font-size: var(--type-card-copy);
    line-height: var(--line-height-copy);
    margin-block-start: var(--space-5);
  }

  .vt-card__inner {
    display: flex;
    flex-direction: column;
    min-block-size: 100%;
  }

  .vt-stat {
    border-block: var(--border-width-hairline) solid var(--color-border-inverse);
    padding-block: var(--space-8);
  }

  .vt-stat__value {
    color: var(--color-accent);
    font-family: var(--font-family-display);
    font-size: var(--type-stat-number);
    font-weight: var(--weight-display);
    line-height: var(--line-height-solid);
  }

  .vt-stat__label {
    color: var(--color-text-inverse-muted);
    font-size: var(--type-card-copy);
    margin-block-start: var(--space-4);
    max-width: 24rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .vt-button:is(:hover, :focus-visible) {
      background: var(--color-white);
      border-color: var(--color-white);
      box-shadow: var(--shadow-button-hover);
      color: var(--color-forest-950);
      translate: 0 var(--interaction-lift);
    }

    .vt-button--secondary:is(:hover, :focus-visible) {
      color: var(--color-forest-950);
    }

    .vt-card:is(:hover, :focus-within) {
      background: var(--color-surface-dark-raised);
      border-color: var(--border-color-card-hover);
      box-shadow: var(--shadow-card-hover);
      scale: var(--interaction-card-scale);
    }
  }

  @media (max-width: 1024px) {
    .vt-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767px) {
    .vt-card-grid {
      grid-template-columns: 1fr;
    }

    .vt-card {
      min-block-size: 18rem;
    }

    .vt-actions {
      align-items: stretch;
      flex-direction: column;
    }

    .vt-button {
      inline-size: 100%;
    }
  }
}