/* Information modal for the Hong Kong and Singapore footers.

   These two markets show their regulatory wording in a pop-up instead of
   linking out. It reuses the .lmodal shell in article.css for positioning and
   the backdrop, then restyles the dialog to match the white pop-up on the live
   FILQ experience: 600px wide, 12px radius, no border, no shadow.

   Every selector here is scoped to .mkt-modal, so the existing "leaving the
   Fidelity website" dialog is untouched. Remove this file and its three <link>
   tags and the pages return to their previous state. */

/* Above the client category gate, which stands at 200. Singapore's gate links
   to the legal information pop-up before the reader is let through, so it has
   to clear the gate rather than open behind it. */
.mkt-modal { z-index: 240; }

.mkt-modal .mkt-modal__dialog {
  width: min(92vw, 600px);
  background: #fff;
  color: var(--ink-body);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  padding: clamp(22px, 3vw, 30px);
}

.mkt-modal .lmodal__title {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 18px;
  padding-right: 40px; /* clear of the close button */
}

.mkt-modal__close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: 0; color: var(--ink);
  font-size: 26px; line-height: 1; cursor: pointer;
  padding: 2px 8px; border-radius: 6px;
  transition: background .15s var(--ease);
}
.mkt-modal__close:hover { background: rgba(0, 0, 0, .06); }

/* the scrolling document panel */
.mkt-modal .lmodal__doc {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #E3E8EC;
  border-radius: 10px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.mkt-modal .lmodal__doc::-webkit-scrollbar { width: 10px; }
.mkt-modal .lmodal__doc::-webkit-scrollbar-thumb {
  background: #C6CBD0; border-radius: 6px;
  border: 3px solid #fff;
}

.mkt-modal .lmodal__doc h3 { color: var(--ink); font-size: 15px; font-weight: 700; margin: 22px 0 8px; }
.mkt-modal .lmodal__doc h4 { color: var(--ink); font-size: 14px; font-weight: 700; margin: 18px 0 6px; }
.mkt-modal .lmodal__doc > :first-child { margin-top: 0; }
.mkt-modal .lmodal__doc > :last-child { margin-bottom: 0; }
/* Ordinary body ink, not the brand blue: this is a document to be read, and the
   client category gate now opens the same panel, where blue running text sat
   oddly beside the black disclosure it belongs to. */
.mkt-modal .lmodal__doc p { color: var(--ink-body); font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.mkt-modal .lmodal__doc ul { margin: 0 0 12px; padding-left: 20px; }
.mkt-modal .lmodal__doc li { color: var(--ink-body); font-size: 14px; line-height: 1.65; margin: 0 0 8px; }
.mkt-modal .lmodal__doc li:last-child { margin-bottom: 0; }

/* The footer labels that open these dialogs are ordinary anchors, so they pick
   up the existing .site-footer__master a styling (colour, separator rules, the
   first-child reset) with no rules of their own. */