body {
  max-width: 800px;
  min-height: 100vh;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;

  line-height: 1.7em;
  font-family: sans-serif;
}

h1 {
  text-align: center;
}

.logo {
  margin-top: 5rem;
  text-align: center;
}


/* scroll-spy active nav links
   Uses existing CSS custom properties from common-styling module.
   Targets both desktop (.pos-landing-navbar-link) and mobile
   (.pos-landing-navbar-mobile a) anchor links.
   ============================================================================ */

.pos-landing-navbar-link.is-active {
  color: var(--pos-color-interactive);
  background-color: var(--pos-color-highlight-background);
  transition: color var(--pos-transition-ui-detail), background-color var(--pos-transition-ui-detail);
}

.pos-landing-navbar-mobile .pos-collapsible-children a.is-active {
  color: var(--pos-color-interactive);
  background-color: var(--pos-color-highlight-background);
  transition: color var(--pos-transition-ui-detail), background-color var(--pos-transition-ui-detail);
}


/* landing logo
   Responsive logo for navbar and hero sections.
   Uses CSS custom properties for sizing.
   ============================================================================ */

:root {
  --app-logo-navbar-height: 1.5rem;
  --app-logo-hero-height: 4rem;
}

.pos-landing-navbar-logo {
  height: var(--app-logo-navbar-height);
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 0.5rem;
}

.pos-landing-navbar-brand {
  display: inline-flex;
  align-items: center;
}

.pos-landing-hero-logo {
  height: var(--app-logo-hero-height);
  width: auto;
  display: block;
  margin-inline: auto;
  margin-block-end: var(--pos-gap-text-text, 1rem);
}

@media (max-width: 767px) {
  :root {
    --app-logo-navbar-height: 1.25rem;
    --app-logo-hero-height: 3rem;
  }
}


/* ========================================================================== */
/* Aria landing page overrides                                                */
/* ========================================================================== */

/* Emoji icons in feature cards
   ============================================================================ */
.app-landing-emoji-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.app-landing-emoji-icon-sm {
  font-size: 1.25rem;
  line-height: 1;
}

.app-landing-emoji-icon-lg {
  font-size: 2rem;
  line-height: 1;
  display: block;
  margin-block-end: 0.5rem;
}


/* Feature cards
   ============================================================================ */
.app-landing-feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.app-landing-feature-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-landing-feature-header .pos-heading-4 {
  margin: 0;
}


/* Channels section
   ============================================================================ */
.app-landing-channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pos-gap-card-elements, 1rem);
}

.app-landing-channel-card p {
  color: var(--pos-color-content-text-supplementary);
}


/* Footer built-on badge
   ============================================================================ */
.app-landing-footer-built-on {
  margin-inline-start: 0.5rem;
  opacity: 0.7;
}


/* ========================================================================== */
/* Security & Trust section                                                   */
/* ========================================================================== */

@layer common-styling {

  .app-landing-security-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .app-landing-security-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .app-landing-security-header .pos-heading-4 {
    margin: 0;
  }

  .app-landing-security-desc {
    flex: 1;
    color: var(--pos-color-content-text-supplementary);
    line-height: 1.6;
  }

}