@layer styles {
  html {
    background-color: var(--surface-primary);
    color: var(--text-primary);
  }

  body {
    padding-block-end: var(--spacing-xxl);
    @media (max-width: 600px) {
      padding-block-end: var(--spacing-md);
    }
  }

  ul.plain {
    padding-inline-start: 0;
    list-style: none;
  }

  .main-layout {
    --gutter: var(--spacing-md);

    display: grid;
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(auto, 1000px)
      minmax(var(--gutter), 1fr);

    > * {
      grid-column: 2;
    }

    @media (max-width: 1200px) {
      --gutter: var(--spacing-xxl);
    }

    @media (max-width: 800px) {
      --gutter: var(--spacing-lg);
    }

    @media (max-width: 600px) {
      --gutter: var(--spacing-md);
    }
  }

  main {
    row-gap: var(--spacing-xxl);

    padding-block-start: var(--spacing-md);
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;

    @media (max-width: 600px) {
      row-gap: var(--spacing-lg);
    }
  }

  body {
    overscroll-behavior-x: contain;
  }

  section {
    scroll-snap-align: start;
  }

  .hero {
    row-gap: var(--spacing-sm);
    background: radial-gradient(
      circle at 70% 70%,
      rgba(125, 169, 255, 0.15) 0%,
      rgba(16, 17, 19, 1) 80%
    );
    padding-block: var(--spacing-xxl);
    line-height: 1;

    > * {
      max-width: fit-content;
    }

    .hero-subtitle {
      font-size: var(--body-lg);
    }

    .hero-title {
      margin: 0;
      font-weight: 200;
      font-size: var(--body-3xl);
    }

    @media (max-width: 600px) {
      justify-items: center;
      background: radial-gradient(
        circle at 50% 100%,
        rgba(125, 169, 255, 0.15) 0%,
        rgba(16, 17, 19, 1) 80%
      );
      padding-block: var(--spacing-xl) var(--spacing-lg);
      text-align: center;

      .hero-subtitle {
        margin-block-end: var(--spacing-md);
        font-size: var(--body-md);
      }

      .hero-title {
        font-size: var(--body-xl);
      }
    }
  }

  section > h2 {
    grid-column: 1 / -1;
  }

  ul {
    padding-inline-start: calc(var(--spacing-md) + var(--spacing-sm));

    @media (max-width: 600px) {
      text-wrap: pretty;
    }
  }

  .icon {
    h3:has(&) {
      display: flex;
      align-items: start;
      gap: var(--spacing-sm);
    }

    a:has(&) {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }
  }

  .flyout {
    position: fixed;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
  }

  .proposal {
    grid-column: 1 / -1;
    box-shadow: var(--elevation-primary);
    background: var(--accent-dark);
    padding: var(--spacing-xl) var(--spacing-lg);

    h2 {
      max-width: fit-content;
    }
  }

  .price-tag {
    border: 2px solid var(--accent-secondary);
    border-radius: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    max-width: fit-content;
  }
}