@layer demo {
  body {
    margin: 0;
    background: oklch(0.975 0.009 90);
  }
  header,
  main,
  footer {
    width: min(1440px, calc(100% - 5rem));
    margin-inline: auto;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.7rem;
    border-bottom: 1px solid var(--cs-border);
    gap: 1rem;
  }
  .wordmark {
    text-decoration: none;
    color: var(--construction-search-accent);
    font-weight: 750;
    letter-spacing: -0.06em;
    font-size: 1.35rem;
    & span {
      font-weight: 400;
    }
  }
  .edition,
  .eyebrow {
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    color: var(--cs-muted);
  }
  .intro {
    padding-block: 2.7rem 2.3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 0.6rem 3rem;
    & .eyebrow {
      grid-column: 1 / -1;
      margin: 0;
    }
    & h1 {
      font-size: clamp(2.3rem,4vw,3.8rem);
      line-height: 1.08;
      letter-spacing: -0.06em;
      font-weight: 600;
      margin: 0;
    }
    & p:last-child {
      max-width: 35rem;
      color: var(--cs-muted);
      font-size: 1.05rem;
      margin: 0.5rem 0 0;
    }
  }
  .second-demo {
    margin-top: 2rem;
    & summary {
      cursor: pointer;
      padding: 1rem 0;
    }
  }
  footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 2rem;
    color: var(--cs-muted);
    font-size: 0.78rem;
  }
  @media (max-width: 700px) {
    header,
    main,
    footer {
      width: calc(100% - 2rem);
    }
    .edition {
      display: none;
    }
    .intro {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding-block: 2rem;
    }
  }
}