/* ||| /lib.styles/style.MBR5.css
   ||| HERO PM Member Center. Split sign-in layout (form left, brand panel right).
   ||| Brand from HEROPM.com: one HERO PM blue #006699 (tints #E3F0F9, #C6DCEE), action gradient
   ||| #FF4141 > #FBB040, highlight #FFD363, ink #232A2F, page #F5F7FA, Urbanist. */

:root {
  --mbr-bg: #ffffff;
  --mbr-page: #f5f7fa;
  --mbr-ink: #232a2f;
  --mbr-muted: #5e6b76;
  --mbr-line: #e3e8ee;
  --mbr-field: #ffffff;
  --mbr-field-line: #c9d2dc;
  --mbr-brand: #006699;
  --mbr-action-gradient: linear-gradient(95.52deg, #ff4141 0%, #fbb040 100%);
  --mbr-highlight: #ffd363;
  --mbr-focus: rgba(0, 102, 153, 0.25);
  --mbr-error-fg: #a11111;
  --mbr-error-bg: #ffe8e8;
  --mbr-notice-fg: #006699;
  --mbr-notice-bg: #e3f0f9;
  --mbr-tint-strong: #c6dcee;
  --mbr-soft: #f5f7fa;
  --mbr-radius: 8px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--mbr-page);
  color: var(--mbr-ink);
  font: 16px/1.5 Urbanist, Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mbr-brand); }
a:hover { color: var(--mbr-brand); }

[hidden] { display: none !important; }

/* Layout */

.mbrSplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.mbrPanel {
  display: flex;
  flex-direction: column;
  background: var(--mbr-bg);
  padding: 32px 56px;
  box-shadow: 1px 0 0 var(--mbr-line);
  position: relative;
  z-index: 1;
}

.mbrContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 40px 0;
}

.mbrBrand { display: flex; align-items: center; }
.mbrBrand img { display: block; height: 40px; width: auto; }

.mbrFooter { font-size: 14px; color: var(--mbr-muted); text-align: center; }

/* Type */

h1 { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.01em; }

.mbrSub { margin: 0 0 28px; color: var(--mbr-muted); }
.mbrSub strong { color: var(--mbr-ink); font-weight: 700; }

.mbrEyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mbr-brand);
}

.mbrLabel { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--mbr-muted); }

/* Forms */

.mbrForm { display: flex; flex-direction: column; }

.mbrForm label { font-size: 15px; font-weight: 700; margin: 0 0 6px; }

.mbrLabelRow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.mbrSmallLink { font-size: 14px; text-decoration: none; }
.mbrSmallLink:hover { text-decoration: underline; }

.mbrForm input {
  width: 100%;
  height: 46px;
  margin: 0 0 18px;
  padding: 0 14px;
  border: 1px solid var(--mbr-field-line);
  border-radius: var(--mbr-radius);
  background: var(--mbr-field);
  color: var(--mbr-ink);
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mbrForm input:focus { outline: none; border-color: var(--mbr-brand); box-shadow: 0 0 0 4px var(--mbr-focus); }

.mbrForm select {
  width: 100%;
  height: 46px;
  margin: 0 0 18px;
  padding: 0 12px;
  border: 1px solid var(--mbr-field-line);
  border-radius: var(--mbr-radius);
  background: var(--mbr-field);
  color: var(--mbr-ink);
  font: inherit;
}

.mbrForm select:focus { outline: none; border-color: var(--mbr-brand); box-shadow: 0 0 0 4px var(--mbr-focus); }

.mbrRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mbrRow > div { display: flex; flex-direction: column; min-width: 0; }

.mbrChoices { margin: 0 0 18px; padding: 0; border: 0; }
.mbrChoices legend { padding: 0; margin: 0 0 8px; font-size: 15px; font-weight: 700; }

.mbrChoice {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.4;
  cursor: pointer;
}
/* .mbrChoice forces display; a hidden one (the billing consent, for example) must still hide. */
.mbrChoice[hidden] { display: none !important; }
/* An off-limits choice: ghosted and unselectable. */
.mbrChoice.mbrDisabled { opacity: 0.5; cursor: not-allowed; }
.mbrChoice.mbrDisabled input { cursor: not-allowed; }

.mbrChoice input { width: 18px !important; height: 18px !important; margin: 1px 0 0 !important; padding: 0 !important; flex: none; accent-color: var(--mbr-brand); box-shadow: none !important; }

.mbrAddOns { padding: 12px 14px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); background: var(--mbr-soft); }
.mbrAddOns legend { float: left; width: 100%; }
.mbrAddOns .mbrChoice { clear: both; }
.mbrAddOns > :last-child, .mbrAddOns > :last-child .mbrChoice { margin-bottom: 0 !important; }

.mbrAgree { margin: 4px 0 16px !important; color: var(--mbr-muted); font-size: 14px !important; }

.mbrHint { font-weight: 400; color: var(--mbr-muted); font-size: 14px; }
.mbrSmall { margin-top: 8px; font-size: 14px; }

.cf-turnstile { margin: 0 0 16px; min-height: 65px; }

.mbrFieldError { border-color: var(--mbr-error-fg) !important; }

/* Setup */

.mbrProgress { height: 6px; margin: 0 0 22px; border-radius: 3px; background: var(--mbr-line); overflow: hidden; }
.mbrProgress span { display: block; height: 100%; width: 0; background: var(--mbr-brand); transition: width 200ms ease; }

