@layer common-styling {

  /* navbar
  ============================================================================ */
  .pos-landing-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--pos-color-background-primary, #fff);
    border-block-end: 1px solid var(--pos-color-frame);
    transition: box-shadow var(--pos-transition-ui-detail, .2s) ease;
  }

  .pos-landing-navbar-inner {
    display: flex;
    align-items: center;
    gap: var(--pos-gap-text-text, 1rem);
    max-width: var(--pos-size-page, 72rem);
    margin-inline: auto;
    padding: var(--pos-padding-page, 1rem);
    min-height: 3.5rem;
  }

  .pos-landing-navbar-brand {
    font-family: var(--pos-font-heading);
    font-weight: 600;
    font-size: var(--pos-text-headline-4, 1.25rem);
    color: var(--pos-color-content-text-prominent);
    text-decoration: none;
    white-space: nowrap;
    margin-inline-end: auto;
  }

  .pos-landing-navbar-brand:hover {
    color: var(--pos-color-interactive);
  }

  .pos-landing-navbar-links {
    display: flex;
    gap: var(--pos-gap-button-button, .75rem);
  }

  .pos-landing-navbar-link {
    color: var(--pos-color-content-text);
    text-decoration: none;
    font-size: var(--pos-text-body, .875rem);
    padding-block: .25rem;
    padding-inline: .5rem;
    border-radius: var(--pos-radius-button, .375rem);
    transition: color var(--pos-transition-ui-detail, .2s), background-color var(--pos-transition-ui-detail, .2s);
  }

  .pos-landing-navbar-link:hover {
    color: var(--pos-color-interactive);
    background-color: var(--pos-color-highlight-background);
  }

  .pos-landing-navbar-link:focus-visible {
    outline: 2px solid var(--pos-color-focused);
    outline-offset: 0;
  }

  .pos-landing-navbar-actions {
    display: flex;
    gap: var(--pos-gap-button-button, .75rem);
    align-items: center;
  }

  /* mobile toggle & collapsible menu
  ============================================================================ */
  .pos-landing-navbar-mobile {
    display: none;
  }

  .pos-landing-navbar-mobile.pos-collapsible {
    line-height: normal;
  }

  .pos-landing-navbar-mobile .pos-collapsible-toggle {
    width: 40px;
    height: 40px;
  }

  .pos-landing-navbar-mobile .pos-collapsible-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .pos-landing-navbar-mobile .pos-collapsible-children {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background-color: var(--pos-color-background-primary, #fff);
    border-block-end: 1px solid var(--pos-color-frame);
    padding-inline: var(--pos-padding-page, 1rem);
  }

  .pos-landing-navbar-mobile .pos-collapsible-children ul {
    padding-inline-start: 0;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    translate: 0 0;
    filter: none;
    opacity: 1;
    min-height: 0;
  }

  .pos-landing-navbar-mobile .pos-collapsible-children ul::before {
    display: none;
  }

  .pos-landing-navbar-mobile .pos-collapsible-children li {
    margin-inline-start: 0;
    padding: 0;
    display: block;
  }

  .pos-landing-navbar-mobile .pos-collapsible-children a {
    display: block;
    padding-block: .75rem;
    padding-inline: .5rem;
    color: var(--pos-color-content-text);
    text-decoration: none;
    border-block-end: 1px solid var(--pos-color-frame);
    transition: color var(--pos-transition-ui-detail, .2s), background-color var(--pos-transition-ui-detail, .2s);
  }

  .pos-landing-navbar-mobile .pos-collapsible-children a:hover {
    color: var(--pos-color-interactive);
    background-color: var(--pos-color-highlight-background);
  }

  .pos-landing-navbar-mobile .pos-collapsible-children [inert] ul {
    opacity: .4;
    translate: 0 -.5rem;
    filter: blur(5px);
  }

  @media (max-width: 767px) {
    .pos-landing-navbar-links,
    .pos-landing-navbar-actions {
      display: none;
    }

    .pos-landing-navbar-mobile {
      display: block;
    }

    .pos-landing-navbar-inner {
      flex-wrap: wrap;
    }
  }


  /* landing page container
  ============================================================================ */
  .pos-landing {
    max-width: var(--pos-size-page);
    margin-inline: auto;
  }


  /* hero section
  ============================================================================ */
  .pos-landing-hero {
    padding: var(--pos-padding-page);
    padding-block: calc(var(--pos-gap-section-section) * 2);
    text-align: center;
  }

  .pos-landing-hero-title {
    font-size: var(--pos-text-hero);
    line-height: var(--pos-text-hero-leading);
    font-family: var(--pos-font-heading);
    font-weight: 500;
    margin-inline-start: -0.2ex;
  }

  .pos-landing-hero-subtitle {
    margin-block-start: var(--pos-gap-text-text);
    max-width: 40rem;
    margin-inline: auto;
    color: var(--pos-color-content-text-supplementary);
    font-size: var(--pos-text-headline-4);
    line-height: var(--pos-text-headline-4-leading);
  }

  .pos-landing-hero-actions {
    margin-block-start: var(--pos-gap-section-section);
    display: flex;
    gap: var(--pos-gap-button-button);
    justify-content: center;
    flex-wrap: wrap;
  }


  /* section shared
  ============================================================================ */
  .pos-landing-section {
    padding: var(--pos-padding-page);
    padding-block: var(--pos-gap-section-section);
  }

  .pos-landing-section-header {
    text-align: center;
    margin-block-end: var(--pos-gap-section-section);
  }

  .pos-landing-section-header p {
    margin-block-start: var(--pos-gap-text-text);
    max-width: 36rem;
    margin-inline: auto;
  }


  /* features grid
  ============================================================================ */
  .pos-landing-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pos-gap-card-card);
  }

  @media (min-width: 768px) {
    .pos-landing-features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .pos-landing-features-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .pos-landing-feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--pos-gap-card-elements);
    text-align: center;
    align-items: center;
  }

  .pos-landing-feature-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pos-radius-card);
    background-color: var(--pos-color-highlight-background);
    color: var(--pos-color-interactive);
  }

  .pos-landing-feature-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

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


  /* testimonials
  ============================================================================ */
  .pos-landing-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pos-gap-card-card);
  }

  @media (min-width: 768px) {
    .pos-landing-testimonials-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .pos-landing-testimonials-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .pos-landing-testimonial-card {
    display: flex;
    flex-direction: column;
    gap: var(--pos-gap-card-elements);
  }

  .pos-landing-testimonial-quote {
    flex: 1;
    line-height: 1.6;
    font-style: italic;
  }

  .pos-landing-testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-block-start: 1px solid var(--pos-color-frame);
    padding-block-start: var(--pos-gap-card-elements);
  }

  .pos-landing-testimonial-name {
    font-weight: 600;
    color: var(--pos-color-content-text-prominent);
  }

  .pos-landing-testimonial-role {
    color: var(--pos-color-content-text-supplementary);
    font-size: 0.875rem;
  }


  /* CTA section
  ============================================================================ */
  .pos-landing-cta {
    padding: var(--pos-padding-page);
    padding-block: calc(var(--pos-gap-section-section) * 1.5);
    text-align: center;
    background-color: var(--pos-color-button-primary-background);
    border-radius: var(--pos-radius-card);
    color: var(--pos-color-button-primary-text);
  }

  .pos-landing-cta-title {
    font-family: var(--pos-font-heading);
    font-size: var(--pos-text-headline-2);
    font-weight: 500;
  }

  .pos-landing-cta-subtitle {
    margin-block-start: var(--pos-gap-text-text);
    opacity: 0.85;
  }

  .pos-landing-cta-action {
    margin-block-start: var(--pos-gap-section-section);
    display: inline-flex;
  }


  /* footer
  ============================================================================ */
  .pos-landing-footer {
    margin-block-start: var(--pos-gap-content-footer);
    padding: var(--pos-padding-page);
    padding-block-start: var(--pos-gap-section-section);
    border-block-start: 1px solid var(--pos-color-frame);
  }

  .pos-landing-footer-inner {
    max-width: var(--pos-size-page);
    margin-inline: auto;
  }

  .pos-landing-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--pos-gap-section-section);
  }

  @media (max-width: 767px) {
    .pos-landing-footer-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .pos-landing-footer-tagline {
    color: var(--pos-color-content-text-supplementary);
    line-height: 1.6;
    max-width: 20rem;
  }

  .pos-landing-footer-brand {
    font-family: var(--pos-font-heading);
    font-weight: 600;
    font-size: var(--pos-text-headline-4);
    color: var(--pos-color-content-text-prominent);
    margin-block-end: var(--pos-gap-text-text);
  }

  .pos-landing-footer-nav-title {
    font-weight: 600;
    color: var(--pos-color-content-text-prominent);
    margin-block-end: var(--pos-gap-text-text);
  }

  .pos-landing-footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .pos-landing-footer-copyright {
    margin-block-start: var(--pos-gap-section-section);
    padding-block-start: var(--pos-gap-text-text);
    border-block-start: 1px solid var(--pos-color-frame);
    color: var(--pos-color-content-text-supplementary);
    font-size: 0.875rem;
  }

}