/* biome-ignore-all lint/complexity/noImportantStyles: public integration must override pinned reference portal and hidden-state rules without rewriting their visual styles. */
/* Host integration only; visual rules come from the corrected V10 reference. */
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  clip-path: inset(50%);
  transform: translateY(-200%);
  background: #fff;
  color: #142332;
  z-index: 10000;
  padding: 14px;
}
.skip-link:focus {
  clip-path: none;
  transform: none;
}
:focus-visible {
  outline: 3px solid #2259df;
  outline-offset: 4px;
}
iframe {
  border: 0;
}
.journey-fallback {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
  padding: 24px;
}
.journey-fallback h3 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.3px;
}
.journey-fallback p {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 12px;
}
@media (max-width: 640px) {
  .journey-fallback {
    grid-template-columns: 1fr;
  }
}

/* Keep the authored detail readable when the deck requests its mobile portal, including narrow containers on a tablet viewport. */
/* Reading layout follows native container-driven j-portal, at every viewport width. */
.journey #momj4 .j-wing .j-wing-inner {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.journey #momj4 .j-wing .j-wing-inner > * {
  flex-shrink: 0;
}
.journey #momj4 .j-wing .j-wing-body {
  flex: none;
  overflow: visible;
}
.journey #momj4 .j-wing {
  overflow-wrap: anywhere;
}
.journey #momj4 .j-wing:not(.j-portal) {
  height: min(454px, 81%);
  max-height: calc(var(--mom-v10-viewport-height, 100dvh) - 24px);
}
.journey #momj4:not(.mom-v10-portal) .j-focus-toolbar {
  top: 18px;
}
.journey #momj4 .j-wing-top > div:first-child {
  min-width: 0;
}
.journey #momj4 .j-wing-footer > div {
  min-width: 0;
}
.journey #momj4 .j-wing h3 {
  overflow-wrap: anywhere;
}
.journey #momj4 .j-wing [data-jdetail] {
  white-space: normal;
}
.journey #momj4 .j-wing [data-jrelated] {
  white-space: normal;
  max-width: 100%;
}
.journey #momj4 .j-wing.j-portal {
  position: fixed !important;
  top: auto !important;
  left: max(12px, 4%, env(safe-area-inset-left)) !important;
  right: max(12px, 4%, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 510 !important;
  width: auto !important;
  height: 0 !important;
  max-height: calc(var(--mom-v10-viewport-height, 100dvh) - 108px);
  min-height: 0 !important;
  transform: translateY(12px) !important;
  border: 1px solid #5a7b9a;
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    height var(--j-expand) var(--j-curve),
    opacity var(--j-expand) ease,
    transform var(--j-expand) ease,
    visibility 0s linear var(--j-expand) !important;
}
.journey #momj4 .j-wing.j-portal.j-open {
  height: min(calc(var(--mom-v10-viewport-height, 100dvh) * 0.56), 480px) !important;
  transform: translateY(0) !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    height var(--j-expand) var(--j-curve),
    opacity var(--j-expand) ease,
    transform var(--j-expand) ease,
    visibility 0s !important;
}
.journey #momj4.mom-v10-portal .j-focus-toolbar {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  z-index: 520;
  max-width: calc(100% - 24px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.journey #momj4 button:focus-visible {
  outline: 3px solid #91b9e8;
  outline-offset: 3px;
}

#mom-devices-iframe:not([data-ready="true"]) {
  opacity: 0;
}

#enquiry-frame {
  display: block;
  width: 100%;
  height: min(65dvh, 700px);
  min-height: 200px;
  border: 0;
  background: #fff;
}
#contact-dialog .contact-status:empty {
  display: none;
}
#contact-dialog a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Only the enquiry dialog's own close releases this, never the privacy popup. */
html.enquiry-open {
  overflow: hidden;
}
#contact-dialog,
#privacy-dialog {
  overscroll-behavior: contain;
}
/* The loaded form carries its own headline and introduction. */
#contact-dialog.form-ready .contact-intro > h3,
#contact-dialog.form-ready .contact-lede {
  display: none;
}
#privacy-dialog {
  width: min(860px, calc(100vw - 36px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 1px solid #dbe4e5;
  border-radius: 15px;
}
#privacy-dialog::backdrop {
  background: #0d1b2b8a;
}
#privacy-dialog .privacy-dialog-body {
  padding: 8px 27px 27px;
  overflow-y: auto;
  max-height: calc(100dvh - 120px);
}
#privacy-dialog .legal-body {
  max-width: none;
}

/* The curved deck extends beyond narrow screens at rest. Clip only the section's
   horizontal paint boundary; its selected card and reading portal stay visible. */
#page-home #journey {
  overflow-x: clip;
  overflow-y: visible;
}

/* These are scrolling applications. Keep their viewport within the browser so
   fixed summary dialogs and their actions remain reachable at every width. */
.showcase-panel.calculator-frame iframe {
  height: min(1300px, calc(100svh - 120px));
  min-height: 320px;
}

.mom-copy-text {
  overflow-wrap: anywhere;
}