@layer pages {
  .app-home {
    min-inline-size: 0;
  }

  .app-home__workspace {
    display: grid;
    gap: var(--space-6);
    inline-size: min(100%, 90rem);
    margin-inline: auto;
    padding: var(--space-6) var(--layout-content-gutter);
  }

  .app-home__hero {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: stretch;
  }

  .app-home__hero-copy,
  .app-home__access-copy {
    display: grid;
    align-content: center;
    gap: var(--space-4);
    min-inline-size: 0;
  }

  .app-home__eyebrow,
  .app-home__title,
  .app-home__description,
  .app-home__session-message,
  .app-home__benefit-card p {
    margin: 0;
  }

  .app-home__title {
    max-inline-size: 13ch;
  }

  .app-home__description,
  .app-home__session-message {
    max-inline-size: 42rem;
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }

  .app-home__hero-actions,
  .app-home__access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .app-home__action {
    flex: 1 1 14rem;
  }

  .app-home__visual {
    min-block-size: clamp(17rem, 36vw, 31rem);
    overflow: hidden;
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .app-home__access {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: stretch;
  }

  .app-home__access-card {
    align-content: space-between;
    grid-template-columns: minmax(0, 1fr);
  }

  .app-home__access-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .app-home__config-error,
  .app-home__permission-message {
    align-self: start;
  }

  .app-home__benefits {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .app-home__benefit-card {
    align-content: start;
  }

  .app-home__benefit-header {
    align-items: center;
  }

  .app-home__benefit-card p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
  }

  .app-home__visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  @media (min-width: 34rem) {
    .app-home__benefits {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .app-home__hero {
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
    }

    .app-home__access {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    }

    .app-home__permission-message {
      grid-column: 1 / -1;
    }

    .app-home__benefits {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 33.99rem) {
    .app-home__workspace {
      padding-block: var(--space-4);
    }

    .app-home__action {
      flex-basis: 100%;
    }
  }
}