/* V261 — align About popup controls and remove the exposed green mobile surround. */

#aboutModal .about-dialog {
  --about-control-edge: max(30px, env(safe-area-inset-right, 0px));
}

#aboutModal .about-close,
#aboutModal .about-scroll-controls {
  box-sizing: border-box;
  right: var(--about-control-edge) !important;
  left: auto !important;
}

#aboutModal .about-scroll-controls {
  width: 44px;
  padding: 3px;
  align-items: center;
}

#aboutModal .about-scroll-controls button {
  flex: 0 0 36px;
}

/* Keep card borders visibly inside their About section surface. */
html.about-embed :is(#insights, #why-talktide, #partnership, #regional-offices) {
  padding-right: clamp(18px, 2vw, 28px) !important;
  padding-bottom: clamp(22px, 2.2vw, 30px) !important;
  padding-left: clamp(18px, 2vw, 28px) !important;
}

@media (max-width: 900px) {
  #aboutModal .about-dialog {
    --about-control-edge: max(20px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 700px) {
  #aboutModal.about-modal {
    background: rgba(255, 255, 255, .82) !important;
  }

  #aboutModal .about-modal-backdrop {
    background: rgba(248, 252, 250, .78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(96%);
    backdrop-filter: blur(18px) saturate(96%);
  }

  #aboutModal .about-dialog {
    --about-control-edge: max(10px, env(safe-area-inset-right, 0px));
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  html.about-embed :is(#insights, #why-talktide, #partnership, #regional-offices) {
    padding-right: 16px !important;
    padding-bottom: 20px !important;
    padding-left: 16px !important;
  }
}