#waymark-support {
  font: 16px/1.5 system-ui, sans-serif;
  color: #101318;
}
#waymark-support .wm-support-launcher {
  /* Center the label in the circle independently of the dialog button padding. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: 600 15px/1 system-ui, sans-serif;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  /* Darker brand teal keeps the white label readable on light and dark pages. */
  background: #007fa3;
  border: 1px solid #00aed0;
  color: #fff;
  box-shadow: 0 3px 12px #0004;
}
#waymark-support button {
  box-sizing: border-box;
  appearance: none;
  min-height: 44px;
  margin: 0;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  border: 1px solid #101318;
  background: #101318;
  color: white;
  padding: 10px 18px;
  border-radius: 6px;
  font: 600 14px/20px system-ui, sans-serif;
}
#waymark-support button:disabled {
  opacity: 0.6;
  cursor: wait;
}
#waymark-support button:focus-visible,
#waymark-support a:focus-visible {
  outline: 3px solid #00aed0;
  outline-offset: 3px;
}
/* Set the dialog's text and spacing explicitly: Webflow and the app have
   different global heading, paragraph, link, and button resets. */
#waymark-support dialog,
#waymark-support dialog * {
  box-sizing: border-box;
}
#waymark-support dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
  border: 0;
  padding: 24px;
  border-radius: 12px;
  color: #101318;
  background: white;
  font: 400 16px/1.5 system-ui, sans-serif;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
}
#waymark-support dialog::backdrop {
  background: #0007;
}
#waymark-support h2 {
  margin: 0 0 16px;
  padding: 0;
  font: 600 22px/1.3 system-ui, sans-serif;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
#waymark-support dialog p {
  margin: 0 0 16px;
  padding: 0;
  font: inherit;
  color: inherit;
  overflow-wrap: anywhere;
}
#waymark-support dialog [role='status'] {
  padding: 12px;
  border-radius: 6px;
  background: #f2f5f7;
  color: #344451;
  font-size: 14px;
}
#waymark-support dialog [role='status']:empty {
  display: none;
}
#waymark-support a {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: #005c73;
  text-decoration: underline;
}
#waymark-support .wm-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
#waymark-support .wm-support-actions button {
  max-width: 100%;
  white-space: normal;
  background: white;
  border-color: #adb7c2;
  color: #101318;
}
#waymark-support .wm-support-actions [data-start] {
  background: #007fa3;
  border-color: #007fa3;
  color: white;
}
@media (max-width: 480px) {
  #waymark-support dialog {
    padding: 20px;
  }
  #waymark-support .wm-support-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
#waymark-support [hidden] {
  display: none !important;
}

/* Shared application footer, outside the React mount and in normal document flow.
   Reserve space for the support launcher; long labels wrap on small screens. */
.wm-legal-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 24px 104px 32px 24px;
  background: #fff;
  color: #101318;
  font: 14px/1.5 system-ui, sans-serif;
  /* Keep the footer out of the first paint on app pages. The mount container holds only
     a 1px placeholder SVG until React renders, and some pages render nothing until their
     data arrives, so the footer stays hidden while the container is empty or holds only
     that placeholder. The delayed animation reveals it anyway if the bundle never runs,
     keeping the legal links available without JavaScript. */
  visibility: hidden;
  animation: wm-legal-footer-reveal 0s linear 5s forwards;
}
body:not(
    :has([data-javascript-only-container]:empty, [data-javascript-only-container] > svg:only-child)
  )
  .wm-legal-footer {
  visibility: visible;
  animation: none;
}
@keyframes wm-legal-footer-reveal {
  to {
    visibility: visible;
  }
}

/* Lazy routes render only a header or an empty div while their bundle loads, so when a
   footer is present the content area fills the first viewport to keep it below the fold.
   The wrapper's pass-through height is inline in the base templates, since this sheet
   is not loaded on every page. The small viewport unit matches body's 100% on iOS
   Safari, where 100vh includes the collapsed toolbars; older browsers fall back to 100vh. */
body:has(.wm-legal-footer) .wm-page-content {
  min-height: 100vh;
  min-height: 100svh;
}
.wm-legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 12px 24px;
}
.wm-legal-footer a,
.wm-legal-footer button {
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  white-space: normal;
  cursor: pointer;
}
.wm-legal-footer a:focus-visible,
.wm-legal-footer button:focus-visible {
  outline: 3px solid #005c73;
  outline-offset: 4px;
}