.mbrRowWide { grid-template-columns: 2fr 1fr; }
.mbrRowAddress { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
/* First, middle (short), last name on one row. */
.mbrRowName { grid-template-columns: minmax(0, 1fr) minmax(0, 120px) minmax(0, 1fr); }
@media (max-width: 600px) { .mbrRowName { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mbrRowAddress { grid-template-columns: 1fr; } }

.mbrStatic { margin: -6px 0 18px; color: var(--mbr-muted); font-size: 15px; }
.mbrHelp { margin: -10px 0 18px; color: var(--mbr-muted); font-size: 14px; }

/* Password rules checklist: each line turns green as the password meets it */
.mbrPwRules { margin: -8px 0 18px; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; }
.mbrPwRules li { color: var(--mbr-error-fg); }
.mbrPwRules li::before { content: "\2715"; display: inline-block; width: 1.4em; font-weight: 800; }
.mbrPwRules li.mbrPwRuleMet { color: #1f7a3d; }
.mbrPwRules li.mbrPwRuleMet::before { content: "\2713"; }
.mbrPwRules b { font-weight: 800; }

.mbrAgreement {
  height: 260px;
  overflow-y: auto;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--mbr-line);
  border-radius: var(--mbr-radius);
  background: var(--mbr-soft);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.mbrAgreement:focus { outline: none; box-shadow: 0 0 0 4px var(--mbr-focus); }

.mbrTopics .mbrChoice { padding: 8px 10px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); }
.mbrTopics .mbrChoice.mbrDisabled { opacity: 0.5; }

.mbrVisuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hub */

.mbrHubList { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mbrHubCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--mbr-line);
  border-radius: var(--mbr-radius);
}
.mbrHubCard strong { display: block; font-weight: 800; }
.mbrHubCard small { display: block; color: var(--mbr-muted); font-size: 14px; }
.mbrHubCard .mbrSecondary { height: 38px; text-decoration: none; }

#loginCode { font-size: 24px; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }

.mbrError {
  margin: -4px 0 16px;
  padding: 10px 12px;
  border-radius: var(--mbr-radius);
  background: var(--mbr-error-bg);
  color: var(--mbr-error-fg);
  font-size: 15px;
}

.mbrError a { color: inherit; font-weight: 700; text-decoration: underline; }

.mbrNotice {
  margin: 0 0 24px;
  padding: 10px 12px;
  border-radius: var(--mbr-radius);
  background: var(--mbr-notice-bg);
  color: var(--mbr-notice-fg);
  font-size: 15px;
}

.mbrWarning {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #f3cf8a;
  border-left: 4px solid #e8a317;
  border-radius: var(--mbr-radius);
  background: #fff7e6;
  color: #6b4500;
  font-size: 15px;
}
.mbrWarning strong { color: #4d3200; }

/* Buttons */

.mbrPrimary, .mbrSecondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--mbr-radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.mbrPrimary { width: 100%; border: 0; border-radius: 999px; background: var(--mbr-brand); color: #ffffff; text-decoration: none; }
a.mbrPrimary:hover { color: #ffffff; }
.mbrPrimary:hover { filter: brightness(1.08); }
.mbrPrimary[disabled] { opacity: 0.6; cursor: progress; }

.mbrSecondary { border: 2px solid var(--mbr-brand); border-radius: 999px; background: var(--mbr-bg); color: var(--mbr-brand); }
.mbrSecondary:hover { background: var(--mbr-notice-bg); }

.mbrTextButton { border: 0; background: none; padding: 0; color: var(--mbr-brand); font: inherit; cursor: pointer; }
.mbrTextButton:hover { text-decoration: underline; }

.mbrPrimary:focus-visible, .mbrSecondary:focus-visible, .mbrTextButton:focus-visible,
.mbrAccountPick:focus-visible, .mbrAccountRemove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--mbr-focus);
}

.mbrActions { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }

.mbrAlt { margin: 24px 0 0; text-align: center; color: var(--mbr-muted); }
.mbrAlt a { font-weight: 700; }

/* Account chooser */

.mbrChooser { margin: 0 0 24px; }

.mbrAccounts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.mbrAccount {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mbr-line);
  border-radius: var(--mbr-radius);
  background: var(--mbr-bg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mbrAccount:hover { border-color: var(--mbr-brand); box-shadow: 0 2px 10px rgba(0, 102, 153, 0.08); }

.mbrAccountPick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--mbr-radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mbrAvatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mbr-brand);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
}

.mbrAvatarLogo { object-fit: cover; background: #ffffff; border: 1px solid var(--mbr-line); }

.mbrAccountText { display: flex; flex-direction: column; min-width: 0; }
.mbrAccountText strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbrAccountText small { color: var(--mbr-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbrAccountText .mbrAccountCompany { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--mbr-ink); }

.mbrAccountRemove {
  flex: none;
  width: 40px;
  border: 0;
  border-radius: 0 var(--mbr-radius) var(--mbr-radius) 0;
  background: none;
  color: var(--mbr-muted);
  font-size: 22px;
  cursor: pointer;
}

.mbrAccountRemove:hover { color: #ff4141; }

#mbrUseAnother { width: 100%; }

.mbrSelected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: var(--mbr-radius);
  background: var(--mbr-soft);
  font-size: 15px;
  word-break: break-all;
}

.mbrPlaceholder {
  padding: 18px;
  border: 1px dashed var(--mbr-field-line);
  border-radius: var(--mbr-radius);
  color: var(--mbr-muted);
  background: var(--mbr-soft);
}

/* Brand panel: one membership, every HERO platform (docs/design/signin-panel-concept.html) */

.mbrVisual {
  --hmy-blue: #1d6fa3;
  --hmy-orange: #f9a73e;
  --hzn-violet: #6d5bd0;
  --hzn-sky: #7ec8ff;
  --pma-navy: #0e2a47;
  --pma-slate: #243240;
  --pma-teal: #15a38b;
  --pma-mint: #e3f4ef;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(180deg, #052b45 0%, #0b5f90 55%, #052b45 100%);
}

.mbrVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 60% 45%, #000 0%, transparent 75%);
}

.mbrShowHome { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100%; }

.mbrVisualInner { position: relative; padding: 48px clamp(32px, 5vw, 64px) 0; }
.mbrVisualEyebrow { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.mbrVisual h2 { margin: 14px 0 10px; font-size: clamp(34px, 3.6vw, 54px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
.mbrVisual h2 span { display: block; color: var(--hzn-sky); }
.mbrVisualLede { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }

/* The three platforms, each in its own brand; .mbrShowFit scales for short screens, .mbrShowStage for narrow ones */

.mbrShowFit { position: relative; align-self: center; justify-self: center; }
.mbrShowStage { position: relative; width: 640px; height: 470px; margin: 18px 0 12px; }

.mbrShowWin { position: absolute; overflow: hidden; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform 0.4s ease; }
.mbrShowWin:hover { z-index: 9; transform: translateY(-6px) !important; }
.mbrShowOpen { position: absolute; inset: 0; z-index: 10; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.mbrShowOpen:focus-visible { outline: 3px solid var(--hzn-sky); outline-offset: 2px; }
.mbrShowChrome { display: flex; align-items: center; gap: 6px; padding: 7px 12px; }
.mbrShowChrome i { width: 8px; height: 8px; border-radius: 50%; }
.mbrShowChrome em { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.06em; }

/* Horizon: behind, upper right */

.mbrShowHzn { top: 8px; right: 0; z-index: 2; width: 340px; background: #ffffff; transform: rotate(4deg); }
.mbrShowHzn .mbrShowChrome { background: #0a3657; }
.mbrShowHzn .mbrShowChrome i { background: rgba(255, 255, 255, 0.25); }
.mbrShowHzn .mbrShowChrome em { background: var(--hzn-violet); color: #ffffff; }
.mbrShowHzn .hscreen { zoom: 0.34; width: 1000px; height: 562px; overflow: hidden; background: #f6f8fa; color: #1f2a33; }
.mbrShowHzn .htop { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 18px; background: #ffffff; border-bottom: 1px solid #e3e8ee; }
.mbrShowHzn .htop img { height: 30px; }
.mbrShowHzn .hsearch { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 380px; height: 32px; padding: 0 12px; border-radius: 8px; background: #eef2f5; font-size: 14px; color: #7a858f; }
.mbrShowHzn .hsearch svg { width: 15px; height: 15px; }
.mbrShowHzn .hscan { margin-left: auto; padding: 8px 14px; border-radius: 8px; background: #01669d; color: #ffffff; font-size: 14px; font-weight: 700; }
.mbrShowHzn .hacct { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #01669d; color: #ffffff; font-size: 12px; font-weight: 800; }
.mbrShowHzn .hbody { display: grid; grid-template-columns: 170px 1fr; height: 510px; }
.mbrShowHzn .hside { display: grid; align-content: start; gap: 4px; padding: 14px 10px; background: #ffffff; border-right: 1px solid #e3e8ee; }
.mbrShowHzn .hside small { margin: 6px 6px 2px; font-size: 11px; letter-spacing: 0.1em; color: #8a96a0; }
.mbrShowHzn .hside span { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 6px; font-size: 14px; color: #3d4a55; }
.mbrShowHzn .hside span.on { background: #e3eef7; color: #01669d; font-weight: 700; }
.mbrShowHzn .hside i { width: 16px; font-size: 14px; text-align: center; color: #01669d; --fa-secondary-opacity: 0.35; }
.mbrShowHzn .hmain { padding: 16px 22px; }
.mbrShowHzn .hhello { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.mbrShowHzn .hhello small { display: block; font-size: 11px; letter-spacing: 0.1em; color: #6b7a86; }
.mbrShowHzn .hhello strong { font-size: 26px; font-weight: 700; }
.mbrShowHzn .hscans { display: flex; gap: 24px; font-size: 14px; font-weight: 700; }
.mbrShowHzn .hscans small { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; color: #6b7a86; }
.mbrShowHzn .hcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mbrShowHzn .hcard { padding: 14px 16px; border: 1px solid #e3e8ee; border-radius: 12px; background: #ffffff; }
.mbrShowHzn .hcard h6 { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 11px; letter-spacing: 0.1em; color: #3d4a55; }
.mbrShowHzn .hcard h6 em { padding: 2px 8px; border-radius: 999px; background: #eef2f5; font-size: 10px; font-style: normal; color: #6b7a86; }
.mbrShowHzn .hscore { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; margin-bottom: 12px; }
.mbrShowHzn .ring { display: block; width: 92px; height: 92px; }
.mbrShowHzn .hscore strong { font-size: 19px; font-weight: 700; }
.mbrShowHzn .hscore p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.35; color: #5e6b76; }
.mbrShowHzn u { padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none; }
.mbrShowHzn u.up { background: #e3f4ea; color: #1f7a55; }
.mbrShowHzn u.flat { background: #eef2f5; color: #6b7a86; }
.mbrShowHzn .ahead, .mbrShowHzn .arow { display: grid; grid-template-columns: 1.1fr 1fr 30px 38px; align-items: center; gap: 10px; }
.mbrShowHzn .ahead { margin-bottom: 4px; font-size: 10px; letter-spacing: 0.1em; color: #6b7a86; }
.mbrShowHzn .ahead span:nth-child(2) { grid-column: 2 / 4; }
.mbrShowHzn .arow { padding: 5px 0; font-size: 13px; }
.mbrShowHzn .arow i { height: 5px; overflow: hidden; border-radius: 3px; background: #eef2f5; }
.mbrShowHzn .arow i b { display: block; height: 100%; border-radius: 3px; }
.mbrShowHzn .arow em { font-size: 12px; font-style: normal; text-align: right; }
.mbrShowHzn .arow u { text-align: center; }

/* Websites: behind, upper left, after the HERO PM Website Admin Panel */
.mbrShowWeb { top: 0; left: 0; z-index: 1; width: 340px; background: #ffffff; transform: rotate(-4deg); }
.mbrShowWeb .mbrShowChrome { background: #e9edf1; }
.mbrShowWeb .mbrShowChrome i { background: #c3ccd5; }
.mbrShowWeb .mbrShowChrome em { background: #2bb673; color: #fff; }
.mbrShowWeb .wscreen { zoom: .34; width: 1000px; height: 562px; overflow: hidden; background: #fff; font-family: Urbanist, sans-serif; color: #2b3640; }
.mbrShowWeb .wtop { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: #000; color: #fff; font-size: 15px; }
.mbrShowWeb .wtop img { width: 28px; height: 28px; border-radius: 50%; }
.mbrShowWeb .wtop .wtools { margin-left: auto; display: flex; gap: 6px; }
.mbrShowWeb .wtop .wtools i { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 4px; background: #e9edf1; color: #3b3f43; font-size: 15px; }
.mbrShowWeb .wmenu { display: flex; height: 34px; background: #3b3f43; color: #fff; font-size: 14px; }
.mbrShowWeb .wmenu span { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.14); }
.mbrShowWeb .wmenu span.on { background: #5a5f64; }
.mbrShowWeb .wmenu i { width: 22px; font-size: 15px; text-align: center; --fa-primary-color: #fff; --fa-secondary-color: #fff; --fa-secondary-opacity: .45; }
.mbrShowWeb .wbody { display: grid; grid-template-columns: 190px 1fr; height: 488px; }
.mbrShowWeb .wside { background: #3b3f43; color: #fff; padding: 12px 0; font-size: 14px; }
.mbrShowWeb .wside small { display: block; padding: 4px 12px 8px; font-size: 14px; }
.mbrShowWeb .wside span { display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 20px; }
.mbrShowWeb .wside span i { width: 18px; font-size: 15px; text-align: center; --fa-primary-color: #fff; --fa-secondary-color: #fff; --fa-secondary-opacity: .4; }
.mbrShowWeb .wside span.sub { padding-left: 40px; }
.mbrShowWeb .wmain { padding: 12px 16px; }
.mbrShowWeb .wtab { display: inline-block; padding: 5px 14px; border: 1px solid #c9d0d6; border-bottom: 0; border-radius: 6px 6px 0 0; font-size: 14px; background: #fff; }
.mbrShowWeb .wsite { border: 1px solid #c9d0d6; border-radius: 0 6px 6px 6px; padding: 12px; }
.mbrShowWeb .winfo { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center; margin-bottom: 12px; }
.mbrShowWeb .winfo dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; margin: 0; font-size: 13.5px; }
.mbrShowWeb .winfo dt { text-align: right; color: #2b3640; }
.mbrShowWeb .winfo dd { margin: 0; color: #4f5c66; }
.mbrShowWeb .home { display: block; width: 100%; height: 170px; object-fit: cover; object-position: top center; border: 1px solid #c9d0d6; border-radius: 4px; background: #fff; }
/* Page cards with small previews */
.mbrShowWeb .wpages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mbrShowWeb .wpage { border: 1px solid #c9d0d6; border-radius: 4px; padding: 6px 6px 7px; text-align: center; font-size: 12px; background: #fff; }
.mbrShowWeb .wpage i { display: block; position: relative; height: 54px; margin: 5px 3px 4px; border: 1px solid #dfe5ea; border-radius: 2px; background:
  linear-gradient(#134e74, #134e74) 0 0 / 100% 7px no-repeat,
  linear-gradient(#e7eef4, #e7eef4) 6px 13px / 46% 9px no-repeat,
  linear-gradient(#dfe5ea, #dfe5ea) 6px 27px / 80% 3px no-repeat,
  linear-gradient(#dfe5ea, #dfe5ea) 6px 34px / 70% 3px no-repeat,
  linear-gradient(#dfe5ea, #dfe5ea) 6px 41px / 76% 3px no-repeat, #fff; }
.mbrShowWeb .wpage i::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 13px; height: 15px; border-radius: 2px; background: #fff; border: 1px solid #8a96a0; }
.mbrShowWeb .wpage.add i { background: none; border: 1px dashed #c9d0d6; display: grid; place-items: center; font-style: normal; font-size: 24px; color: #2bb673; }
.mbrShowWeb .wpage.add i::after { display: none; }
.mbrShowWeb .wpage small { display: block; font-size: 10px; color: #6b7a86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* PM Avenue: on a phone, in front, lower right */

.mbrShowPma { top: 112px; right: -10px; z-index: 6; width: 200px; padding: 9px; border-radius: 34px; background: #10161c; color: var(--pma-slate); font-family: Poppins, Urbanist, sans-serif; transform: rotate(7deg); box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.18); }
.mbrShowPma .phone { position: relative; height: 420px; overflow: hidden; border-radius: 26px; background: #f5f8fb; }
.mbrShowPma .notch { position: absolute; top: 7px; left: 50%; z-index: 2; width: 66px; height: 18px; border-radius: 10px; background: #10161c; translate: -50% 0; }
.mbrShowPma .status { display: flex; justify-content: space-between; padding: 8px 18px 4px; background: #ffffff; font-size: 9px; font-weight: 600; color: var(--pma-navy); }
.mbrShowPma .nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 8px; background: #ffffff; border-bottom: 1px solid #e2e9f0; }
.mbrShowPma .nav img { width: 20px; height: 20px; border-radius: 5px; }
.mbrShowPma .nav b { margin: 0 auto 0 6px; font-size: 11px; font-weight: 700; color: var(--pma-navy); }
.mbrShowPma .nav em { padding: 3px 7px; border-radius: 999px; background: var(--pma-teal); color: #ffffff; font-family: Urbanist, sans-serif; font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: 0.05em; }
.mbrShowPma .crumb { padding: 10px 12px 2px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--pma-navy); }
.mbrShowPma .crumb small { display: block; margin-top: 2px; font-size: 9px; font-weight: 400; color: #566472; }
.mbrShowPma .filters { display: flex; gap: 4px; padding: 6px 12px 8px; overflow: hidden; }
.mbrShowPma .filters span { flex: none; padding: 3px 8px; border: 1px solid #cfdcea; border-radius: 999px; background: #ffffff; font-size: 8.5px; }
.mbrShowPma .filters span.on { border-color: var(--pma-navy); background: var(--pma-navy); color: #ffffff; }
.mbrShowPma .result { margin: 0 10px 7px; padding: 9px; border: 1px solid #e2e9f0; border-radius: 12px; background: #ffffff; }
.mbrShowPma .result.you { border-color: var(--pma-teal); box-shadow: 0 0 0 2px rgba(21, 163, 139, 0.15); }
.mbrShowPma .rTop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mbrShowPma .rTop div { min-width: 0; }
.mbrShowPma .logo { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #ffffff; font-size: 10px; font-weight: 700; }
.mbrShowPma .result strong { display: block; overflow: hidden; font-size: 9.5px; color: var(--pma-navy); white-space: nowrap; text-overflow: ellipsis; }
.mbrShowPma .result small { display: block; overflow: hidden; font-size: 8.5px; color: #566472; white-space: nowrap; text-overflow: ellipsis; }
.mbrShowPma .rMeta { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.mbrShowPma .vv { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: var(--pma-mint); color: var(--pma-teal); font-size: 8px; font-weight: 600; }
.mbrShowPma .stars { font-size: 9px; letter-spacing: 1px; color: #f5b301; }
.mbrShowPma .contact { display: block; margin-top: 7px; padding: 6px; border-radius: 8px; background: var(--pma-teal); color: #ffffff; font-size: 9px; font-weight: 600; text-align: center; }
.mbrShowPma .match { position: absolute; right: 10px; bottom: 12px; left: 10px; padding: 9px 10px; border-radius: 12px; background: var(--pma-navy); color: #ffffff; font-size: 9px; line-height: 1.35; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5); }
.mbrShowPma .match b { display: block; font-size: 10px; color: #7fe0c9; }

/* Harmony: in front, largest, after the real CPLintro dashboard */

.mbrShowHmy { top: 128px; left: 6px; z-index: 5; width: 552px; background: #ffffff; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.2); }
.mbrShowHmy .mbrShowChrome { background: #e9edf1; }
.mbrShowHmy .mbrShowChrome i { background: #c3ccd5; }
.mbrShowHmy .mbrShowChrome em { background: var(--hmy-orange); color: #4a2a00; }
.mbrShowHmy .screen { zoom: 0.55; width: 1000px; color: #2b3640; }
.mbrShowHmy .hdr { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: #1e74a8; color: #ffffff; font-size: 15px; }
.mbrShowHmy .hdr > img { width: 28px; height: 28px; border-radius: 50%; }
.mbrShowHmy .hdr small { font-size: 13px; opacity: 0.9; }
.mbrShowHmy .hdr .icons { display: flex; gap: 7px; margin-left: auto; }
.mbrShowHmy .hdr .icons img { width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: 0.92; }
.mbrShowHmy .hdr .icons img.wide { width: 33px; filter: none; opacity: 1; }
.mbrShowHmy .hdr .jd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffffff; color: #1e74a8; font-size: 13px; font-weight: 800; }
.mbrShowHmy .menu { display: flex; align-items: center; height: 34px; background: #0f2d4a; color: #ffffff; font-size: 14px; }
.mbrShowHmy .menu span { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.mbrShowHmy .menu span.on { background: rgba(255, 255, 255, 0.08); }
.mbrShowHmy .menu span img { width: auto; height: 20px; }
.mbrShowHmy .menu .find { display: flex; align-items: center; width: 180px; height: 24px; margin-left: 8px; padding: 0 12px; border-radius: 12px; background: #ffffff; color: #7a858f; font-size: 13px; }
.mbrShowHmy .menu .find svg { flex: none; width: 14px; height: 14px; margin-right: 7px; }
.mbrShowHmy .menu .badges { display: flex; gap: 14px; margin-left: 22px; }
.mbrShowHmy .menu .badges b { position: relative; }
.mbrShowHmy .menu .badges b img { display: block; height: 20px; }
.mbrShowHmy .menu .badges b[data-n]::after { content: attr(data-n); position: absolute; top: -7px; right: -9px; padding: 0 3px; border-radius: 6px; background: #e53935; color: #ffffff; font-size: 9px; }
.mbrShowHmy .page { display: grid; grid-template-columns: 30px minmax(0, 420px) minmax(0, 1fr); background: #ffffff; }
.mbrShowHmy .rail { background: #0f2d4a; }
.mbrShowHmy .left { padding: 12px 14px; }
.mbrShowHmy .greet { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #e3e8ee; }
.mbrShowHmy .greet .co { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: #15a38b; color: #ffffff; font-size: 20px; font-weight: 800; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.mbrShowHmy .greet strong { display: block; font-size: 24px; font-weight: 400; color: #1f3445; }
.mbrShowHmy .greet em { font-size: 13px; color: #6b7a86; }
.mbrShowHmy .twin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mbrShowHmy .box { min-height: 120px; padding: 10px 12px; border: 1px solid #dfe5ea; border-radius: 6px; }
.mbrShowHmy .box h6 { margin: 0 0 8px; font-size: 20px; font-weight: 400; color: #4a9ad0; }
.mbrShowHmy .box p { margin: 0; font-size: 14px; line-height: 1.4; }
.mbrShowHmy .box p a { color: #1a0dab; text-decoration: underline; }
.mbrShowHmy .alerts { min-height: 0; margin-top: 10px; }
.mbrShowHmy .alerts h6 img { width: 18px; height: 18px; margin-right: 6px; vertical-align: -2px; }
.mbrShowHmy .alerts p { display: flex; align-items: center; gap: 7px; padding: 4px 0; overflow: hidden; font-size: 13px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.mbrShowHmy .alerts p img { flex: none; width: 16px; height: 16px; }
.mbrShowHmy .alerts .cb { flex: none; width: 13px; height: 13px; border: 1px solid #8a96a0; border-radius: 2px; }
.mbrShowHmy .right { padding: 8px 10px 10px; background: #eef2f5; border-left: 1px solid #dfe5ea; }
.mbrShowHmy .sec { margin-bottom: 8px; padding: 8px 10px 10px; border-radius: 6px; background: #ffffff; }
.mbrShowHmy .sec h6 { margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #3d4a55; }
.mbrShowHmy .sec h6 span { font-weight: 400; color: #8a96a0; }
.mbrShowHmy .sec h6 img { width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; }
.mbrShowHmy .twinSec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mbrShowHmy .twinSec .tiles { grid-template-columns: 1fr 1fr; }
.mbrShowHmy .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mbrShowHmy .tile { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 82px; padding: 8px; border: 1px solid #dfe5ea; border-radius: 6px; }
.mbrShowHmy .tile.i { padding-right: 6px; padding-left: 34px; }
.mbrShowHmy .tile.warm { border-color: #ead8c0; background: #fbf3e8; }
.mbrShowHmy .tile img.ti { position: absolute; top: 50%; left: 6px; width: 24px; height: 24px; filter: grayscale(1); opacity: 0.45; translate: 0 -50%; }
.mbrShowHmy .tile b { font-size: 30px; font-weight: 400; line-height: 1; color: #1f2a33; }
.mbrShowHmy .tile small { font-size: 11.5px; line-height: 1.15; color: #4f5c66; overflow-wrap: break-word; }
.mbrShowHmy .tile .c { text-align: center; }
.mbrShowHmy .dial { position: relative; width: 62px; height: 62px; margin: 0 auto 4px; border: 4px solid #1f2a33; border-radius: 50%; background: conic-gradient(from 225deg, #2e9d4f 0 30%, #f2c230 30% 50%, #e2463a 50% 75%, #ffffff 75% 100%); }
.mbrShowHmy .dial::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #ffffff; }
.mbrShowHmy .dial i { position: absolute; top: 50%; left: 50%; z-index: 1; width: 3px; height: 22px; border-radius: 2px; background: #1d3e8a; transform-origin: 50% 100%; translate: -50% -100%; }
.mbrShowHmy .spark { display: block; width: 100%; height: 18px; margin: 2px 0; }

/* heropm.com's warm stat band */

.mbrShowBand { position: relative; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 8px; padding: 18px clamp(32px, 5vw, 64px); background: linear-gradient(90deg, #f04e37 0%, #f7793a 55%, #fbb040 100%); }
.mbrShowBand strong { display: block; font-size: 28px; font-weight: 800; line-height: 1; }
.mbrShowBand span { font-size: 13px; color: rgba(255, 255, 255, 0.92); }
.mbrShowBand .free { max-width: 190px; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: right; }

/* Platform marketing pages: one replaces the panel when opened, Close returns to it */

.mbrShowHome[hidden], .mbrPromo[hidden] { display: none; }
.mbrPromo { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; color: #ffffff; }
.mbrPromoHead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(28px, 4vw, 56px); }
.mbrPromoBrand { display: inline-flex; align-items: center; gap: 10px; }
.mbrPromoClose { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mbrPromoClose span { font-size: 18px; line-height: 1; }
.mbrPromoClose:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.mbrPromoBody { max-width: 640px; padding: 8px clamp(28px, 4vw, 56px) 48px; }
.mbrPromoEyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mbrPromo h2 { margin: 0 0 14px; font-size: clamp(30px, 3vw, 44px); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; }
.mbrPromo h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.mbrPromoLede { margin: 0 0 26px; font-size: 17px; line-height: 1.5; opacity: 0.9; }
.mbrPromoSub { margin-top: 4px !important; }
.mbrPromoNote { margin: 12px 0 24px; font-size: 15px; line-height: 1.5; opacity: 0.85; }
.mbrPromoMember { margin: 14px 0 0; font-size: 14px; opacity: 0.8; }
.mbrPromoGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.mbrPromoGrid li, .mbrPromoChecklist li { padding: 14px 16px; border-radius: 12px; }
.mbrPromoGrid strong, .mbrPromoChecklist strong, .mbrPromoSteps strong { display: block; margin-bottom: 4px; font-size: 15px; }
.mbrPromoGrid span, .mbrPromoChecklist span, .mbrPromoSteps span { display: block; font-size: 14px; line-height: 1.4; opacity: 0.85; }
.mbrPromoFeature { margin: 0 0 18px; padding: 18px 20px; border-radius: 14px; }
.mbrPromoFeature p, .mbrPromoPaths p { margin: 0; font-size: 15px; line-height: 1.5; }
.mbrPromoSteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: mbrStep; }
.mbrPromoSteps li { counter-increment: mbrStep; padding-top: 10px; border-top: 3px solid; }
.mbrPromoSteps li::before { content: counter(mbrStep); display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; opacity: 0.7; }
.mbrPromoChecklist { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: mbrStep; }
.mbrPromoChecklist li { position: relative; padding-left: 52px; counter-increment: mbrStep; }
.mbrPromoChecklist li::before { content: counter(mbrStep); position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800; }
.mbrPromoQuote { margin: 0 0 24px; padding: 4px 0 4px 18px; border-left: 4px solid; font-size: 20px; font-weight: 600; line-height: 1.35; }
.mbrPromoQuote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; font-weight: 500; opacity: 0.8; }
.mbrPromoPaths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.mbrPromoPaths > div { padding: 16px 18px; border-radius: 14px; }
.mbrPromoPlans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.mbrPromoPlans li { padding: 12px; border-radius: 12px; }
.mbrPromoPlans strong { display: block; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.mbrPromoPlans b { display: block; margin: 4px 0; font-size: 24px; font-weight: 800; }
.mbrPromoPlans b small { font-size: 13px; font-weight: 600; }
.mbrPromoPlans span { display: block; font-size: 12.5px; line-height: 1.3; opacity: 0.85; }
.mbrPromoActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mbrPromoCta, .mbrPromoMore { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.mbrPromoMore { border: 2px solid currentColor; color: inherit; }
.mbrPromoMore::after { content: "\2197"; margin-left: 8px; }

/* Harmony: blue with orange and magenta */
.mbrPromoHarmony { background: linear-gradient(170deg, #134e74 0%, #1d6fa3 60%, #1e74a8 100%); }
.mbrPromoHarmony .mbrPromoHead { background: rgba(19, 78, 116, 0.92); }
.mbrPromoHarmony .mbrPromoBrand img { border-radius: 10px; }
.mbrPromoHarmony .mbrPromoBrand > span { font-size: 28px; font-weight: 400; line-height: 1; color: var(--hmy-orange); }
.mbrPromoHarmony .mbrPromoBrand b { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.8); }
.mbrPromoHarmony .mbrPromoEyebrow { color: var(--hmy-orange); }
.mbrPromoHarmony h2 span { color: var(--hmy-orange); }
.mbrPromoHarmony .mbrPromoGrid li { background: #ffffff; color: #1f2a33; border-top: 3px solid var(--hmy-orange); box-shadow: 0 6px 18px rgba(8, 40, 64, 0.22); }
.mbrPromoHarmony .mbrPromoGrid li:nth-child(even) { border-top-color: #e05aa5; }
.mbrPromoHarmony .mbrPromoGrid strong { color: #134e74; }
.mbrPromoHarmony .mbrPromoFeature { background: #ffffff; color: #1f2a33; border-left: 6px solid var(--hmy-orange); }
.mbrPromoHarmony .mbrPromoFeature h3 { color: #134e74; }
.mbrPromoHarmony .mbrPromoFeatureAlt { background: #0b3350; color: #ffffff; }
.mbrPromoHarmony .mbrPromoFeatureAlt h3 { color: var(--hmy-orange); }
.mbrPromoHarmony .mbrPromoSteps { margin-bottom: 20px; }
.mbrPromoHarmony .mbrPromoSteps li { border-top-color: var(--hmy-orange); }
.mbrPromoHarmony .mbrPromoQuote { border-left-color: #e05aa5; }
.mbrPromoHarmony .mbrPromoCta { background: var(--hmy-orange); color: #4a2a00; }

/* Horizon: navy with violet and sky */
.mbrPromoHorizon { background: linear-gradient(180deg, #052b45 0%, #01669d 70%, #2f86c4 100%); }
.mbrPromoHorizon .mbrPromoHead { background: rgba(5, 43, 69, 0.92); }
.mbrPromoHorizon .mbrPromoEyebrow { color: var(--hzn-sky); }
.mbrPromoHorizon h2 span { color: var(--hzn-sky); }
.mbrPromoHorizon .mbrPromoPaths > div { background: #ffffff; color: #1f2a33; border-top: 4px solid var(--hzn-violet); box-shadow: 0 6px 18px rgba(2, 24, 40, 0.22); }
.mbrPromoHorizon .mbrPromoPaths h3 { color: var(--hzn-violet); }
.mbrPromoHorizon .mbrPromoGrid li { background: #ffffff; color: #1f2a33; border-top: 3px solid var(--hzn-sky); box-shadow: 0 6px 18px rgba(2, 24, 40, 0.22); }
.mbrPromoHorizon .mbrPromoGrid li:nth-child(even) { border-top-color: var(--hzn-violet); }
.mbrPromoHorizon .mbrPromoGrid strong { color: #052b45; }
.mbrPromoHorizon .mbrPromoPlans li { background: rgba(5, 43, 69, 0.45); border: 1px solid rgba(255, 255, 255, 0.16); }
.mbrPromoHorizon .mbrPromoPlans li:first-child { background: var(--hzn-violet); border-color: var(--hzn-violet); }
.mbrPromoHorizon .mbrPromoFeature { background: #eef7ff; color: #1f2a33; border-left: 6px solid var(--hzn-violet); }
.mbrPromoHorizon .mbrPromoFeature h3 { color: #052b45; }
.mbrPromoHorizon .mbrPromoFeatureAlt { background: rgba(126, 200, 255, 0.16); color: #ffffff; border: 1px solid rgba(126, 200, 255, 0.4); }
.mbrPromoHorizon .mbrPromoFeatureAlt h3 { color: var(--hzn-sky); }
.mbrPromoHorizon .mbrPromoCta { background: var(--hzn-violet); color: #ffffff; }

/* Websites: emerald with white cards, mint and sky */
.mbrPromoWebsites { background: linear-gradient(170deg, #0b3d30 0%, #0f6b4c 55%, #14875f 100%); }
.mbrPromoWebsites .mbrPromoHead { background: rgba(11, 61, 48, 0.94); }
.mbrPromoWebsites .mbrPromoBrand > span:last-child { font-size: 28px; font-weight: 400; line-height: 1; color: #7fe0a8; }
.mbrPromoWebsites .mbrPromoBrand b { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.8); }
.mbrPromoWebsites .mbrPromoEyebrow { color: #7fe0a8; }
.mbrPromoWebsites h2 span { color: #7fe0a8; }
.mbrPromoWebsites .mbrPromoGrid li { background: #ffffff; color: #1f2a33; border-top: 3px solid #2bb673; box-shadow: 0 6px 18px rgba(4, 34, 26, 0.18); }
.mbrPromoWebsites .mbrPromoGrid li:nth-child(even) { border-top-color: var(--hzn-sky); }
.mbrPromoWebsites .mbrPromoGrid strong { color: #0b3d30; }
.mbrPromoWebsites .mbrPromoFeature { background: #e9f8f0; color: #1f2a33; border-left: 6px solid #2bb673; }
.mbrPromoWebsites .mbrPromoFeature h3 { color: #0b3d30; }
.mbrPromoWebsites .mbrPromoFeatureAlt { background: #082c23; color: #ffffff; border-left: 6px solid #2bb673; }
.mbrPromoWebsites .mbrPromoFeatureAlt h3 { color: #7fe0a8; }
.mbrPromoWebsites .mbrPromoPlans li { background: #ffffff; color: #1f2a33; box-shadow: 0 6px 18px rgba(4, 34, 26, 0.18); }
.mbrPromoWebsites .mbrPromoPlans strong { color: #0f6b4c; }
.mbrPromoWebsites .mbrPromoPlans b { color: #0b3d30; }
.mbrPromoWebsites .mbrPromoCta { background: #ffffff; color: #0b3d30; }

/* PM Avenue: midnight navy with a teal glow, white cards, Poppins */
.mbrPromoAvenue { background: linear-gradient(160deg, var(--pma-navy) 0%, #123a5c 60%, #0f4f5c 100%); font-family: Poppins, Urbanist, sans-serif; }
.mbrPromoAvenue .mbrPromoHead { background: rgba(14, 42, 71, 0.94); }
.mbrPromoAvenue h2 { font-size: clamp(28px, 2.7vw, 40px); font-weight: 700; }
.mbrPromoAvenue h2 span { color: #7fe0c9; }
.mbrPromoAvenue .mbrPromoEyebrow { color: #7fe0c9; }
.mbrPromoAvenue .mbrPromoBrand img { border-radius: 10px; }
.mbrPromoAvenue .mbrPromoBrand > span:last-child { font-size: 28px; font-weight: 600; line-height: 1; color: #ffffff; }
.mbrPromoAvenue .mbrPromoBrand b { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: #7fe0c9; }
.mbrPromoAvenue .mbrPromoPaths > div { background: #ffffff; color: var(--pma-slate); border-top: 4px solid var(--pma-teal); box-shadow: 0 6px 18px rgba(4, 20, 36, 0.24); }
.mbrPromoAvenue .mbrPromoPaths h3 { color: var(--pma-navy); }
.mbrPromoAvenue .mbrPromoChecklist li { background: #ffffff; color: var(--pma-slate); box-shadow: 0 6px 18px rgba(4, 20, 36, 0.24); }
.mbrPromoAvenue .mbrPromoChecklist strong { color: var(--pma-navy); }
.mbrPromoAvenue .mbrPromoChecklist li::before { background: var(--pma-teal); color: #ffffff; }
.mbrPromoAvenue .mbrPromoFeature { background: var(--pma-mint); color: var(--pma-slate); border-left: 6px solid var(--pma-teal); }
.mbrPromoAvenue .mbrPromoFeature h3 { color: var(--pma-navy); }
.mbrPromoAvenue .mbrPromoFeatureAlt { background: #081d33; color: #ffffff; border-left: 6px solid var(--pma-teal); }
.mbrPromoAvenue .mbrPromoFeatureAlt h3 { color: #7fe0c9; }
.mbrPromoAvenue .mbrPromoCta { background: var(--pma-teal); color: #ffffff; }

@media (max-width: 1180px) {
  .mbrPromoGrid, .mbrPromoPaths { grid-template-columns: 1fr; }
  .mbrPromoSteps, .mbrPromoPlans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Platform choices with a Learn more link */

/* Reactivation: each option with what will happen */

.mbrReactOption { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); background: #fff; }
.mbrReactOption:has(input:checked) { border-color: var(--mbr-brand); background: var(--mbr-soft); }
.mbrReactOption .mbrChoice { margin-bottom: 6px !important; }
.mbrReactTitle { margin: 0 0 6px; font-size: 15px; }
.mbrReactWhat { margin: 0; padding: 0 0 0 28px; font-size: 14px; line-height: 1.5; color: var(--mbr-muted); }
.mbrReactWhat li { margin: 0 0 4px; }
.mbrReactWhat li:last-child { margin-bottom: 0; }
.mbrReactCard { max-width: 760px; padding: 24px; gap: 16px; }
/* "Not now, keep me posted" under the reactivation choices */
.mbrReactLater { margin-top: 16px; }
.mbrReactLater > p { margin: 0 0 12px; }
.mbrReactLater form .mbrError { margin: 0 0 10px; }
.mbrReactCard > p { margin: 0; }
.mbrReactCard > .mbrBtn { align-self: flex-start; }
.mbrReactCard .mbrError { margin: 0 0 12px; }
.mbrReactActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mbrReactComments { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.mbrReactComments label { font-size: 14px; font-weight: 700; }
.mbrReactComments textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--hd-line, #ccd6dd); border-radius: 12px; resize: vertical; }

.mbrChoiceRow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; clear: both; }
.mbrChoiceRow .mbrChoice { flex: 1; }
.mbrLearnMore { flex: none; margin-top: 1px; font-size: 14px; font-weight: 700; white-space: nowrap; }

@media (max-width: 1400px) { .mbrShowStage { zoom: 0.9; } }
@media (max-width: 1260px) { .mbrShowStage { zoom: 0.8; } }
@media (max-width: 1120px) { .mbrShowStage { zoom: 0.7; } .mbrShowBand strong { font-size: 22px; } }
@media (max-width: 1000px) { .mbrShowStage { zoom: 0.62; } }
@media (max-height: 860px) { .mbrShowFit { zoom: 0.88; } }
@media (max-height: 760px) { .mbrShowFit { zoom: 0.76; } }
@media (max-height: 660px) { .mbrShowFit { zoom: 0.64; } }
@media (prefers-reduced-motion: reduce) { .mbrShowWin { transition: none; } }

/* Narrow screens: form only, full width */

@media (max-width: 900px) {
  .mbrSplit { grid-template-columns: 1fr; }
  .mbrVisual { display: none; }
  .mbrPanel { box-shadow: none; padding: 24px 16px; }
  .mbrContent { padding: 32px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Sign-in security check (shown after repeated failures) */
.mbrChallenge { margin: 4px 0 12px; min-height: 65px; }

/* Support and verification */
.mbrSectionTitle { margin: 28px 0 10px; font-size: 18px; font-weight: 700; }
.mbrError.mbrSuccess { background: var(--mbr-notice-bg); color: var(--mbr-notice-fg); }
/* Loading circle inside a busy button or link (script busyButton) */
.mbrSpin { display: inline-block; flex: none; width: 1em; height: 1em; margin-right: 0.45em; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mbrSpin 0.75s linear infinite; }
.mbrSpinAfter { margin-right: 0; margin-left: 0.45em; }
.mbrBtn .mbrSpin, .mbrLauncherApp .mbrSpin { margin: 0; }
@keyframes mbrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mbrSpin { animation-duration: 2s; } }
[aria-busy="true"] { cursor: progress; }
.mbrLinkError { display: block; flex-basis: 100%; margin: 6px 0 0; padding: 6px 10px; border-radius: var(--mbr-radius); background: var(--mbr-error-bg); color: var(--mbr-error-fg); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; white-space: normal; }
:has(> .mbrLinkError), :has(> .mbrConfirm) { flex-wrap: wrap; }
.mbrConfirm { flex-basis: 100%; margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--hd-line, #dfe4ea); border-radius: var(--mbr-radius); background: var(--mbr-notice-bg); color: var(--mbr-ink); text-align: left; }
.mbrConfirm p { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.mbrConfirmActions { display: flex; flex-wrap: wrap; gap: 8px; }

/* On the split pages (sign-in, setup, reactivation) the content column is a
   fixed-height flex column: wrapping it would open a second column, so the
   confirmation just stacks under the form. The dashboard button colors
   (--hd-*) don't exist there, so they fall back to the Member Center's. */
.mbrContent:has(> .mbrConfirm) { flex-wrap: nowrap; }
.mbrContent > .mbrConfirm { flex-basis: auto; align-self: stretch; margin: 12px 0 0; }
.mbrContent .mbrBtnBrand { background: var(--hd-brand, var(--mbr-brand)); }
.mbrContent .mbrBtnGhost { border-color: var(--hd-ink, var(--mbr-ink)); color: var(--hd-ink, var(--mbr-ink)); }
.mbrContent .mbrBtnGhost:hover { background: var(--hd-ink, var(--mbr-ink)); color: #fff; }
a.mbrSecondary { text-decoration: none; }

/* A form field whose value is an action (Users: Password, as Core) */
.mbrFieldLink { margin: 0 0 16px; font-size: 15px; }
.mbrFieldLink .mbrTextButton { text-decoration: underline; }
.mbrIncident { margin: 0 0 12px; border: 1px solid var(--mbr-line, #d9e1ea); border-radius: var(--mbr-radius); padding: 10px 14px; }

/* Action reveal: a section that opens a form (Add a user, multi-factor
   sign-in, Decline). Closed, it reads as a button: dashed brand outline, icon
   circle and bold label; open, it becomes a card holding the form. "Add"
   shows + / -, caution actions use the warning color. */
.mbrActionReveal { margin: 0 0 12px; border: 2px dashed var(--mbr-tint-strong); border-radius: var(--mbr-radius); background: transparent; transition: border-color 140ms ease, background 140ms ease; }
.mbrActionReveal > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--hd-brand); font-weight: 800; cursor: pointer; list-style: none; border-radius: var(--mbr-radius); }
.mbrActionReveal > summary::-webkit-details-marker { display: none; }
.mbrActionReveal > summary::after { margin-left: auto; color: var(--hd-brand); font-size: 0.85rem; content: "\25B8"; transition: transform 120ms ease; }
.mbrActionReveal:hover:not([open]) { border-color: var(--hd-brand); background: var(--mbr-data-soft); }
.mbrActionReveal > summary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--mbr-focus); }
.mbrActionIcon { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--hd-brand); color: #fff; font-size: 0.85rem; }
.mbrActionIcon i { --fa-primary-color: #fff; --fa-secondary-color: #fff; --fa-secondary-opacity: 0.55; }
.mbrActionText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mbrActionText small { color: var(--hd-muted); font-size: 0.875rem; font-weight: 400; line-height: 1.4; }
.mbrActionReveal[open] { border-style: solid; border-width: 1px; border-color: var(--hd-line); background: var(--hd-card); }
.mbrActionReveal[open] > summary { border-bottom: 1px solid var(--hd-line); border-radius: var(--mbr-radius) var(--mbr-radius) 0 0; }
.mbrActionReveal[open] > summary::after { transform: rotate(90deg); }
.mbrActionReveal > :not(summary) { margin-left: 16px; margin-right: 16px; }
.mbrActionReveal > :not(summary):first-of-type { margin-top: 14px; }
/* Bottom space on the open section itself: its last child can be a form that stays hidden until a later step (multi-factor sign-in). */
.mbrActionReveal[open] { padding-bottom: 16px; }
/* Add: a + that turns into a - when open, no arrow. */
.mbrActionAdd > summary::after { content: none; }
.mbrActionAdd[open] .mbrActionIcon i::before { content: "\f068"; }
/* Caution actions (turn off, decline). */
.mbrActionCaution > summary, .mbrActionCaution > summary::after { color: #8a4b00; }
.mbrActionCaution .mbrActionIcon { background: #fbb040; color: #1f2529; }
.mbrActionCaution .mbrActionIcon i { --fa-primary-color: #1f2529; --fa-secondary-color: #1f2529; }
.mbrIncident > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.mbrIncident > summary small { color: var(--mbr-muted); margin-left: auto; }
.mbrPill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--mbr-notice-bg); color: var(--mbr-notice-fg); font-size: 13px; }
.mbrThread { list-style: none; margin: 14px 0; padding: 0; }
.mbrThreadItem { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--mbr-radius); background: rgba(0, 102, 153, 0.06); }
.mbrThreadItem.mbrThreadSupport { background: rgba(251, 176, 64, 0.12); }
.mbrThreadItem small { color: var(--mbr-muted); }
.mbrThreadItem p { margin: 4px 0 0; overflow-wrap: anywhere; }
.mbrReplyForm textarea { width: 100%; }

/* Account settings */
.mbrTabs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 8px; padding: 0 0 10px; border-bottom: 1px solid var(--mbr-line, #d9e1ea); }
.mbrTabs a { color: var(--mbr-brand); font-weight: 700; text-decoration: none; }
.mbrTabs a:hover { text-decoration: underline; }
.mbrSubTitle { margin: 20px 0 8px; font-size: 16px; font-weight: 700; }
.mbrAccountForm input[readonly] { background: var(--mbr-notice-bg, #f3f6f9); color: var(--mbr-muted); }
.mbrAccountForm textarea { width: 100%; box-sizing: border-box; font: inherit; }
.mbrUsersRow { flex-wrap: wrap; gap: 8px 16px; }
.mbrUsersRow > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.mbrUsersActions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-left: auto; }
.mbrUsersActions select { height: 34px; font: inherit; font-size: 14px; }
#mbrMfaSecret { font-size: 15px; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.mbrMfaQr { display: inline-block; margin: 4px 0 10px; padding: 8px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); background: #fff; line-height: 0; }
.mbrMfaQr svg { display: block; width: 180px; height: 180px; }

/* Account settings, round 2: logo, branding, user editor, platform stubs */
.mbrBadge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--mbr-soft); color: var(--mbr-ink); font-size: 12px; font-weight: 700; vertical-align: middle; }
.mbrLegend { margin: 14px 0 6px; font-weight: 700; }
.mbrUsersList { list-style: none; margin: 0 0 12px; padding: 0; }
.mbrUsersMain small { display: block; margin-left: 0; overflow-wrap: anywhere; }
.mbrUsersItem .mbrForm { margin-top: 12px; }
.mbrAuthFields { margin: 12px 0; padding: 12px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); }
.mbrAuthFields:disabled { opacity: 0.7; }
/* Special authorizations: one toggle per row, as the public profile toggle. */
.mbrAuexGrid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0 12px; padding: 0; border: 0; min-width: 0; }
.mbrAuexToggle strong { font-size: 0.9rem; font-weight: 600; }
.mbrAuexGrid:disabled .mbrAuexToggle { cursor: default; opacity: 0.55; }
.mbrAuexGrid .mbrOnly { grid-column: 1 / -1; }
.mbrAgentUpgrade { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mbr-line); }

/* Platform-conditional settings the account doesn't have: visible, greyed,
   not usable, with the "Applies to" note. */
.mbrStub { position: relative; margin: 8px 0 14px; padding: 12px 14px; border: 1px dashed var(--mbr-line); border-radius: var(--mbr-radius); background: var(--mbr-soft); color: var(--mbr-muted); }
.mbrStub fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.mbrStub input, .mbrStub select, .mbrStub textarea, .mbrStub button { opacity: 0.55; cursor: not-allowed; }
.mbrStub .mbrHelp { color: var(--mbr-muted); }
.mbrOnly { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--mbr-notice-bg); color: var(--mbr-notice-fg); font-size: 13px; font-weight: 700; }
.mbrMoreGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.mbrMoreCard { padding: 14px 16px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); }
.mbrMoreCard.mbrStub { border-style: dashed; }
.mbrMoreCard .mbrSubTitle { margin-top: 0; }
/* Account > Change or close (SYS5 flib.SYS5.account) */
.mbrChangeCard > .mbrSectionTitle { margin: 0 0 4px; }
.mbrChangeCard > .mbrSectionTitle + .mbrHelp { margin: 0 0 22px; font-size: 15px; line-height: 1.5; }
.mbrChangeCard .mbrSubTitle { margin: 24px 0 10px; }
.mbrChangeList { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.mbrChangeList li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 1px solid var(--hd-gold); border-radius: 12px; background: var(--hd-gold-tint); font-size: 15px; }
.mbrChangeList small { color: var(--hd-muted); font-size: 14px; }
.mbrChangePlatform { margin: 0 0 10px; padding: 0; overflow: hidden; border: 1px solid var(--mbr-line); border-radius: 12px; background: var(--hd-card); transition: border-color 140ms ease, box-shadow 140ms ease; }
.mbrChangePlatform:hover { border-color: var(--hd-line-strong, var(--mbr-field-line)); }
.mbrChangePlatform[open] { border-color: var(--hd-brand); box-shadow: 0 0 0 1px var(--hd-brand) inset; }
.mbrChangePlatform > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.mbrChangePlatform > summary::-webkit-details-marker { display: none; }
.mbrChangePlatform > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--hd-muted); border-bottom: 2px solid var(--hd-muted); transform: rotate(45deg) translateY(-2px); transition: transform 140ms ease; }
.mbrChangePlatform[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.mbrChangePlatform > summary .mbrAppIcon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; }
.mbrChangePlatform > summary > i { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--hd-surface); color: var(--hd-brand); font-size: 16px; }
.mbrChangePlatform[open] > summary { border-bottom: 1px solid var(--mbr-line); }
.mbrChangePlatform > :not(summary) { margin-left: 22px; margin-right: 22px; }
.mbrChangePlatform > summary + * { margin-top: 18px; }
.mbrChangePlatform > :last-child:not(summary) { margin-bottom: 22px; }
.mbrChangePlatform .mbrForm { max-width: 640px; }
.mbrChangePlatform .mbrChoices .mbrChoice { padding: 12px 14px; border: 1px solid var(--mbr-line); border-radius: 10px; }
.mbrChangePlatform .mbrChoice:has(input:checked) { border-color: var(--hd-brand); background: var(--hd-surface); }
.mbrChangePlatform .mbrChoice span strong { display: block; margin-bottom: 2px; }
.mbrChangePlatform .mbrChoice span { color: var(--hd-muted); font-size: 14px; line-height: 1.45; }
.mbrChangePlatform .mbrChoice span strong { color: var(--hd-ink); font-size: 15px; }
.mbrChangeNotes { margin: 0 0 12px; padding-left: 18px; }
@media (max-width: 600px) {
 .mbrChangePlatform > summary { padding: 12px 14px; }
 .mbrChangePlatform > :not(summary) { margin-left: 14px; margin-right: 14px; }
}
/* Website order cards: several member steps, and on the To-dos page */
.mbrOrderNext:has(.mbrOrderYouList) { flex-direction: column; align-items: stretch; gap: 8px; }
.mbrOrderNext:has(.mbrOrderOldHelp) { flex-direction: column; align-items: stretch; gap: 8px; }
.mbrOrderNext .mbrOrderOldHelp { color: var(--hd-muted); font-size: 14px; }
.mbrOrderYouList { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbrOrderYouList li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); }
.mbrTodoOrders { display: flex; flex-direction: column; gap: 14px; }
/* Website card: a newer website version (SYS5 loadWebsiteUpgrade) */
.mbrWebUpgrade { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--hd-surface); font-size: 14px; }
.mbrWebUpgrade > i { margin-top: 2px; font-size: 22px; --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-gold); }
.mbrWebUpgrade > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mbrWebUpgrade a { font-weight: 700; }
.mbrWebUpgradeNotes > summary { cursor: pointer; font-weight: 700; }
.mbrWebUpgradeNotes ul { margin: 6px 0 0; padding-left: 18px; }
.mbrWebUpgradeNotes li { margin: 0 0 6px; overflow-wrap: anywhere; }
.mbrWebUpgradeNotes small { color: var(--hd-muted); font-size: 14px; }
/* Help: Idea Zone and Report an outage */
.mbrHelpPortalCard { display: flex; flex-direction: column; gap: 20px; padding: 26px 30px; }
#mbrContent > .mbrHelpPortalCard { max-width: 820px; margin-left: max(0px, calc((100% - 1240px) / 2)); margin-right: auto; }
.mbrHelpPortalCard .mbrTodoIntro { margin: 0; color: var(--hd-ink); font-size: 16px; line-height: 1.55; }
.mbrHelpPortalCheck { padding: 14px 18px; border-left: 4px solid var(--hd-brand); border-radius: 10px; background: var(--hd-surface); font-size: 15px; }
.mbrHelpPortalCheck p { margin: 0 0 8px; }
.mbrHelpPortalCheck ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.mbrHelpPortalCheck li { display: flex; align-items: center; gap: 8px; color: var(--hd-ink); }
.mbrHelpPortalCheck li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-brand); }
.mbrApp .mbrHelpPortalCard .mbrForm { max-width: none; }
.mbrHelpPortalCard .mbrForm select, .mbrHelpPortalCard .mbrForm textarea { width: 100%; }
@media (max-width: 600px) {
 .mbrHelpPortalCard, .mbrBookCard { padding: 18px 16px; }
}


.mbrMoreList { margin: 0 0 12px; padding-left: 18px; font-size: 14px; }
.mbrMoreList li { margin: 2px 0; }
@media (max-width: 560px) {
}

/* ==========================================================================
   Signed-in Member Center, on Adobe's account/app-management model (Creative
   Cloud): a narrow hub menu (Home, Apps, Account, Help), a white content
   sheet on grey, pill filters inside each hub, outlined cards and pill
   buttons. Member Center icons are Font Awesome duotone in the Member
   Center palette: HERO blue with HERO gold. Platform icons sit on their own
   color tiles. Sign-in, signup, setup and password pages keep the split
   layout above.
   ========================================================================== */

.mbrAppBody {
  /* Layers follow Adobe Spectrum 2: a white frame (header, hub menu), a
     #f8f8f8 content canvas, and white cards with no outline, lifted by the
     emphasized shadow (deeper on hover). */
  --hd-bg: #ffffff;
  --hd-canvas: #f8f8f8;
  --hd-card: #ffffff;
  --hd-shadow-card: 0 0 2px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.12);
  --hd-shadow-card-hover: 0 0 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.16);
  --hd-surface: #eef1f5;
  --hd-surface-2: #e3e8ee;
  --hd-line: #dfe4ea;
  --hd-ink: #1f2529;
  --hd-muted: #5e6b76;
  --hd-brand: #006699;
  --hd-gold: #fbb040;
  --hd-gold-tint: #fff4dc;
  --hd-gold-wash: #fffaee;
  --hd-gold-line: #f6dfa8;
  --hd-gold-ink: #9a6a12;
  --hd-gold-deep: #7a5410;
  --hd-body: #4a525c;
  --hd-line-soft: #eef1f4;
  --hd-line-marker: #d3d9e0;
  --hd-brand-tint: #e3f0f9;
  --hd-good-tint: #e3f3ee;
  --hd-good: #147d64;
  --hd-warning: #e89a1c;
  --hd-bad: #e5484d;
  --hd-bad-fg: #a11111;
  --hd-shadow-pop: 0 4px 12px rgba(31, 37, 41, 0.08), 0 16px 40px -16px rgba(31, 37, 41, 0.25);
  --hd-radius-card: 14px;
  --hd-radius-control: 8px;
  --hd-strip: 3px;
  --hd-rail: 96px;
  --hd-header: 64px;
  --fa-primary-color: var(--hd-brand);
  --fa-secondary-color: var(--hd-gold);
  --fa-secondary-opacity: 1;
  height: 100%;
  overflow: hidden;
  background: var(--hd-bg);
  color: var(--hd-ink);
  font-size: 15px;
  line-height: 1.5;
}
html:has(.mbrAppBody) { height: 100%; overflow: hidden; }
#mbrDashboard { height: 100%; }

/* Header */
#mbrHeader { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--hd-header); padding: var(--hd-strip) 20px 0; background: var(--hd-bg); }
#mbrHeader::before { position: absolute; top: 0; left: 0; right: 0; height: var(--hd-strip); background: var(--mbr-action-gradient); content: ""; }
#mbrHeaderBrand { display: flex; align-items: center; padding-left: 6px; }
#mbrHeaderBrand img { display: block; height: 30px; width: auto; }
.mbrHeaderProduct { padding-left: 14px; border-left: 1px solid var(--hd-line); color: var(--hd-ink); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
#mbrHeaderActions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mbrHeaderPlans { margin-right: 6px; padding: 6px 16px; border: 2px solid var(--hd-ink); border-radius: 999px; color: var(--hd-ink); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mbrHeaderPlans:hover { background: var(--hd-ink); color: #fff; }
.mbrHeaderIcon { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 19px; text-decoration: none; cursor: pointer; }
.mbrHeaderIcon:hover, .mbrHeaderIcon[aria-expanded="true"] { background: var(--hd-surface-2); }
.mbrMenu { position: relative; }
.mbrUserMenuButton { display: flex; align-items: center; gap: 8px; margin-left: 4px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--hd-ink); font: inherit; cursor: pointer; }
.mbrUserMenuButton > i, .mbrUserMenuLabel { display: none; }
.mbrUserAvatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mbr-brand); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.mbrMenuPanel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 40; display: grid; gap: 2px; width: 270px; padding: 8px; border: 1px solid var(--hd-line); border-radius: 12px; background: var(--hd-card); box-shadow: var(--hd-shadow-pop); }
.mbrMenuTitle { margin: 4px 8px 8px; color: var(--hd-muted); font-size: 13px; font-weight: 700; }
.mbrLauncherApp { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--hd-ink); text-decoration: none; }
a.mbrLauncherApp:hover { background: var(--hd-surface); color: var(--hd-ink); }
.mbrLauncherApp > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mbrLauncherApp small { color: var(--hd-muted); font-size: 12px; }
.mbrLauncherOff { cursor: not-allowed; }
.mbrLauncherOff strong { color: var(--hd-muted); }
.mbrUserMenuIdentity { display: grid; gap: 2px; margin-bottom: 4px; padding: 8px 10px 12px; border-bottom: 1px solid var(--hd-line); color: var(--hd-muted); font-size: 13px; overflow-wrap: anywhere; }
.mbrUserMenuIdentity strong { color: var(--hd-ink); font-size: 15px; }
.mbrUserMenuAction { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--hd-ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.mbrUserMenuAction:hover { background: var(--hd-surface); color: var(--hd-ink); }
.mbrUserMenuAction i { width: 18px; text-align: center; }
.mbrUserMenuLogout { color: var(--hd-bad-fg); }
.mbrUserMenuLogout i { --fa-primary-color: var(--hd-bad-fg); --fa-secondary-color: var(--hd-bad); --fa-secondary-opacity: 0.5; }

/* Hub menu: icon over label, active icon on a dark tile */
#mbrRail { position: fixed; top: var(--hd-header); left: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 6px; width: var(--hd-rail); padding: 12px 0; overflow-y: auto; scrollbar-width: none; background: var(--hd-bg); }
.mbrHubItem { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; padding: 6px 0; border-radius: 10px; color: var(--hd-ink); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
/* The app group: Your apps, then each app with its own icon and what it's for */
.mbrHubGroup { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 4px 0; border-radius: 14px; background: var(--hd-surface); }
.mbrHubApp { gap: 2px; padding: 7px 0 6px; }
.mbrHubAppIcon { width: 32px; height: 32px; margin-bottom: 2px; border-radius: 8px; }
.mbrHubKind { color: var(--hd-muted); font-size: 10.5px; font-weight: 600; }
.mbrHubApp:hover { background: var(--hd-surface-2); }
.mbrHubApp.mbrHubActive { background: var(--hd-card); box-shadow: var(--hd-shadow-card); }
.mbrHubIcon { position: relative; display: grid; place-items: center; width: 40px; height: 36px; border-radius: 10px; font-size: 19px; }
.mbrHubItem:hover .mbrHubIcon { background: var(--hd-surface-2); }
.mbrHubActive { font-weight: 800; }
.mbrHubActive .mbrHubIcon, .mbrHubActive:hover .mbrHubIcon { background: var(--hd-ink); --fa-primary-color: #ffffff; --fa-secondary-color: var(--hd-gold); }
.mbrHubDot { position: absolute; top: 3px; right: 5px; width: 9px; height: 9px; border: 2px solid var(--hd-bg); border-radius: 50%; background: var(--hd-brand); }
.mbrHubItem:focus-visible { outline: 3px solid var(--mbr-focus); outline-offset: 2px; }

/* Content sheet */
#mbrMain { position: absolute; top: var(--hd-header); left: var(--hd-rail); right: 0; bottom: 0; padding: 0 16px 16px 0; }
#mbrContent { height: 100%; overflow-y: auto; padding: 28px 32px 48px; border-radius: 16px 16px 16px 16px; background: var(--hd-canvas); }
#mbrContent > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
/* Page loading, as Horizon's hznPageLoader: covers the sheet while the next
   page loads (script mbrShowPageLoader). */
.mbrPageLoader { position: absolute; top: 0; left: 0; right: 16px; bottom: 16px; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 16px; background: var(--hd-canvas); color: var(--hd-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; }
.mbrPageLoaderRing { width: 46px; height: 46px; border: 4px solid var(--mbr-notice-bg); border-top-color: var(--hd-brand); border-right-color: var(--hd-gold); border-radius: 50%; animation: mbrSpin 0.75s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mbrPageLoaderRing { animation-duration: 1.8s; } }
.mbrApp .mbrNotice { margin-bottom: 20px; }
.mbrApp .mbrForm { max-width: 760px; }
.mbrApp .mbrPrimary { width: auto; align-self: flex-start; padding-left: 26px; padding-right: 26px; border-radius: 999px; }
/* Buttons fit their content: column layouts (forms, cards, fields) would otherwise stretch them full width. */
.mbrApp :is(.mbrForm, .mbrSurfaceCard, .mbrAppCard, .mbrHelpCard, .mbrStatTile, .mbrFeatureCard, .mbrSecurityFields, .mbrRow > div) > :is(.mbrBtn, button.mbrPrimary, a.mbrPrimary) { align-self: flex-start; width: auto; }
.mbrApp .mbrSecondary { border-radius: 999px; }
.mbrPageHeader { margin: 0 0 20px; }
.mbrPageHeaderLogo { display: flex; align-items: center; gap: 16px; }
.mbrPageHeaderLogo > div { min-width: 0; }
.mbrCompanyLogo { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: #ffffff; border: 1px solid var(--hd-line); }
@media (max-width: 560px) { .mbrCompanyLogo { width: 48px; height: 48px; border-radius: 10px; } }
.mbrPageEyebrow { margin: 0; color: var(--hd-muted); font-size: 14px; font-weight: 600; }
.mbrPageHeading { margin: 2px 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.mbrPageLede { margin: 0; color: var(--hd-muted); }
.mbrPageMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--hd-muted); font-size: 14px; }
.mbrPageMeta strong { color: var(--hd-ink); overflow-wrap: anywhere; }
.mbrMetaDivider { width: 1px; height: 16px; background: var(--hd-line); }
.mbrSectionHeading { margin: 28px 0 14px; font-size: 1.15rem; font-weight: 800; }
.mbrSectionHeadingRow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 28px 0 14px; }
.mbrSectionHeadingRow .mbrSectionHeading { margin: 0; }
.mbrPageCard { padding: 0; }

/* Pill filters (Adobe's hub navigation) */
.mbrSettingsTabs, .mbrPills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.mbrSettingsTab, .mbrPillLink { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: 10px; background: var(--hd-surface); color: var(--hd-ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.mbrSettingsTab:hover, .mbrPillLink:hover { background: var(--hd-surface-2); color: var(--hd-ink); }
.mbrSettingsTabActive, .mbrPillLinkActive, .mbrSettingsTabActive:hover, .mbrPillLinkActive:hover { background: var(--hd-ink); color: #fff; --fa-primary-color: #ffffff; --fa-secondary-color: var(--hd-gold); }
.mbrSettingsTab:focus-visible, .mbrPillLink:focus-visible { outline: 3px solid var(--mbr-focus); outline-offset: 2px; }
.mbrSettingsPanel { margin-top: 0; }
.mbrSettingsPanel > .mbrSectionTitle:first-of-type { margin-top: 0; font-size: 1.35rem; font-weight: 800; }

/* Summary tiles */
.mbrStatGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.mbrStatTile { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; border: 0; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); }
.mbrStatLabel { color: var(--hd-muted); font-size: 13px; font-weight: 700; }
.mbrStatTile strong { margin-top: 4px; font-size: 1.65rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mbrStatGood { color: var(--hd-good); }
.mbrStatValue { display: flex; align-items: center; gap: 12px; margin-top: 4px; min-width: 0; }
.mbrStatValue img { flex: 0 0 auto; }
.mbrStatValue strong { margin-top: 0; }
.mbrStatSince { display: block; margin-top: 4px; color: var(--hd-muted); font-size: 13px; }

/* Cards: white on the canvas, no outline, Spectrum's emphasized shadow */
.mbrDashGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.mbrSurfaceCard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 0; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); }
.mbrCardHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.mbrCardLabel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mbrCardIcon { display: grid; place-items: center; flex: 0 0 auto; font-size: 19px; }
.mbrSurfaceCard .mbrPageEyebrow { color: var(--hd-ink); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.mbrCardCount { padding: 3px 10px; border-radius: 999px; background: var(--hd-surface); color: var(--hd-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mbrCardFooter { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding: 12px 20px 18px; color: var(--hd-muted); font-size: 13px; }
.mbrCardEmpty { margin: 0; padding: 10px 20px 20px; color: var(--hd-muted); }
.mbrBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 38px; margin: 0; padding: 6px 16px; border: 2px solid transparent; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 20px; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; }
.mbrBtnSm { min-height: 34px; padding: 5px 14px; font-size: 13px; line-height: 20px; }
.mbrBtn i { line-height: 1; }
.mbrBtnBrand { background: var(--hd-brand); color: #fff; --fa-primary-color: #fff; --fa-secondary-color: var(--hd-gold); }
.mbrBtnBrand:hover { filter: brightness(1.12); color: #fff; }
.mbrBtnGhost { border-color: var(--hd-ink); background: transparent; color: var(--hd-ink); }
.mbrBtnGhost:hover { background: var(--hd-ink); color: #fff; }
.mbrPillTag { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 999px; background: var(--hd-surface); color: var(--hd-muted); font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; }

/* Dashboard: HERO system status, HERO Hank and quick actions, HERO news */
.mbrSystemStatus { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; padding: 16px 20px; border: 1px solid var(--hd-warning); border-left-width: 5px; border-radius: var(--hd-radius-card); background: #fff8ec; color: var(--hd-ink); --fa-primary-color: var(--hd-warning); --fa-secondary-color: var(--hd-ink); }
.mbrSystemStatus > i { flex: none; margin-top: 2px; font-size: 22px; }
.mbrSystemStatus strong { display: block; font-size: 15px; }
.mbrSystemStatus .mbrStaffContent { margin-top: 4px; }
.mbrCardIconImg { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.mbrDashHank .mbrForm { padding: 4px 20px 18px; }
/* Hank spans the row when it would otherwise sit alone. The cards before it
   vary by account, so count only the half-width ones (not .mbrFeature). */
.mbrDashGrid > .mbrDashHank:nth-child(odd of :not(.mbrFeature)):last-child { grid-column: 1 / -1; }
.mbrDashHank .mbrHankThread { max-height: 320px; }
.mbrQuickActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 14px 20px 18px; border-top: 1px solid var(--hd-line); }
.mbrQuickAction { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--hd-surface); color: var(--hd-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.mbrQuickAction:hover { background: var(--hd-surface-2); }
/* HERO News beside the greeting: a gold edge, or HERO blue when Important */
.mbrHomeTop { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 20px; }
.mbrHomeTop > .mbrPageHeader { min-width: 0; margin: 0; }
.mbrHomeNews { display: flex; align-items: flex-start; gap: 14px; flex: 0 1 480px; min-width: 0; padding: 16px 18px; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: inset 4px 0 0 var(--hd-gold), var(--hd-shadow-card); }
.mbrHomeNewsImportant { background: #f0f7fb; box-shadow: inset 4px 0 0 var(--hd-brand), var(--hd-shadow-card); }
.mbrHomeNewsIcon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff4dc; font-size: 18px; }
.mbrHomeNewsImportant .mbrHomeNewsIcon { background: #ffffff; }
.mbrHomeNewsBody { min-width: 0; }
.mbrHomeNewsLabel { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; color: var(--hd-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mbrHomeNewsText { max-height: 9.5em; overflow-y: auto; font-size: 15px; font-weight: 600; }
/* Read more: the box slides left over the greeting and grows down over the
   page (a placeholder keeps its place); under 900px it opens in place. */
.mbrHomeTop { position: relative; }
.mbrHomeNewsText[data-news-short] { margin: 0; }
.mbrHomeNewsLine { display: flex; align-items: baseline; gap: 8px; max-height: none; overflow: visible; }
.mbrHomeNewsClip { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mbrHomeNewsMore { flex: none; margin: 0; font-size: 14px; white-space: nowrap; }
.mbrHomeNewsFull { max-height: none; overflow: visible; font-weight: 500; }
.mbrHomeNewsFull .mbrHomeNewsMore { display: block; margin: 8px 0 0; }
.mbrHomeNewsFull.mbrHomeNewsStatic { font-weight: 600; }
.mbrHomeNewsOpen { position: absolute; top: 0; right: 0; z-index: 6; box-shadow: inset 4px 0 0 var(--hd-gold), 0 8px 28px rgba(0, 0, 0, 0.18); transition: left 260ms ease, width 260ms ease; }
.mbrHomeNewsImportant.mbrHomeNewsOpen { box-shadow: inset 4px 0 0 var(--hd-brand), 0 8px 28px rgba(0, 0, 0, 0.18); }
.mbrHomeNewsSlot { flex: none; }
@media (prefers-reduced-motion: reduce) { .mbrHomeNewsOpen { transition: none; } }
@media (max-width: 900px) {
  .mbrHomeTop { flex-direction: column; align-items: stretch; }
  .mbrHomeNews { flex-basis: auto; }
}

/* Staff content (news, status, featured): only the allowlisted tags reach the page (flib.MBR5.news loadNewsHTML) */
.mbrStaffContent { line-height: 1.55; overflow-wrap: anywhere; }
.mbrStaffContent > :first-child { margin-top: 0; }
.mbrStaffContent > :last-child { margin-bottom: 0; }
.mbrStaffContent p, .mbrStaffContent ul, .mbrStaffContent ol, .mbrStaffContent table { margin: 0 0 10px; }
.mbrStaffContent h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.mbrStaffContent h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.mbrStaffContent ul, .mbrStaffContent ol { padding-left: 20px; }
.mbrStaffContent a { color: var(--hd-brand); font-weight: 700; }
.mbrStaffContent img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 10px; }
.mbrStaffContent table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mbrStaffContent th, .mbrStaffContent td { padding: 6px 8px; border-bottom: 1px solid var(--hd-line); text-align: left; vertical-align: top; }
.mbrStaffContent th { font-weight: 800; }

/* Featured box: full width; its tables never have borders */
.mbrFeature { grid-column: 1 / -1; background: linear-gradient(135deg, #f4f9fc 0%, #ffffff 60%); }
.mbrFeatureBody { display: flex; align-items: flex-start; gap: 20px; padding: 20px 22px; }
.mbrFeatureBody > div { flex: 1 1 auto; min-width: 0; }
.mbrFeatureIcon { flex: none; width: 56px; height: 56px; border-radius: 14px; }
.mbrFeatureImage { flex: 0 0 auto; width: 220px; max-width: 40%; height: auto; border-radius: 12px; object-fit: cover; }
.mbrFeatureEyebrow { margin: 0 0 4px; color: var(--hd-muted); font-size: 13px; font-weight: 700; }
.mbrFeature h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.mbrFeature p { margin: 0 0 12px; }
.mbrFeature table, .mbrFeature th, .mbrFeature td { border: 0; }
@media (max-width: 640px) { .mbrFeatureBody { flex-direction: column; } .mbrFeatureImage { width: 100%; max-width: 100%; } }

/* Platform tiles: platforms carry their own color; icons white on them */
.mbrRowEnable { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; }
.mbrRowEnable .mbrError { flex-basis: 100%; margin: 0; text-align: right; }

/* App cards (Apps hub): Adobe's app card */
.mbrAppGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 8px; }
.mbrAppCard { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border: 0; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); }
.mbrAppCardHead { display: flex; align-items: center; gap: 12px; }
.mbrAppCardHead strong { font-size: 16px; font-weight: 800; }
.mbrAppCardHead .mbrPillTag { margin-left: auto; }
.mbrAppCard p { margin: 0; color: var(--hd-ink); font-size: 14px; }
.mbrAppCard .mbrAppMeta { color: var(--hd-muted); font-size: 14px; }
.mbrAppCardActions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 6px; }
.mbrAppCardActions a.mbrTextLink { margin-right: auto; color: var(--hd-ink); font-size: 14px; font-weight: 700; }
/* App card facts: two plan or package limits ("20 portfolio places") */
.mbrAppFacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--hd-surface); }
.mbrAppFacts div { display: flex; flex-direction: column; min-width: 0; }
.mbrAppFacts strong { font-size: 1.35rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mbrAppFacts span { color: var(--hd-muted); font-size: 12px; font-weight: 600; }

/* Redesign shared parts (REDESIGN_PLAN step 2) */

/* Setup checklist: one row per step. The next step is lifted, finished steps
   collapse to their title with a check. */
.mbrSetupList { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 4px 20px 20px; list-style: none; }
.mbrSetupRow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 16px; border: 1px solid var(--hd-line); border-radius: 12px; background: var(--hd-card); }
.mbrSetupNum { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hd-surface); color: var(--hd-muted); font-size: 14px; font-weight: 800; }
.mbrSetupMain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mbrSetupTitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mbrSetupTitle strong { font-size: 15px; font-weight: 800; }
.mbrSetupMain p { margin: 0; color: var(--hd-muted); font-size: 14px; }
.mbrSetupAction { align-self: center; }
.mbrSetupNext { padding: 20px 24px; border-color: var(--hd-gold-line); background: var(--hd-gold-wash); }
.mbrSetupNext .mbrSetupNum { align-self: center; border: 2px solid var(--hd-gold); background: var(--hd-card); color: var(--hd-gold-ink); }
.mbrSetupNext .mbrSetupTitle strong { font-size: 17px; }
.mbrSetupNext .mbrSetupMain p { color: var(--hd-ink); font-size: 15px; line-height: 1.5; }
/* Capitals with letter spacing: the right padding gives back the spacing after
   the last letter, and a pixel more on top centers the cap height. */
.mbrSetupNext .mbrPillTag { padding: 4px calc(10px - 0.06em) 3px 10px; background: var(--hd-gold); color: var(--hd-ink); font-size: 11px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.mbrSetupDone { align-items: center; padding-block: 10px; background: transparent; }
.mbrSetupDone .mbrSetupNum { background: var(--hd-good-tint); color: var(--hd-good); --fa-primary-color: var(--hd-good); --fa-secondary-color: var(--hd-good); }
.mbrSetupDone .mbrSetupMain p { display: none; }
.mbrSetupDone .mbrPillTag { background: var(--hd-good-tint); color: var(--hd-good); }
.mbrSetupOff { border-style: dashed; background: transparent; }
@media (max-width: 560px) {
  .mbrSetupRow { grid-template-columns: 32px minmax(0, 1fr); }
  .mbrSetupNext { padding: 16px; }
  .mbrSetupAction { grid-column: 2; justify-self: start; }
}

/* Mini stepper: numbered step chips joined by a short rule, as in the design */
.mbrMiniSteps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 10px 0 0; padding: 0; list-style: none; color: var(--hd-ink); font-size: 13px; font-weight: 700; counter-reset: mbrMini; }
.mbrMiniSteps li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border: 1px solid var(--hd-gold-line); border-radius: 999px; background: var(--hd-card); counter-increment: mbrMini; }
.mbrMiniSteps li + li { margin-left: 34px; position: relative; }
.mbrMiniSteps li + li::after { content: ""; position: absolute; left: -26px; top: 50%; width: 18px; border-top: 1px solid var(--hd-gold-line); }
.mbrMiniSteps li::before { content: counter(mbrMini); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hd-gold-tint); color: var(--hd-muted); font-size: 12px; font-weight: 800; }
.mbrMiniSteps .mbrMiniDone { border-color: var(--hd-good-tint); color: var(--hd-good); }
.mbrMiniSteps .mbrMiniDone::before { content: "\2713"; background: var(--hd-good); color: #fff; }
.mbrMiniSteps .mbrMiniNow { border-color: var(--hd-brand); }
.mbrMiniSteps .mbrMiniNow::before { background: var(--hd-brand); color: #fff; }

/* You have / You can add, each add-on with the package or plan that brings it */
.mbrHaveGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mbrHaveList { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.mbrHaveLabel { margin: 0 0 4px; color: var(--hd-muted); font-size: 12px; font-weight: 800; }
.mbrHaveList li { display: flex; align-items: flex-start; gap: 8px; }
.mbrHaveList li i { margin-top: 3px; }
.mbrHaveList .fa-circle-check { --fa-primary-color: #fff; --fa-secondary-color: var(--hd-good); }
.mbrHaveList .fa-circle-plus { --fa-primary-color: #fff; --fa-secondary-color: var(--hd-brand); }
.mbrHaveVia { display: block; margin-top: 6px; color: var(--hd-muted); font-size: 13px; }
@media (max-width: 560px) { .mbrHaveGrid { grid-template-columns: 1fr; } }

/* Account banner: on every page until the account is verified */
.mbrAccountBanner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--hd-gold); border-radius: 12px; background: var(--hd-gold-tint); font-size: 14px; --fa-primary-color: var(--hd-ink); --fa-secondary-color: var(--hd-gold); }
.mbrAccountBanner > i { flex: none; font-size: 20px; }
.mbrAccountBanner p { flex: 1 1 240px; margin: 0; }
.mbrAccountBanner .mbrBtn { margin-left: auto; }

/* Home (REDESIGN_PLAN step 3): main column and an account side column */
.mbrHomeGrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
.mbrHomeMain, .mbrHomeSide { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mbrHomeMain > .mbrSectionHeadingRow { margin: 8px 0 -6px; }
.mbrHomeMain > .mbrDashGrid { margin-bottom: 0; }
.mbrHomeApps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
/* App cards fill their row's height, with actions at the bottom */
.mbrHomeApps > .mbrWebCard { display: flex; flex-direction: column; }
.mbrHomeApps > .mbrWebCard > .mbrCardFooter { margin-top: auto; }
.mbrHomeApps .mbrWebCard .mbrAppIcon { width: 44px; height: 44px; }
.mbrTextLink { color: var(--hd-brand); font-size: 14px; font-weight: 700; text-decoration: none; }
.mbrTextLink:hover { text-decoration: underline; }
.mbrSectionHeadingRow .mbrTextLink { margin-left: auto; }
.mbrPillPrivate { display: inline-flex; align-items: center; gap: 6px; background: var(--hd-gold-tint); color: var(--hd-ink); --fa-primary-color: var(--hd-ink); --fa-secondary-color: var(--hd-gold); }
/* Owner leads inside the PM Avenue card (was a summary tile) */
.mbrLeadBox { display: block; padding: 12px 14px; border: 1px solid var(--hd-line); border-radius: 10px; }
.mbrLeadBox.mbrLeadTileYes { border-color: var(--hd-good); }
/* Home header: company name with the account's state beside it */
.mbrHomeEyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mbrHomeEyebrow > span:first-child, .mbrEyebrowGold { color: var(--hd-gold-ink); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mbrEyebrowGold { margin: 0 0 6px; }
.mbrHomeEyebrow + .mbrPageHeading + .mbrPageLede { font-size: 17px; }
.mbrSetupDone .mbrMiniSteps { display: none; }

/* Home side cards (the designer's side cards, 2026-10-08) */
.mbrSideCard { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.mbrSideHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mbrSideCaps { margin: 0; color: var(--hd-muted); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.mbrSideMini { color: var(--hd-brand); font-size: 13px; font-weight: 700; text-decoration: none; }
.mbrSideMini:hover { text-decoration: underline; text-underline-offset: 3px; }
.mbrAcctId { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mbrAcctTile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--hd-brand); font-size: 22px; object-fit: cover; --fa-primary-color: #fff; --fa-secondary-color: var(--hd-gold); --fa-secondary-opacity: 1; }
.mbrAcctId strong { display: block; font-size: 17px; font-weight: 800; line-height: 22px; overflow-wrap: anywhere; }
.mbrAcctId span { color: var(--hd-muted); font-size: 14px; font-weight: 500; line-height: 18px; }
.mbrKv { display: flex; flex-direction: column; margin: 0; }
.mbrKvRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-top: 1px solid var(--hd-line-soft); }
.mbrKvRow:last-child { padding-bottom: 2px; }
.mbrKvRow dt { color: var(--hd-body); font-size: 14px; font-weight: 600; line-height: 18px; }
.mbrKvRow dd { margin: 0; font-size: 14px; font-weight: 700; line-height: 18px; text-align: right; }
.mbrKvRow dd a { color: var(--hd-brand); text-decoration: none; }
.mbrKvRow dd a:hover { text-decoration: underline; }
.mbrKvRow .mbrPillTag { display: inline-block; padding: 3px 10px; }
a.mbrBadgeGold, .mbrBadgeGold { background: var(--hd-gold-tint); color: var(--hd-gold-deep); }
.mbrBadgeGood { background: var(--hd-good-tint); color: var(--hd-good); }
/* App card state that isn't live yet (PM Avenue Not ready, Disabled) */
.mbrPillOff { border: 1px solid var(--hd-line); background: var(--hd-card); color: var(--hd-muted); }
/* Legacy limited package (X in PSYS): in the package, opted out for a discount */
.mbrPillOptedOut { margin-left: 6px; background: var(--hd-gold-tint); color: var(--hd-gold-deep); vertical-align: 1px; }
li.mbrOptedOut, li.mbrOptedOut > span { color: var(--hd-muted); }
li.mbrOptedOut > i { --fa-primary-color: var(--hd-muted); --fa-secondary-color: var(--hd-line); }
.mbrSideTitle strong { display: block; font-size: 17px; font-weight: 800; line-height: 22px; }
.mbrSideTitle span { display: block; margin-top: 4px; color: var(--hd-muted); font-size: 14px; font-weight: 500; line-height: 20px; }
.mbrSideFoot { display: flex; flex-direction: column; gap: 14px; }
.mbrSideNote { margin: 0; color: var(--hd-body); font-size: 14px; font-weight: 500; line-height: 20px; }
.mbrSideBtn { width: 100%; min-height: 44px; border: 1.5px solid var(--hd-ink); background: transparent; color: var(--hd-ink); font-size: 15px; }
.mbrSideBtn:hover { background: var(--hd-surface); }
.mbrHelpCard { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; background: var(--hd-surface); }
.mbrHelpCard h2 { margin: 0; padding-bottom: 6px; font-size: 16px; font-weight: 800; line-height: 20px; }
.mbrHelpLink { display: flex; align-items: center; gap: 10px; padding-block: 6px; color: var(--hd-brand); font-size: 14px; font-weight: 700; line-height: 18px; text-decoration: none; --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-gold); }
.mbrHelpLink:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* App pages on the designer's layout (mbrLp, 2026-10-08): hero, plan band,
   Get started, paths, feature stories, plans, questions, closing band. His
   navy is our blue (#006699); his gold is ours. */
/* The designer's section menu beside an app page; chips on narrow screens */
/* As the designer's app pages, the menu is docked to the rail: a full-height grey
   column at the sheet's left edge, the page flat and white beside it. The sheet
   keeps its rounded corners like every other page (the scroll box clips to them).
   The page scrolls inside #mbrContent (below the fixed header), so the menu
   sticks to the sheet's top edge. */
#mbrContent:has(.mbrLpLayout) { padding: 0; background: #fff; }
#mbrContent > .mbrLpLayout { max-width: none; }
#mbrContent:has(.mbrLpLayout) > .mbrNotice, #mbrContent:has(.mbrLpLayout) > .mbrAccountBanner { max-width: none; margin: 16px; }
.mbrLpLayout { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; min-height: 100%; }
.mbrLpMain { min-width: 0; overflow: hidden; background: #fff; }
.mbrSecNav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 20px; height: calc(100vh - var(--hd-header) - 16px); overflow-y: auto; padding: 24px 16px; border-right: 1px solid var(--hd-line); background: var(--hd-canvas); scrollbar-width: thin; }
.mbrSecNavHead { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 8px 18px; border-bottom: 1px solid var(--hd-line); }
.mbrSecNavId { display: flex; align-items: center; gap: 10px; }
.mbrSecNavId img { border-radius: 9px; }
.mbrSecNavId strong { display: block; font-size: 17px; font-weight: 800; line-height: 22px; }
.mbrSecNavId span { display: block; margin-top: 1px; color: var(--hd-muted); font-size: 13px; font-weight: 500; line-height: 16px; }
.mbrSecNavPill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; }
/* Open {app} in the section menu: the app cards' open-link, full width */
.mbrSecNavHead .mbrSecNavOpen { align-self: stretch; }
.mbrDot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mbrSecNavList { display: flex; flex-direction: column; gap: 18px; }
.mbrSecNavGroup { display: flex; flex-direction: column; gap: 2px; }
.mbrSecNavLabel { margin: 0; padding: 0 10px 6px; color: var(--hd-muted); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.mbrSecNavItem { display: flex; align-items: center; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--hd-ink); font-size: 14px; font-weight: 500; line-height: 18px; text-decoration: none; transition: background-color .15s, border-color .15s; }
.mbrSecNavItem:hover { background: #e9edf2; }
.mbrSecNavItem.mbrSecNavOn { border-color: var(--hd-line); background: #fff; color: var(--hd-brand); font-weight: 700; }
.mbrSecNavTop { padding: 9px 10px; }
@media (max-width: 900px) {
  .mbrLpLayout { grid-template-columns: minmax(0, 1fr); }
  .mbrSecNav { position: sticky; top: 0; z-index: 30; flex-direction: column; gap: 10px; height: auto; overflow: visible; padding: 12px 24px; border: 0; border-bottom: 1px solid var(--hd-line); background: rgba(248, 248, 248, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .mbrSecNavHead { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 0 8px; }
  .mbrSecNavList { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .mbrSecNavList::-webkit-scrollbar { display: none; }
  .mbrSecNavGroup { display: contents; }
  .mbrSecNavLabel { display: none; }
  .mbrSecNavItem, .mbrSecNavTop { flex: none; padding: 7px 14px; border: 1px solid var(--hd-line); border-radius: 999px; background: #fff; white-space: nowrap; }
  .mbrSecNavItem.mbrSecNavOn { border-color: var(--hd-brand); background: var(--hd-brand); color: #fff; }
}
#mbrContent:has(.mbrSecNav) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { #mbrContent:has(.mbrSecNav) { scroll-behavior: auto; } }
.mbrLpMain [id] { scroll-margin-top: 0; }
@media (max-width: 900px) { .mbrLpMain [id] { scroll-margin-top: 130px; } }
@media (max-width: 760px) { .mbrSecNav { padding: 10px 16px; } }
.mbrLpHero { display: flex; flex-direction: column; align-items: center; gap: 22px; margin: 0; padding: 56px 24px 0; background-color: #fff; background-image: radial-gradient(ellipse 60% 55% at 30% 20%, #e8f1f8 0%, rgba(232, 241, 248, 0) 70%), radial-gradient(ellipse 45% 45% at 78% 30%, #fff4dc 0%, rgba(255, 244, 220, 0) 70%); text-align: center; overflow: hidden; }
.mbrLpApp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--hd-brand); font-size: 14px; font-weight: 700; }
.mbrLpApp img { border-radius: 5px; }
.mbrLpDisplay { margin: 0; color: var(--hd-ink); font-size: 58px; font-weight: 800; line-height: 62px; letter-spacing: -0.025em; }
.mbrLpDisplay span { display: block; }
.mbrLpDisplay .mbrLpAccent { color: var(--hd-brand); }
.mbrLpDisplay .mbrLpAccentInline { color: var(--hd-brand); font-style: normal; }
/* Hero eyebrow: the same line as the pre-login marketing page */
.mbrLpEyebrow { margin: 0 0 -10px; color: var(--hd-gold-ink); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mbrLpLede { max-width: 640px; margin: 0; color: var(--hd-body); font-size: 19px; line-height: 29px; }
.mbrLpCtas { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
.mbrLpBig { min-height: 52px; padding: 14px 28px; font-size: 16px; box-shadow: 0 8px 24px rgba(0, 102, 153, 0.22); }
.mbrLpFine { max-width: 520px; margin: 0; color: var(--hd-muted); font-size: 14px; font-weight: 500; }
.mbrLpFrame { width: 100%; max-width: 900px; height: 500px; overflow: hidden; padding: 10px 10px 0; border: 1px solid var(--hd-line); border-bottom: 0; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -4px 40px rgba(0, 102, 153, 0.1); }
.mbrLpFrame img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; }
/* A real screen cropped to the frame (Harmony's dashboard): show it whole */
.mbrLpFrameShot { max-width: 900px; height: auto; background: #d8e7ee; }
.mbrLpBand { display: flex; flex-direction: column; align-items: center; background: #fff; }
.mbrLpBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px 32px; background: var(--hd-brand); color: #fff; }
.mbrLpStats { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.mbrLpStat { display: flex; flex-direction: column; gap: 2px; }
.mbrLpStat strong { color: #fff; font-size: 20px; font-weight: 800; line-height: 24px; }
.mbrLpStat span { color: #cfe3ef; font-size: 13px; font-weight: 500; }
.mbrLpStat .mbrLpKey { color: #a9cde2; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mbrLpVr { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.28); }
.mbrLpBarActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mbrLpOutline { border: 1.5px solid rgba(255, 255, 255, 0.6); background: transparent; color: #fff; }
.mbrLpOutline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.mbrLpGold { border: 0; background: var(--hd-gold); color: var(--hd-ink); font-weight: 800; }
.mbrLpGold:hover { background: #f0a12e; }
.mbrLpOutlineInk { border: 1.5px solid var(--hd-ink); background: transparent; color: var(--hd-ink); }
.mbrLpOutlineInk:hover { background: var(--hd-surface); }
.mbrLpStart { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1000px; padding: 48px 24px 8px; }
.mbrLpStartHead h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 32px; letter-spacing: -0.01em; }
.mbrLpStartCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mbrLpStartCard { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--hd-line); border-radius: 16px; background: #fff; }
.mbrLpStartFirst { border: 1.5px solid var(--hd-brand); }
.mbrLpStartTop { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mbrLpMarker { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--hd-line-marker); border-radius: 50%; color: var(--hd-muted); font-size: 14px; font-weight: 800; }
.mbrLpMarkerOn { border-color: var(--hd-brand); background: var(--hd-brand); color: #fff; }
.mbrLpFirst { color: var(--hd-brand); font-size: 13px; font-weight: 700; }
.mbrLpStartCard h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 22px; }
.mbrLpStartCard p { flex-grow: 1; margin: 0; color: var(--hd-body); font-size: 15px; line-height: 22px; }
.mbrLpSecHead { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mbrLpSecHead .mbrEyebrowGold { margin: 0; }
.mbrLpSection { max-width: 640px; margin: 0; font-size: 38px; font-weight: 800; line-height: 44px; letter-spacing: -0.02em; }
.mbrLpSub { max-width: 560px; margin: 0; color: var(--hd-body); font-size: 17px; line-height: 26px; }
.mbrLpPaths { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 88px 24px 96px; background: #fff; }
.mbrLpPathGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: 100%; max-width: 960px; }
.mbrLpPath { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mbrLpPathVisual { display: flex; align-items: center; justify-content: center; width: 100%; height: 150px; }
.mbrLpPath h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 24px; }
.mbrLpPath p { max-width: 280px; margin: 0; color: var(--hd-body); font-size: 15px; line-height: 23px; }
.mbrLpMock { display: flex; flex-direction: column; gap: 8px; width: 220px; padding: 16px 18px; border: 1px solid var(--hd-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 102, 153, 0.08); text-align: left; }
.mbrLpMockReport { width: 190px; gap: 12px; padding: 18px; border-radius: 12px; }
.mbrLpMockRow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 16px; }
.mbrLpMockRow span { color: var(--hd-body); font-weight: 700; }
.mbrLpGood { color: var(--hd-good); font-weight: 800; }
.mbrLpWarn { color: var(--hd-gold-ink); font-weight: 800; }
.mbrLpCapsSm { color: var(--hd-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.mbrLpGrade { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hd-good-tint); color: var(--hd-good); font-size: 15px; font-weight: 800; }
.mbrLpMbar { display: flex; height: 8px; margin-bottom: 4px; border-radius: 8px; background: var(--hd-surface); }
.mbrLpMbar i { display: block; height: 8px; border-radius: 8px; }
.mbrLpMline { display: block; height: 6px; border-radius: 6px; background: var(--hd-surface); }
.mbrLpMlineGold { background: var(--hd-gold-tint); }
.mbrLpFeatures { display: flex; flex-direction: column; align-items: center; gap: 104px; padding: 24px 24px 112px; background: #fff; }
.mbrLpFeature { display: flex; align-items: center; gap: 56px; width: 100%; max-width: 1000px; scroll-margin-top: calc(var(--hd-header) + 16px); }
.mbrLpFeatureFlip { flex-direction: row-reverse; }
.mbrLpCopy { display: flex; flex: 0 0 400px; flex-direction: column; gap: 18px; min-width: 0; }
.mbrLpCopy .mbrEyebrowGold { margin: 0; }
.mbrLpFeatureHead { margin: 0; font-size: 32px; font-weight: 800; line-height: 38px; letter-spacing: -0.015em; }
.mbrLpBullets { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 4px 0 0; list-style: none; }
.mbrLpBullets li { display: flex; gap: 12px; color: var(--hd-ink); font-size: 16px; line-height: 24px; }
.mbrLpBullets li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--hd-gold); }
.mbrLpActions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 10px; }
.mbrLpNote { display: inline-flex; align-items: center; gap: 6px; color: var(--hd-gold-deep); font-size: 14px; font-weight: 600; line-height: 18px; --fa-primary-color: var(--hd-gold-deep); --fa-secondary-color: var(--hd-gold); }
.mbrLpMedia { display: flex; flex: 1 1 0; justify-content: center; min-width: 0; padding: 28px; border-radius: 24px; background-image: linear-gradient(135deg, #e3f0f9 0%, #f4f9fc 100%); }
.mbrLpMediaWarm { background-image: linear-gradient(135deg, #fff4dc 0%, #fffaee 100%); }
.mbrLpMedia > img { width: 100%; max-width: 480px; height: auto; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 102, 153, 0.16); }
/* Proof strip: numbers and a quote */
.mbrLpProof { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 56px 24px; background: var(--hd-gold-wash); }
.mbrLpProofStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 760px; margin: 0; padding: 0; list-style: none; text-align: center; }
.mbrLpProofStats strong { display: block; color: var(--hd-brand); font-size: 44px; font-weight: 800; line-height: 50px; letter-spacing: -0.02em; }
.mbrLpProofStats span { color: var(--hd-body); font-size: 15px; font-weight: 600; }
.mbrLpQuote { max-width: 640px; margin: 0; color: var(--hd-ink); font-size: 22px; font-weight: 700; line-height: 30px; text-align: center; }
.mbrLpQuote cite { display: block; margin-top: 10px; color: var(--hd-muted); font-size: 14px; font-style: normal; font-weight: 600; }
@media (max-width: 560px) { .mbrLpProofStats strong { font-size: 32px; line-height: 38px; } .mbrLpQuote { font-size: 18px; line-height: 26px; } }

/* Websites page pieces */
.mbrLpYours { display: flex; justify-content: center; padding: 48px 24px 8px; background: #fff; }
.mbrLpYours > .mbrWebCard { width: 100%; max-width: 760px; border: 1px solid var(--hd-line); }
.mbrLpStyleGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 480px; }
.mbrLpStyleGrid img { display: block; width: 100%; height: auto; aspect-ratio: 1271 / 1042; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 102, 153, 0.16); }
.mbrLpPlanCards5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1100px; }
.mbrLpPlanCards5 .mbrLpPrice b { font-size: 28px; line-height: 36px; }
.mbrLpPerMonth { color: var(--hd-muted); font-size: 14px; font-weight: 600; }
.mbrLpArt .site-ed .seo li i, .mbrLpArt .pkg li i { flex: none; margin-top: 3px; --fa-primary-color: var(--hd-good); --fa-secondary-color: var(--hd-good); }
@media (max-width: 1100px) { .mbrLpPlanCards5 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; } }
@media (max-width: 760px) { .mbrLpPlanCards5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mbrLpPlanCards5 { grid-template-columns: minmax(0, 1fr); } .mbrLpYours { padding: 32px 16px 0; } }

/* PM Avenue page pieces */
.mbrLpPathGrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.mbrLpPathGrid2 .mbrLpPath p { max-width: 340px; }
.mbrLpCtaRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.mbrLpGoldText { color: var(--hd-gold) !important; }
.mbrSecNavCount { justify-content: space-between; }
.mbrSecNavCount span { padding: 1px 7px; border-radius: 999px; background: #e9edf2; color: var(--hd-muted); font-size: 12px; font-weight: 700; }
.mbrLpMeterWrap { width: 100%; max-width: 520px; }
.mbrLpCrm { display: flex; justify-content: center; padding: 8px 24px 104px; background: #fff; }
.mbrLpCrmCard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; width: 100%; max-width: 1000px; padding: 48px; border-radius: 24px; background-color: var(--hd-brand); background-image: radial-gradient(ellipse 60% 80% at 20% 20%, #0a7db5 0%, rgba(10, 125, 181, 0) 70%), radial-gradient(ellipse 50% 70% at 90% 90%, #00557f 0%, rgba(0, 85, 127, 0) 70%); color: #fff; }
.mbrLpCrmCopy { display: flex; flex-direction: column; gap: 16px; }
.mbrLpCrmEyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--hd-gold); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mbrLpCrmEyebrow img { border-radius: 6px; }
.mbrLpCrmCopy h2 { margin: 0; color: #fff; font-size: 32px; font-weight: 800; line-height: 38px; letter-spacing: -0.015em; }
.mbrLpCrmCopy > p { margin: 0; color: #d9ebf5; font-size: 17px; line-height: 26px; }
.mbrLpTicks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mbrLpTicks li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; font-weight: 600; --fa-primary-color: var(--hd-gold); --fa-secondary-color: var(--hd-gold); }
.mbrLpCrmActions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; }
.mbrLpCrmNote { display: inline-flex; align-items: center; gap: 6px; color: #fff4dc; font-size: 14px; font-weight: 600; --fa-primary-color: var(--hd-gold); --fa-secondary-color: #fff; }
.mbrLpCrmVisual img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }
@media (max-width: 1000px) { .mbrLpCrmCard { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px; } }
@media (max-width: 560px) { .mbrLpPathGrid2 { grid-template-columns: minmax(0, 1fr); } .mbrLpCrm { padding: 0 16px 72px; } .mbrLpCrmCard { padding: 24px 20px; } .mbrLpCrmCopy h2 { font-size: 26px; line-height: 32px; } }

/* Everything else in an app: a card grid of the areas without a story */
.mbrLpMore { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 8px 24px 104px; background: #fff; }
.mbrLpMoreGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1000px; margin: 0; padding: 0; list-style: none; }
.mbrLpMoreGrid li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--hd-line); border-radius: 16px; background: #fff; }
.mbrLpMoreGrid i { font-size: 26px; --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-gold); --fa-secondary-opacity: 1; }
.mbrLpMoreGrid strong { font-size: 17px; font-weight: 800; line-height: 22px; }
.mbrLpMoreGrid span { color: var(--hd-body); font-size: 15px; line-height: 22px; }
.mbrLpMore > .mbrTextLink { font-size: 15px; }
@media (max-width: 1000px) { .mbrLpMoreGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
@media (max-width: 560px) { .mbrLpMore { padding: 0 16px 72px; } .mbrLpMoreGrid { grid-template-columns: minmax(0, 1fr); } }
.mbrLpPricing { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 96px 24px; background: var(--hd-surface); }
.mbrLpPlanCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1000px; }
.mbrLpPlanCard { display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--hd-line); border-radius: 18px; background: #fff; }
.mbrLpPlanCurrent { padding: 23px; border: 2px solid var(--hd-brand); }
.mbrLpPlanTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.mbrLpPlanTop h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 24px; }
.mbrLpBadgeGold { background: var(--hd-gold-tint); color: var(--hd-gold-deep); }
.mbrLpPrice { display: flex; align-items: baseline; gap: 4px; }
.mbrLpPrice b { font-size: 36px; font-weight: 800; line-height: 44px; letter-spacing: -0.02em; }
.mbrLpPrice span { color: var(--hd-muted); font-size: 15px; }
.mbrLpPlanFeats { display: flex; flex-direction: column; flex-grow: 1; gap: 10px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--hd-line); list-style: none; }
.mbrLpPlanFeats li { color: var(--hd-ink); font-size: 15px; line-height: 20px; }
.mbrLpPlanCta { width: 100%; justify-content: center; font-size: 14px; }
.mbrLpPlanCtaCurrent { display: flex; padding: 11px 16px; border-radius: 999px; background: var(--hd-surface); color: var(--hd-muted); font-weight: 700; text-align: center; }
.mbrLpPricing .mbrEnableForm { width: 100%; }
.mbrLpFoot { max-width: 760px; margin: 0; color: var(--hd-muted); font-size: 14px; line-height: 20px; text-align: center; }
.mbrLpFaq { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 96px 24px 88px; background: #fff; }
.mbrLpFaqHead { margin: 0; font-size: 34px; font-weight: 800; line-height: 42px; letter-spacing: -0.02em; }
.mbrLpFaqList { width: 100%; max-width: 760px; border-top: 1px solid var(--hd-line); }
.mbrLpFaqItem { border-bottom: 1px solid var(--hd-line); }
.mbrLpFaqItem summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; color: var(--hd-ink); font-size: 18px; font-weight: 700; line-height: 22px; list-style: none; cursor: pointer; }
.mbrLpFaqItem summary::-webkit-details-marker { display: none; }
.mbrLpFaqItem summary::after { content: "\2304"; color: var(--hd-muted); font-size: 18px; transition: transform .2s; }
.mbrLpFaqItem[open] summary::after { transform: rotate(180deg); color: var(--hd-brand); }
.mbrLpFaqItem p { max-width: 684px; margin: 0; padding: 0 4px 22px; color: var(--hd-body); font-size: 16px; line-height: 25px; }
.mbrLpFinal { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 88px 24px 96px; background-color: var(--hd-brand); background-image: radial-gradient(ellipse 50% 70% at 25% 30%, #0a7db5 0%, rgba(10, 125, 181, 0) 70%), radial-gradient(ellipse 40% 60% at 80% 80%, #00557f 0%, rgba(0, 85, 127, 0) 70%); text-align: center; }
.mbrLpFinal h2 { max-width: 640px; margin: 0; color: #fff; font-size: 40px; font-weight: 800; line-height: 46px; letter-spacing: -0.02em; }
.mbrLpFinal p { max-width: 560px; margin: 0; color: #d9ebf5; font-size: 18px; line-height: 27px; }
.mbrLpFinal .mbrError { color: #fff; }
@media (max-width: 1000px) {
  .mbrLpFeature, .mbrLpFeatureFlip { flex-direction: column; align-items: stretch; gap: 32px; max-width: 640px; }
  .mbrLpCopy { flex-basis: auto; }
  .mbrLpMedia { order: 2; }
  .mbrLpFeatures { gap: 80px; }
  .mbrLpPlanCards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .mbrLpPathGrid { grid-template-columns: 1fr; gap: 48px; max-width: 400px; }
  .mbrLpStartCards { grid-template-columns: 1fr; }
  .mbrLpFrame { height: auto; }
}
@media (max-width: 560px) {
  .mbrLpHero { padding: 40px 16px 0; gap: 18px; }
  .mbrLpDisplay { font-size: 38px; line-height: 42px; }
  .mbrLpLede { font-size: 17px; line-height: 26px; }
  .mbrLpSection { font-size: 30px; line-height: 36px; }
  .mbrLpFeatureHead { font-size: 26px; line-height: 32px; }
  .mbrLpFaqHead { font-size: 28px; line-height: 34px; }
  .mbrLpPaths, .mbrLpFaq { padding: 64px 16px; }
  .mbrLpFeatures { padding: 16px 16px 72px; gap: 72px; }
  .mbrLpMedia { padding: 16px; border-radius: 18px; }
  .mbrLpPricing { padding: 64px 16px; gap: 32px; }
  .mbrLpPlanCards { grid-template-columns: 1fr; }
  .mbrLpFinal { padding: 64px 16px 72px; }
  .mbrLpFinal h2 { font-size: 30px; line-height: 36px; }
  .mbrLpStart { padding: 40px 16px 8px; }
  .mbrLpBar { padding: 20px 16px; }
  .mbrLpStats { gap: 16px 20px; }
  .mbrLpVr { display: none; }
  .mbrLpStatLead { flex-basis: 100%; }
  .mbrLpFrame { padding: 6px 6px 0; border-radius: 14px 14px 0 0; }
}

/* The designer's illustrations (Harmony page), scoped: his variables mapped
   to ours (navy and blue to #006699, gold to #FBB040). */
.mbrLpArt { --ink: #1f2529; --ink-2: #2f363f; --body: #4a525c; --muted: #5e6b76; --subtle: #7a838f; --placeholder: #8a939e; --navy: #00557f; --blue: #006699; --blue-tint: #e3f0f9; --gold: #FBB040; --gold-ink: #9a6a12; --gold-deep: #7a5410; --gold-tint: #fff4dc; --green: #147d64; --green-tint: #e3f3ee; --bg: #f7f8fa; --surface-2: #f4f6f8; --track: #eef2f6; --line: #e3e7ec; --line-strong: #c9d3de; --r-md: 12px; --r-lg: 14px; --r-xl: 18px; --shadow-pop: 0 10px 30px rgba(0, 102, 153, 0.08); --shadow-shot: 0 16px 40px rgba(0, 102, 153, 0.16); }
.mbrLpArt .caps-sm { color: var(--subtle); font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 14px; }
.mbrLpArt .badge { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.mbrLpArt .badge-gold { background: var(--gold-tint); color: var(--gold-deep); }
.mbrLpArt .badge-grey { background: var(--surface-2); color: var(--body); }
.mbrLpArt .badge-green { background: var(--green-tint); color: var(--green); }
.mbrLpArt .badge .dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mbrLpArt .mock { display: flex; flex-direction: column; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-pop); text-align: left; }
.mbrLpArt .mline { flex-shrink: 0; height: 6px; border-radius: 6px; background: var(--track); }
.mbrLpArt .shot { display: flex; flex-direction: column; width: 100%; max-width: 440px; overflow: hidden; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-shot); }
.mbrLpArt .mbrLpMedia { align-items: center; }
.mbrLpArt .modules .mbrLpPath p { min-height: 69px; }
.mbrLpArt .mod-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--blue-tint); color: var(--navy); font-size: 13px; font-weight: 700; line-height: 16px; text-align: left; }
.mbrLpArt .pkg-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.mbrLpArt .pkg-note .ic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.mbrLpArt .pkg-note b { display: block; color: var(--navy); font-size: 14px; font-weight: 800; line-height: 18px; }
.mbrLpArt .pkg-note span { display: block; margin-top: 2px; color: var(--body); font-size: 13px; font-weight: 500; line-height: 17px; }
.mbrLpArt .wo-dot { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); }
.mbrLpArt .portal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mbrLpArt .portal { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fb; }
.mbrLpArt .portal b { display: block; font-size: 14px; font-weight: 800; line-height: 18px; }
.mbrLpArt .portal .live, .mbrLpArt .portal .setup { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 16px; }
.mbrLpArt .portal .live { color: var(--green); }
.mbrLpArt .portal .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.mbrLpArt .portal .setup { color: var(--blue); }
.mbrLpArt .portal.invite { align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--line-strong); background: #fff; }
.mbrLpArt .portal.invite b { color: var(--body); font-size: 13px; font-weight: 700; line-height: 16px; text-align: center; }
.mbrLpArt .tl { display: flex; flex-direction: column; }
.mbrLpArt .tl-row { display: flex; gap: 14px; }
.mbrLpArt .tl-rail { display: flex; flex-direction: column; flex-shrink: 0; align-items: center; width: 30px; }
.mbrLpArt .tl-rail i { flex-grow: 1; width: 2px; background: var(--line); }
.mbrLpArt .tl-ic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-tint); }
.mbrLpArt .tl-body { display: flex; flex: 1 1 0; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; padding-bottom: 16px; }
.mbrLpArt .tl-row.last .tl-body { padding-bottom: 0; }
.mbrLpArt .tl-body em { display: block; color: var(--subtle); font-size: 12px; font-style: normal; font-weight: 700; line-height: 16px; }
.mbrLpArt .tl-body b { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 18px; }
.mbrLpArt .tl-body strong { flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 16px; }
.mbrLpArt .site-ed { display: flex; }
.mbrLpArt .site-ed .doc { display: flex; flex: 1 1 0; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 18px 22px; }
.mbrLpArt .site-ed .h { padding: 2px 4px; border-left: 2px solid var(--gold); font-size: 20px; font-weight: 800; line-height: 24px; letter-spacing: -.01em; }
.mbrLpArt .site-ed .seo { display: flex; flex-direction: column; flex-shrink: 0; align-items: center; gap: 10px; width: 150px; padding: 18px 14px; border-left: 1px solid var(--track); background: #f7f9fb; }
.mbrLpArt .site-ed .seo b { color: var(--body); font-size: 12px; font-weight: 700; line-height: 16px; }
.mbrLpArt .site-ed .seo ul { display: flex; flex-direction: column; align-self: stretch; gap: 5px; margin: 0; padding: 0; list-style: none; }
.mbrLpArt .site-ed .seo li { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 16px; }
.mbrLpArt .pkgs { width: 100%; max-width: 1000px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; }
.mbrLpArt .pkgs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.mbrLpArt .pkgs-head h3 { margin: 0; font-size: 24px; font-weight: 800; line-height: 30px; }
.mbrLpArt .pkgs-head p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 20px; }
.mbrLpArt .pkgs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mbrLpArt .pkg { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 24px; border-right: 1px solid var(--line); }
.mbrLpArt .pkg:last-child { border-right: 0; }
.mbrLpArt .pkg.is-hl { background: #f6f9fc; }
.mbrLpArt .pkg h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 800; line-height: 22px; }
.mbrLpArt .pkg .mods { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 50px; }
.mbrLpArt .pkg .mods span { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 16px; }
.mbrLpArt .m-places { background: var(--blue-tint); color: var(--navy); }
.mbrLpArt .m-mgmt { background: var(--navy); color: #fff; }
.mbrLpArt .m-eng { background: var(--gold-tint); color: var(--gold-deep); }
.mbrLpArt .pkg .range { padding-top: 4px; font-size: 22px; font-weight: 800; line-height: 28px; letter-spacing: -.01em; }
.mbrLpArt .pkg ul { display: flex; flex-direction: column; flex-grow: 1; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--track); list-style: none; }
.mbrLpArt .pkg li { display: flex; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 20px; }
.mbrLpArt .pkg li svg { flex: none; margin-top: 4px; color: var(--blue); }
.mbrLpPlanCards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mbrLpFinal .mbrLpFinalLink { color: #fff; }
.mbrLpPricing .pkgs { margin-top: -16px; }
@media (max-width: 1000px) {
  .mbrLpPlanCards3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .mbrLpArt .pkgs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbrLpArt .pkg:nth-child(2) { border-right: 0; }
  .mbrLpArt .pkg:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .mbrLpArt .modules .mbrLpPath p { min-height: 0; }
}
@media (max-width: 560px) {
  .mbrLpArt .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbrLpArt .site-ed { flex-direction: column; }
  .mbrLpArt .site-ed .seo { width: auto; border-top: 1px solid var(--track); border-left: 0; }
  .mbrLpArt .pkgs-grid { grid-template-columns: minmax(0, 1fr); }
  .mbrLpArt .pkg { border-right: 0; border-bottom: 1px solid var(--line); }
  .mbrLpArt .pkg:last-child { border-bottom: 0; }
}

/* Get started card on Home (the designer's setup card, 2026-10-08): progress
   over one bar segment per step; the featured step on gold with its chips;
   the other steps as rows split by a hairline. */
.mbrStartCard { display: flex; flex-direction: column; gap: 20px; padding: 28px 28px 8px; }
.mbrStartHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.mbrStartHeading { margin: 0; font-size: 26px; font-weight: 800; line-height: 32px; letter-spacing: -0.015em; }
.mbrSetupProgress { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 200px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.mbrStepBar { display: flex; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; }
.mbrStepBar li { flex: 1 1 0; height: 6px; border-radius: 999px; background: var(--hd-line); }
.mbrStepBar .mbrStepBarDone { background: var(--hd-brand); }
.mbrStartList { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mbrStartStep { padding: 20px; }
.mbrStartStep + .mbrStartStep { border-top: 1px solid var(--hd-line-soft); }
.mbrStartFeature { display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--hd-gold-line); border-radius: 14px; background: var(--hd-gold-wash); }
.mbrStartFeature + .mbrStartStep, .mbrStartStep + .mbrStartFeature { border-top-color: transparent; }
.mbrStartRow { display: flex; align-items: center; gap: 16px; }
.mbrStartMarker { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 2px solid var(--hd-line-marker); border-radius: 50%; background: var(--hd-card); color: var(--hd-muted); font-size: 13px; font-weight: 800; }
.mbrStartFeature .mbrStartMarker { border-color: var(--hd-gold); color: var(--hd-gold-ink); }
.mbrStartDone .mbrStartMarker { border-color: var(--hd-good); background: var(--hd-good); color: #fff; font-size: 12px; --fa-primary-color: #fff; --fa-secondary-color: #fff; --fa-secondary-opacity: 1; }
.mbrStartIcon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; }
.mbrStartIconVerify { font-size: 40px; --fa-primary-color: #fff; --fa-secondary-color: var(--hd-gold); --fa-secondary-opacity: 1; }
.mbrStartBody { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; min-width: 0; }
.mbrStartTitle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mbrStartTitle h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 22px; }
.mbrStartFeature .mbrStartTitle h3 { font-size: 19px; line-height: 24px; letter-spacing: -0.01em; }
.mbrStartBody p { margin: 0; color: var(--hd-body); font-size: 15px; font-weight: 500; line-height: 22px; }
.mbrStartAction { display: flex; flex: 0 0 176px; justify-content: flex-end; }
.mbrStartAction .mbrBtn { width: 176px; min-height: 44px; padding: 0 12px; font-size: 15px; }
.mbrStartFeature .mbrStartAction .mbrBtn { min-height: 46px; }
.mbrStartAction .mbrBtnGhost { border: 1.5px solid var(--hd-ink); background: transparent; color: var(--hd-ink); }
.mbrStartAction .mbrBtnGhost:hover { background: var(--hd-surface); }
.mbrStartPillNow { padding: 4px calc(10px - 0.08em) 3px 10px; background: var(--hd-gold); color: var(--hd-ink); font-size: 11px; font-weight: 800; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.mbrStartPillCount { background: var(--hd-gold-tint); color: var(--hd-gold-deep); }
.mbrStartPillDone { background: var(--hd-good-tint); color: var(--hd-good); }
.mbrStartDone { padding-block: 14px; }
.mbrStartDone .mbrStartIcon { opacity: 0.55; }
.mbrStartDone .mbrStartTitle h3 { font-size: 16px; color: var(--hd-muted); }
/* Mini steps under the featured step: numbered chips joined by a short bar,
   and the time it takes under the button column */
.mbrStartSub { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-left: 104px; }
.mbrStartChips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.mbrStartChips li:not(.mbrChipLink) { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--hd-gold-line); border-radius: 999px; background: var(--hd-card); color: var(--hd-ink); font-size: 13px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.mbrChipNum { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--hd-gold-tint); color: var(--hd-gold-deep); font-size: 11px; font-weight: 800; }
.mbrChipLink { flex: none; width: 18px; height: 2px; border-radius: 999px; background: var(--hd-gold-line); }
.mbrStartChips .mbrChipDone { border-color: var(--hd-good-tint); color: var(--hd-good); }
.mbrChipDone .mbrChipNum { background: var(--hd-good); color: #fff; }
.mbrStartChips .mbrChipNow { border-color: var(--hd-gold); }
.mbrChipNow .mbrChipNum { background: var(--hd-gold); color: var(--hd-ink); }
.mbrStartEta { display: flex; flex: 0 0 176px; align-items: center; justify-content: center; gap: 6px; color: var(--hd-gold-deep); font-size: 13px; font-weight: 700; --fa-primary-color: var(--hd-gold-deep); --fa-secondary-color: var(--hd-gold); }
@media (max-width: 900px) {
  .mbrStartRow { flex-wrap: wrap; }
  .mbrStartAction { flex: 1 1 100%; justify-content: flex-start; padding-left: 44px; }
  .mbrStartAction .mbrBtn { width: auto; padding-inline: 24px; }
  .mbrStartSub { flex-wrap: wrap; padding-left: 44px; }
  .mbrStartEta { flex: none; }
  .mbrStartHead { flex-direction: column; align-items: flex-start; }
  .mbrSetupProgress { flex: none; align-items: flex-start; width: 200px; }
}
@media (max-width: 560px) {
  .mbrStartCard { padding: 20px 16px 4px; }
  .mbrStartStep { padding: 16px 0; }
  .mbrStartFeature { padding: 16px; }
  .mbrStartIcon { display: none; }
  .mbrStartHeading { font-size: 22px; line-height: 28px; }
  .mbrStartSub { padding-left: 0; }
  .mbrChipLink { display: none; }
}

/* Multi-factor nudge under the setup checklist */
.mbrNudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 20px 20px; padding: 10px 14px; border-radius: 10px; background: var(--hd-brand-tint); font-size: 14px; }
.mbrNudge > i { font-size: 18px; }
.mbrNudge > span { flex: 1 1 220px; }
.mbrNudge a { font-weight: 700; }
.mbrNudge .mbrLinkButton { margin: 0; }
.mbrNudge[hidden] { display: none; }
.mbrNudgeAlone { margin: 0; }
/* Account summary in the side column */
.mbrSummaryList { margin: 0; padding: 4px 20px 16px; }
.mbrSummaryList > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hd-line); }
.mbrSummaryList > div:last-child { border-bottom: 0; }
.mbrSummaryList dt { color: var(--hd-muted); font-size: 13px; font-weight: 700; }
.mbrSummaryList dd { margin: 0; min-width: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.mbrSummaryList dd small { display: block; color: var(--hd-muted); font-size: 12px; font-weight: 600; }
.mbrSummaryList dd a { color: var(--hd-ink); }
.mbrBillDue { display: flex; flex-direction: column; gap: 2px; margin: 4px 20px 4px; padding: 12px 14px; border-radius: 10px; background: var(--hd-surface); color: var(--hd-ink); text-decoration: none; }
.mbrBillDue:hover { background: var(--hd-surface-2); }
.mbrBillDue strong { font-size: 16px; font-weight: 800; }
.mbrBillDue small { color: var(--hd-muted); font-size: 13px; }
.mbrPageHeader .mbrPageLede + .mbrPageMeta { margin-top: 8px; }
.mbrSummaryLinks { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 4px 12px 14px; list-style: none; }
.mbrSummaryLinks a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--hd-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.mbrSummaryLinks a:hover { background: var(--hd-surface); }
.mbrCardHead .mbrTextLink { white-space: nowrap; }
@media (max-width: 1100px) {
  .mbrHomeGrid { grid-template-columns: minmax(0, 1fr); }
  .mbrHomeSide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 700px) {
  .mbrHomeApps, .mbrHomeSide { grid-template-columns: minmax(0, 1fr); }
}

/* Verification home base (REDESIGN_PLAN step 4): ring, next step, a row per step */
.mbrVetHub { margin: 0 0 24px; }
.mbrVetHubTop { display: flex; align-items: center; gap: 18px; padding: 20px 20px 8px; }
.mbrVetHubTop h3 { margin: 2px 0 4px; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.mbrVetHubTop p { margin: 0; color: var(--hd-muted); font-size: 14px; }
.mbrVetRing { position: relative; flex: none; width: 72px; height: 72px; }
.mbrVetRing svg { display: block; width: 72px; height: 72px; }
.mbrVetRing .mbrRingTrack { stroke: var(--hd-surface-2); }
.mbrVetRing .mbrRingValue { stroke: var(--hd-brand); }
.mbrVetRing span { position: absolute; inset: 0; display: grid; place-content: center; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mbrVetRing small { color: var(--hd-muted); font-size: 0.8rem; }
.mbrVetHub .mbrSetupDone .mbrSetupMain p.mbrVetHubDetail { display: block; margin: 0; }
.mbrPillDot { position: static; display: inline-block; margin-left: 2px; vertical-align: top; }

/* Verified: the finished state and the locked details */
.mbrVetDone { box-shadow: inset 4px 0 0 var(--hd-good), var(--hd-shadow-card); }
.mbrVetDone .mbrSummaryList { padding-top: 0; }
.mbrVetDoneBadge { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--hd-good-tint); font-size: 30px; --fa-primary-color: #fff; --fa-secondary-color: var(--hd-good); }
.mbrVetLocked { margin: 0 0 24px; }
.mbrVetLockedLede { margin: 0; padding: 0 20px; color: var(--hd-muted); font-size: 14px; }
.mbrVetLocked .mbrSummaryList > div { grid-template-columns: 140px minmax(0, 1fr); }
.mbrVetLockedFoot { margin: 0; padding: 0 20px 18px; color: var(--hd-muted); font-size: 14px; }
.mbrVetLockedFoot a { font-weight: 700; }

/* "Great job" between verification steps: a spinner that turns into a check */
.mbrStepDone { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; margin: 48px auto; padding: 32px 28px; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); text-align: center; }
.mbrStepDone h2 { margin: 8px 0 0; font-size: 1.5rem; font-weight: 800; }
.mbrStepDone p { margin: 0; color: var(--hd-muted); }
.mbrStepDone .mbrStepDoneNext { color: var(--hd-ink); font-weight: 700; }
.mbrStepDone .mbrBtn { margin-top: 10px; }
.mbrStepDoneMark { position: relative; width: 84px; height: 84px; color: var(--hd-good); }
.mbrStepDoneSpin { position: absolute; inset: 0; border: 5px solid var(--hd-surface-2); border-top-color: var(--hd-brand); border-radius: 50%; animation: mbrStepSpin 0.8s linear infinite; }
.mbrStepDoneMark svg { position: absolute; inset: 0; display: block; width: 84px; height: 84px; padding: 20px; border: 5px solid var(--hd-good); border-radius: 50%; background: var(--hd-good-tint); box-sizing: border-box; opacity: 0; transform: scale(0.4); }
.mbrStepDoneOk .mbrStepDoneSpin { display: none; }
.mbrStepDoneOk .mbrStepDoneMark svg { opacity: 1; transform: scale(1); transition: opacity 200ms ease, transform 450ms cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes mbrStepSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mbrStepDoneSpin { animation: none; }
  .mbrStepDoneOk .mbrStepDoneMark svg { transition: none; }
}

/* Security tab: the sign-in summary */
.mbrSignInSummary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.mbrSignInSummary li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--hd-gold-tint); --fa-primary-color: #fff; --fa-secondary-color: var(--hd-warning); }
.mbrSignInSummary li i { margin-top: 2px; font-size: 18px; }
.mbrSignInSummary li.mbrSignInOn { background: var(--hd-good-tint); --fa-secondary-color: var(--hd-good); }
.mbrSignInSummary strong { display: block; font-size: 14px; }
.mbrSignInSummary small { display: block; color: var(--hd-muted); font-size: 13px; }
@media (max-width: 760px) { .mbrSignInSummary { grid-template-columns: minmax(0, 1fr); } }

/* Your apps, on the designer's layout (2026-10-08): header with legend, four
   app cards (icon and plan pill, intro, limits box, You have / You can add,
   actions), the comparison table, then the strip to Packages and plans. */
.mbrViewapps { container-type: inline-size; container-name: mbrapps; }
.mbrYaTop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin: 8px 0 40px; }
.mbrYaTitles { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.mbrYaTitles .mbrEyebrowGold { margin: 0; }
.mbrYaH1 { margin: 0; font-size: 48px; font-weight: 800; line-height: 54px; letter-spacing: -0.02em; }
.mbrYaLede { margin: 0; color: var(--hd-body); font-size: 18px; line-height: 28px; }
.mbrYaLegend { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0 0 4px; list-style: none; }
.mbrYaLegend li { display: flex; align-items: center; gap: 8px; color: var(--hd-ink); font-size: 14px; font-weight: 600; }
/* The designer's On your account and You can add icons (a check on a pale green
   circle; a plus in a dashed circle), in our colors, drawn in place of the icon
   font's glyphs (whose own rules are more specific, hence !important). Sizes
   as the design: 20px in the legend, 18px in lists, 16px in table headings. */
.mbrYaHaveIcon, .mbrYaHave li .fa-circle-check, .mbrYaAdd li .fa-circle-check, .mbrCmpHave .fa-circle-check, .mbrCmpAdd .fa-circle-check, .mbrCmpHaveC .fa-circle-check { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e3f3ee'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.5' fill='none' stroke='%23147d64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mbrYaAddIcon, .mbrYaAdd li .fa-circle-plus, .mbrCmpAdd .fa-circle-plus, .mbrCmpAddC .fa-circle-plus { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23fff' stroke='%23006699' stroke-width='1.5' stroke-dasharray='2.6 2'/%3E%3Cpath d='M10 6.5v7M6.5 10h7' fill='none' stroke='%23006699' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mbrYaHaveIcon::before, .mbrYaHaveIcon::after, .mbrYaHave li .fa-circle-check::before, .mbrYaHave li .fa-circle-check::after, .mbrYaAdd li .fa-circle-check::before, .mbrYaAdd li .fa-circle-check::after, .mbrCmpHave .fa-circle-check::before, .mbrCmpHave .fa-circle-check::after, .mbrCmpAdd .fa-circle-check::before, .mbrCmpAdd .fa-circle-check::after, .mbrCmpHaveC .fa-circle-check::before, .mbrCmpHaveC .fa-circle-check::after, .mbrYaAddIcon::before, .mbrYaAddIcon::after, .mbrYaAdd li .fa-circle-plus::before, .mbrYaAdd li .fa-circle-plus::after, .mbrCmpAdd .fa-circle-plus::before, .mbrCmpAdd .fa-circle-plus::after, .mbrCmpAddC .fa-circle-plus::before, .mbrCmpAddC .fa-circle-plus::after { content: none !important; }
.mbrYaHaveIcon, .mbrYaAddIcon { width: 20px; height: 20px; }
.mbrCmpHaveC .fa-circle-check, .mbrCmpAddC .fa-circle-plus { width: 16px; height: 16px; }
.mbrYaSplit .fa-circle-minus, .mbrCmpList .fa-circle-minus { flex-shrink: 0; width: 18px; font-size: 18px; line-height: 18px; --fa-primary-color: #fff; --fa-secondary-color: var(--hd-muted); --fa-secondary-opacity: 1; }
/* Each card's five parts sit on the grid's rows (subgrid), so the intro, limits
   box, lists and actions line up across the cards in a row, as the design's
   fixed heights do. */
.mbrYaCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mbrYaCard { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 20px; min-width: 0; padding: 28px; border: 1px solid var(--hd-line); border-radius: 18px; background: var(--hd-card); transition: border-color .15s, box-shadow .15s; }
.mbrYaCard:hover { border-color: #c9d3de; box-shadow: 0 10px 30px rgba(0, 102, 153, 0.07); }
.mbrYaId { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.mbrYaId img { border-radius: 14px; }
.mbrYaBadge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--hd-surface); color: var(--hd-muted); font-size: 13px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.mbrYaBadge .mbrDot { width: 6px; height: 6px; }
.mbrYaBadge.mbrBadgeGold .mbrDot { background: var(--hd-gold); }
.mbrYaIntro { display: flex; flex-direction: column; gap: 12px; }
.mbrYaIntro h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 34px; letter-spacing: -0.01em; }
.mbrYaKind { margin: 4px 0 0; color: var(--hd-muted); font-size: 15px; font-weight: 600; line-height: 20px; }
.mbrYaDesc { margin: 0; color: var(--hd-body); font-size: 16px; line-height: 24px; }
.mbrYaBox { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px; background: #f4f6f8; }
.mbrYaBox .mbrCapacityMeter:not(.mbrCapacityApproaching):not(.mbrCapacityLimit), .mbrYaBox .mbrCapacityPlain { background: var(--hd-card); }
.mbrYaBoxHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.mbrYaBoxHead b { font-size: 15px; font-weight: 700; line-height: 20px; }
.mbrYaBoxText { margin: 0; color: var(--hd-body); font-size: 14px; }
.mbrYaBoxFoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hd-line); }
.mbrYaBoxFoot span { color: var(--hd-body); font-size: 14px; font-weight: 600; }
.mbrYaBoxFoot b { font-size: 14px; font-weight: 700; text-align: right; }
.mbrYaNums { display: flex; }
.mbrYaNums > div { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; }
.mbrYaNums > div + i + div { padding-left: 16px; }
.mbrYaNums > i { flex-shrink: 0; width: 1px; background: var(--hd-line); }
.mbrYaNums b, .mbrYaLimit b { color: var(--hd-brand); font-size: 30px; font-weight: 800; line-height: 36px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mbrYaNums b.mbrYaWord { font-size: 20px; line-height: 36px; }
.mbrYaNums span, .mbrYaLimit span { color: var(--hd-muted); font-size: 13px; font-weight: 600; line-height: 18px; }
.mbrYaLimit { display: flex; align-items: center; gap: 14px; }
.mbrYaLimit b { flex-shrink: 0; }
.mbrYaProg { display: flex; flex-direction: column; gap: 8px; color: var(--hd-body); font-size: 14px; font-weight: 500; }
.mbrYaProg .mbrCapacityFill { background: var(--hd-gold); }
.mbrYaRadios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.mbrYaRadios li { display: flex; align-items: center; gap: 6px; color: var(--hd-ink); font-size: 14px; font-weight: 600; }
.mbrYaRadios li::before { flex-shrink: 0; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid #8a96a3; border-radius: 50%; background: #fff; content: ""; }
.mbrYaRadios .mbrYaDone::before { border-color: var(--hd-good); background: var(--hd-good); box-shadow: inset 0 0 0 2px #fff; }
.mbrYaSplit { display: flex; padding-top: 4px; }
.mbrYaSplit > div { display: flex; flex: 1 1 0; flex-direction: column; gap: 12px; min-width: 0; }
.mbrYaHave { padding-right: 18px; border-right: 1px solid var(--hd-line); }
.mbrYaAdd { padding-left: 18px; }
.mbrYaSplit ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mbrYaSplit li { display: flex; align-items: flex-start; gap: 8px; color: var(--hd-ink); font-size: 15px; font-weight: 500; line-height: 20px; }
.mbrYaSplit li > i { margin-top: 2px; }
.mbrYaCap { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.mbrYaHave .mbrYaCap { color: var(--hd-good); }
.mbrYaAdd .mbrYaCap { color: var(--hd-brand); }
.mbrYaActions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--hd-line); }
.mbrYaActions .mbrBtn { min-height: 45px; padding: 11.5px 20.5px; font-size: 15px; font-weight: 700; }
.mbrYaActions { align-self: end; }
.mbrYaActions .mbrEnableForm { margin: 0; }
.mbrYaLink { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--hd-brand); font-size: 15px; font-weight: 700; line-height: 18px; text-decoration: none; --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-brand); }
.mbrYaLink:hover { text-decoration: underline; text-underline-offset: 3px; }
.mbrYaLink i { transition: transform .15s; }
.mbrYaLink:hover i { transform: translateX(2px); }
.mbrYaBack { margin: 0 0 8px; font-size: 14px; }
.mbrCmpSec { display: flex; flex-direction: column; gap: 24px; margin: 56px 0 0; }
.mbrCmpHead { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.mbrCmpHead .mbrEyebrowGold { margin: 0; }
.mbrCmpHead h2 { margin: 0; font-size: 34px; font-weight: 800; line-height: 40px; letter-spacing: -0.015em; }
.mbrCmpHead p { margin: 0; color: var(--hd-body); font-size: 17px; line-height: 26px; }
.mbrCmp { overflow: hidden; border: 1px solid var(--hd-line); border-radius: 20px; background: var(--hd-card); }
.mbrCmpRow { display: grid; grid-template-columns: 240px 290px minmax(0, 1fr); align-items: start; gap: 32px; padding: 28px 32px; border-bottom: 1px solid var(--hd-line); }
.mbrCmpRow:last-child { border-bottom: 0; }
.mbrCmpTh { align-items: center; padding-top: 16px; padding-bottom: 16px; background: var(--hd-surface); }
.mbrCmpCaps { display: flex; align-items: center; gap: 8px; color: var(--hd-muted); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.mbrCmpHaveC { color: var(--hd-good); }
.mbrCmpAddC { color: var(--hd-brand); }
.mbrCmpThAdd { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mbrCmpApp { display: flex; align-items: flex-start; gap: 12px; }
.mbrCmpApp img { flex-shrink: 0; border-radius: 10px; }
.mbrCmpApp > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mbrCmpApp b { font-size: 19px; font-weight: 800; line-height: 24px; }
.mbrCmpList { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mbrCmpList li { display: flex; align-items: flex-start; gap: 10px; color: var(--hd-ink); font-size: 15px; font-weight: 500; line-height: 20px; }
.mbrCmpList li > i, .mbrCmpNm > i { margin-top: 2px; }
.mbrCmpAdd { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mbrCmpBlock { display: flex; align-items: flex-start; gap: 24px; }
.mbrCmpBlock + .mbrCmpBlock { padding-top: 16px; border-top: 1px solid var(--hd-line-soft); }
.mbrCmpBlock > .mbrCmpList { flex: 1 1 0; min-width: 0; }
.mbrCmpPlan { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 2px; width: 210px; text-align: right; }
.mbrCmpPlan b { font-size: 15px; font-weight: 700; line-height: 20px; }
.mbrCmpPlan span { color: var(--hd-muted); font-size: 14px; font-weight: 500; line-height: 20px; }
.mbrCmpPkgs { flex-direction: column; gap: 10px; }
.mbrCmpPkg { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; width: 100%; }
.mbrCmpNm { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; min-width: 0; }
.mbrCmpNm b { font-size: 15px; font-weight: 700; line-height: 20px; }
.mbrCmpNm em { color: var(--hd-muted); font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; }
.mbrCmpPr { flex-shrink: 0; width: 210px; font-size: 15px; font-weight: 600; line-height: 20px; text-align: right; }
.mbrCmpMl { display: none; }
.mbrYaStrip { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 40px 0 8px; padding: 26px 32px; border-radius: 20px; background-color: var(--hd-brand); background-image: radial-gradient(ellipse 50% 90% at 15% 20%, #0a7db5 0%, rgba(10, 125, 181, 0) 70%); }
.mbrYaStripL { display: flex; align-items: center; gap: 18px; }
.mbrYaStripIcon { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); font-size: 20px; --fa-primary-color: #fff; --fa-secondary-color: var(--hd-gold); --fa-secondary-opacity: 1; }
.mbrYaStrip h2 { margin: 0; color: #fff; font-size: 21px; font-weight: 800; line-height: 28px; }
.mbrYaStrip p { margin: 4px 0 0; color: #d9ebf5; font-size: 15px; font-weight: 500; line-height: 22px; }
.mbrYaStrip .mbrBtn { flex-shrink: 0; padding: 11px 24px; font-size: 15px; }
@container mbrapps (max-width: 1120px) {
  .mbrCmpRow { grid-template-columns: 200px minmax(0, 1fr); }
  .mbrCmpRow > .mbrCmpAdd { grid-column: 1 / -1; padding-top: 16px; border-top: 1px dashed var(--hd-line); }
  .mbrCmpTh { display: none; }
  .mbrCmpMl { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
  .mbrCmpHave .mbrCmpMl { color: var(--hd-good); }
  .mbrCmpAdd .mbrCmpMl { margin-bottom: -6px; color: var(--hd-brand); }
}
@container mbrapps (max-width: 980px) {
  .mbrYaCards { grid-template-columns: minmax(0, 1fr); }
  .mbrYaCard { display: flex; flex-direction: column; grid-row: auto; max-width: 720px; }
}
@container mbrapps (max-width: 680px) {
  .mbrYaH1 { font-size: 36px; line-height: 42px; }
  .mbrYaLede { font-size: 16px; line-height: 24px; }
  .mbrYaCard { padding: 20px; }
  .mbrYaSplit { flex-direction: column; gap: 18px; }
  .mbrYaHave { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--hd-line); }
  .mbrYaAdd { padding-left: 0; }
  .mbrCmpHead h2 { font-size: 28px; line-height: 34px; }
  .mbrCmpRow { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 18px; }
  .mbrCmpBlock, .mbrCmpPkg { flex-direction: column; gap: 10px; }
  .mbrCmpPlan { align-items: flex-start; width: auto; text-align: left; }
  .mbrCmpPr { width: auto; text-align: left; }
  .mbrYaStrip { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}

/* App pages (REDESIGN_PLAN step 6) */
.mbrAppPageTitle { display: flex; align-items: center; gap: 16px; }
.mbrAppPageTitle .mbrAppIcon { width: 56px; height: 56px; }
.mbrPageHeader .mbrPageEyebrow a { color: var(--hd-muted); text-decoration: none; }
.mbrPageHeader .mbrPageEyebrow a:hover { text-decoration: underline; }
.mbrGoTo { margin: 0 0 8px; padding: 0; border-top: 0; }
.mbrHowSteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.mbrHowSteps li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); }
.mbrHowSteps strong { display: block; font-size: 15px; }
.mbrHowSteps p { margin: 4px 0 0; color: var(--hd-muted); font-size: 14px; }
.mbrFaq { display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin-bottom: 24px; }
.mbrFaq .mbrReveal p { margin: 8px 0 0; color: var(--hd-muted); }
@media (max-width: 760px) { .mbrHowSteps { grid-template-columns: minmax(0, 1fr); } }

/* Verification step header: step, title, why we ask */
.mbrStepHead { margin: 0 0 14px; }
.mbrStepHead .mbrEyebrow { margin: 0; }
.mbrStepHead h3 { margin: 4px 0 4px; font-size: 1.25rem; font-weight: 800; }
.mbrStepHead .mbrStepWhy { margin: 0; color: var(--hd-muted); font-size: 14px; }

/* App page alignment (2026-10-08): intro actions, plan cards, closing call to action */
.mbrIntroActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.mbrPlanCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 12px 0; padding: 0; list-style: none; }
.mbrPlanCard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--hd-line); border-radius: 12px; background: var(--hd-card); }
.mbrPlanCardCurrent { border-color: var(--hd-brand); box-shadow: inset 0 3px 0 var(--hd-brand); }
.mbrPlanCardName { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.mbrPlanCardPrice { margin: 0; color: var(--hd-muted); font-size: 14px; }
.mbrPlanCardPrice strong { color: var(--hd-ink); font-size: 1.5rem; font-weight: 800; }
.mbrPlanCard .mbrBtn, .mbrPlanCardNote { align-self: flex-start; margin-top: auto; }
.mbrPlanCardNote { color: var(--hd-muted); font-size: 13px; font-weight: 700; }
.mbrAppCta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 1040px; margin: 8px 0 28px; padding: 22px 24px; border-radius: var(--hd-radius-card); background: var(--hd-brand-tint); }
.mbrAppCta h2 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; }
.mbrAppCta p { margin: 0; color: var(--hd-ink); }
.mbrAvenueGrid { margin: 20px 0 4px; }
.mbrAvLeadFacts { margin: 4px 20px 0; }

/* Section intro at the top of an app page: eyebrow, heading, one paragraph */
.mbrSectionIntro { display: flex; flex-direction: column; gap: 6px; max-width: 720px; margin: 0 0 20px; }
.mbrSectionIntro .mbrHaveLabel { margin: 0; }
.mbrSectionIntro h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.mbrSectionIntro p { margin: 0; color: var(--hd-muted); }
.mbrFeatureCard { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); }
.mbrFeatureCard i { font-size: 22px; }
.mbrFeatureCard strong { font-size: 15px; }
.mbrFeatureCard p { margin: 0; color: var(--hd-muted); font-size: 14px; }

/* Progress rings (the verification home base) */
.mbrRingTrack { stroke: var(--hd-surface-2); }
.mbrRingValue { stroke: var(--hd-good); }

/* Support rows */
.mbrIncidentRows { margin: 0; padding: 4px 20px 8px; list-style: none; }
.mbrIncidentRows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hd-line); }
.mbrIncidentRows li:last-child { border-bottom: 0; }
.mbrIncidentRows a { min-width: 0; color: var(--hd-ink); text-decoration: none; overflow-wrap: anywhere; }
.mbrIncidentRows a:hover { color: var(--hd-brand); }
.mbrIncidentRows a span { color: var(--hd-muted); }

@media (max-width: 1100px) {
  .mbrStatGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbrDashGrid { grid-template-columns: 1fr; }
}
/* Phones: the hub menu becomes a bottom tab bar */
@media (max-width: 760px) {
  .mbrAppBody { --hd-rail: 0px; --hd-tabbar: 64px; }
  .mbrHeaderProduct { display: none; }
  .mbrHeaderPlans { display: none; }
  #mbrRail { top: auto; right: 0; bottom: 0; flex-direction: row; justify-content: space-around; width: auto; height: var(--hd-tabbar); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hd-line); background: var(--hd-card); }
  .mbrHubItem { width: auto; flex: 1; }
  /* Phones: Home and the four apps; To-dos, Account and Help are in the header */
  .mbrHubDesk { display: none; }
  .mbrHubGroup { display: contents; }
  .mbrHubApp { gap: 1px; padding: 4px 0; }
  .mbrHubAppIcon { width: 26px; height: 26px; margin-bottom: 1px; }
  .mbrHubKind { display: none; }
  .mbrHubApp.mbrHubActive { box-shadow: none; background: var(--hd-surface); }
  #mbrMain { bottom: var(--hd-tabbar); padding: 0; }
  #mbrContent { padding: 20px 16px 32px; border-radius: 0; }
  .mbrPageLoader { right: 0; bottom: 0; border-radius: 0; }
}
@media (max-width: 560px) {
  #mbrHeader { gap: 8px; padding: var(--hd-strip) 10px 0; }
  #mbrHeaderBrand img { max-width: 96px; height: auto; max-height: 28px; }
  .mbrMenuPanel { position: fixed; top: calc(var(--hd-header) + 8px); left: 10px; right: 10px; width: auto; }
  .mbrStatGrid { gap: 10px; }
  .mbrSettingsTabs, .mbrPills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mbrSettingsTab, .mbrPillLink { flex: 0 0 auto; }
  .mbrCardFooter { flex-wrap: wrap; }
  .mbrAppBody input, .mbrAppBody select, .mbrAppBody textarea { font-size: 16px; }
  .mbrMetaDivider { display: none; }
  .mbrPageMeta { flex-direction: column; align-items: flex-start; gap: 2px; }
}

.mbrSrOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Platform icons are the platforms' own app icons (their favicons). */
.mbrAppIcon { display: block; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; }
.mbrLauncherApp .mbrAppIcon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 8px; }
.mbrLauncherOff .mbrAppIcon, .mbrAppCardOff .mbrAppIcon { filter: grayscale(1); opacity: 0.5; }
/* HERO Websites: app tile (until the platform icon, FUTURE #26) and the dashboard card */
.mbrAppIconWebsites { display: grid; place-items: center; background: var(--hd-brand); color: #fff; font-size: 20px; --fa-primary-color: #fff; --fa-secondary-color: #fff; --fa-secondary-opacity: 0.45; }
.mbrWebBody { flex: 1; padding: 4px 20px 16px; }
.mbrWebBody > p { margin: 0 0 12px; color: var(--hd-muted); line-height: 1.5; }
.mbrWebLive { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mbrWebShot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--hd-line); border-radius: 10px; background: var(--hd-surface); }
.mbrWebShot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mbrWebShotEmpty { display: grid; place-items: center; height: 100%; font-size: 36px; color: var(--hd-muted); }
.mbrWebFacts { display: grid; gap: 4px; min-width: 0; }
.mbrWebFacts > strong { font-size: 17px; overflow-wrap: anywhere; }
.mbrWebFacts > small { color: var(--hd-muted); }
.mbrWebDomains { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.mbrWebDomains li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 6px 10px; border-radius: 8px; background: var(--hd-surface); font-size: 14px; }
.mbrWebDomains li span { font-weight: 700; overflow-wrap: anywhere; }
.mbrWebDomains li small { color: var(--hd-muted); }
/* Enable website prompt: the card is outlined and the prompt shows when Enable is chosen elsewhere. */
.mbrWebPrompt { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--mbr-notice-bg); color: var(--mbr-notice-fg); font-size: 14px; }
.mbrWebPrompt[hidden] { display: none; }
/* Placeholders while div_website loads (Core's "Retrieving website"). */
.mbrSkel { display: block; border-radius: 999px; background: linear-gradient(90deg, var(--hd-surface) 0%, var(--hd-line) 50%, var(--hd-surface) 100%); background-size: 200% 100%; animation: mbrSkel 1.4s ease-in-out infinite; }
.mbrSkelPill { flex: 0 0 auto; width: 96px; height: 28px; }
.mbrSkelLine { width: 100%; height: 12px; margin: 10px 0 0; border-radius: 6px; }
.mbrSkelShort { width: 62%; }
.mbrWebChecking { margin: 0; color: var(--hd-muted); font-size: 14px; }
@keyframes mbrSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .mbrSkel { animation: none; } }
#mbrDashWebsite { scroll-margin-top: calc(var(--hd-header) + 16px); }
.mbrWebPrompt i { margin-top: 2px; font-size: 18px; }
.mbrWebCard.mbrWebCardPrompt { border-color: var(--mbr-brand); box-shadow: 0 0 0 3px var(--mbr-focus); transition: box-shadow 200ms ease, border-color 200ms ease; }
.mbrWebPick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; margin-bottom: 12px; }
.mbrWebSample { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; }
.mbrWebPreview { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border: 1px solid var(--hd-line); border-radius: 10px; background: var(--hd-surface); }
.mbrWebLinks { display: inline-flex; flex-wrap: wrap; gap: 4px; font-size: 14px; }
@media (max-width: 640px) { .mbrWebLive, .mbrWebPick { grid-template-columns: 1fr; } }
.mbrPills .mbrSettingsTabs { display: contents; }
/* Apps and Help hubs */

/* Enabled vs not: a green status and accent on the account's platforms; a
   dashed, quiet card with a neutral status for the ones it can add. */
.mbrAppStatus { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.mbrAppStatusOn { background: #e3f4ee; color: var(--hd-good); --fa-primary-color: #ffffff; --fa-secondary-color: var(--hd-good); --fa-secondary-opacity: 1; }
.mbrAppStatusOff { border: 1px dashed var(--hd-line); background: var(--hd-card); color: var(--hd-muted); --fa-primary-color: #ffffff; --fa-secondary-color: var(--hd-muted); --fa-secondary-opacity: 1; }
.mbrAppCardOn { border-color: var(--hd-good); box-shadow: inset 4px 0 0 var(--hd-good), var(--hd-shadow-card); }
.mbrAppCardOff { border-style: dashed; background: var(--hd-bg); }
.mbrEnableForm { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mbrEnableForm .mbrError { margin: 0; }
.mbrAppCard > .mbrAppMeta, .mbrAppCard > p.mbrAppMeta { margin: 0; }
.mbrAppCardHead > div { display: flex; flex-direction: column; min-width: 0; }
.mbrAppCardHead .mbrOnly { margin: 0 0 0 auto; white-space: nowrap; }
.mbrAppCard .mbrLegend { margin: 6px 0 0; font-size: 13px; color: var(--hd-muted); }
.mbrEmptyBlock { padding: 0 0 8px; }
.mbrFeatureMore { margin: 12px 0 0; }
.mbrTableWrap { overflow-x: auto; border: 1px solid var(--hd-line); border-radius: var(--hd-radius-card); background: var(--hd-card); }
.mbrPlanTable { width: 100%; border-collapse: collapse; font-size: 14px; }
.mbrPlanTable th, .mbrPlanTable td { padding: 12px 16px; border-bottom: 1px solid var(--hd-line); text-align: left; white-space: nowrap; }
.mbrPlanTable thead th { color: var(--hd-muted); font-size: 13px; font-weight: 700; }
.mbrPlanTable tbody tr:last-child th, .mbrPlanTable tbody tr:last-child td { border-bottom: 0; }
.mbrPlanCurrent { background: var(--mbr-notice-bg); }

/* Billing (Account > Billing) */
.mbrBillTiles .mbrStatValue strong { font-size: 24px; }
.mbrStatBad { color: var(--hd-bad); }
.mbrSettingsPanel > .mbrCard + .mbrCard { margin-top: 20px; }
.mbrPayOther { max-width: 220px; }
.mbrPaymentElement { margin: 6px 0 4px; }
.mbrPaymentElement[hidden] { display: none; }
.mbrBillTable { width: 100%; border-collapse: collapse; font-size: 14px; }
.mbrBillTable th, .mbrBillTable td { padding: 10px 14px; border-bottom: 1px solid var(--hd-line); text-align: left; vertical-align: top; }
.mbrBillTable thead th { color: var(--hd-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.mbrBillTable tfoot th { border-bottom: 0; font-weight: 800; }
.mbrBillTable td strong { display: block; font-weight: 700; }
.mbrBillTable .mbrNum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mbrLinkButton { margin: 4px 0 0; padding: 0; border: 0; background: none; color: var(--hd-brand); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mbrLinkButton:hover { text-decoration: underline; }
.mbrBillDetail { margin-top: 8px; font-size: 14px; }
.mbrBillDetailList { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mbrBillDetailList li { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; color: var(--hd-ink); }
.mbrBillDetailList small { color: var(--hd-muted); white-space: nowrap; }
.mbrStatementPick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.mbrStatementPick select { width: auto; min-width: 180px; margin: 0; }
.mbrStatementFor { margin: 0 0 12px; color: var(--hd-muted); }
.mbrStatement .mbrSubTitle { margin: 18px 0 8px; }
.mbrWalletList { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.mbrWalletList > li { padding: 16px; border: 1px solid var(--hd-line); border-radius: var(--hd-radius-card); }
.mbrWalletHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 700; }
.mbrWalletHead i { font-size: 20px; }
@media (max-width: 640px) { .mbrBillDetailList li { grid-template-columns: 1fr; } }
/* Printed statements: Core's showCharges letterhead, shown only on paper. */
.mbrLetterhead, .mbrLetterheadPay, .mbrPrintSheet { display: none; }
@media print {
  @page { margin: 0.5in; }
  html, body.mbrPrintStatement { height: auto !important; overflow: visible !important; background: #fff !important; }
  body.mbrPrintStatement > *:not(.mbrPrintSheet) { display: none !important; }
  body.mbrPrintStatement .mbrPrintSheet { display: block; color: #000; font-size: 10pt; line-height: 1.35; }
  .mbrPrintSheet .mbrCard { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .mbrPrintSheet .mbrEyebrow, .mbrPrintSheet .mbrDisplay, .mbrPrintSheet .mbrStatementFor, .mbrPrintSheet .mbrStatementPick, .mbrPrintSheet .mbrLinkButton, .mbrPrintSheet .mbrBillDetail { display: none !important; }
  .mbrPrintSheet .mbrLetterhead { display: flex; justify-content: space-between; gap: 0.4in; margin: 0 0 0.25in; }
  .mbrPrintSheet .mbrLetterhead p { margin: 0 0 6pt; }
  .mbrPrintSheet .mbrLetterheadFrom img { display: block; width: 1.8in; height: auto; margin: 0 0 10pt; }
  .mbrPrintSheet .mbrLetterheadTo { width: 3.4in; }
  .mbrPrintSheet .mbrLetterheadTitle { margin: 0 0 8pt !important; font-size: 18pt; font-weight: 700; letter-spacing: 0.04em; text-align: right; text-transform: uppercase; }
  .mbrPrintSheet .mbrLetterheadWindow { box-sizing: border-box; width: 3.4in; min-height: 1in; margin: 0 0 8pt; padding: 8pt 12pt; border: 1px solid #000; border-radius: 8pt; }
  .mbrPrintSheet .mbrLetterheadPay { display: block; margin: 0 0 0.2in; font-style: italic; text-align: center; }
  .mbrPrintSheet .mbrTableWrap { overflow: visible; }
  .mbrPrintSheet .mbrTable { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .mbrPrintSheet .mbrTable th, .mbrPrintSheet .mbrTable td { padding: 4pt 6pt; border-bottom: 1px solid #999; color: #000; }
  .mbrPrintSheet .mbrTable thead th { border-bottom: 1.5px solid #000; }
  .mbrPrintSheet .mbrTable tfoot th { border-top: 1.5px solid #000; border-bottom: 0; }
  .mbrPrintSheet .mbrTable tr { break-inside: avoid; }
  .mbrPrintSheet .mbrSubTitle { margin: 14pt 0 6pt; font-size: 12pt; }
}
.mbrHelpCard { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 0; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); color: var(--hd-ink); text-decoration: none; transition: box-shadow 130ms ease; }
a.mbrHelpCard:hover { box-shadow: var(--hd-shadow-card-hover); }
a.mbrHelpCard:hover { border-color: var(--hd-ink); color: var(--hd-ink); }
.mbrHelpCard > i { font-size: 26px; }
.mbrHelpCard .mbrAppIcon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; }
.mbrHelpCard strong { font-size: 16px; }
.mbrHelpCard span { color: var(--hd-muted); font-size: 14px; }
.mbrHelpCard.mbrStub { margin: 0; border-style: dashed; }
.mbrBookCard { display: flex; flex-direction: column; gap: 16px; padding: 26px 30px; }
.mbrBookIntro { margin: 0; color: var(--hd-ink); font-size: 16px; line-height: 1.55; }
.mbrCalInline { width: 100%; min-height: 640px; overflow: auto; }
.mbrBookFallback { margin: 0; color: var(--hd-muted); }
.mbrHelpCard.mbrStub .mbrAppIcon { filter: grayscale(1); opacity: 0.5; }
/* Packages and plans: each platform's card on the left, its Harmony
   packages or Horizon plans on the right. */
.mbrAppRows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* Packages and plans: each card opens with its platform's status and actions */
/* One gutter between each platform heading and its first card */
.mbrPlanPanel > .mbrAppCardHead { margin-bottom: 20px; }
.mbrPlanPanel > .mbrAppCardHead + * { margin-top: 0; }
.mbrPlanPanel > .mbrAppCardHead .mbrPanelTitle { margin: 0; }
.mbrPanelActions { justify-content: flex-start; margin: 0 0 16px; padding-top: 0; }
/* Plan panels: actions beside the status pill in the head */
.mbrPlanPanel > .mbrAppCardHead { flex-wrap: wrap; }
.mbrPlanPanel > .mbrAppCardHead > .mbrPanelActions { display: flex; flex: 0 1 auto; flex-direction: row; justify-content: flex-end; margin: 0; padding: 0; }
.mbrPlanPanel > .mbrAppCardHead > .mbrPanelActions .mbrPillTag { margin: 0; }
.mbrPriceTool { margin: 12px 0 4px; }
.mbrReveal { margin: 12px 0 0; border-top: 1px solid var(--hd-line); }
.mbrReveal > summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.mbrReveal > summary::-webkit-details-marker { display: none; }
.mbrReveal > summary::before { content: "\25B8"; color: var(--hd-brand); transition: transform 120ms ease; }
.mbrReveal[open] > summary::before { transform: rotate(90deg); }
.mbrReveal > summary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--mbr-focus); border-radius: 6px; }
.mbrReveal > .mbrTableWrap { margin-bottom: 12px; background: var(--hd-card); }
.mbrAppRows > .mbrAppHarmony { order: 1; }
.mbrAppRows > .mbrPanelHarmony { order: 2; }
.mbrAppRows > .mbrAppHorizon { order: 3; }
.mbrAppRows > .mbrPanelHorizon { order: 4; }
.mbrAppRows > .mbrAppWebsites { order: 5; }
.mbrAppRows > .mbrPanelWebsites { order: 6; }
.mbrAppRows > .mbrPanelAvenue { order: 8; }
.mbrPlanPanel { min-width: 0; padding: 18px 20px; border: 0; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); }
.mbrPanelTitle { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.mbrPlanList { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.mbrPlanItem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 14px; border: 1px solid var(--hd-line); border-radius: 10px; background: var(--hd-card); }
.mbrPlanItemCurrent { border-color: var(--hd-brand); box-shadow: inset 3px 0 0 var(--hd-brand); }
.mbrPlanName { min-width: 0; }
.mbrPlanName strong { font-size: 15px; }
/* Prices: bold and right-aligned in Harmony packages and Horizon plans alike */
.mbrPrice { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mbrPlanTable .mbrPrice { text-align: right; white-space: nowrap; }

/* Package, module and feature matrices */
.mbrMatrixTitle { margin: 18px 0 8px; font-size: 14px; font-weight: 800; }
.mbrMatrix tbody th { font-weight: 600; }
.mbrMatrix td, .mbrMatrix .mbrMatrixCell { text-align: center; }
.mbrMatrix .mbrMatrixCell { width: 1%; white-space: nowrap; }
.mbrMatrixYes { color: var(--hd-good); font-size: 16px; --fa-primary-color: #ffffff; --fa-secondary-color: var(--hd-good); --fa-secondary-opacity: 1; }
.mbrMatrixCond { color: var(--hd-gold); font-size: 16px; --fa-primary-color: var(--hd-gold); --fa-secondary-color: var(--hd-gold); }
.mbrMatrixNo { color: var(--hd-muted); }
.mbrMatrixNote { color: var(--hd-muted); font-size: 12px; font-weight: 600; }
.mbrMatrixGroup th { padding-top: 14px; background: var(--hd-surface); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.mbrMatrixGroup small { display: block; margin-top: 2px; color: var(--hd-muted); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.mbrFeatureMatrix tbody th { white-space: normal; }
.mbrMatrixLegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.mbrMatrixLegend span { display: inline-flex; align-items: center; gap: 6px; }
.mbrPlanDesc { grid-column: 1 / -1; color: var(--hd-muted); font-size: 14px; }
.mbrPlanExcludes { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--hd-line); }
.mbrPlanExcludes strong { color: var(--hd-ink); }
/* Property Manager card: its packages and systems under the dashed line */
.mbrPlanPackages > strong { display: block; margin: 0 0 8px; }
.mbrPlanPackages .mbrTableWrap { margin: 0; color: var(--hd-ink); font-size: 14px; }
/* Property Manager card: property types, each its own module */
.mbrPlanTypes > strong { display: block; margin: 0 0 4px; }
.mbrPlanTypes > p { margin: 0 0 8px; }
.mbrTypeList { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbrTypeList li { min-width: 0; }
.mbrTypeCard { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--hd-line); border-radius: 8px; background: var(--hd-card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mbrTypeCard:hover, .mbrTypeCard[aria-expanded="true"] { border-color: var(--hd-brand); }
.mbrTypeCard:focus-visible { outline: 2px solid var(--hd-brand); outline-offset: 2px; }
.mbrTypePrices { margin-top: 12px; }
.mbrTypePrices > strong { display: block; margin: 0 0 8px; }
.mbrTypePrices .mbrTableWrap { margin: 0 0 8px; color: var(--hd-ink); font-size: 14px; }
.mbrPlanTypes > .mbrPriceTermsHead { display: block; margin: 16px 0 8px; }
.mbrPriceTerms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; }
.mbrPriceTerms li { min-width: 0; padding: 8px 10px; border: 1px solid var(--hd-line); border-radius: 8px; background: var(--hd-card); }
.mbrPriceTerms strong { display: block; color: var(--hd-ink); }
.mbrTypeList img { flex: 0 0 32px; }
.mbrTypeList span { min-width: 0; font-size: 14px; line-height: 1.35; }
.mbrTypeList strong { display: block; color: var(--hd-ink); font-size: 14px; }
.mbrPlanPanel .mbrHelp { margin: 0; font-size: 13px; }
.mbrPlanPanel .mbrTableWrap { margin-bottom: 12px; background: var(--hd-card); }

/* Overflow: let card text, pills and table cells wrap inside their boxes */
.mbrAppCard, .mbrAppCard * { overflow-wrap: anywhere; }
.mbrAppCardHead { flex-wrap: wrap; }
.mbrAppCardHead > div { flex: 1 1 140px; }
.mbrAppCardHead .mbrPillTag, .mbrAppCardHead .mbrOnly { white-space: normal; text-align: center; }
/* App cards as in the design (2026-10-08): icon and the package, plan or
   status pill on the top row (pill always upper right, green when active),
   the name and what it is underneath. */
.mbrAppCard > .mbrAppCardHead, .mbrWebCard > .mbrAppCardHead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 8px; }
.mbrAppCard > .mbrAppCardHead > img, .mbrWebCard > .mbrAppCardHead > img { grid-column: 1; grid-row: 1; }
.mbrAppCard > .mbrAppCardHead > .mbrPillTag, .mbrWebCard > .mbrAppCardHead > .mbrPillTag { grid-column: 3; grid-row: 1; justify-self: end; max-width: 100%; margin: 0; padding: 4px 10px; text-align: right; }
.mbrAppCard > .mbrAppCardHead > div, .mbrWebCard > .mbrAppCardHead > div { grid-column: 1 / -1; grid-row: 2; }
.mbrAppCard > .mbrAppCardHead strong, .mbrWebCard > .mbrAppCardHead strong { font-size: 19px; line-height: 24px; letter-spacing: -0.01em; }
/* Websites card laid out like the other app cards (2026-10-08): same padding,
   gaps, subtitle, description and secondary line. */
.mbrWebCard { gap: 10px; padding: 18px; }
.mbrWebCard > .mbrAppCardHead { padding: 0; }
.mbrWebCard .mbrAppMeta { color: var(--hd-muted); font-size: 14px; }
.mbrWebCard > .mbrWebLede { margin: 0; color: var(--hd-ink); font-size: 14px; }
.mbrWebCard > .mbrWebBody { padding: 0; }
.mbrWebCard > .mbrWebBody > p { margin: 0 0 10px; color: var(--hd-muted); font-size: 14px; }
.mbrWebCard > .mbrCardFooter { padding: 6px 0 0; }
.mbrPillActive { background: var(--hd-good-tint); color: var(--hd-good); }
/* Limit meter on app cards (flib.MBR5.apps showCapacityMeter), like Horizon's
   plan meter: shown only near the limit, amber from 75%, red from 90%. */
.mbrCapacityMeter { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--hd-surface); }
.mbrCapacityValue { color: var(--hd-muted); font-size: 13px; line-height: 1.3; }
.mbrCapacityValue strong { color: var(--hd-ink); font-size: 18px; font-weight: 800; }
.mbrCapacityTrack { overflow: hidden; width: 100%; height: 6px; border-radius: 999px; background: var(--hd-line); }
.mbrCapacityFill { display: block; height: 100%; border-radius: inherit; background: var(--hd-good); }
.mbrCapacityMeter small { color: var(--hd-muted); font-size: 12px; font-weight: 700; }
.mbrCapacityApproaching { background: var(--hd-gold-wash); }
.mbrCapacityApproaching .mbrCapacityFill { background: var(--hd-gold); }
.mbrCapacityApproaching small { color: var(--hd-gold-deep); }
.mbrCapacityLimit { background: #fdf0ef; }
.mbrCapacityLimit .mbrCapacityFill { background: var(--hd-bad); }
.mbrCapacityLimit small { color: var(--hd-bad-fg); }
/* App launch link, as in the design: "Open Harmony" with an arrow in a pale
   blue circle, full width as the card's last row. */
.mbrOpenLink { display: flex; flex: 1 1 100%; order: 99; align-items: center; justify-content: space-between; gap: 12px; color: var(--hd-brand); font-size: 15px; font-weight: 700; line-height: 20px; text-decoration: none; border-radius: 8px; }
.mbrOpenCirc { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--hd-brand-tint); font-size: 14px; transition: background-color .15s, transform .15s; --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-brand); --fa-secondary-opacity: 1; }
.mbrOpenLink:hover .mbrOpenCirc { background: #d3e6f3; transform: translateX(2px); }
.mbrOpenLink:focus-visible { outline: 3px solid var(--hd-brand-tint); outline-offset: 2px; }
.mbrCardFooter:has(.mbrOpenLink) { flex-wrap: wrap; }
.mbrCapacityAction { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; color: var(--hd-brand); font-size: 13px; font-weight: 800; text-decoration: none; --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-brand); }
.mbrCapacityAction:hover { text-decoration: underline; text-underline-offset: 3px; }
.mbrCapacityPlain { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--hd-surface); color: var(--hd-body); font-size: 14px; --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-gold); }
.mbrCapacityPlain strong { color: var(--hd-ink); font-size: 15px; }
.mbrPlanTable th, .mbrPlanTable td { white-space: normal; }
.mbrPlanTable th .mbrPillTag { display: inline-block; margin-top: 2px; }
@media (max-width: 1000px) {
  .mbrAppRows { grid-template-columns: 1fr; }
}
/* Text areas get the same bottom spacing as inputs, so the help line under them (margin-top -10px) no longer overlaps the box. */
.mbrForm textarea { display: block; width: 100%; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--mbr-field-line); border-radius: var(--mbr-radius); background: var(--mbr-field); color: var(--mbr-ink); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.mbrForm textarea:focus { outline: none; border-color: var(--mbr-brand); box-shadow: 0 0 0 4px var(--mbr-focus); }

/* Verification (VERIFICATION_SPEC): option list, inline resend links,
   token instructions, and the staff-review drawer. */
.mbrVetOptions { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.mbrVetOption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); background: var(--mbr-bg); }
.mbrVetOption strong { display: block; font-size: 15px; }
.mbrVetOption small { display: block; margin-top: 2px; color: var(--mbr-muted); font-size: 13px; line-height: 1.45; }
.mbrVetOption form { margin: 0; }
.mbrVetOption .mbrError { grid-column: 1 / -1; }
.mbrVetStaff { grid-column: 1 / -1; }
.mbrVetStaff > summary { display: inline-flex; list-style: none; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-weight: 700; }
.mbrVetStaff > summary::-webkit-details-marker { display: none; }
.mbrVetStaff[open] > summary { margin-bottom: 12px; }
.mbrVetOption:has(.mbrVetStaff) { grid-template-columns: minmax(0, 1fr); }
.mbrInlineForm { margin: 10px 0 22px; max-width: 760px; }
.mbrInlineForm .mbrError { margin: 4px 0; }
.mbrVetSteps { margin: 0 0 18px; padding-left: 20px; line-height: 1.6; }
.mbrVetSteps li { margin-bottom: 8px; overflow-wrap: anywhere; }
.mbrVetSteps code { padding: 1px 6px; border-radius: 4px; background: var(--mbr-soft); font-size: 13px; }
.mbrVetPath { margin: 0 0 6px; }
@media (max-width: 600px) {
  .mbrVetOption { grid-template-columns: minmax(0, 1fr); }
}

/* Home: verification card for accounts not yet verified (first card), and
   not-enabled apps that link to the Apps page. */
.mbrStatGrid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mbrVetMode { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--hd-surface); font-size: 14px; line-height: 1.5; }
.mbrVetMode i { margin-top: 3px; color: var(--hd-brand); }
.mbrVetProgress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: none; }
.mbrVetProgress li { display: flex; flex-direction: column; gap: 6px; color: var(--hd-muted); font-size: 12px; font-weight: 700; }
.mbrVetDot { display: block; height: 6px; border-radius: 999px; background: var(--hd-line); }
.mbrVetStep1 { color: var(--hd-ink); }
.mbrVetStep1 .mbrVetDot { background: var(--hd-brand); }
a.mbrLauncherOff { cursor: pointer; text-decoration: none; color: inherit; }
a.mbrLauncherOff:hover strong { color: var(--hd-ink); }
@media (max-width: 600px) {
  .mbrStatGrid3 { grid-template-columns: minmax(0, 1fr); }
}

/* 6-digit codes: six boxes over one transparent input (script.MBR5.js codeBoxes) */
.mbrCodeBoxes { position: relative; display: flex; gap: 8px; max-width: 336px; margin: 0 0 18px; }
.mbrCodeBox {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mbr-field-line);
  border-radius: var(--mbr-radius);
  background: var(--mbr-field);
  color: var(--mbr-ink);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mbrCodeBox.mbrCodeFilled { border-color: var(--mbr-muted); }
.mbrCodeBox.mbrCodeActive { border-color: var(--mbr-brand); box-shadow: 0 0 0 4px var(--mbr-focus); }
.mbrCodeBox.mbrCodeActive:empty::after {
  content: "";
  width: 2px;
  height: 26px;
  background: var(--mbr-brand);
  animation: mbrCodeCaret 1s steps(1) infinite;
}
@keyframes mbrCodeCaret { 50% { opacity: 0; } }
.mbrForm .mbrCodeBoxes input,
.mbrCodeBoxes input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  letter-spacing: 0;
}
.mbrForm .mbrCodeBoxes input:focus { box-shadow: none; }
.mbrCodeBoxes input::selection { background: transparent; color: transparent; }
@media (prefers-reduced-motion: reduce) { .mbrCodeBox.mbrCodeActive:empty::after { animation: none; } }

/* File inputs: Horizon's logo-upload style (style.HZN5.css .hznLogoUploadBody) */
.mbrForm input[type="file"] { height: auto; min-width: 0; padding: 5px; overflow: hidden; border: 1px solid var(--mbr-field-line); border-radius: var(--mbr-radius); background: var(--mbr-field); color: var(--mbr-muted); font: inherit; font-size: 14px; cursor: pointer; }
.mbrForm input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 12px; border: 0; border-radius: 7px; background: var(--mbr-notice-bg); color: var(--mbr-brand); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.mbrForm input[type="file"]::-webkit-file-upload-button { margin-right: 10px; padding: 8px 12px; border: 0; border-radius: 7px; background: var(--mbr-notice-bg); color: var(--mbr-brand); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.mbrForm input[type="file"]:hover::file-selector-button { background: var(--mbr-brand); color: #ffffff; }
.mbrForm input[type="file"]:hover::-webkit-file-upload-button { background: var(--mbr-brand); color: #ffffff; }
.mbrForm input[type="file"]:focus { box-shadow: none; }
.mbrForm input[type="file"]:focus-visible { outline: 3px solid var(--mbr-focus); outline-offset: 2px; border-color: var(--mbr-brand); }

/* Secondary actions on the verify pages: Material 3 filled tonal button,
   right-aligned under the form (the centered .mbrAlt suits the sign-in panel only). */
.mbrVetAlt { display: flex; justify-content: flex-end; margin: 16px 0 0; }
/* Verification: the lead and the secondary action share the form's width (.mbrApp .mbrForm). */
.mbrViewverify .mbrSub, .mbrViewverify .mbrVetAlt, .mbrViewverify .mbrVetButtons { max-width: 760px; }
/* The step's main action and its secondary action share one row: main left, secondary right. */
.mbrVetButtons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 4px; }
.mbrVetButtons .mbrPrimary { width: auto; padding-left: 28px; padding-right: 28px; }
.mbrVetForm + .mbrHelp { margin-top: 12px; }
.mbrTonal { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--mbr-notice-bg); color: var(--mbr-notice-fg); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
.mbrTonal:hover { background: var(--mbr-tint-strong); color: var(--mbr-notice-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.mbrTonal:active { background: var(--mbr-tint-strong); filter: brightness(0.96); }
.mbrTonal:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--mbr-focus); }

/* Account and Public profile tabs: Horizon's settings panels (style.HZN5.css
   .hznSettings*, .hznLogoUpload*, .hznServiceRadius*, .hznPublicProfile*). */
.mbrSettingsPanel { --mbr-data-soft: var(--mbr-notice-bg); --mbr-shadow-card: 0 1px 2px rgba(35, 42, 47, 0.05), 0 10px 28px -16px rgba(35, 42, 47, 0.16); }
.mbrSrOnly { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; margin: -1px !important; padding: 0 !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.mbrCard { background: var(--hd-card, #ffffff); border: 0; border-radius: 16px; box-shadow: var(--hd-shadow-card, 0 0 2px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.12)); padding: 20px; }
.mbrSettingsPanel .mbrEyebrow { margin: 0; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hd-muted); }
.mbrDisplay { font-weight: 800; letter-spacing: -0.02em; color: var(--hd-ink); }
.mbrMuted { color: var(--hd-muted); }
.mbrSettingsGrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 18px; align-items: start; }
.mbrSettingsCard { padding: 24px; }
.mbrSettingsCard h2 { margin: 7px 0 5px; font-size: 1.35rem; }
.mbrSettingsCard > .mbrMuted { margin: 0; font-size: 0.875rem; }
.mbrSettingsHarmony { margin-top: 18px; }
.mbrSettingsHarmony h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.mbrSettingsHarmony .mbrMuted { margin: 0; font-size: 0.875rem; }

.mbrSettingsBrandControls { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.45fr); gap: 14px; align-items: stretch; margin-top: 20px; }
.mbrLogoUpload { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--hd-line); border-radius: 12px; background: var(--hd-surface); }
.mbrLogoCurrent { width: 110px; height: 90px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--hd-line); border-radius: 10px; background: var(--hd-card); }
.mbrLogoCurrent img { display: block; max-width: 96px; max-height: 76px; object-fit: contain; }
.mbrLogoUploadBody { min-width: 0; }
.mbrLogoUploadBody > strong { font-size: 0.875rem; color: var(--hd-ink); }
.mbrLogoUploadBody > p { margin: 4px 0 12px; color: var(--hd-ink); font-size: 0.875rem; line-height: 1.4; }
.mbrLogoUploadBody form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.mbrLogoUploadBody form .mbrBtn { justify-content: center; }
.mbrLogoUploadBody input[type="file"] { min-width: 0; box-sizing: border-box; padding: 5px; overflow: hidden; border: 1px solid var(--hd-line); border-radius: var(--hd-radius-control); background: var(--hd-card); color: var(--hd-muted); font: inherit; font-size: 0.875rem; cursor: pointer; }
.mbrLogoUploadBody input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 11px; border: 0; border-radius: 7px; background: var(--mbr-data-soft); color: var(--hd-brand); font: inherit; font-size: 0.875rem; font-weight: 800; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.mbrLogoUploadBody input[type="file"]::-webkit-file-upload-button { margin-right: 10px; padding: 7px 11px; border: 0; border-radius: 7px; background: var(--mbr-data-soft); color: var(--hd-brand); font: inherit; font-size: 0.875rem; font-weight: 800; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.mbrLogoUploadBody input[type="file"]:hover::file-selector-button { background: var(--hd-brand); color: #ffffff; }
.mbrLogoUploadBody input[type="file"]:hover::-webkit-file-upload-button { background: var(--hd-brand); color: #ffffff; }
.mbrLogoUploadBody .mbrError { margin: 0; }

.mbrSettingsBrandColors { height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--hd-line); border-radius: 12px; background: var(--hd-card); }
.mbrSettingsFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.mbrSettingsBrandColors .mbrSettingsFields { grid-template-columns: 1fr; margin-top: 12px; }
.mbrSettingsFields label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 400; }
.mbrSettingsFields label > span:first-child { color: var(--hd-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mbrSettingsFields input, .mbrSettingsFields select { width: 100%; min-width: 0; height: auto; box-sizing: border-box; margin: 0; padding: 10px 11px; border: 1px solid var(--hd-line); border-radius: var(--hd-radius-control); background: var(--hd-surface); color: var(--hd-ink); font: inherit; }
.mbrSettingsFields input[readonly] { color: var(--hd-muted); cursor: default; }
.mbrSettingsFields input:focus { outline: none; border-color: var(--hd-brand); box-shadow: 0 0 0 4px var(--mbr-focus); }
.mbrColorField { display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--hd-line); border-radius: var(--hd-radius-control); background: var(--hd-surface); }
.mbrSettingsFields .mbrColorField input { border: 0; background: transparent; padding: 6px 4px; }
.mbrSettingsFields .mbrColorField input[type="color"] { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; cursor: pointer; }

.mbrServiceRadiusField { grid-column: 1 / -1; width: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--hd-line); border-radius: 12px; background: var(--hd-card); }
/* Horizon settings save on change: the status sits at the card's top right. */
.mbrAutoStatus { float: right; margin: 0 0 4px 12px; color: var(--hd-muted); font-size: 0.72rem; font-weight: 700; }
.mbrAutoStatus:empty { display: none; }
.mbrAutoStatusError { color: #b3261e; }
.mbrServiceRadiusField fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.mbrPrimaryMarketField { display: grid; gap: 8px; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--hd-line); }
.mbrPrimaryMarketInputs { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
.mbrPrimaryMarketInputs input { width: 100%; min-width: 0; height: auto; box-sizing: border-box; margin: 0; padding: 9px 11px; border: 1px solid var(--hd-line); border-radius: 9px; background: var(--hd-card); color: var(--hd-ink); font: inherit; font-size: 0.875rem; }
.mbrPrimaryMarketInputs input:last-of-type { text-transform: uppercase; }
.mbrServiceRadiusHead { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.mbrServiceRadiusHead strong { display: block; margin-top: 4px; color: var(--hd-ink); }
.mbrServiceRadiusHead output { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--mbr-data-soft); color: var(--hd-brand); font-size: 0.78rem; font-weight: 800; }
.mbrServiceRadiusDescription { margin: 8px 0 12px; font-size: 0.875rem; line-height: 1.5; }
.mbrServiceRadiusHelp { margin: 12px 0 14px; padding: 12px 14px; border: 1px solid var(--mbr-tint-strong); border-radius: var(--hd-radius-control); background: var(--mbr-data-soft); color: var(--hd-ink); font-size: 0.875rem; line-height: 1.4; }
.mbrServiceRadiusHelp summary { display: flex; gap: 7px; align-items: center; color: var(--hd-ink); font-weight: 750; cursor: pointer; list-style: none; }
.mbrServiceRadiusHelp summary::-webkit-details-marker { display: none; }
.mbrServiceRadiusHelp summary i { color: var(--hd-brand); }
.mbrServiceRadiusHelp p { margin: 9px 0 0; }
.mbrServiceRadiusField input[type="range"] { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--hd-brand); cursor: pointer; }
.mbrServiceRadiusScale { display: flex; justify-content: space-between; gap: 16px; margin-top: 5px; color: var(--hd-muted); font-size: 0.7rem; font-weight: 700; }
.mbrServiceRadiusScale span { white-space: nowrap; }

.mbrAccountFields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mbrAccountFields .mbrFieldFull { grid-column: span 6; }
.mbrAccountFields .mbrFieldHalf { grid-column: span 3; }
.mbrAccountFields .mbrFieldCity { grid-column: span 3; }
.mbrAccountFields .mbrFieldState { grid-column: span 1; }
.mbrAccountFields .mbrFieldZip { grid-column: span 2; }
.mbrSettingsNote { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; color: var(--hd-ink); font-size: 0.875rem; line-height: 1.4; }
.mbrSettingsNote i { margin-top: 2px; color: var(--hd-brand); }
#mbrAccountProfileForm .mbrError { margin: 14px 0 0; }
.mbrSettingsSave { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hd-line); }
.mbrSettingsSave + .mbrServiceRadiusField, .mbrSettingsNote + .mbrServiceRadiusField { margin-top: 20px; }
/* Unlock verified fields sits on the left of the save row. */
.mbrSettingsSave .mbrUnlockButton { margin-right: auto; }
.mbrUnlockHelp label { display: block; margin: 14px 0 6px; color: var(--hd-ink); font-weight: 700; }
/* Same field as the account settings inputs. */
.mbrUnlockHelp input { display: block; width: 100%; max-width: 360px; box-sizing: border-box; margin: 0; padding: 10px 11px; border: 1px solid var(--hd-line); border-radius: var(--hd-radius-control); background: var(--hd-surface); color: var(--hd-ink); font: inherit; font-size: 1rem; }
.mbrUnlockHelp input:focus { outline: none; border-color: var(--hd-brand); box-shadow: 0 0 0 4px var(--mbr-focus); }
.mbrAddMobile { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mbr-tint-strong); }
.mbrAddMobileRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mbrAddMobileRow input { flex: 1 1 200px; max-width: 260px; }
.mbrAddMobileStatus { margin: 10px 0 0; font-weight: 700; }
.mbrAddMobileStatus:empty { display: none; }
.mbrAddMobileStatus.mbrAutoStatusError { color: #b3261e; }
.mbrAccountFields input[data-unlocked] { border-color: var(--hd-brand); background: var(--hd-surface); }

.mbrSettingsRows { margin-top: 12px; }
.mbrSettingsRows > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; border-bottom: 1px solid var(--hd-line); font-size: 0.875rem; }
.mbrSettingsRows > div:last-child { border-bottom: 0; }
.mbrSettingsRows span { color: var(--hd-muted); }
.mbrSettingsRows strong { text-align: right; color: var(--hd-ink); }
.mbrAccountLegalLinks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 0.875rem; }
.mbrAccountLegalLinks a { text-decoration: none; }
.mbrVerificationSettings { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hd-line); }
.mbrVerificationSettings p { display: flex; gap: 8px; margin: 0 0 12px; color: var(--hd-muted); font-size: 0.875rem; line-height: 1.5; }
.mbrVerificationSettings p i { margin-top: 3px; color: var(--hd-brand); }

.mbrPublicProfileForm { display: grid; gap: 18px; }
.mbrSettingsSectionIntro { display: flex; align-items: flex-start; gap: 16px; }
.mbrSettingsSectionIcon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--mbr-data-soft); color: var(--hd-brand); font-size: 1.15rem; }
.mbrSettingsSectionCopy { min-width: 0; flex: 1; }
.mbrSettingsSectionCopy .mbrMuted { margin: 0; font-size: 0.875rem; line-height: 1.55; }
.mbrSettingsSectionAside { flex: 0 0 auto; margin-left: auto; padding-top: 3px; }
.mbrPublicProfileToggle { position: relative; display: flex; align-items: center; gap: 11px; width: fit-content; max-width: 100%; margin: 0; cursor: pointer; }
.mbrPublicProfileToggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.mbrPublicProfileToggle > span { position: relative; flex: 0 0 46px; width: 46px; height: 25px; border-radius: 999px; background: var(--hd-line); transition: background 150ms ease; }
.mbrPublicProfileToggle > span::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(23, 37, 49, 0.22); content: ""; transition: transform 150ms ease; }
.mbrPublicProfileToggle input:checked + span { background: var(--hd-brand); }
.mbrPublicProfileToggle input:checked + span::after { transform: translateX(21px); }
.mbrPublicProfileToggle input:focus-visible + span { outline: 3px solid var(--mbr-focus); outline-offset: 3px; }
.mbrPublicProfileToggle strong { color: var(--hd-ink); font-size: 0.875rem; }
.mbrPublicProfileFields { display: grid; gap: 18px; }
.mbrPublicProfileField { min-width: 0; }
.mbrPublicProfileFieldHead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.mbrPublicProfileFieldHead > span { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--mbr-data-soft); color: var(--hd-brand); font-size: 1.15rem; }
.mbrPublicProfileFieldHead > div { min-width: 0; flex: 1; }
.mbrPublicProfileFieldHead h3 { margin: 4px 0; font-size: 1.12rem; }
.mbrPublicProfileFieldHead .mbrMuted { margin: 0; font-size: 0.875rem; }
.mbrPlaceIDField { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.mbrPublicProfileManagementOptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mbrPublicProfileManagementOptions label { display: grid; grid-template-columns: 20px 24px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 12px 13px; border: 1px solid var(--hd-line); border-radius: 11px; background: var(--hd-surface); color: var(--hd-ink); cursor: pointer; }
.mbrPublicProfileManagementOptions label:last-child { grid-column: 1 / -1; }
.mbrPublicProfileManagementOptions input { width: 18px; height: 18px; margin: 0; accent-color: var(--hd-brand); }
.mbrPublicProfileManagementOptions img { display: block; width: 24px; height: 24px; object-fit: contain; }
.mbrPublicProfileManagementOptions span { min-width: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.35; }
.mbrPublicProfileEditor { width: 100%; min-height: 200px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--hd-line); border-radius: 12px; font: inherit; }
.mbrPublicProfileField .tox-tinymce { margin-top: 10px; border-color: var(--hd-line); border-radius: 12px; }
.mbrPublicProfileRegionGrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 18px; align-items: stretch; }
.mbrPublicProfileRegionGrid > * { min-width: 0; }
.mbrPublicProfileRegionsHead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.mbrPublicProfileRegionsHead > span { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: var(--mbr-data-soft); color: var(--hd-brand); font-size: 1rem; }
.mbrPublicProfileRegionsHead > div { min-width: 0; flex: 1; }
.mbrPublicProfileRegionsHead h3 { margin: 4px 0 0; font-size: 1.05rem; }
.mbrPublicProfileRegionCount { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--hd-brand); color: #fff; font-size: 0.75rem; }
.mbrPublicProfileRegions > p { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; color: var(--hd-muted); font-size: 0.875rem; }
.mbrPublicProfileRegions ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: var(--hd-ink); font-size: 0.875rem; }
.mbrPublicProfileRegions li { text-transform: capitalize; }
.mbrPublicProfileRegionsEmpty { display: flex; align-items: center; gap: 8px; color: var(--hd-muted); font-size: 0.875rem; }
.mbrPublicProfileActions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mbrPublicProfileActions strong { color: var(--hd-ink); }
.mbrPublicProfileActions p { margin: 4px 0 0; color: var(--hd-muted); font-size: 0.8rem; }
.mbrPublicProfileActions .mbrError { margin-top: 10px; }

@media (max-width: 900px) {
  .mbrSettingsGrid { grid-template-columns: 1fr; }
  .mbrSettingsBrandControls { grid-template-columns: 1fr; }
  .mbrPublicProfileRegionGrid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mbrSettingsFields, .mbrAccountFields { grid-template-columns: 1fr; }
  .mbrAccountFields .mbrFieldFull, .mbrAccountFields .mbrFieldHalf, .mbrAccountFields .mbrFieldCity, .mbrAccountFields .mbrFieldState, .mbrAccountFields .mbrFieldZip { grid-column: 1; }
  .mbrLogoUpload { grid-template-columns: 1fr; }
  .mbrLogoCurrent { width: 100%; }
  .mbrPublicProfileManagementOptions { grid-template-columns: 1fr; }
  .mbrPublicProfileManagementOptions label:last-child { grid-column: 1; }
  .mbrSettingsSectionIntro, .mbrPublicProfileFieldHead, .mbrPublicProfileActions { align-items: stretch; flex-direction: column; }
  .mbrSettingsSectionIntro > .mbrBtn, .mbrPublicProfileActions > .mbrBtn { align-self: flex-start; }
  .mbrSettingsSectionAside { align-self: flex-start; margin-left: 0; }
}

/* Users & Agents rows: Harmony's list elements (flib.CPL5.settings
   showSettingsUsers) in the Member Center theme. */
.mbrUsersGroup { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; color: var(--mbr-ink); font-size: 15px; font-weight: 800; }
.mbrUsersGroup:first-child { margin-top: 0; }
.mbrUsersItem > summary { display: grid; grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.6fr); gap: 12px; align-items: center; }
.mbrUsersMark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--mbr-line); border-radius: 8px; background: #e8e8e8; }
.mbrUsersMark img { display: block; width: 24px; height: 24px; }
.mbrUsersMain { min-width: 0; }
.mbrUsersMain strong { overflow-wrap: anywhere; }
.mbrUsersAuth { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 14px; }
.mbrUsersNoAuth { color: #b80f0a; font-weight: 700; }
.mbrUsersAuex { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.mbrUsersAuex img { display: block; width: 16px; height: 16px; }
.mbrUsersFor { min-width: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.mbrUsersFor small { display: block; margin: 0; color: var(--mbr-muted); font-size: 12px; font-weight: 600; }
.mbrUsersStatusA .mbrUsersMain strong { font-weight: 800; }
.mbrUsersStatusS .mbrUsersMain strong, .mbrUsersStatusS .mbrUsersAuth > span:first-child { color: #000080; text-decoration: line-through; }
.mbrUsersStatusT .mbrUsersMain strong, .mbrUsersStatusT .mbrUsersAuth > span:first-child { color: #800000; text-decoration: line-through; }
.mbrUsersStatusX .mbrUsersMain strong, .mbrUsersStatusX .mbrUsersAuth > span:first-child { color: #808080; text-decoration: line-through; }
.mbrForm input.mbrUsersColorInput { width: 40px; min-width: 0; height: 40px; padding: 2px; cursor: pointer; }
@media (max-width: 700px) {
  .mbrUsersItem > summary { grid-template-columns: 40px minmax(0, 1fr); }
  .mbrUsersAuth, .mbrUsersFor { grid-column: 2; }
}

/* Security tab: your sign-in and the company-wide card. */
.mbrSecurityCards { display: grid; gap: 18px; }
.mbrSecurityCards .mbrSettingsNote { margin: 14px 0 0; }
.mbrSecurityWarning { margin: 16px 0 12px; }
.mbrSecurityCards .mbrIncident:first-of-type { margin-top: 16px; }
.mbrSecurityCards .mbrForm { margin-top: 16px; }
.mbrSecurityCards .mbrSubTitle { margin: 24px 0 6px; }
.mbrSecurityRow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hd-line); }
.mbrSecurityRow > div { min-width: 0; }
.mbrSecurityRow strong { color: var(--hd-ink); }
.mbrSecurityRow .mbrMuted { margin: 4px 0 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.mbrSecurityRow .mbrError { margin: 8px 0 0; }
.mbrSecurityRow .mbrBtn { flex: 0 0 auto; }
.mbrSecurityFields { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; min-width: 0; }
.mbrSecurityFields:disabled input, .mbrSecurityFields:disabled select { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 600px) {
  .mbrSecurityRow { flex-direction: column; align-items: stretch; }
  .mbrSecurityRow > .mbrBtn { align-self: flex-start; }
  .mbrSecurityRow .mbrBtn { justify-content: center; }
}

/* Client Leads / Views, as Core's dashboard tile, in the PM Avenue card:
   counts, then a 7-day sparkline with the total; green while matches wait
   to be grabbed. */
.mbrLeadTile { color: var(--hd-ink); text-decoration: none; }
.mbrLeadTile:hover { border-color: var(--hd-brand); }
.mbrLeadTile:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--mbr-focus); }
.mbrLeadTileYes { border-color: var(--hd-good); box-shadow: inset 4px 0 0 var(--hd-good); background: #eef8f4; }
.mbrLeadCounts { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.mbrLeadCounts > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mbrLeadCount { font-size: 13px; color: var(--hd-muted); }
.mbrLeadCount strong { margin: 0 4px 0 0; font-size: 20px; color: var(--hd-ink); }
.mbrLeadCountYes, .mbrLeadCountYes strong { color: var(--hd-good); font-weight: 800; }
.mbrLeadCountYes strong { animation: mbrPulse 1.6s ease-in-out infinite; }
@keyframes mbrPulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .mbrLeadCountYes strong { animation: none; } }
.mbrSpark { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--hd-good); line-height: 1; }
.mbrSparkLine { flex: 1 1 auto; min-width: 0; height: 34px; overflow: visible; }
.mbrSparkArea { fill: currentColor; opacity: 0.12; stroke: none; }
.mbrSparkStroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mbrSparkDot { fill: currentColor; }
.mbrSparkHit { fill: transparent; cursor: pointer; }
.mbrSparkTotal { color: var(--hd-ink); font-size: 14px; }
.mbrLeadTip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; padding: 16px 20px; flex-direction: row; }
.mbrLeadTip > i { font-size: 22px; color: var(--mbr-brand); }
.mbrLeadTip > div:first-of-type { flex: 1 1 320px; min-width: 0; }
.mbrLeadTip p { margin: 0; font-size: 14px; }
.mbrLeadTipActions { flex: 0 0 auto; }
.mbrLeadIneligible > i { color: #b45309; }
.mbrLeadListOff .mbrLeadRow { filter: grayscale(1); opacity: 0.6; }
.mbrLeadEmpty { padding: 20px; }
.mbrLeadEmpty p { margin: 0 0 8px; }
.mbrLeadList { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.mbrLeadRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto; align-items: center; gap: 12px 20px; padding: 16px 20px; flex-direction: row; }
.mbrLeadMain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mbrLeadMain strong { font-size: 15px; }
.mbrLeadMain small { color: var(--hd-ink); font-size: 14px; }
.mbrLeadMain small.mbrMuted { color: var(--hd-muted); }
.mbrLeadScore { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.mbrLeadScore .mbrStatLabel, .mbrLeadScore small { grid-column: 1 / -1; }
.mbrLeadScore small { color: var(--hd-muted); font-size: 12px; }
.mbrLeadScore strong { font-size: 18px; }
.mbrLeadScoreWide { max-width: 420px; margin-bottom: 8px; }
.mbrLeadMeter { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--hd-surface); }
.mbrLeadMeter > span { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.mbrLeadScoreHigh { color: var(--hd-good); }
.mbrLeadScoreMid { color: var(--hd-warning); }
.mbrLeadScoreLow { color: var(--hd-bad); }
.mbrLeadScore .mbrStatLabel { color: var(--hd-muted); }
.mbrLeadAction { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.mbrLeadStatus { padding: 3px 10px; border-radius: 999px; background: var(--hd-surface); color: var(--hd-ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.mbrLeadStatuswon { background: #e3f4ee; color: var(--hd-good); }
.mbrLeadStatuslost, .mbrLeadStatusbad { background: var(--mbr-error-bg); color: var(--mbr-error-fg); }
.mbrLeadDetail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mbrLeadCard { padding: 18px 20px; }
.mbrLeadCard .mbrCardHead { padding: 0 0 8px; }
.mbrLeadGrab { margin: 4px 0 12px; padding: 14px; border: 1px solid var(--mbr-tint-strong); border-radius: 10px; background: var(--mbr-notice-bg); }
.mbrLeadGrab p { margin: 0 0 10px; font-size: 14px; }
.mbrLeadGrab .mbrIncident { margin: 12px 0 0; background: var(--hd-card); }
.mbrLeadFacts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 12px; font-size: 14px; }
.mbrLeadFacts dt { color: var(--hd-muted); font-weight: 700; }
.mbrLeadFacts dd { margin: 0; overflow-wrap: anywhere; }
.mbrLeadRanked { margin: 0; padding-left: 18px; }
.mbrLeadMasked { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 12px; border: 1px dashed var(--hd-line); border-radius: 10px; color: var(--hd-muted); font-size: 14px; }
.mbrLeadPills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }
.mbrLeadPills li { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mbrLeadPillGood { background: #e3f4ee; color: var(--hd-good); }
.mbrLeadPillWarn { background: #fff4dc; color: #8a5a00; }
.mbrLeadPillBad { background: var(--mbr-error-bg); color: var(--mbr-error-fg); }
.mbrLeadPillMuted { background: var(--hd-surface); color: var(--hd-muted); }
@media (max-width: 900px) {
  .mbrLeadDetail { grid-template-columns: minmax(0, 1fr); }
  .mbrLeadRow { grid-template-columns: minmax(0, 1fr); }
  .mbrLeadAction { justify-content: space-between; }
}
/* Help and Support requests: self-support answers, the request steps
   (Find My Answer, then send), replies and closed requests. */
.mbrHelpAnswerGrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 8px; }
.mbrHelpAnswerGrid.mbrHelpAnswerSolo { grid-template-columns: minmax(0, 1fr); }
.mbrHelpLinks { display: grid; align-content: start; gap: 16px; }
.mbrHelpCard > i { display: flex; align-items: center; height: 32px; }
@media (max-width: 900px) {
  .mbrHelpAnswerGrid { grid-template-columns: minmax(0, 1fr); }
}
.mbrHelpAskCard, .mbrSupportCard { padding: 20px 22px; }
.mbrSupportCard > .mbrBtn { align-self: flex-start; }
.mbrSupportNav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 0; }
.mbrSupportAnswer { margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid var(--hd-brand); border-radius: 10px; background: var(--hd-surface); }
.mbrSupportAnswerTitle { margin: 0 0 8px; color: var(--hd-brand); font-size: 14px; font-weight: 800; }
.mbrSupportAnswerText p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.mbrSupportAnswerText p:last-child { margin-bottom: 0; }
.mbrSupportGrade p { margin: 14px 0 8px; font-size: 15px; font-weight: 700; }
.mbrSupportReview { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
.mbrSupportReview dt { color: var(--hd-muted); font-weight: 700; }
.mbrSupportReview dd { margin: 0; overflow-wrap: anywhere; }
.mbrSupportSend { margin-top: 16px; }
.mbrSupportTop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.mbrSupportTop .mbrSub { margin: 0; }
.mbrHelpFlat { margin: 0 0 18px; }
.mbrHelpAfterFile { margin-top: 6px; }
.mbrIncident .mbrReplyForm { margin-top: 4px; }
.mbrIncidentTitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; overflow-wrap: anywhere; }
.mbrIncident > summary .mbrIncidentTitle small { margin-left: 0; }
.mbrIncidentRef { color: var(--hd-muted); font-size: 12px; font-weight: 400; }
.mbrIncidentRows a .mbrIncidentRef { margin-left: 6px; }
.mbrSupportSummary { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--hd-line); border-radius: 10px; }
.mbrSupportSummary .mbrSupportReview { margin: 0; }
.mbrSupportSummary dd[data-review="supportMessage"] { max-height: 120px; overflow-y: auto; white-space: pre-line; }
.mbrSupportHank { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; background: var(--hd-surface); }
.mbrSupportHankIcon { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.mbrSupportHankBody { min-width: 0; flex: 1; font-size: 15px; line-height: 1.5; }
.mbrSupportHankBody > div > p { margin: 0 0 10px; }
.mbrSupportHankTitle { font-weight: 800; }
.mbrSupportHank .mbrSupportAnswer { margin: 0; padding: 0; border: 0; background: none; }
.mbrSupportGradeDone { margin: 12px 0 0; font-weight: 700; }
.mbrSupportOr { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.mbrForm .mbrSupportQuestion { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.mbrHankThread { display: flex; flex-direction: column; gap: 10px; max-height: 480px; margin: 0 0 16px; padding: 0; overflow-y: auto; list-style: none; }
.mbrHankThread[hidden] { display: none; }
.mbrHankQuestion { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 2px 12px; background: var(--hd-brand); color: #ffffff; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.mbrHankAnswer { display: flex; align-items: flex-start; gap: 10px; max-width: 100%; padding: 10px 12px; border-radius: 12px 12px 12px 2px; background: var(--hd-surface); }
.mbrHankAnswer .mbrSupportAnswerText { min-width: 0; flex: 1; }
.mbrHankIcon { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.mbrHankNext { margin: 10px 0 0; color: var(--hd-muted); font-size: 14px; }
.mbrWaitHint { margin: 10px 0 0; color: var(--hd-muted); font-size: 14px; }
.mbrSurveyIncident { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hd-line); font-size: 17px; }
.mbrSurveyIncident + .mbrNotice { margin-top: 0; }
.mbrSurveyIntro { margin: 0 0 18px; color: var(--hd-muted); font-size: 15px; line-height: 1.5; }
.mbrRating { margin: 0 0 18px; padding: 0; border: 0; }
.mbrRating legend { margin: 0 0 10px; padding: 0; font-size: 15px; font-weight: 700; }
.mbrRatingScale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mbrRatingEnd { display: inline-flex; align-items: center; gap: 6px; color: var(--hd-muted); font-size: 14px; font-weight: 700; }
.mbrRatingEnd i { color: var(--hd-brand); }
.mbrForm .mbrRatingOption { position: relative; margin: 0; font-weight: 800; cursor: pointer; }
.mbrForm .mbrRatingOption input { position: absolute; width: 1px !important; height: 1px !important; margin: 0; padding: 0; opacity: 0; }
.mbrRatingOption span { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--hd-line); border-radius: 50%; background: var(--hd-card); color: var(--hd-ink); font-size: 16px; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.mbrRatingOption:hover span { border-color: var(--hd-brand); }
.mbrRatingOption input:checked + span { border-color: var(--hd-brand); background: var(--hd-brand); color: #ffffff; }
.mbrRatingOption input:focus-visible + span { outline: 3px solid var(--mbr-focus); outline-offset: 2px; }
/* To-dos (MBRtodo): the account's active to-dos, each opening its form, and the completed ones. */
.mbrTodoList { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.mbrTodoItem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 16px 20px; border-radius: var(--hd-radius-card); background: var(--hd-card); box-shadow: var(--hd-shadow-card); color: var(--hd-ink); text-decoration: none; }
a.mbrTodoItem:hover { box-shadow: var(--hd-shadow-pop); }
a.mbrTodoItem:focus-visible { outline: 3px solid var(--mbr-focus); outline-offset: 2px; }
.mbrTodoIcon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hd-surface); color: var(--hd-brand); font-size: 20px; }
.mbrTodoText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mbrTodoText strong { font-size: 15px; }
.mbrTodoText span { font-size: 14px; }
.mbrTodoText small { color: var(--hd-muted); font-size: 13px; overflow-wrap: anywhere; }
.mbrTodoDoneHeading { margin: 28px 0 0; }
.mbrTodoDone { box-shadow: none; border: 1px solid var(--hd-line); background: transparent; }
.mbrTodoDone .mbrTodoIcon { background: transparent; color: var(--hd-good); }
.mbrTodoWhen { color: var(--hd-muted); font-size: 13px; white-space: nowrap; }
.mbrTodoEmpty { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px; }
.mbrTodoEmpty > i { font-size: 22px; color: var(--mbr-brand); }
.mbrTodoEmpty p { flex: 1 1 320px; margin: 0; font-size: 14px; }
.mbrTodoCard { padding: 20px 24px; }
.mbrTodoIntro { margin: 0 0 18px; color: var(--hd-muted); font-size: 15px; line-height: 1.5; }
.mbrTodoColors { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 16px; padding: 0; border: 0; }
.mbrTodoColors legend { margin: 0 0 8px; padding: 0; font-weight: 700; }
/* Approve and go live (website sign-off) */
.mbrSignoffDetail { margin: 0 0 12px; }
.mbrSignoffDomains { display: grid; gap: 10px; margin: 8px 0 16px; padding: 0; border: 0; }
.mbrSignoffDomains legend { margin: 0 0 8px; padding: 0; font-weight: 700; }
.mbrSignoffDomain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 12px; border: 1px solid var(--hd-line); border-radius: 10px; background: var(--hd-card); }
.mbrSignoffDomainName { flex: 1 1 100%; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.mbrSignoffDomain .mbrSignoffNote { flex: 1 1 100%; margin: 0; }
.mbrSignoffSigner { margin: 6px 0 12px; font-weight: 700; }
.mbrTodoOrderList { margin: 8px 0 0; padding-left: 20px; }
/* Website order progress card (showWebsiteOrders) */
.mbrOrderCard { display: grid; gap: 14px; padding: 20px 24px; margin-bottom: 16px; }
.mbrOrderHead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.mbrOrderHead .mbrEyebrowGold { margin: 0 0 2px; }
.mbrOrderTitle { margin: 0; font-size: 19px; font-weight: 800; line-height: 24px; }
.mbrOrderPhases { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--hd-muted); font-size: 14px; font-weight: 700; }
.mbrOrderPhases li { display: inline-flex; align-items: center; gap: 6px; }
.mbrOrderPhases .mbrOrderPhaseDone { color: var(--hd-good); --fa-primary-color: var(--hd-good); --fa-secondary-color: var(--hd-good); }
.mbrOrderPhases .mbrOrderPhaseNow { color: var(--hd-ink); --fa-primary-color: var(--hd-brand); --fa-secondary-color: var(--hd-gold); }
.mbrOrderNext { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; background: var(--hd-surface); font-size: 15px; }
.mbrOrderNext p { margin: 0; }
.mbrOrderNextYou { background: var(--hd-gold-tint); }
.mbrOrderSteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbrOrderSteps li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--hd-line); border-radius: 10px; font-size: 14px; font-weight: 700; }
.mbrOrderSteps li > span:last-child { min-width: 0; }
.mbrOrderSteps small { display: block; color: var(--hd-muted); font-size: 12px; font-weight: 600; }
.mbrOrderSteps img, .mbrOrderStepIcon { flex: 0 0 32px; width: 32px; height: 32px; }
.mbrOrderStepIcon { display: grid; place-items: center; border-radius: 8px; background: var(--hd-surface); color: var(--hd-brand); }
.mbrOrderSteps .mbrOrderStepDone { opacity: 0.7; }
.mbrOrderSteps .mbrOrderStepDone img { filter: grayscale(1); }
.mbrOrderSteps .mbrOrderStepNow { border-color: var(--hd-brand); box-shadow: 0 0 0 1px var(--hd-brand) inset; }
.mbrLpOrders { display: grid; justify-items: center; padding: 16px 24px 8px; background: #fff; }
.mbrLpOrders > .mbrOrderCard { width: 100%; max-width: 760px; border: 1px solid var(--hd-line); }
.mbrLpOrders:empty { display: none; }
/* Design preview and website review responses */
.mbrResponseForm .mbrChoices { margin-bottom: 12px; }
.mbrResponseChanges { margin: 0 0 12px; }
.mbrTodoCard > .mbrNotice { margin: 0 0 16px; }
.mbrForm .mbrTodoColors input[type="color"] { width: 44px; height: 32px; margin: 0; padding: 2px; border: 1px solid var(--hd-line); border-radius: 8px; background: var(--hd-card); cursor: pointer; }
.mbrForm .mbrTodoColors input[type="color"]:disabled { opacity: 0.35; cursor: default; }
/* Surveys (flib.MBR5.surveys) and skipping an optional to-do */
.mbrSurveyForm { display: flex; flex-direction: column; gap: 18px; }
.mbrSurveyForm .mbrTodoIntro { margin: 0; }
.mbrSurveyHeading { margin: 10px 0 0; font-size: 17px; font-weight: 800; line-height: 1.3; }
.mbrSurveyHeading + .mbrHelp { margin: -12px 0 0; }
.mbrSurveyFeature { padding: 16px 18px; border-radius: 14px; background: var(--hd-surface); }
.mbrSurveyFeature .mbrSurveyHeading { margin: 0 0 6px; }
.mbrSurveyFeature p { margin: 0 0 8px; font-size: 14px; }
.mbrSurveyFeature ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; list-style: square; }
.mbrSurveyQ { margin: 0; padding: 0; border: 0; min-width: 0; }
.mbrSurveyQ legend, .mbrSurveyQ > label { display: block; margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.mbrSurveyScaleWrap { display: flex; flex-direction: column; }
.mbrSurveyScale { display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 6px; }
.mbrSurveyTile, .mbrSurveyPill { position: relative; cursor: pointer; }
.mbrSurveyTile input, .mbrSurveyPill input { position: absolute; opacity: 0; pointer-events: none; }
.mbrSurveyTile span { display: grid; place-items: center; height: 44px; padding: 0 4px; border: 1px solid var(--hd-line); border-radius: 10px; font-size: 14px; font-weight: 700; }
.mbrSurveyEnds { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--hd-muted); font-size: 14px; }
.mbrSurveyPills { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mbrSurveyPills .mbrSurveyPill span { text-align: center; }
.mbrSurveyBoxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mbrSurveyBoxes .mbrSurveyPill { display: flex; }
.mbrSurveyBoxes .mbrSurveyPill span { flex: 1; align-items: center; justify-content: center; gap: 4px; padding: 14px 12px; border-radius: 12px; text-align: center; font-weight: 700; }
.mbrSurveyBoxes .mbrSurveyPill small { font-weight: 400; }
.mbrSurveyEmoji { display: block; font-size: 36px; font-weight: 400; line-height: 1.1; }
.mbrSurveyPill span { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--hd-line); border-radius: 999px; font-size: 14px; line-height: 1.3; }
.mbrSurveyPill small { color: var(--hd-muted); font-size: 14px; }
.mbrSurveyTile input:checked + span, .mbrSurveyPill input:checked + span { border-color: var(--hd-brand); background: var(--hd-brand); color: #fff; font-weight: 700; }
.mbrSurveyPill input:checked + span small { color: #fff; }
.mbrSurveyTile input:focus-visible + span, .mbrSurveyPill input:focus-visible + span { outline: 2px solid var(--hd-brand); outline-offset: 2px; }
.mbrSurveyGridWrap { overflow-x: auto; }
.mbrSurveyGrid { width: 100%; border-collapse: collapse; font-size: 14px; }
.mbrSurveyGrid th, .mbrSurveyGrid td { padding: 8px 6px; border-bottom: 1px solid var(--hd-line); text-align: center; }
.mbrSurveyGrid th[scope="row"], .mbrSurveyGrid thead th:first-child { text-align: left; font-weight: 600; }
.mbrSurveyGrid thead th { position: sticky; top: 0; background: var(--hd-card); font-weight: 700; }
.mbrSurveyMore { display: flex; flex-direction: column; gap: 18px; padding: 14px 18px; border: 1px solid var(--hd-line); border-radius: 14px; }
.mbrSurveyMore > summary { font-size: 15px; font-weight: 700; cursor: pointer; }
.mbrSurveyMore[open] > summary { margin-bottom: 14px; }
.mbrSurveyMore > .mbrSurveyQ + .mbrSurveyQ { margin-top: 18px; }
.mbrSurveyProgress { display: flex; flex-direction: column; gap: 6px; }
.mbrSurveyStepLabel { color: var(--hd-muted); font-size: 14px; font-weight: 700; }
.mbrSurveyBar { display: block; height: 6px; border-radius: 999px; background: var(--hd-surface); overflow: hidden; }
.mbrSurveyBar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--hd-brand); transition: width 200ms ease; }
.mbrSurveyStep { display: flex; flex-direction: column; gap: 18px; }
.mbrSurveyStep[hidden] { display: none; }
.mbrSurveyNav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mbrSurveyNav [data-survey-next], .mbrSurveyNav [data-survey-send] { margin-left: auto; }
.mbrSurveyNav [data-survey-next]:not([hidden]) + [data-survey-send] { margin-left: 0; }
.mbrTodoSkip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--hd-muted); font-size: 14px; }
@media (max-width: 600px) {
  .mbrTodoItem { grid-template-columns: auto minmax(0, 1fr); }
  .mbrTodoItem > .mbrBtn, .mbrTodoWhen { grid-column: 2; justify-self: start; }
}

/* Domains (Account > Domains, bkg_domains) */
.mbrDomainGrid { grid-template-columns: minmax(0, 1fr); }
.mbrDomainList { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.mbrDomainList li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 8px 12px; border-radius: 8px; background: var(--hd-surface); }
.mbrDomainName { font-weight: 700; overflow-wrap: anywhere; }
.mbrDomainLegal { margin: 14px 0 0; }
.mbrDomainSearchRow { display: flex; align-items: flex-end; gap: 10px; }
.mbrDomainSearchRow label { flex: 1 1 auto; min-width: 0; }
.mbrDomainSearchRow .mbrBtn { flex: 0 0 auto; }
.mbrDomainSearch .mbrError, .mbrDomainOrder .mbrError { margin: 12px 0 0; }
.mbrDomainTaken { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--hd-surface); }
.mbrDomainTakenTitle { margin: 0 0 4px; font-size: 1.125rem; overflow-wrap: anywhere; }
.mbrDomainTaken > p { margin: 0 0 8px; }
.mbrDomainSteps { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 4px; }
.mbrDomainTakenActions { display: flex; flex-wrap: wrap; gap: 8px; }
.mbrDomainTaken .mbrError.mbrDomainTransferResult { margin: 12px 0 0; }
.mbrDomainOthers { margin: 16px 0 0; }
.mbrDomainOthers > p { margin: 0 0 6px; }
.mbrDomainResults { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mbrDomainResult { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--hd-surface); }
.mbrDomainResult div { display: grid; min-width: 0; }
.mbrDomainResult strong { overflow-wrap: anywhere; }
.mbrDomainResult small { color: var(--hd-brand); font-weight: 700; }
/* .mbrChoice forces its margin with !important. */
.mbrChoice.mbrDomainAgree { margin: 20px 0 8px !important; }
@media (max-width: 600px) {
  .mbrDomainSearchRow { flex-direction: column; align-items: stretch; }
}
/* Sign-in methods (2026-10-19, Shared\docs\MFA_METHODS.md): the code step's
   "Use another method", "Sign in with a passkey", and the Security tab's
   methods, recovery codes and the "Confirm it's you" re-check. */
.mbrPasskeySignin { margin-top: 18px; }
.mbrPasskeySignin .mbrSecondary { width: 100%; }
.mbrPasskeySignin .mbrError { margin: 0 0 10px; }
.mbrOr { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--mbr-muted); font-size: 14px; }
.mbrOr::before, .mbrOr::after { content: ""; flex: 1; height: 1px; background: var(--mbr-line); }
.mbrMfaOthers { margin-top: 24px; }
.mbrMfaOthers > summary { color: var(--mbr-brand); font-weight: 700; cursor: pointer; }
.mbrMfaPicks { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mbrMfaPick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--mbr-line); border-radius: var(--mbr-radius); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mbrMfaPick:hover { border-color: var(--mbr-brand); }
.mbrMfaPick:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--mbr-focus); }
.mbrMfaPick > i { flex: none; width: 24px; font-size: 20px; text-align: center; }
.mbrMfaPick span { display: flex; flex-direction: column; min-width: 0; }
.mbrMfaPick small { color: var(--mbr-muted); font-size: 14px; overflow-wrap: anywhere; }
.mbrMfaMethods { margin: 16px 0 14px; padding: 0; list-style: none; }
.mbrMfaMethod { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hd-line); }
.mbrMfaMethod:first-child { border-top: 0; }
.mbrMfaMethodIcon { flex: none; width: 24px; margin-top: 2px; font-size: 20px; text-align: center; color: var(--hd-brand); }
.mbrMfaMethodText { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mbrMfaMethodText strong { color: var(--hd-ink); overflow-wrap: anywhere; }
.mbrMfaMethodText small { color: var(--hd-muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.mbrMfaMethodText .mbrError { margin: 6px 0 0; }
.mbrMfaRenameForm { margin-top: 10px; }
.mbrMfaRenameForm .mbrActions { margin-top: 8px; }
.mbrMfaMethodActions { display: flex; flex: none; gap: 4px; }
.mbrIconAction { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--hd-muted); font-size: 16px; cursor: pointer; }
.mbrIconAction:hover { background: var(--hd-surface); color: var(--hd-brand); }
.mbrIconAction:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--mbr-focus); }
.mbrMfaEmpty { padding: 8px 0; color: var(--hd-muted); font-size: 0.875rem; }
.mbrMfaRequirement { height: 38px; margin-top: 6px; font: inherit; font-size: 14px; }
.mbrMfaRecoveryBox { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--hd-line); border-radius: var(--mbr-radius); background: var(--hd-card); }
.mbrMfaRecoveryBox .mbrWarning { margin: 0 0 10px; }
.mbrMfaRecoveryList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 0; padding: 0 0 0 24px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 15px; }
.mbrMfaRecoveryBox .mbrActions { margin-top: 12px; }
.mbrMfaRecoveryBox .mbrHelp { margin: 10px 0 0; }
.mbrRecheck { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--hd-line); border-radius: var(--mbr-radius); background: var(--mbr-notice-bg); }
.mbrRecheck .mbrRecheckTitle { margin: 0 0 4px; }
.mbrRecheck .mbrMuted { margin: 0 0 12px; font-size: 0.875rem; }
.mbrRecheck .mbrForm { margin: 0 0 12px; }
.mbrRecheck select { max-width: 100%; height: 38px; font: inherit; font-size: 14px; }
.mbrUsersMfaReset > summary { color: var(--mbr-brand); font-size: 14px; cursor: pointer; }
.mbrUsersMfaReset .mbrForm { margin-top: 8px; }
@media (max-width: 600px) {
  .mbrMfaRecoveryList { grid-template-columns: minmax(0, 1fr); }
}
/* Printing recovery codes prints the codes only. */
@media print {
  body.mbrPrintingCodes * { visibility: hidden !important; }
  body.mbrPrintingCodes #mbrMfaRecoveryCodes, body.mbrPrintingCodes #mbrMfaRecoveryCodes * { visibility: visible !important; }
  body.mbrPrintingCodes #mbrMfaRecoveryCodes { position: absolute; top: 0; left: 0; border: 0; }
  body.mbrPrintingCodes #mbrMfaRecoveryCodes .mbrActions, body.mbrPrintingCodes #mbrMfaRecoveryStatus { display: none !important; }
}