.AevocamBillingPlanCalculator .ExplainFeature {
  padding: 0.25rem;
  padding-top: 0;

  button.Trigger {
    font-size: 0.8rem;
    font-weight: normal;
    width: 100%;
    padding: 0.1rem 0.5rem;
    cursor: pointer;
    border-radius: 0.3rem;
    border: 1px solid var(--color-page-hairline);
    background: var(--color-page-bg-elevated);
    color: var(--color-page-text-soft);

    &:hover {
      background: var(--color-page-accent);
      color: var(--color-page-bg);
    }
  }  /* .Trigger */

  .Mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
    cursor: default;
  }  /* .Mask */

  .Popup {
    display: none;
    position: fixed;
    z-index: 1001;
    margin: 0;
    max-width: min(28rem, calc(100vw - 24px));
    max-height: min(70vh, calc(100vh - 1rem));
    overflow: auto;
    box-sizing: border-box;
    border-radius: 0.375rem;
    border: 1px solid var(--color-page-accent);
    background-color: var(--color-page-hairline);
    color: var(--color-page-text);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);

    @media (prefers-color-scheme: dark) {
      box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 1);
    }

    .Inner {
      padding: 1rem;
    }

    .Heading {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      text-align: center;
      letter-spacing: 0.04em;
      margin-bottom: 0.35rem;
      opacity: 0.85;
    }

    .Body {
      font-size: 0.875rem;
      line-height: 1.45;
    }

  }  /* .Popup */

  &.Visible {
    .Mask,
    .Popup {
      display: block;
    }
  }

}  /* ExplainFeature */

html:has(.ExplainFeature.Visible),
body:has(.ExplainFeature.Visible) {
  overflow: hidden;
  overscroll-behavior: none;
}