/* New Standard Studio agent portal. Brokerage colour + fonts arrive as --accent / --sans / --display (Layout::tokens). */
:root {
  --ink: #17181a;
  --ink-2: #45484c;
  --muted: #6b6f75; /* 5.0:1 on white, 4.7:1 on paper: secondary text has to clear AA like everything else */
  --line: #e4e1db;
  --line-2: #efece7;
  --paper: #f8f6f2;
  --surface: #ffffff;
  --accent: #1d1d1b;
  --accent-soft: color-mix(in srgb, var(--accent) 9%, #fff);
  --ok: #2e6b47;
  --ok-soft: #e7f1ea;
  --warn: #8a5a00;
  --warn-soft: #fbf1dc;
  --err: #a42a20;
  --err-soft: #fbe9e7;
  --radius: 2px;
  --shadow: 0 1px 2px rgba(23, 24, 26, .04), 0 8px 24px -12px rgba(23, 24, 26, .12);
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-w: 248px;
  --top-h: 64px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.mf-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf-skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; }
.mf-skip:focus { top: 12px; }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -.01em; }
h1, h2 { color: var(--brand-ink, var(--ink)); }
h1 { font: 400 clamp(28px, 3.2vw, 40px)/1.1 var(--display); }
h2 { font: 400 22px/1.2 var(--display); }
h3 { font: 500 15px/1.3 var(--sans); letter-spacing: 0; }
p { margin: 0 0 12px; }
.mf-eyebrow { font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.mf-lede { color: var(--ink-2); font-size: 16px; max-width: 60ch; }
.mf-muted { color: var(--muted); }
.mf-small { font-size: 13px; }

/* ---------- Shell ---------- */
.mf-top { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: 20px; padding: 0 24px;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.mf-logo { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); line-height: 1.05; }

/* ---------- The brokerage lockup -----------------------------------------------------------------------------
   A portal is a brokerage's own room, so the logo in it is whatever proportion that brokerage's lockup happens to
   be: one is 2.4:1, one 3:1, one 9.7:1. Set a height and nothing else and those render 106px, 132px and 426px wide
   off the same rule - which is how a wide lockup ran off the end of the sign-in card and was squashed back by
   `max-width: 100%` with its height still pinned.

   The rule is the one the websites already use (templates/_shared/property.css): --logo-ar is the widest a lockup
   may render RELATIVE TO ITS SLOT HEIGHT. Below it the height is what is held; past it the WIDTH is held and the
   height follows from the file's own proportion, --mf-ar, written onto the element out of the media record
   (Portal\Layout::lockup, the same token Site\H::picture writes). `height: auto` is what makes that safe: if the
   container is narrower still, `max-width: 100%` scales the height with it instead of squashing the artwork, so
   there is no proportion and no screen on which this distorts.

   5 is the portal's cap. It puts the widest lockup in the fleet at 198px in the header and 288px in the sign-in
   card - about what the squarer ones occupy, and comfortably inside the card at every width. */
:root { --logo-ar: 5; }
.mf-logo-img, .mf-auth-logo {
  display: block; height: auto; max-width: 100%;
  width: min(calc(var(--logo-h) * var(--logo-ar)), calc(var(--logo-h) * var(--mf-ar, var(--logo-ar))));
  max-height: var(--logo-h); object-fit: contain; object-position: left center; /* only reached if --mf-ar is unknown */
}
.mf-logo-img { --logo-h: 44px; }
.mf-auth-logo { --logo-h: 64px; margin: 0 0 22px; }
.mf-logo-b { font: 500 16px/1.1 var(--display); letter-spacing: .02em; }
.mf-logo-s { font: 500 10px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mf-switch { display: flex; align-items: center; gap: 8px; margin-left: 12px; font-size: 13px; color: var(--muted); }
.mf-switch__label { white-space: nowrap; }
.mf-switch__box { position: relative; }
.mf-switch__input { width: 220px; max-width: 42vw; border: 1px solid var(--line); background: var(--surface); padding: 7px 30px 7px 10px;
  border-radius: var(--radius); color: var(--ink); font-size: 14px; }
.mf-switch__input::placeholder { color: var(--muted); }
.mf-switch__toggle { position: absolute; right: 0; top: 0; height: 100%; width: 28px; display: grid; place-items: center; border: 0;
  background: none; color: var(--ink-2); cursor: pointer; }
.mf-switch__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max(260px, 100%); max-height: min(60vh, 380px);
  overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.mf-switch__opt { padding: 8px 10px; border-radius: var(--radius); color: var(--ink); font-size: 14px; cursor: pointer; }
.mf-switch__opt:hover { background: var(--line-2); }
.mf-switch__opt[aria-selected="true"] { background: var(--accent); color: #fff; }
.mf-switch__none, .mf-switch__note { padding: 8px 10px; color: var(--ink-2); font-size: 13px; }
.mf-user { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--ink-2); }
.mf-user a { color: var(--ink-2); }
.mf-burger { display: none; width: 40px; height: 40px; border: 0; background: none; position: relative; cursor: pointer; }
.mf-burger span:first-child, .mf-burger span:first-child::before, .mf-burger span:first-child::after { position: absolute; left: 10px; width: 20px; height: 1.5px; background: var(--ink); content: ''; transition: transform .25s var(--ease); }
.mf-burger span:first-child { top: 19px; }
.mf-burger span:first-child::before { left: 0; top: -6px; }
.mf-burger span:first-child::after { left: 0; top: 6px; }
.mf-shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }
.mf-nav { border-right: 1px solid var(--line); padding: 28px 16px; position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow: auto; display: flex; flex-direction: column; }
.mf-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mf-nav a { display: block; padding: 9px 12px; text-decoration: none; color: var(--ink-2); border-radius: var(--radius); font-size: 14px; transition: background .15s, color .15s; }
.mf-nav a:hover { background: var(--line-2); color: var(--ink); }
.mf-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent), var(--shadow); font-weight: 500; }
.mf-nav-sep { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mf-nav-foot { margin-top: auto; padding: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mf-main { padding: 40px clamp(20px, 4vw, 56px) 96px; min-width: 0; outline: none; }
.mf-loading { color: var(--muted); }
/* The edition's loader (Layout::loader, loader() in portal.js): its mark, the ring turning round the letters. */
.mf-loader { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 180px; color: var(--muted); font-size: 13px; }
.mf-loader--page { min-height: 50vh; }
.mf-loader svg { width: 56px; height: auto; fill: var(--brand-ink, var(--accent)); overflow: visible; }
.mf-loader--page svg { width: 72px; }
.mf-loader__ring { transform-box: view-box; transform-origin: 50% 50%; animation: mf-ring 1.6s cubic-bezier(.6, .1, .3, .9) infinite; }
@keyframes mf-ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-loader__ring { animation: mf-breathe 2s ease-in-out infinite; } }
@keyframes mf-breathe { 50% { opacity: .35; } }
/* an edition's one-line product lockup is wider than the brokerage cap allows */
.mf-logo--product { --logo-ar: 6.5; }
.mf-logo-img.mf-logo--product { --logo-h: 36px; } /* the one-line lockup reads large at the brokerage height (Zach 2026-10-26: "a little smaller") */
.mf-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.mf-page-head p { margin: 8px 0 0; }

/* ---------- Buttons, fields ---------- */
.mf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid var(--ink);
  background: var(--surface); color: var(--ink); border-radius: var(--radius); font-weight: 500; font-size: 14px; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; white-space: nowrap; }
.mf-btn:hover { background: var(--brand-ink, var(--ink)); color: #fff; }
.mf-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mf-btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); border-color: transparent; }
.mf-btn--ghost { border-color: var(--line); }
.mf-btn--ghost:hover { background: var(--line-2); color: var(--ink); border-color: var(--line); }
.mf-btn--danger { border-color: var(--err); color: var(--err); }
.mf-btn--danger:hover { background: var(--err); color: #fff; }
.mf-btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.mf-btn--block { width: 100%; }
.mf-btn[disabled], .mf-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.mf-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.mf-form { display: grid; gap: 16px; }
.mf-field { display: grid; gap: 6px; }
.mf-field > span, .mf-legend { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.mf-field input, .mf-field select, .mf-field textarea, .mf-input { width: 100%; border: 1px solid var(--line); background: var(--surface); padding: 10px 12px;
  border-radius: var(--radius); min-height: 42px; transition: border-color .15s, box-shadow .15s; }
.mf-field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.mf-field input:hover, .mf-field select:hover, .mf-field textarea:hover { border-color: #cfcac2; }
.mf-field input:focus, .mf-field select:focus, .mf-field textarea:focus, .mf-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.mf-field small { color: var(--muted); font-size: 12px; }
.mf-field--err input, .mf-field--err textarea { border-color: var(--err); }
.mf-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.mf-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.mf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mf-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mf-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mf-tag { display: inline-flex; font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--radius); background: var(--line-2); color: var(--ink-2); }
.mf-tag--mls { background: var(--accent-soft); color: var(--accent); }

/* ---------- Cards, sections ---------- */
.mf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.mf-card + .mf-card { margin-top: 16px; }
.mf-section { margin-bottom: 40px; }
.mf-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.mf-cta { position: relative; overflow: hidden; background: var(--brand-ink, var(--ink)); color: #fff; border: 0; padding: 36px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.mf-cta h2 { font-size: clamp(24px, 2.4vw, 32px); max-width: 18ch; }
.mf-cta p { color: rgba(255, 255, 255, .72); max-width: 46ch; margin: 12px 0 0; }
.mf-cta .mf-eyebrow { color: rgba(255, 255, 255, .6); }
.mf-cta .mf-btn { background: #fff; color: var(--brand-ink, var(--ink)); border-color: #fff; }
.mf-cta .mf-btn:hover { background: transparent; color: #fff; }
.mf-cta::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }

/* ---------- Status ---------- */
.mf-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 99px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.mf-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.mf-pill--live { background: var(--ok-soft); color: var(--ok); }
.mf-pill--review { background: var(--warn-soft); color: var(--warn); }
.mf-pill--draft { background: var(--line-2); color: var(--ink-2); }
.mf-pill--sold { background: var(--accent-soft); color: var(--accent); }
.mf-pill--archived { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.mf-alert { padding: 12px 14px; border-radius: var(--radius); font-size: 14px; border: 1px solid transparent; }
.mf-alert--err { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 20%, #fff); }
.mf-alert--warn { background: var(--warn-soft); color: var(--warn); }
.mf-alert--ok { background: var(--ok-soft); color: var(--ok); }
.mf-alert--info { background: var(--accent-soft); color: var(--ink); }
/* Photos and neighborhood data still arriving after an import (propertyEditor: progressNotice). The dot is still under reduced motion (the rule at the end). */
.mf-progress-slot > .mf-progress { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px; }
.mf-progress p { margin: 0; }
.mf-progress p + p { margin-top: 6px; }
.mf-progress-dot { flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--ok); animation: mf-pulse 1.6s ease-in-out infinite; }
@keyframes mf-pulse { 50% { opacity: .3; } }

.mf-journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mf-journey li { position: relative; padding-top: 14px; font-size: 12px; color: var(--muted); }
.mf-journey li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line); }
.mf-journey li.is-done { color: var(--ink-2); }
.mf-journey li.is-done::before { background: var(--accent); }
.mf-journey li.is-now { color: var(--ink); font-weight: 500; }
.mf-journey li.is-now::before { background: linear-gradient(90deg, var(--accent) 50%, var(--line) 50%); }
.mf-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mf-lane { background: var(--surface); padding: 16px 18px; }
.mf-lane dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mf-lane dd { margin: 6px 0 0; font-weight: 500; }
/* The lane's explanatory line lives INSIDE the <dd>: a <div> in a <dl> may hold only dt/dd, and a stray <p> there
   made the whole list an invalid definition list (axe: definition-list, serious). */
.mf-lane__note { margin: 6px 0 0; font-weight: 400; }

/* ---------- Property list ---------- */
.mf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.mf-tabs button { border: 0; background: none; padding: 12px 14px; cursor: pointer; color: var(--muted); font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.mf-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.mf-tabs .mf-count { font-size: 12px; color: var(--muted); margin-left: 4px; }
.mf-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.mf-prop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.mf-prop:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.mf-prop-img { aspect-ratio: 3 / 2; background: var(--line-2) center / cover no-repeat; position: relative; }
.mf-prop-img img { width: 100%; height: 100%; object-fit: cover; }
.mf-prop-img .mf-pill { position: absolute; left: 12px; top: 12px; background: rgba(255, 255, 255, .94); }
.mf-prop-body { padding: 18px 18px 14px; display: grid; gap: 6px; flex: 1; }
.mf-prop-body h3 { font: 400 20px/1.2 var(--display); }
.mf-prop-url { font-size: 12px; color: var(--muted); word-break: break-all; }
.mf-prop-meta { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.mf-prop-actions { display: flex; gap: 8px; padding: 12px 18px 18px; flex-wrap: wrap; }
.mf-empty { text-align: center; padding: 64px 24px; border: 1px dashed #d6d1c8; border-radius: var(--radius); background: rgba(255, 255, 255, .5); }
.mf-empty h2 { margin-bottom: 8px; }
.mf-empty p { color: var(--ink-2); max-width: 48ch; margin: 0 auto 20px; }

/* ---------- Wizard ---------- */
.mf-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.mf-steps { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 0; counter-reset: step; overflow-x: auto; border-bottom: 1px solid var(--line); }
.mf-steps li { flex: 1; min-width: 96px; }
.mf-steps button { width: 100%; border: 0; background: none; text-align: left; padding: 10px 8px 14px; cursor: pointer; color: var(--muted); font-size: 13px; position: relative; }
.mf-steps button::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font: 500 11px/1 var(--sans); letter-spacing: .12em; margin-bottom: 6px; }
.mf-steps button::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: transparent; transition: background .2s; }
.mf-steps button[aria-current="step"] { color: var(--ink); font-weight: 500; }
.mf-steps button[aria-current="step"]::after { background: var(--brand-ink, var(--ink)); }
.mf-steps button.is-done { color: var(--ink-2); }
.mf-steps button.is-done::before { content: '✓'; color: var(--ok); }
.mf-steps button.has-err::before { content: '!'; color: var(--err); }
.mf-panel { display: grid; gap: 28px; }
.mf-panel-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); padding-top: 20px; }
.mf-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
.mf-fieldset > legend { font: 400 20px/1.2 var(--display); margin-bottom: 4px; padding: 0; }
.mf-aside { position: sticky; top: calc(var(--top-h) + 24px); display: grid; gap: 16px; }
.mf-summary-img { aspect-ratio: 4 / 3; background: var(--line-2) center / cover no-repeat; margin: -24px -24px 16px; }
.mf-save { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-height: 18px; }
.mf-save[data-state="saving"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); border-top-color: transparent; animation: mf-spin .7s linear infinite; }
.mf-save[data-state="saved"] { color: var(--ok); }
.mf-save[data-state="error"] { color: var(--err); }
@keyframes mf-spin { to { transform: rotate(360deg); } }
.mf-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mf-choice-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; cursor: pointer; text-align: left; display: grid; gap: 10px; transition: border-color .2s, box-shadow .2s; }
.mf-choice-card:hover { border-color: #cfc9bf; box-shadow: var(--shadow); }
.mf-choice-card[aria-pressed="true"], .mf-choice-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mf-choice-card input[type="radio"] { position: absolute; opacity: 0; }
.mf-choice-card h3 { font: 400 22px/1.2 var(--display); }
.mf-choice-card p { color: var(--ink-2); margin: 0; font-size: 14px; }

/* Templates */
.mf-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mf-tpl { padding: 0; overflow: hidden; gap: 0; }
.mf-tpl-art { aspect-ratio: 16 / 11; background: var(--paper); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.mf-tpl-body { padding: 16px 18px 18px; display: grid; gap: 4px; }
.mf-tpl-body .mf-eyebrow { margin: 0; }
.mf-tpl-body h3 { font-size: 20px; }
.mf-tpl-soon { position: absolute; right: 10px; top: 10px; }
/* A condition the brokerage puts on a family of designs (templates.luxury_note), beside or above the cards. */
.mf-tpl-note { margin: 4px 0 10px; padding: 8px 12px; border-left: 2px solid var(--accent); background: var(--accent-soft); color: var(--ink-2); }
/* abstract template thumbnails */
.tpl-art { position: absolute; inset: 0; }
.tpl-art i { position: absolute; display: block; }
.tpl-residential-01 { background: #f3efe8; }
.tpl-residential-01 i:nth-child(1) { inset: 10% 10% 38% 10%; background: linear-gradient(135deg, #b9a58c, #7e6a55); }
.tpl-residential-01 i:nth-child(2) { left: 10%; right: 45%; top: 68%; height: 6%; background: #2b2723; }
.tpl-residential-01 i:nth-child(3) { left: 10%; right: 20%; top: 80%; height: 3%; background: #cfc5b7; }
.tpl-residential-02 { background: #fff; }
.tpl-residential-02 i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 52%; background: linear-gradient(160deg, #9aa4ab, #4e5a63); }
.tpl-residential-02 i:nth-child(2) { left: 58%; right: 8%; top: 18%; height: 8%; background: #1c1f22; }
.tpl-residential-02 i:nth-child(3) { left: 58%; right: 8%; top: 36%; height: 38%; background: repeating-linear-gradient(0deg, #e4e6e8 0 12%, #fff 12% 24%); }
.tpl-residential-03 { background: #f5f1e9; }
.tpl-residential-03 i:nth-child(1) { left: 8%; top: 12%; width: 40%; bottom: 12%; background: linear-gradient(160deg, #c9b18a, #8b7a5b); border-radius: 2px; }
.tpl-residential-03 i:nth-child(2) { left: 54%; top: 12%; right: 8%; height: 34%; background: linear-gradient(160deg, #a9b59b, #6d7b5f); }
.tpl-residential-03 i:nth-child(3) { left: 54%; top: 54%; right: 8%; bottom: 12%; background: linear-gradient(160deg, #d6c3a2, #a58e6b); }
.tpl-luxury-01 { background: #0f0f10; }
.tpl-luxury-01 i:nth-child(1) { inset: 0; background: radial-gradient(120% 90% at 70% 30%, #5d5448 0, #1a1917 70%); }
.tpl-luxury-01 i:nth-child(2) { left: 10%; right: 40%; bottom: 18%; height: 7%; background: #efe9df; }
.tpl-luxury-01 i:nth-child(3) { left: 10%; width: 14%; bottom: 10%; height: 2%; background: #9d9384; }
.tpl-luxury-02 { background: #f2efea; }
.tpl-luxury-02 i:nth-child(1) { left: 8%; top: 10%; right: 30%; height: 22%; background: #111; }
.tpl-luxury-02 i:nth-child(2) { left: 36%; top: 40%; right: 8%; bottom: 10%; background: linear-gradient(160deg, #8f8579, #3f3a34); }
.tpl-luxury-02 i:nth-child(3) { left: 8%; top: 40%; width: 22%; bottom: 36%; background: linear-gradient(160deg, #b7ab9b, #6f665b); }
.tpl-luxury-03 { background: #fbfaf8; }
.tpl-luxury-03 i:nth-child(1) { left: 30%; right: 30%; top: 16%; bottom: 34%; background: linear-gradient(160deg, #d9d3ca, #a39a8e); }
.tpl-luxury-03 i:nth-child(2) { left: 40%; right: 40%; top: 74%; height: 2%; background: #2a2825; }
.tpl-luxury-03 i:nth-child(3) { left: 44%; right: 44%; top: 80%; height: 1.5%; background: #bdb6ab; }

/* Media */
.mf-drop { border: 1px dashed #cdc7bd; border-radius: var(--radius); padding: 36px 24px; text-align: center; background: rgba(255, 255, 255, .6); transition: background .2s, border-color .2s; }
.mf-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.mf-drop p { margin: 8px 0 16px; color: var(--ink-2); }
.mf-drop-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mf-uploads { display: grid; gap: 8px; margin-top: 12px; }
.mf-uploads:empty { margin-top: 0; }
.mf-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 12px; align-items: center; font-size: 13px; }
.mf-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-upload-row.is-err [data-st] { color: var(--err); }

/* Replace every photo with the photographer's files */
.mf-replace { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface); display: grid; gap: 12px; }
.mf-replace h3 { margin: 0; font-size: 17px; }
.mf-replace h4 { margin: 0; font-size: 15px; }
.mf-replace > .mf-small { margin: 0; }
.mf-replace .mf-drop { padding: 24px 18px; }
.mf-replace-ready { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.mf-replace-do { display: flex; gap: 10px; flex-wrap: wrap; }
.mf-media.mf-media--mini { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.mf-media--mini .mf-tile-img { cursor: default; }
.mf-media--mini .mf-tile-proc { font-size: 11px; }
.mf-media--mini .mf-tile-img .mf-tag { left: 4px; top: 4px; padding: 1px 5px; font-size: 11px; }
.mf-more { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; background: var(--surface); }
.mf-more > summary { cursor: pointer; font-size: 14px; }
.mf-more > .mf-drop { margin-top: 14px; }
.mf-bar { height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.mf-bar > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.mf-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.mf-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; transition: box-shadow .2s, opacity .2s; }
.mf-tile.is-dragging { opacity: .4; }
.mf-tile.is-target { box-shadow: -3px 0 0 var(--accent); }
.mf-tile-img { aspect-ratio: 3 / 2; background: var(--line-2) center / cover no-repeat; position: relative; cursor: grab; }
.mf-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.mf-tile-img .mf-tag { position: absolute; left: 8px; top: 8px; }
.mf-tile-img .mf-hero-badge { position: absolute; left: auto; right: 8px; top: 8px; background: var(--brand-ink, var(--ink)); color: #fff; }
.mf-tile-proc { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--ink-2); background: rgba(255, 255, 255, .6); backdrop-filter: blur(2px); }
.mf-tile-body { padding: 10px; display: grid; gap: 8px; }
.mf-tile-body input { font-size: 13px; min-height: 34px; padding: 6px 8px; }
.mf-tile-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.mf-tile-actions button { border: 1px solid var(--line); background: var(--surface); padding: 4px 8px; font-size: 12px; border-radius: var(--radius); cursor: pointer; }
.mf-tile-actions button:hover { border-color: var(--ink); }
.mf-tile-actions button[aria-pressed="true"] { background: var(--brand-ink, var(--ink)); color: #fff; border-color: var(--brand-ink, var(--ink)); }

/* Preview */
.mf-preview-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.mf-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mf-seg button { border: 0; background: var(--surface); padding: 8px 14px; font-size: 13px; cursor: pointer; }
.mf-seg button[aria-pressed="true"] { background: var(--brand-ink, var(--ink)); color: #fff; }
.mf-frame-wrap { background: #e9e6e0; padding: 20px; display: flex; justify-content: center; border-radius: var(--radius); }
.mf-frame { width: 100%; height: 72vh; border: 0; background: #fff; box-shadow: var(--shadow); transition: width .35s var(--ease); }

/* QA */
.mf-qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mf-qa li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.mf-qa li::before { font-weight: 600; }
.mf-qa .is-err::before { content: '!'; color: var(--err); }
.mf-qa .is-warn::before { content: '·'; color: var(--warn); font-size: 22px; line-height: .8; }
.mf-qa .is-ok::before { content: '✓'; color: var(--ok); }

/* Tables (staff) */
.mf-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.mf-table th, .mf-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.mf-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--paper); }
.mf-table-wrap { overflow-x: auto; }
.mf-kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.mf-kv dt { color: var(--muted); }
.mf-kv dd { margin: 0; }

/* Repeaters (testimonials, claims) */
.mf-rows { display: grid; gap: 12px; }
.mf-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; }
.mf-row-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }

/* Toasts, modal */
.mf-toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 60; }
.mf-toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; box-shadow: var(--shadow); max-width: 380px; animation: mf-in .3s var(--ease); }
.mf-toast--err { background: var(--err); }
@keyframes mf-in { from { opacity: 0; transform: translateY(8px); } }
dialog.mf-dialog { border: 0; padding: 28px; max-width: 520px; width: calc(100% - 32px); border-radius: var(--radius); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .35); }
dialog.mf-dialog::backdrop { background: rgba(23, 24, 26, .45); }
/* First run (docs/eu-iq): a short walk through the record and the app */
dialog.mf-setup { max-width: 560px; }
.mf-setup__dots { display: flex; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }
.mf-setup__dots li { width: 28px; height: 3px; border-radius: 2px; background: var(--line); }
.mf-setup__dots li.is-done { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mf-setup__dots li.is-now { background: var(--accent); }
.mf-setup h2 { margin: 0 0 6px; }
.mf-setup__body { margin: 18px 0 8px; min-height: 96px; }
.mf-setup__nav { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.mf-setup__nav span { flex: 1; }
.mf-setup__shot img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.mf-setup__how { margin: 0; padding-left: 20px; line-height: 1.7; }

/* Auth */
.mf-auth { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--accent) 10%, transparent) 0, transparent 38%), var(--paper); }
.mf-auth-main { width: 100%; max-width: 440px; padding: 24px 16px; }
.mf-auth-card { background: var(--surface); border: 1px solid var(--line); padding: 40px 36px; box-shadow: var(--shadow); }
.mf-auth-card h1 { margin-bottom: 8px; }
.mf-auth-card .mf-lede { font-size: 15px; margin-bottom: 24px; }
.mf-auth-foot { text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 20px; }
/* the edition's product name (Brokerage\Voice): over the sign-in form, and at the foot of the sidebar */
.mf-auth-product { font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.mf-code { font: 500 26px/1.2 var(--sans) !important; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.mf-pushhelp { margin: 8px 0 12px; padding-left: 20px; font-size: 14px; display: grid; gap: 4px; }
.mf-nav-foot__product { font: 500 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mf-pw { margin-top: 20px; font-size: 14px; }
.mf-pw summary { cursor: pointer; color: var(--ink-2); margin-bottom: 14px; }
.mf-login-form { margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .mf-wizard { grid-template-columns: 1fr; }
  .mf-aside { position: static; order: -1; grid-template-columns: 1fr; }
  .mf-summary-img { aspect-ratio: 16 / 7; }
  .mf-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mf-shell { grid-template-columns: 1fr; }
  .mf-burger { display: block; margin-left: -8px; }
  .mf-nav { position: fixed; top: var(--top-h); left: 0; bottom: 0; width: min(84vw, 300px); height: auto; background: var(--surface); z-index: 30;
    transform: translateX(-102%); transition: transform .3s var(--ease); box-shadow: var(--shadow); }
  .mf-nav.is-open { transform: none; }
  .mf-user span { display: none; }
  .mf-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mf-top { padding: 0 16px; gap: 12px; }
  /* The burger, the agent search and Sign out now share the bar, so the lockup's slot comes down with it. The cap
     above still applies, so each brokerage's lockup shrinks by the same rule rather than by its own accident. */
  .mf-logo-img { --logo-h: 36px; }
  .mf-logo-img.mf-logo--product { --logo-h: 30px; }
  .mf-main { padding: 28px 16px 80px; }
  .mf-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 640px) {
  .mf-grid-2, .mf-grid-3, .mf-grid-4, .mf-choice, .mf-templates { grid-template-columns: 1fr; }
  .mf-cta { grid-template-columns: 1fr; padding: 28px 22px; }
  .mf-kv { grid-template-columns: 1fr; }
  .mf-upload-row { grid-template-columns: 1fr; }
  .mf-switch { margin-left: 0; min-width: 0; }
  /* The box and the field have to be allowed to shrink with the bar, or the field keeps its 134px while its parent
     is squeezed and its right edge runs under "Sign out". */
  .mf-switch__box { min-width: 0; }
  .mf-switch__input { width: 134px; max-width: 100%; }
  .mf-switch__list { left: auto; right: 0; width: min(290px, calc(100vw - 32px)); }
  .mf-user a { white-space: nowrap; } /* "Sign out" wrapped in two beside the search box */
  .mf-logo-img { --logo-h: 30px; }
  .mf-auth-logo { --logo-h: 52px; margin-bottom: 18px; } /* the card's own width is the constraint on a phone */
  .mf-logo-s { display: none; }
  .mf-lanes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.mf-golive { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.mf-golive .mf-field { max-width: 240px; }

/* Leads inbox */
.mf-leads { display: grid; gap: 12px; }
/* Leads as people: a searchable list, one row per person; a person's page with their activity as a timeline. */
.mf-people-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.mf-people-bar .mf-find { flex: 1 1 280px; max-width: 420px; position: relative; }
.mf-people-bar .mf-find input { padding-left: 16px; }
.mf-people-bar .mf-tabs { margin: 0; }
.mf-people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mf-person { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.4fr) auto; align-items: center; gap: 16px; padding: 14px 8px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.mf-person:hover { background: var(--surface); }
.mf-person__av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-ink, var(--ink)); color: var(--paper); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.mf-person__av--lg { width: 64px; height: 64px; font-size: 20px; flex: none; }
.mf-person__main, .mf-person__what { display: grid; gap: 2px; min-width: 0; }
.mf-person__main > *, .mf-person__what > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-person__name { font-weight: 600; }
.mf-person__when { display: grid; justify-items: end; gap: 4px; }
.mf-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 8px 0 28px; }
.mf-person-head h1 { margin: 0 0 6px; }
.mf-person-head > div:nth-child(2) { flex: 1 1 260px; }
.mf-person-head__act { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-person-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; }
.mf-person-wants { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.mf-person-wants li { display: grid; gap: 2px; }
.mf-person-grid .mf-kv dd { overflow-wrap: anywhere; }
.mf-tl { list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
.mf-tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.mf-tl__i { position: relative; display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 16px; padding: 0 0 22px; }
.mf-tl__dot { width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); position: relative; }
.mf-tl__i--alert .mf-tl__dot, .mf-tl__i--followup .mf-tl__dot { border-color: var(--muted); }
.mf-tl__i--appointment .mf-tl__dot { background: var(--brand-ink, var(--ink)); }
.mf-tl__b > p { margin: 0 0 4px; }
.mf-tl__h { line-height: 1.45; }
@media (max-width: 900px) {
  .mf-person { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mf-person__what { grid-column: 2 / 4; grid-row: 2; }
  .mf-person-grid { grid-template-columns: minmax(0, 1fr); }
}
.mf-lead-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.mf-lead-head h3 { font: 400 22px/1.2 var(--display); margin: 0 0 4px; }
.mf-lead-msg { margin: 14px 0 0; white-space: pre-wrap; line-height: 1.6; max-width: 72ch; }
.mf-lead-answers { display: grid; gap: 8px; margin: 14px 0 0; max-width: 72ch; }
.mf-lead-answers div { display: grid; gap: 2px; }
.mf-lead-answers dt { font-size: 13px; color: var(--muted); }
.mf-lead-answers dd { margin: 0; font-weight: 500; }
.mf-lead-contact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mf-lead-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }

/* Analytics */
.mf-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.mf-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column-reverse; gap: 6px; }
.mf-kpi dd { margin: 0; font: 400 32px/1 var(--display); }
.mf-kpi dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mf-chart { width: 100%; height: 180px; display: block; }
.mf-chart rect { fill: var(--accent); }
.mf-chart rect:hover { fill: var(--ink); }
.mf-chart-axis { display: flex; justify-content: space-between; margin-top: 8px; }
.mf-bars { margin: 14px 0 0; display: grid; gap: 10px; }
.mf-bars div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; font-size: 14px; }
.mf-bars dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.mf-bars dd span { height: 8px; min-width: 2px; background: var(--accent); border-radius: 4px; }
.mf-bars dd b { font-weight: 500; font-size: 13px; }
@media (max-width: 900px) { .mf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf-bars div { grid-template-columns: 110px 1fr; } }

/* My website offer (paid service) + next steps */
.mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf-offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 36px; }
.mf-offer__price { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-right: 40px; border-right: 1px solid var(--line); }
.mf-offer__amount { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mf-offer__amount s { font-size: 22px; color: var(--muted); text-decoration-thickness: 1.5px; }
.mf-offer__amount strong { font: 400 clamp(44px, 5vw, 60px)/1 var(--display, serif); color: var(--ink); letter-spacing: -.01em; }
.mf-offer__cta { margin-top: 8px; }
.mf-offer__sent { margin: 8px 0 0; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius); font-size: 14px; }
.mf-offer__incl h2 { font-size: 18px; margin: 0 0 14px; }
.mf-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mf-incl li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mf-incl li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.mf-incl b { color: var(--ink); font-weight: 500; }
.mf-offer-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: offer; }
.mf-offer-steps li { counter-increment: offer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mf-offer-steps li > div { flex: 1; }
.mf-offer-steps li::before { content: counter(offer, decimal-leading-zero); font: 500 11px/1 var(--sans); letter-spacing: .14em; color: var(--muted); }
.mf-offer-steps h3 { font-size: 15px; margin: 0 0 6px; }
.mf-offer-steps p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.mf-offer-steps li.is-now { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.mf-offer-steps li.is-done::before { content: 'Done'; color: var(--accent); }
.mf-offer-steps .mf-btn { align-self: flex-start; }
a.mf-tpl { text-decoration: none; color: inherit; }
dialog.mf-dialog--frame { max-width: 1000px; height: min(760px, calc(100vh - 32px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
dialog.mf-dialog--frame:not([open]) { display: none; }
.mf-frame-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mf-frame-head h2 { margin: 0; font-size: 17px; }
.mf-frame-head p { margin: 2px 0 0; }
dialog.mf-dialog--frame iframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 899px) {
  .mf-offer { grid-template-columns: 1fr; padding: 24px; gap: 28px; }
  .mf-offer__price { padding-right: 0; border-right: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .mf-offer-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 559px) { .mf-offer-steps { grid-template-columns: 1fr; } }
.mf-offer-steps--live { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mf-incl__note { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* My Brand: website accent, homepage sections, notable sales */
.mf-accent { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.mf-accent input[type="color"] { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); cursor: pointer; }
.mf-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); background: var(--c); cursor: pointer; }
.mf-swatch:hover { box-shadow: 0 0 0 2px var(--ink); }
.mf-accent__preview { flex-basis: 100%; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.mf-accent__chip { width: 40px; height: 3px; background: var(--c); }
/* Accent picker (2026-10-24): your colour first, presets second, a live preview beside it */
.mf-acc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
@media (max-width: 699px) { .mf-acc { grid-template-columns: 1fr; } }
.mf-acc__lab { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mf-acc__own { display: flex; align-items: center; gap: 10px; }
.mf-acc__well { position: relative; width: 52px; height: 52px; flex: none; border-radius: var(--radius); background: var(--c, #8f6f3e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; }
.mf-acc__well:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.mf-acc__well input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mf-acc__hex { width: 130px; height: 52px; font: 500 17px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-transform: lowercase; }
.mf-acc__hex[aria-invalid="true"] { border-color: #b3261e; }
.mf-acc__sw { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-acc__dot { width: 34px; height: 34px; padding: 3px; border: 0; border-radius: 50%; background: none; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.mf-acc__dot span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); }
.mf-acc__dot:hover { box-shadow: 0 0 0 1px var(--ink-2); }
.mf-acc__dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.mf-acc__exact { margin-top: 18px; }
.mf-acc__exact input:disabled + span { opacity: .55; }
.mf-acc [data-accent-reset] { margin-top: 12px; }
.mf-acc__card { padding: 16px 18px 18px; background: #fbf6ef; border: 1px solid var(--line); color: #26262a; }
.mf-acc__nav { display: flex; gap: 16px; font-size: 13px; margin-bottom: 18px; }
.mf-acc__nav .is-on { color: var(--acc); box-shadow: inset 0 -2px 0 var(--acc); padding-bottom: 3px; }
.mf-acc__h { margin: 0; font: 400 22px/1.2 Georgia, 'Times New Roman', serif; }
.mf-acc__rule { width: 48px; height: 2px; margin: 12px 0; background: var(--acc); }
.mf-acc__row { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.mf-acc__pin { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--acc); }
.mf-acc__stars { color: var(--acc); letter-spacing: 2px; font-size: 14px; }
.mf-acc__link { margin: 0; font-size: 14px; color: var(--acc-text); text-decoration: underline; text-underline-offset: 3px; }
.mf-acc__prev [data-accent-preview] { margin: 10px 0 0; }
.mf-acc__prev [data-accent-suggest] { margin: 6px 0 0; }
.mf-acc__prev .mf-accent__chip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px; vertical-align: -1px; }
/* My Website -> Specialty pages (2026-10-25): one row per specialty with a switch, the agent's words folded under it */
.mf-spec-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mf-spec + .mf-spec { border-top: 1px solid var(--line); }
.mf-spec__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px 18px; align-items: center; padding: 14px 18px; }
.mf-spec__t { display: grid; gap: 2px; }
.mf-spec__t b { font-size: 15px; }
.mf-spec__act { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.mf-spec__own { padding: 0 18px 18px 76px; display: grid; gap: 12px; }
.mf-spec__photos { padding: 4px 18px 18px 76px; }
.mf-spec__h { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mf-spec__ph { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mf-spec__ph li { display: grid; gap: 4px; justify-items: start; }
.mf-spec__img, .mf-spec__add { width: 132px; aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; background: var(--line-2); border-radius: var(--radius); }
.mf-spec__img img { width: 100%; height: 100%; object-fit: cover; }
.mf-spec__add { border: 1px dashed var(--line); background: var(--surface); cursor: pointer; align-content: center; gap: 2px; }
.mf-spec__add span:first-of-type { font-size: 22px; line-height: 1; }
.mf-spec__add:hover, .mf-spec__add:focus-within { border-color: var(--accent); }
@media (max-width: 699px) { .mf-spec__photos { padding-left: 18px; } }
.mf-spec__own .mf-field span .mf-muted { font-weight: 400; }
@media (max-width: 699px) { .mf-spec__row { grid-template-columns: auto minmax(0, 1fr); } .mf-spec__state, .mf-spec__act { grid-column: 2; } .mf-spec__own { padding-left: 18px; } }
.mf-tog { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; cursor: pointer; }
.mf-tog input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mf-tog__t { position: absolute; inset: 0; border-radius: 12px; background: var(--line-2); transition: background .2s; }
.mf-tog__t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.mf-tog input:checked + .mf-tog__t { background: var(--accent); }
.mf-tog input:checked + .mf-tog__t::after { transform: translateX(16px); }
.mf-tog input:focus-visible + .mf-tog__t { outline: 2px solid var(--ink); outline-offset: 2px; }
.mf-spec-layout { margin-top: 20px; }
.mf-sales { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mf-sale { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mf-sale__img { width: 96px; aspect-ratio: 3 / 2; background: var(--line-2); display: grid; place-items: center; overflow: hidden; }
.mf-sale__img img { width: 100%; height: 100%; object-fit: cover; }
.mf-sale__up { font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.mf-sale__up:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mf-sale__txt { display: grid; gap: 2px; font-size: 14px; }
.mf-sale__act { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 699px) { .mf-sale { grid-template-columns: 72px minmax(0, 1fr); } .mf-sale__img { width: 72px; } .mf-sale__act { grid-column: 1 / -1; justify-content: flex-start; } }

/* Logo options (phase 7c) */
.mf-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mf-logo-opt { border: 1px solid var(--line); background: var(--surface); display: grid; grid-template-rows: auto auto 1fr; }
.mf-logo-opt.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mf-logo-art { display: grid; place-items: center; height: 150px; padding: 22px 28px; background: var(--paper); }
.mf-logo-art--dark { height: 84px; padding: 16px 28px; background: #1d1d1b; }
.mf-logo-art svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: 100%; }
.mf-logo-art--dark svg { filter: brightness(0) invert(1); }
.mf-logo-body { padding: 14px 18px 18px; display: grid; gap: 6px; align-content: start; }
.mf-logo-body h3 { font: 400 20px/1.2 var(--display); margin: 0; }
.mf-logo-body p { margin: 0; font-size: 14px; color: var(--ink-2); }
.mf-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
@media (max-width: 700px) { .mf-logos { grid-template-columns: 1fr; } }

/* IDX Broker connection (phase 7d) */
.mf-kv > div { display: contents; }
.mf-idx-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
/* Which IDX plan to buy. The cards carry the brokerage's own wording (config idx.plans); the only thing the design
   asserts is which one is recommended, and that is said in words as well as in the border. */
.mf-idx-plans { margin: 0 0 4px; }
.mf-idx-plans h3 { font: 400 20px/1.2 var(--display); margin: 0 0 10px; }
.mf-plans { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mf-plan { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; }
.mf-plan.is-rec { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mf-plan__name { font: 500 15px/1.3 var(--sans); margin: 0 0 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mf-plan__price { font: 400 28px/1.1 var(--display); margin: 0 0 10px; }
.mf-plan__per { font: 400 13px/1 var(--sans); color: var(--muted); }
.mf-plan__sum { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.mf-plan__notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.mf-plan__foot { margin: 0 0 4px; }
@media (max-width: 720px) { .mf-plans { grid-template-columns: 1fr; } }
/* A refused API key: what happened, what IDX Broker said, what to check. Focused when it appears. */
.mf-idx-err ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.mf-idx-err p:last-child { margin-bottom: 0; }
.mf-idx-err q { font-style: italic; }
.mf-idx-err:focus-visible { box-shadow: var(--focus); }
@media (max-width: 700px) { .mf-kv { grid-template-columns: 1fr; } .mf-kv dd { margin-bottom: 8px; } }

/* Named accent presets */
.mf-swatches--named { gap: 10px; }
.mf-swatch-n { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.mf-swatch-n .mf-swatch { width: 24px; height: 24px; box-shadow: none; border: 0; cursor: inherit; }
.mf-swatch-n:hover { border-color: var(--ink-2); }
.mf-swatch-n[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mf-swatch-n:focus-visible { outline: none; box-shadow: var(--focus); }
.mf-accent__custom { flex-basis: 100%; font-size: 14px; }
.mf-accent__custom summary { cursor: pointer; color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; }
.mf-accent__row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.mf-accent__row input[type="color"] { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); cursor: pointer; }
/* Brand Assets: logo pair, tooltips, placeholders, community picker (2026-09-19) */
.mf-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 8px; }
.mf-tip__btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font: 600 11px/1 Georgia, serif; font-style: italic; color: var(--ink-2); cursor: help; padding: 0; }
.mf-tip__txt { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 260px; padding: 10px 12px; background: var(--ink); color: #fff; font: 400 13px/1.45 var(--sans, system-ui); letter-spacing: 0; text-transform: none; border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20; pointer-events: none; }
.mf-tip:hover .mf-tip__txt, .mf-tip__btn:focus-visible + .mf-tip__txt { opacity: 1; visibility: visible; }
.mf-logo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mf-logo-slots--mark { margin-top: 16px; }
.mf-logo-slot { border: 1px solid var(--line); background: var(--surface); padding: 16px; }
.mf-logo-slot h3 { font-size: 16px; margin: 0; display: flex; align-items: center; }
.mf-media--logo { grid-template-columns: 1fr !important; }
.mf-tile-img--dark { background: #1d1d1b !important; }
.mf-tile-img--dark img, .mf-media--logo .mf-tile-img img { object-fit: contain !important; padding: 12px; }
.mf-empty--dark { background: #1d1d1b; color: #d9d6cf; }
.mf-tile.is-placeholder { opacity: .72; }
.mf-tile-img { position: relative; }
.mf-tile-flag { position: absolute; left: 8px; top: 8px; }
.mf-comms { display: grid; gap: 20px; }
.mf-comm { border: 1px solid var(--line); background: var(--surface); padding: 16px; }
.mf-comm__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mf-comm__head h3 { margin: 0; font-size: 17px; }
.mf-comm__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mf-comm__opt { position: relative; display: block; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid transparent; }
.mf-comm__opt input { position: absolute; opacity: 0; }
.mf-comm__opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-comm__opt:has(input:checked) { border-color: var(--ink); }
.mf-comm__opt:has(input:focus-visible) { box-shadow: var(--focus); }
.mf-comm__src { position: absolute; left: 6px; bottom: 6px; background: rgba(23, 24, 26, .75); color: #fff; font-size: 11px; padding: 2px 6px; }
/* Community directory + photo library search (credits show on hover/focus; always on touch screens) */
.mf-comm__head h3 .mf-small { font-weight: 400; margin-left: 6px; }
.mf-comm__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mf-comm__acts .mf-btn { min-height: 44px; }
.mf-comm__credit, .mf-lib__cr { position: absolute; left: 0; right: 0; top: 0; padding: 6px 8px; background: rgba(23, 24, 26, .86); color: #fff; font-size: 11px; line-height: 1.35; text-align: left;
  opacity: 0; transform: translateY(-4px); transition: opacity .15s var(--ease), transform .15s var(--ease); pointer-events: none; }
.mf-comm__opt:hover .mf-comm__credit, .mf-comm__opt:focus-within .mf-comm__credit, .mf-lib__ph:hover .mf-lib__cr, .mf-lib__ph:focus-visible .mf-lib__cr { opacity: 1; transform: none; }
@media (hover: none) { .mf-comm__credit, .mf-lib__cr { opacity: 1; transform: none; position: static; background: var(--ink); } .mf-comm__opt { aspect-ratio: auto; } .mf-comm__opt img { aspect-ratio: 4 / 3; height: auto; } }
.mf-commsel { gap: 8px; }
.mf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mf-chips:empty { display: none; }
.mf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 0 0 12px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.mf-chip__x { min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-2); }
.mf-chip__x:hover { background: var(--line-2); color: var(--ink); }
.mf-ac { position: relative; }
.mf-ac__in { min-height: 44px; }
.mf-ac__lb { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: min(360px, 60vh); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mf-ac__grp { position: sticky; top: 0; padding: 8px 12px 6px; background: var(--line-2); font: 500 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mf-ac__opt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-height: 44px; padding: 10px 12px; cursor: pointer; border-left: 3px solid transparent; }
.mf-ac__opt[aria-selected="true"], .mf-ac__opt:hover { background: var(--accent-soft); border-left-color: var(--accent); }
.mf-ac__meta { font-size: 12px; color: var(--ink-2); }
.mf-ac__none { padding: 12px; font-size: 14px; color: var(--ink-2); }
dialog.mf-dialog--lib { max-width: 980px; width: calc(100% - 32px); max-height: calc(100vh - 32px); padding: 0; display: flex; flex-direction: column; }
dialog.mf-dialog--lib:not([open]) { display: none; }
.mf-lib__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.mf-lib__x { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; }
.mf-lib__search { padding: 0 20px; display: grid; gap: 4px; }
.mf-lib__search input { min-height: 44px; }
.mf-lib__status { padding: 10px 20px 0; margin: 0; font-size: 13px; color: var(--ink-2); }
.mf-lib__res { overflow-y: auto; padding: 8px 20px 12px; flex: 1; min-height: 160px; }
.mf-lib__grp { margin-top: 12px; }
.mf-lib__grp h3 { margin-bottom: 8px; }
.mf-lib__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mf-lib__ph { position: relative; display: block; width: 100%; padding: 0; border: 2px solid transparent; background: var(--line-2); cursor: pointer; overflow: hidden; text-align: left; }
.mf-lib__img { position: relative; display: block; overflow: hidden; }
.mf-lib__ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
.mf-lib__name { display: block; padding: 8px 10px; min-height: 36px; background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink); }
.mf-lib__more .mf-btn[hidden] { display: none; }
.mf-lib__ph[aria-pressed="true"] { border-color: var(--ink); }
.mf-lib__ph:disabled { opacity: .6; cursor: progress; }
.mf-lib__cur { position: absolute; right: 6px; bottom: 6px; }
.mf-lib__more { padding: 8px 20px 18px; }
.mf-lib__more .mf-btn { min-height: 44px; }
@media (max-width: 640px) { .mf-lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf-lib__head, .mf-lib__search, .mf-lib__res, .mf-lib__more { padding-inline: 12px; } .mf-lib__status { padding-inline: 12px; } .mf-comm__head { flex-wrap: wrap; } .mf-comm__acts { justify-content: flex-start; } }
@media (max-width: 700px) { .mf-logo-slots { grid-template-columns: 1fr; } }.mf-tile-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-review { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; }
.mf-tag--ok { background: var(--ok-soft); color: var(--ok); }
.mf-tag--warn { background: var(--warn-soft); color: var(--warn); }
.mf-viewonly { margin: 0 16px 0 auto; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 700px) { .mf-viewonly { display: none; } }
.mf-tpl-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Custom domains: plain-language connect flow (portal.js domainCard / domainStart). */
.mf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mf-dom { display: grid; gap: 14px; margin-top: 16px; }
.mf-dom > *, .mf-dom-ways > * { min-width: 0; } /* wide tables/codes scroll inside instead of stretching the card */
.mf-dom-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.mf-dom-head h3 { font: 400 22px/1.3 var(--display); word-break: break-all; }
.mf-dom-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: dst; }
.mf-dom-stages li { counter-increment: dst; font-size: 13px; color: var(--ink-2); padding-top: 10px; border-top: 3px solid var(--line); }
.mf-dom-stages li::before { content: counter(dst) ". "; }
.mf-dom-stages li.is-done { border-top-color: var(--ok); color: var(--ok); }
.mf-dom-stages li.is-done::before { content: "\2713  "; }
.mf-dom-stages li.is-now { border-top-color: var(--accent); color: var(--ink); font-weight: 500; }
.mf-dom-status { margin: 0; font-size: 15px; color: var(--ink); }
/* The result of a check, in the order it is useful: what we found, what is wrong, what to do, when we look again.
   Tick and cross are decoration - every row says its state in words too, and colour is never the only signal. */
[data-dom-diag]:empty { display: none; } /* the card is a grid with a gap: an empty slot must not leave one */
/* overflow-wrap is inherited, so one declaration covers every hostname in here. A doubled zone produces names like
   _mf-verify.homes.example.com.example.com, which is wider than a phone. */
.mf-dom-diag { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 14px 16px; overflow-wrap: anywhere; }
.mf-dom-diag h4 { font: 500 14px/1.3 var(--sans); margin: 0 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mf-dom-diag__when { font-weight: 400; font-size: 12px; color: var(--muted); }
.mf-dom-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mf-dom-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.mf-dom-checks__m { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; line-height: 1; }
.mf-dom-checks .is-ok .mf-dom-checks__m { background: var(--ok-soft); color: var(--ok); }
.mf-dom-checks .is-bad .mf-dom-checks__m { background: var(--err-soft); color: var(--err); }
.mf-dom-checks .is-idle .mf-dom-checks__m { background: var(--line-2); color: var(--muted); }
.mf-dom-checks__t { margin: 0; font-size: 13px; color: var(--ink); }
.mf-dom-checks__d { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.mf-dom-diag__off, .mf-dom-diag__next { margin: 12px 0 0; font-size: 14px; line-height: 1.55; padding: 10px 12px; color: var(--ink); }
.mf-dom-diag__off { background: var(--warn-soft); border-left: 3px solid var(--warn); }
.mf-dom-diag__next { background: var(--surface); border-left: 3px solid var(--accent); }
.mf-dom-diag__again { margin: 10px 0 0; }
.mf-dom-found { margin: 0; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius); font-size: 14px; }
.mf-dom-auto { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px; border: 1px solid var(--accent); border-radius: var(--radius); }
.mf-dom-auto h4 { font: 500 15px/1.3 var(--sans); margin: 0 0 4px; }
.mf-dom-auto p { margin: 0; color: var(--ink-2); }
.mf-dom-ways { display: grid; gap: 10px; }
.mf-dom-way { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.mf-dom-way > summary, .mf-dom-tech > summary { cursor: pointer; padding: 14px 0; font-weight: 500; list-style-position: inside; }
.mf-dom-way > summary:focus-visible, .mf-dom-tech > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.mf-dom-way[open] { padding-bottom: 16px; }
.mf-dom-way .mf-muted { font-weight: 400; }
.mf-dom-steps { margin: 4px 0 14px; padding-left: 22px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.mf-dom-recs { display: grid; gap: 10px; margin: 6px 0 12px; }
.mf-dom-rec { border: 1px solid var(--line-2); background: #fbfaf8; border-radius: var(--radius); padding: 12px 14px; }
.mf-dom-rec .mf-eyebrow { margin-bottom: 8px; color: var(--ink-2); }
.mf-dom-rec dl { display: grid; grid-template-columns: 90px 1fr 1.6fr; gap: 12px; margin: 0; }
.mf-dom-rec dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mf-dom-rec dd { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.mf-dom-rec code { word-break: break-all; font-size: 13px; background: var(--surface); border: 1px solid var(--line); padding: 3px 6px; border-radius: var(--radius); }
.mf-dom-assist { display: grid; gap: 14px; }
.mf-dom-assist fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.mf-dom-assist legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.mf-dom-assist .mf-dom-steps { margin: 0 0 4px 28px; }
.mf-dom-tech { border-top: 1px solid var(--line-2); }
.mf-dom-tech > summary { font-weight: 400; font-size: 13px; color: var(--ink-2); }
.mf-dom-tech[open] { padding-bottom: 8px; }
.mf-dom-tech .mf-kv { margin-top: 12px; }
.mf-dom-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-dom-start { margin-top: 16px; }
.mf-dom-start .mf-choice-card { cursor: default; align-content: start; }
.mf-dom-found-box:empty { display: none; }
.mf-dom-found-box .mf-alert p { margin: 0; color: inherit; }
.mf-dom-tips { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.mf-dom-start .mf-dom-way { margin-top: 4px; }
@media (max-width: 700px) {
  .mf-dom-rec dl { grid-template-columns: 1fr; gap: 8px; }
  .mf-dom-stages { font-size: 12px; }
  .mf-dom-auto .mf-btn { width: 100%; }
}

/* Blog (agent website): post list + editor; Featured Listings picker (My Website) */
.mf-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mf-post__a { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 12px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--radius, 6px); color: inherit; text-decoration: none; }
.mf-post__a:hover { border-color: var(--ink-2); }
.mf-post__img { display: block; aspect-ratio: 4 / 3; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.mf-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-post__b { display: grid; gap: 6px; }
.mf-post__t { font-size: 18px; font-weight: 600; }
.mf-post__m { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mf-post-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mf-blog-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px; align-items: start; margin-top: 16px; }
.mf-blog-main, .mf-blog-side { display: grid; gap: 20px; }
.mf-blog-side { position: sticky; top: 16px; }
.mf-blog-ed h2 { font-size: 18px; margin: 0; }
.mf-blog-raw { min-height: 360px; font: 16px/1.6 inherit; }
.mf-cover { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; }
.mf-cover img, .mf-cover__ph { width: 200px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; background: var(--line-2); display: grid; place-items: center; font-size: 13px; color: var(--ink-2); }
.mf-cover__act { display: grid; gap: 8px; justify-items: start; }
.mf-format { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mf-format .mf-small { flex: 1 1 260px; }
.mf-suggest { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--accent); border-radius: var(--radius, 6px); background: var(--accent-soft, #f4f6fa); }
.mf-suggest:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.mf-suggest h3 { margin: 0; font-size: 16px; }
.mf-suggest__body { max-height: 420px; overflow: auto; }
.mf-flags { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.mf-flag q { font-style: italic; }
.mf-flag p { margin: 4px 0 0; }
.mf-tag--err { background: var(--err-soft); color: var(--err); }
.mf-rte-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-rte-bar .mf-btn { min-height: 36px; }
.mf-rte { min-height: 260px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius, 6px); background: #fff; font: 17px/1.7 Georgia, serif; }
.mf-rte:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.prose-preview h2 { font-size: 24px; line-height: 1.2; margin: 1.2em 0 .4em; }
.prose-preview h3 { font: 600 13px/1.3 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 1.2em 0 .4em; }
.prose-preview blockquote { margin: 1em 0; padding-left: 18px; border-left: 2px solid var(--accent); font-style: italic; font-size: 20px; }
.prose-preview p { margin: 0 0 .9em; }
.mf-link--danger { color: var(--err); justify-self: start; min-height: 44px; }
.mf-fl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mf-fl__i { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 16px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius, 6px); background: var(--surface, #fff); }
.mf-fl__img { display: block; aspect-ratio: 4 / 3; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.mf-fl__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-fl__b { display: grid; gap: 4px; }
.mf-fl__on { min-height: 44px; }
.mf-fl__move { display: flex; gap: 4px; }
.mf-fl__move .mf-btn { min-width: 44px; min-height: 44px; }
@media (max-width: 900px) {
  .mf-blog-ed { grid-template-columns: 1fr; }
  .mf-blog-side { position: static; }
  .mf-cover { grid-template-columns: 1fr; }
  .mf-fl__i { grid-template-columns: 72px 1fr; }
  .mf-fl__on, .mf-fl__move { grid-column: 2; }
  .mf-post__a { grid-template-columns: 88px 1fr; }
}
.mf-nav-foot img { display: block; width: 116px; height: auto; opacity: .6; }
.mf-nav-foot:hover img, .mf-nav-foot img:focus { opacity: .85; }

/* ---------- Recruit (docs/recruit) ---------- */
.rc-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.rc-slide { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 6px 0; cursor: pointer; }
.rc-slide input { margin-top: 3px; accent-color: var(--accent); }
.rc-slide.is-unbuilt { color: var(--muted); }
.rc-slot { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.rc-activity { list-style: none; margin: 12px 0 0; padding: 0; }
.rc-activity li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rc-activity li strong { font-weight: 500; }

/* My Website -> Sections: the section catalog (Site\Sections). Collapsed, one quiet row per section; the options,
   each with a small drawing of what it does, only appear for the section being changed. */
.mf-secopt-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mf-secopt { border-bottom: 1px solid var(--line); }
.mf-secopt__row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
	padding: 16px 2px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.mf-secopt__row:hover .mf-secopt__chev, .mf-secopt__row:focus-visible .mf-secopt__chev { color: var(--ink); }
.mf-secopt__t { display: grid; gap: 2px; }
.mf-secopt__t b { font-weight: 500; }
.mf-secopt__now { color: var(--ink-2); font-size: 14px; }
.mf-secopt__chev { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.mf-secopt__v { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 4px 0 22px; }
.mf-secopt__c { padding: 14px; align-content: start; }
.mf-secopt__art { display: block; background: var(--paper, #fff); border: 1px solid var(--line); }
.mf-secopt__art svg { display: block; width: 100%; height: auto; }
/* A screenshot of the option in the agent's own design (16:10, the top of the section). */
.mf-secopt__art.has-shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--line); }
.mf-secopt__shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .52s cubic-bezier(.4, 0, .2, 1); }
.mf-secopt__c:hover .mf-secopt__shot { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .mf-secopt__shot { transition: none; } }
.mf-secopt__b { display: grid; gap: 4px; }
.mf-secopt__b b { font-weight: 500; }
.mf-secopt__see { justify-self: start; }
.mf-secopt__c.is-off { opacity: .6; cursor: default; }
.mf-secopt__why { color: var(--ink-2); font-style: italic; }
@media (max-width: 640px) { .mf-secopt__row { grid-template-columns: minmax(0, 1fr) auto; } .mf-secopt__now { display: none; } }

/* ---------- Recruit: the org chart ----------
   Drawn like the brokerage's own charts (docs/recruit/org-reference): brand-colour cards with the face on the top
   edge, connector lines, then white responsibility cards. --org-brand comes from the brokerage's primary colour. */
.org-pane { --org-brand: var(--accent); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px 32px; overflow: auto; }
.org-pane.is-plain { background: none; border: 0; padding: 0; overflow: visible; }
.org-title { text-align: center; margin-bottom: 28px; }
.org-title h2 { font: 400 clamp(26px, 3vw, 38px)/1.1 var(--display); color: var(--org-brand); letter-spacing: .02em; }
.org-title .mf-eyebrow { margin-bottom: 6px; }
/* the tree: nested lists, connectors drawn with borders */
.org-tree { position: relative; width: max-content; margin: 0 auto; }
.org-tree ul { list-style: none; margin: 0; padding: 22px 0 0; display: flex; justify-content: center; position: relative; }
.org-tree ul::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 22px; background: var(--org-brand); opacity: .45; }
.org-tree ul.org-tree__roots { padding-top: 0; gap: 48px; }
.org-tree ul.org-tree__roots::before { display: none; }
.org-tree li { position: relative; padding: 22px 8px 0; text-align: center; }
.org-tree li > .org-node { position: relative; z-index: 2; }
.org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; width: 50%; height: 22px; border-top: 1px solid var(--org-brand); opacity: .45; }
.org-tree li::before { right: 50%; }
.org-tree li::after { left: 50%; border-left: 1px solid var(--org-brand); }
.org-tree li:only-child::before, .org-tree li:only-child::after { border-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border-top: 0; }
.org-tree li:last-child::before { border-right: 1px solid var(--org-brand); }
.org-tree li:last-child::after { border-left: 0; }
.org-tree ul.org-tree__roots > li { padding-top: 0; }
.org-tree ul.org-tree__roots > li::before, .org-tree ul.org-tree__roots > li::after { display: none; }
/* wrapped rows: every row's bus reaches a rail on the left, the rail runs from the first bus to the last */
.org-rows { position: relative; }
.org-rows::before { content: ''; position: absolute; left: -20px; top: 22px; width: 1px; height: var(--rail-h, 0px); background: var(--org-brand); opacity: .45; }
.org-rows ul.org-row { justify-content: flex-start; }
.org-rows ul.org-row + ul.org-row::before { display: none; }
.org-rows ul.org-row li:first-child::before { border-top: 1px solid var(--org-brand); width: auto; left: -20px; right: 50%; }
/* a column of supporters: one dashed chain down from the person they support */
.org-tree ul.org-stack { flex-direction: column; align-items: center; }
.org-tree ul.org-stack::before { border-left: 1px dashed var(--org-brand); background: none; width: 0; }
.org-tree ul.org-stack li { padding: 12px 8px 0; }
.org-tree ul.org-stack li::before { display: none; }
.org-tree ul.org-stack li::after { left: 50%; width: 0; height: 12px; border-top: 0; border-left: 1px dashed var(--org-brand); }
.org-tree ul.org-stack li .org-node { margin-top: 14px; }
/* solid stacks (the company view): a team in a column, a team within it indented under its manager with a rail */
.org-tree ul.org-stack--solid::before, .org-tree ul.org-stack--solid li::after { border-left-style: solid; }
.org-tree ul.org-stack--nested { align-items: flex-start; padding: 6px 0 0 22px; margin-left: 40px; position: relative; }
.org-tree ul.org-stack--nested::before { left: 0; top: 0; height: calc(100% - 48px); width: 0; border-left: 1px solid var(--org-brand); }
.org-tree ul.org-stack--nested li { padding: 6px 0 0; }
.org-tree ul.org-stack--nested li::after { left: -22px; top: 46px; width: 22px; height: 0; border-top: 1px solid var(--org-brand); border-left: 0; }
.org-tree ul.org-stack--nested li .org-node { margin-top: 20px; }
/* clusters within a level (two trees off one person): a gap before the next cluster and a caption over its first card */
.org-tree li.is-cluster-start { margin-left: 26px; }
.org-tree li.is-cluster-start::before { width: calc(50% + 26px); right: 50%; }
/* a level with clusters: a taller connector zone, the caption beside the drop line, clear of the face */
.org-tree ul.has-caps > li { padding-top: 46px; }
.org-tree ul.has-caps > li::before, .org-tree ul.has-caps > li::after { height: 46px; }
.org-tree ul.has-caps > li.is-lower::after { height: 104px; }
.org-cluster__cap { position: absolute; left: -26px; right: 50%; top: 20px; padding-right: 8px; font-size: 9px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
/* a card drawn a level lower than its siblings (card_style = lower, and the dashed supporters) */
.org-tree li.is-lower > .org-node { margin-top: 78px; }
.org-tree li.is-lower::after { height: 80px; }
.org-tree ul.org-stack li.is-lower > .org-node { margin-top: 14px; }
.org-tree ul.org-stack li.is-lower::after { height: 12px; }
/* the company chart's lower row (card_style = band): its own bus, reached by a rail on the left the svg draws */
.org-band { margin-top: 48px; padding-left: 20px; }
.org-tree ul.org-band__row { justify-content: flex-start; padding-top: 22px; }
.org-tree ul.org-band__row::before { display: none; }
.org-tree ul.org-band__row > li:first-child::before { border-top: 1px solid var(--org-brand); width: auto; left: -20px; right: 50%; }
.org-tree ul.org-band__row > li:last-child::after { border-top: 0; }
.org-links { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
.org-links path { fill: none; stroke: var(--org-brand); stroke-width: 1.5; opacity: .55; }
.org-links path.is-dashed { stroke-dasharray: 5 4; }
.org-node__offices { opacity: .8; letter-spacing: .04em !important; text-transform: none !important; font-size: 9.5px !important; }
.org-pane.is-company .org-node { width: 132px; padding: 24px 8px 10px; }
.org-pane.is-company .org-node b { font-size: 12px; }
.org-pane.is-company .org-node i { font-size: 8.5px; }
/* a supporter hangs on a dashed line: they support the person above, they do not report to them */
.org-tree li.is-support::before { border-top-style: dashed; border-right-style: dashed; }
.org-tree li.is-support::after { border-top-style: dashed; border-left-style: dashed; }
.org-tree li.is-support > .org-node { background: color-mix(in srgb, var(--org-brand) 78%, #fff); }
.org-legend { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 18px; font-size: 12px; color: var(--muted); }
.org-legend__dash { width: 28px; border-top: 2px dashed var(--org-brand); opacity: .6; }
.org-title__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.org-list__rel { margin: 8px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
.org-node { position: relative; display: inline-block; width: 156px; margin-top: 20px; padding: 26px 10px 12px; background: var(--org-brand); color: #fff; border-radius: 6px; box-shadow: 0 6px 16px -10px rgba(0,0,0,.5); text-align: center; }
.org-node b { display: block; font-size: 13px; line-height: 1.25; }
.org-node i { display: block; font-style: normal; font-size: 9px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.org-node small { display: block; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-top: 6px; }
.org-node.is-ctx { background: var(--surface); color: var(--org-brand); border: 1px solid var(--org-brand); box-shadow: none; }
.org-face { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff center 20% / cover no-repeat; border: 1px solid var(--org-brand); box-shadow: 0 0 0 3px var(--paper); display: grid; place-items: center; font: 400 14px/1 var(--display); color: var(--org-brand); letter-spacing: .04em; }
/* the responsibility / group cards under the chart */
.org-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 36px; }
.org-list { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px 16px; }
.org-list h3 { font: 400 18px/1.2 var(--display); color: var(--org-brand); margin-bottom: 10px; }
.org-list h3 span { font: 400 12px/1.3 var(--sans, inherit); color: var(--muted); margin-left: 6px; }
.org-list ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--ink-2); }
.org-list li + li { margin-top: 4px; }
.org-list b { color: var(--ink); font-weight: 600; }
.org-gaps { margin-bottom: 16px; }
/* the directory */
.org-dir .mf-card + .mf-card { margin-top: 16px; }
.org-dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
.org-dir__card { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.org-dir__card .org-face { position: static; transform: none; width: 44px; height: 44px; box-shadow: none; border-color: var(--line); color: var(--ink-2); font: 600 13px/1 inherit; }
.org-dir__card > div { display: grid; gap: 2px; min-width: 0; }
.org-dir__card b { font-size: 14px; }
.org-dir__card > div > span:first-of-type { font-size: 13px; color: var(--ink-2); }
/* printing the org chart: landscape letter (the page injects @page), the chrome gone, the tree refitted to the
   page by recruitOrgPage's print listener */
@media print {
  body.is-org-print .mf-app, body.is-org-print main { display: block !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  body.is-org-print header, body.is-org-print aside, body.is-org-print nav, body.is-org-print .mf-nav, body.is-org-print .mf-top, body.is-org-print .mf-burger, body.is-org-print .mf-tabs, body.is-org-print .mf-page-head > div:last-child, body.is-org-print .org-gaps, body.is-org-print .org-pane + p { display: none !important; }
  body.is-org-print .mf-page-head { margin-bottom: 8px; }
  body.is-org-print .org-pane { border: 0; padding: 0 0 0 28px; background: none; overflow: visible; }
  body.is-org-print .org-lists { break-inside: avoid; }
  body.is-org-print .org-list { break-inside: avoid; }
}

/* City Guides: one row per community, the download on the right. */
.mf-guides { display: grid; gap: 10px; }
.mf-guide { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mf-guide h2 { font-size: 1.05rem; margin: 0 0 2px; }
.mf-guide__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-guide p { margin: 0; }

/* Named share links: the form to make one, then a row each with how often it has been opened. */
.mf-share-card { margin-top: 20px; }
.mf-share-new { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.mf-share-new .mf-field { flex: 1 1 220px; margin: 0; }
.mf-share-new .mf-field:nth-of-type(2) { flex: 0 0 150px; }
.mf-shares { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mf-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mf-share__who { display: grid; gap: 2px; min-width: 0; }
.mf-share__act { display: flex; align-items: center; gap: 12px; }
.mf-share.is-off { opacity: .55; }

/* Crop dialog: a still frame with the picture moving under it. */
.mf-crop::backdrop { background: rgba(20, 20, 22, .55); }
.mf-crop .mf-crop__body { padding: 18px 20px 20px; display: grid; gap: 14px; justify-items: center; }
.mf-crop__stage { position: relative; overflow: hidden; background: #1a1a1c; cursor: grab; touch-action: none;
  border-radius: var(--radius); user-select: none; }
.mf-crop__stage:active { cursor: grabbing; }
.mf-crop__stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.mf-crop__mask { position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  background:
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) 33.33% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) 66.66% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) 0 33.33% / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) 0 66.66% / 100% 1px no-repeat; }
.mf-crop__zoom { display: flex; align-items: center; gap: 12px; width: 360px; }
.mf-crop__zoom input { flex: 1; }
.mf-crop__acts { display: flex; align-items: center; gap: 16px; width: 360px; justify-content: flex-end; }
@media (max-width: 520px) { .mf-crop__zoom, .mf-crop__acts { width: 100%; } }

/* My Team: a row per person, with the editor opening underneath the one being changed. */
.mf-tmlist { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.mf-tmrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mf-tmrow.is-off { opacity: .6; }
.mf-tmrow__face { width: 64px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; }
.mf-tmrow__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-tmrow__initials { font-size: 1.1rem; color: var(--muted); letter-spacing: .04em; }
.mf-tmrow__who h3 { margin: 0; font-size: 1rem; }
.mf-tmrow__who p { margin: 2px 0 0; }
.mf-tmrow__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mf-tmrow .mf-team-edit { grid-column: 1 / -1; margin-top: 4px; }
.mf-team-edit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.mf-team-edit__acts { display: flex; align-items: center; gap: 16px; }
@media (max-width: 760px) {
  .mf-tmrow { grid-template-columns: 56px minmax(0, 1fr); }
  .mf-tmrow__acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Quote mode: the offer before a price exists, the upgrade card, the staff chooser and the tweaks editor */
.mf-offer__quote { font: 400 20px/1.45 var(--sans); color: var(--ink); margin: 0; max-width: 34ch; }
.mf-upgrade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 36px; border-left: 4px solid var(--accent); }
.mf-upgrade__price { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-right: 40px; border-right: 1px solid var(--line); }
.mf-upgrade__price h2 { margin: 0; font: 400 28px/1.15 var(--display, serif); }
.mf-incl--rules li::before { border: 0; width: 12px; height: 2px; top: 10px; background: var(--accent); transform: none; }
.mf-choices { display: grid; gap: 8px; margin: 6px 0 14px; }
.mf-choices--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
dialog.mf-dialog--wide { max-width: 760px; }
@media (max-width: 760px) { .mf-upgrade { grid-template-columns: 1fr; } .mf-upgrade__price { padding-right: 0; border-right: 0; } }

/* ---------- Dashboard: the rest of the studio in one row ---------- */
.mf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mf-tile { display: block; padding: 18px 20px 20px; background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.mf-tile:hover, .mf-tile:focus-visible { border-color: var(--ink); transform: translateY(-1px); }
.mf-tile h3 { margin: 0; font-size: 15px; }
.mf-tile p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* ---------- The booking frame after a booking ---------- */
.mf-frame-done { padding: 40px 28px 48px; text-align: center; max-width: 520px; margin: 0 auto; }
.mf-frame-done h3 { margin: 10px 0 8px; font-size: 22px; }
.mf-frame-done p { color: var(--muted); line-height: 1.5; margin: 0; }
.mf-check-big { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--brand-ink, var(--ink)); color: #fff; font-size: 26px; line-height: 56px; }

/* ---- Listing Studio (docs/listing-studio) */
.mf-stlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mf-strow a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; }
.mf-strow a:hover { border-color: var(--ink-2); }
.mf-strow a:focus-visible { box-shadow: var(--focus); outline: 0; }
.mf-strow h3 { margin: 0 0 2px; font-size: 16px; }
.mf-strow p { margin: 0; }
.mf-strow__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mf-stfilter, .mf-sttrigger { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.mf-stfilter .mf-field, .mf-sttrigger .mf-field { margin: 0; min-width: 220px; flex: 1; }
.mf-sthead { display: flex; gap: 12px; align-items: center; }
.mf-stpieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* a welcome kit's InDesign files (marketing): one row a piece */
.mf-stindds { list-style: none; margin: 8px 0 0; padding: 0; }
.mf-stindd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.mf-stindd:nth-child(even) { background: rgba(116, 119, 131, .07); } /* every other row tinted, easier to follow across (Zach 2026-10-21) */
.mf-stpiece { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.mf-stpiece__img { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--paper); margin-bottom: 10px; overflow: hidden; }
.mf-stpiece__img img { width: 100%; height: 100%; object-fit: contain; }
button.mf-stpiece__img { position: relative; width: 100%; border: 0; padding: 0; cursor: zoom-in; }
button.mf-stpiece__img .mf-tag { position: absolute; right: 6px; bottom: 6px; }
.mf-stpiece h3 { margin: 0 0 8px; font-size: 14px; }
.mf-stpiece p { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mf-stissues { border-left: 3px solid var(--warn); }
.mf-stissue h3 { font-size: 14px; margin: 12px 0 4px; }
.mf-stissue ul { margin: 0; padding-left: 18px; }
.mf-stissue--block { color: var(--err); }
.mf-stissue--warn { color: var(--warn); }
.mf-stgrid { display: grid; gap: 24px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.mf-stphotos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.mf-stphotos li { display: grid; gap: 6px; }
.mf-stphotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper); border: 1px solid var(--line); }
.mf-stphotos__acts { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.mf-stphotos__top { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mf-stco__results { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.mf-stco__outside { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.mf-stco__outside button { grid-column: 1 / -1; justify-self: start; }
.mf-stmanage__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Marketing requests (docs/eu-iq 5a): the form, the list, one request opened in place. */
.mf-rqform { margin: 16px 0 8px; }
.mf-rqfield { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.mf-rqfield legend { font-weight: 500; font-size: 14px; padding: 0; margin-bottom: 8px; }
.mf-choices--grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mf-choices--row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mf-rqtier--high { color: var(--warn); font-weight: 500; }
.mf-rqchosen { margin: -6px 0 14px; padding-left: 18px; font-size: 13px; }
.mf-rqlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mf-rqrow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mf-rqrow.is-open { border-color: var(--ink-2); }
.mf-rqrow__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; padding: 14px 16px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: var(--radius); }
.mf-rqrow__head:focus-visible { box-shadow: var(--focus); outline: 0; }
.mf-rqrow__main h3 { margin: 0 0 2px; font-size: 16px; }
.mf-rqrow__main p { margin: 0; }
.mf-rqrow__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mf-rqdetail { border-top: 1px solid var(--line); padding: 16px; display: grid; gap: 16px; }
.mf-rqfacts { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.mf-rqfacts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.mf-rqfacts dt { color: var(--muted); }
.mf-rqfacts dd { margin: 0; }
.mf-rqfacts select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; }
.mf-rqcols section { background: var(--paper); border-radius: var(--radius); padding: 12px 14px; }
.mf-rqcols h3 { margin: 0 0 8px; }
.mf-rqfiles { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.mf-rqadd { position: relative; overflow: hidden; }
.mf-rqadd input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mf-rqacts { padding-top: 4px; }
.mf-rqscope { margin: 0 0 12px; }
@media (max-width: 640px) { .mf-rqrow__head { grid-template-columns: 1fr; } .mf-rqrow__meta { justify-content: flex-start; } .mf-rqfacts div { grid-template-columns: 1fr; gap: 2px; } .mf-rqcols { grid-template-columns: 1fr; } }

/* Sign orders (Studio\SignOrders): the guided order with its running total beside it, and the order on a request. */
.mf-sglayout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.mf-sgmain { min-width: 0; }
.mf-sgcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mf-sgcard { position: relative; display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; background: var(--surface); min-height: 44px; }
.mf-sgcard input { position: absolute; opacity: 0; pointer-events: none; }
.mf-sgcard span { display: grid; gap: 2px; }
.mf-sgcard strong { font-weight: 500; font-size: 14px; }
.mf-sgcard.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mf-sgcard:has(input:focus-visible) { box-shadow: var(--focus); }
.mf-sgaddr { display: grid; grid-template-columns: 2fr 1.2fr .6fr .8fr; gap: 8px; }
.mf-sgcover { display: grid; gap: 4px; padding: 12px 14px; margin: 0 0 16px; border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: 14px; }
.mf-sgcover.is-covered { border-left-color: var(--ok); background: var(--ok-soft); }
.mf-sgaddons { display: grid; gap: 6px; }
.mf-sgaddon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.mf-sgprice { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.mf-sgdate { max-width: 220px; }
.mf-sgaccess { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.mf-sgnote { width: 100%; margin: 4px 0 0 26px; max-width: calc(100% - 26px); font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.mf-sgpolicy { background: var(--paper); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 12px; font-size: 14px; }
.mf-sgpolicy h3 { margin: 0 0 6px; }
.mf-sgpolicy ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; }
.mf-sgpolicy summary { cursor: pointer; font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.mf-sgpolicy__full { max-height: 260px; overflow: auto; margin-top: 6px !important; color: var(--ink-2); }
.mf-sgack { margin: 0 0 10px; align-items: flex-start; font-size: 14px; }
.mf-sgtotal { position: sticky; top: 16px; background: var(--paper); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; }
.mf-sgtotal h3 { margin: 0 0 8px; }
.mf-sgtotal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-sgtotal li { display: flex; justify-content: space-between; gap: 12px; }
.mf-sgtotal li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-sgcovered { color: var(--ok); }
.mf-sgtotal__you { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin: 10px 0 6px; padding-top: 10px; font-size: 15px; }
.mf-sgpanel { background: var(--paper); border-radius: var(--radius); padding: 14px 16px; margin: 0 16px; }
.mf-sgpanel h3 { margin: 0 0 8px; }
.mf-sgtest { color: var(--warn); margin: 0 0 8px; }
.mf-sgevents { margin: 10px 0; padding-left: 18px; font-size: 14px; display: grid; gap: 2px; }
@media (max-width: 860px) { .mf-sglayout { grid-template-columns: 1fr; } .mf-sgtotal { position: static; } }
@media (max-width: 640px) { .mf-sgaddr { grid-template-columns: 1fr 1fr; } .mf-sgaddr__street { grid-column: 1 / -1; } .mf-sgpanel { margin: 0; } }
/* the rider designer: colour chips, phrase chips, and the proof drawn to scale (fitRiders sizes the words) */
.mf-rider { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.mf-rider h3 { margin: 0 0 10px; }
.mf-rider__colors { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-rider__color { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; min-height: 44px; background: var(--surface); }
.mf-rider__color input { position: absolute; opacity: 0; pointer-events: none; }
.mf-rider__color.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mf-rider__color:has(input:focus-visible) { box-shadow: var(--focus); }
.mf-rider__chip { width: 30px; height: 30px; display: grid; place-items: center; font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.mf-rider__phrases { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
/* compact: the general .mf-chip is a 46px row control; these are one-tap word buttons */
.mf-rider__phrases .mf-chip { min-height: 32px; padding: 0 12px; gap: 0; border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: .02em; color: var(--ink-2); cursor: pointer; }
.mf-rider__phrases .mf-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.mf-rider__phrases .mf-chip:focus-visible { box-shadow: var(--focus); outline: 0; }
.mf-rider__proof { margin: 0 0 10px; }
.mf-rider__panel { width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.mf-rider__panel span { display: inline-block; }
.mf-rider__proof figcaption { margin-top: 6px; }
@media (max-width: 900px) {
  .mf-stgrid { grid-template-columns: 1fr; }
  .mf-strow a { grid-template-columns: 1fr; }
  .mf-strow__meta { justify-content: flex-start; }
  .mf-stco__outside { grid-template-columns: 1fr; }
}

/* Listing Studio phase 2: the listing's moments (Just Listed -> In Escrow -> Just Sold) */
.mf-stmoments { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 4px 0 16px; padding: 0; }
.mf-stmoments li { position: relative; padding-left: 14px; color: var(--muted); }
.mf-stmoments li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; }
.mf-stmoments li.is-open { color: inherit; }
.mf-stmoments li.is-open::before { opacity: 1; }
.mf-stgroup { margin: 18px 0 8px; font-size: 15px; }

/* Listing Studio: the template gallery (Studio\Gallery) and the per-listing design / per-piece photo dialogs */
.mf-gal { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mf-gal--dense { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mf-galcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mf-galcard__img { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--paper); overflow: hidden; border-radius: calc(var(--radius) / 2); }
.mf-galcard__img img { width: 100%; height: 100%; object-fit: contain; }
.mf-galcard__img .mf-tag { position: absolute; right: 6px; bottom: 6px; }
.mf-galcard__img--none { border: 1px dashed var(--line); }
.mf-galcard__body { display: flex; flex-direction: column; gap: 4px; }
.mf-galcard__body .mf-check { margin-top: 4px; }
dialog.mf-dialog--wide { max-width: 920px; max-height: calc(100vh - 48px); overflow: auto; }
.mf-ppslot { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 12px; }
.mf-ppslot legend { font-weight: 600; padding: 0 4px; }
.mf-ppgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.mf-ppopt { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.mf-ppopt input { position: absolute; opacity: 0; pointer-events: none; }
.mf-ppopt img, .mf-ppopt__none { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid transparent; border-radius: 4px; background: var(--paper); display: grid; place-items: center; }
.mf-ppopt--design img, .mf-ppopt--design .mf-ppopt__none { aspect-ratio: 4 / 5; object-fit: contain; }
.mf-ppopt input:checked + img, .mf-ppopt input:checked + .mf-ppopt__none { border-color: var(--ink); }
.mf-ppopt input:focus-visible + img { box-shadow: var(--focus); }
.mf-field--inline { flex-direction: row; align-items: center; gap: 8px; margin-top: 6px; }
.mf-field--inline span { margin: 0; }
/* Designs: rows that scroll sideways (scroll-snap; the arrows hide when a row fits), pick buttons, the page viewer */
.mf-railsec { margin-top: 28px; }
.mf-railsec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.mf-railsec__head h2, .mf-railsec__head h3 { margin: 0; }
/* Designs in two groups: For your listings, For your business */
.mf-galgroup { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.mf-galgroup:first-of-type { margin-top: 20px; padding-top: 0; border-top: 0; }
.mf-galgroup > h2 { margin: 0 0 4px; font-size: 1.5rem; }
.mf-galgroup > h2 + p { margin: 0; }
/* Designs marketing uploaded (designUploads) */
.mf-uploads { margin: 8px 0 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper, transparent); }
.mf-uploads .mf-railsec__head { align-items: flex-start; margin-bottom: 0; }
.mf-upls { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mf-upl { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mf-upl__main { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.mf-upl__thumb { flex: 0 0 96px; }
.mf-upl__thumb .mf-stpiece__img { margin: 0; border: 1px solid var(--line); }
.mf-upl__err { color: var(--err); }
.mf-upl__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mf-upl__acts select { max-width: 220px; }
/* progress ring (progressRing): thick accent arc over a thin slate track, the brokerage's initial inside */
.mf-ring { display: inline-flex; }
.mf-ring svg { transform: rotate(-90deg); overflow: visible; }
.mf-ring__track { fill: none; stroke: #747783; stroke-width: 1.5; opacity: .55; }
.mf-ring__bar { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.mf-ring__inner { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .9; }
.mf-ring__mark { fill: var(--accent); font: 400 26px/1 var(--display, Georgia, serif); transform: rotate(90deg); transform-origin: 40px 40px; }
.mf-galcard__img--making { flex-direction: column; gap: 10px; }
.mf-upl__ring .mf-ring svg { width: 40px; height: 40px; }
dialog.mf-dialog--upload { max-width: 640px; max-height: calc(100vh - 32px); overflow-x: hidden; overflow-y: auto; }
/* an upload's report (uploadReport): card, click-to-fix, side by side */
dialog.mf-dialog--report { max-width: 1120px; width: calc(100% - 32px); height: calc(100vh - 32px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
dialog.mf-dialog--report:not([open]) { display: none; }
.mf-dialog--report .mf-viewer__head h2 { font-size: 20px; }
.mf-dialog--report .mf-viewer__head .mf-iconbtn { margin-left: auto; }
.mf-rep__body { flex: 1; overflow: auto; padding: 0 20px 24px; }
.mf-rep__body .mf-tabs { position: sticky; top: 0; background: var(--surface); z-index: 2; margin-bottom: 18px; }
.mf-rep__good { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.mf-rep__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.mf-rep__cols h3, .mf-rep__h { margin-bottom: 4px; }
.mf-rep__h { margin-top: 28px; }
.mf-rep__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.mf-rep__list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-left: 3px solid var(--line); background: var(--paper); }
.mf-rep__list--fixed li { border-left-color: var(--ok); }
.mf-rep__list--look li { border-left-color: var(--warn); background: var(--warn-soft); }
.mf-rep__pg { flex: 0 0 auto; font-size: 12px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); padding: 2px 6px; cursor: pointer; border-radius: var(--radius); white-space: nowrap; }
.mf-rep__pg--file { cursor: default; color: var(--muted); }
.mf-rep__pgs { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 3px; max-width: 45%; }
.mf-rep__pages { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.mf-rep__pages button { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.mf-rep__pages img { width: 100%; border: 1px solid var(--line); background: var(--surface); }
.mf-rep__n--look { color: var(--warn); font-weight: 600; }
.mf-rep__n--fixed { color: var(--ok); font-weight: 600; }
.mf-rep__noimg { display: grid; place-items: center; min-height: 120px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.mf-rep__strip { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.mf-rep__strip button { min-width: 34px; padding: 4px 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; border-radius: var(--radius); }
.mf-rep__strip button[aria-current="true"] { background: var(--brand-ink, var(--ink)); color: #fff; border-color: var(--brand-ink, var(--ink)); }
.mf-rep__fix { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.mf-rep__canvas { position: relative; width: 100%; border: 1px solid var(--line); background: var(--surface); }
.mf-rep__fix .mf-rep__canvas { max-width: min(100%, calc((100vh - 220px) * 0.8)); }
.mf-rep__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.mf-rep__box { position: absolute; border: 1.5px solid var(--ink); background: color-mix(in srgb, #fff 18%, transparent); cursor: pointer; padding: 0; }
.mf-rep__box--image { border-style: dashed; border-color: #1f4e8c; }
.mf-rep__box span { position: absolute; left: -1px; top: -18px; font: 500 11px/16px var(--sans); background: var(--ink); color: #fff; padding: 0 5px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.mf-rep__box--image span { background: #1f4e8c; }
.mf-rep__box:hover span, .mf-rep__box:focus-visible span, .mf-rep__box.is-on span { opacity: 1; }
.mf-rep__box:hover, .mf-rep__box.is-on { background: color-mix(in srgb, #ffd54a 30%, transparent); border-width: 2px; z-index: 1; }
.mf-rep__side { display: grid; gap: 10px; align-content: start; position: sticky; top: 64px; padding: 16px; border: 1px solid var(--line); background: var(--paper); }
.mf-rep__side code { word-break: break-all; }
.mf-rep__pick { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mf-rep__pick .mf-btn { justify-self: start; }
.mf-rep__cmp { margin-bottom: 32px; }
.mf-rep__cmp h3 { margin-bottom: 8px; }
.mf-rep__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 18px; max-width: 900px; }
.mf-rep__pair figure { margin: 0; display: grid; gap: 6px; align-content: start; }
.mf-rep__pair figure > img { width: 100%; border: 1px solid var(--line); }
.mf-rep__flag { position: absolute; border: 2px solid var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.mf-rep__flag em { position: absolute; left: -2px; bottom: 100%; font: 600 11px/16px var(--sans); font-style: normal; background: var(--err); color: #fff; padding: 0 5px; white-space: nowrap; }
@media (max-width: 760px) {
  .mf-rep__fix, .mf-rep__pair { grid-template-columns: 1fr; }
  .mf-rep__side { position: static; }
  .mf-rep__body { padding: 0 12px 20px; }
}
.mf-upform { display: grid; gap: 12px; min-width: 0; }
.mf-upform > *, .mf-upform input, .mf-upform select { min-width: 0; max-width: 100%; }
.mf-upform input[type=file] { width: 100%; }
.mf-upform__how { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.mf-upform progress { width: 100%; }
.mf-upform__go { display: flex; justify-content: flex-end; }
.mf-railsec__head p { margin: 4px 0 0; max-width: 64ch; }
.mf-railsec__n { font: 500 12px/1 var(--sans); color: var(--muted); background: var(--line-2); border-radius: 999px; padding: 3px 8px; vertical-align: middle; }
.mf-railsec__nav { display: flex; gap: 6px; flex: none; }
.mf-iconbtn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); }
.mf-iconbtn:hover:not(:disabled) { border-color: var(--ink-2); }
.mf-iconbtn:disabled { opacity: .35; cursor: default; }
.mf-rail { list-style: none; margin: 0; padding: 2px 2px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 232px); gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin; }
.mf-rail > li { scroll-snap-align: start; }
@media (max-width: 600px) { .mf-rail { grid-auto-columns: 72%; } .mf-railsec__nav { display: none; } }
/* My listings on Home (portal.js myListings): photo first, four quick actions, nothing else */
.mf-rail[data-rail-list="mylistings"], .mf-mylist-sold .mf-rail { grid-auto-columns: minmax(260px, 300px); }
@media (max-width: 600px) { .mf-rail[data-rail-list="mylistings"], .mf-mylist-sold .mf-rail { grid-auto-columns: 86%; } }
.mf-mylist { position: relative; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.mf-mylist__img { display: block; aspect-ratio: 4 / 3; background: var(--line-2); overflow: hidden; }
.mf-mylist__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
a.mf-mylist__img:hover img { transform: scale(1.03); }
.mf-mylist__noimg { display: grid; place-items: center; height: 100%; color: var(--muted); }
.mf-mylist__noimg .mf-ic { width: 40px; height: 40px; }
.mf-mylist__pill { position: absolute; left: 10px; top: 10px; background: rgba(255, 255, 255, .94); }
.mf-mylist__body { padding: 12px 14px 10px; }
.mf-mylist__body h3 { margin: 0 0 2px; font: 400 18px/1.25 var(--display); letter-spacing: -.005em; }
.mf-mylist__body h3 a { color: inherit; text-decoration: none; }
.mf-mylist__body h3 a:hover { text-decoration: underline; }
.mf-mylist__body p { margin: 0; }
.mf-mylist__acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); }
.mf-mylist__act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 8px 4px; border: 0; background: none;
  font: 500 12px/1.2 var(--sans); color: var(--ink-2); text-decoration: none; text-align: center; cursor: pointer; }
.mf-mylist__act + .mf-mylist__act { border-left: 1px solid var(--line); }
.mf-mylist__act .mf-ic { width: 20px; height: 20px; color: var(--accent); vertical-align: 0; }
.mf-mylist__act:hover { background: var(--accent-soft); color: var(--ink); }
.mf-mylist__act:disabled { opacity: .5; cursor: progress; }
.mf-mylist__act.is-todo { position: relative; color: var(--accent); }
.mf-mylist__act.is-todo::after { content: ''; position: absolute; top: 10px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); }
.mf-mylist-empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mf-mylist-empty > .mf-ic { width: 28px; height: 28px; color: var(--accent); }
.mf-mylist-empty > div { flex: 1 1 220px; }
.mf-mylist-empty p { margin: 2px 0 0; }
.mf-mylist-sold { margin-top: 8px; }
.mf-mylist-sold > summary { cursor: pointer; font: 500 14px/1.4 var(--sans); color: var(--ink-2); padding: 6px 0 10px; list-style: none; }
.mf-mylist-sold > summary::-webkit-details-marker { display: none; }
.mf-mylist-sold > summary::after { content: '›'; display: inline-block; margin-left: 6px; transition: transform .2s var(--ease); }
.mf-mylist-sold[open] > summary::after { transform: rotate(90deg); }
button.mf-galcard__img { width: 100%; border: 0; padding: 0; cursor: zoom-in; transition: box-shadow .15s var(--ease); }
button.mf-galcard__img:hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.mf-galcard__body strong { font-size: 14px; line-height: 1.3; }
.mf-pick { align-self: flex-start; margin-top: 6px; font: 500 13px/1 var(--sans); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.mf-pick[aria-pressed="true"], .mf-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.mf-galuse { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
/* Every design: one card per design, its layouts in a menu; a layout's picture and actions show when chosen */
.mf-galpanel:not([hidden]) { display: contents; }
.mf-galvariant { margin: 8px 0 0; gap: 4px; }
.mf-galvariant select { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.mf-galuse > span { width: 100%; }
.mf-chip { font: 500 12px/1 var(--sans); padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
/* the gallery's moment chips are the same pill as "Use for my listings", not the 46px tag chip further up */
.mf-galuse .mf-chip { min-height: 0; gap: 0; font: 500 13px/1 var(--sans); padding: 8px 12px; }
.mf-chip:hover:not(:disabled), .mf-pick:hover:not(:disabled) { border-color: var(--ink-2); }
.mf-chip:disabled, .mf-pick:disabled { opacity: .5; cursor: default; }
dialog.mf-viewer { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
dialog.mf-viewer:not([open]) { display: none; }
.mf-viewer__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mf-viewer__head h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-viewer__stage { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 16px; background: var(--paper); }
.mf-viewer__stage img { max-width: 100%; max-height: calc(100vh - 260px); margin: 0 auto; object-fit: contain; box-shadow: var(--shadow); background: var(--surface); }
.mf-viewer__strip { list-style: none; margin: 0; padding: 10px 16px; display: flex; gap: 8px; overflow-x: auto; border-top: 1px solid var(--line); }
.mf-viewer__strip button { display: block; width: 64px; padding: 0; border: 2px solid transparent; background: var(--paper); cursor: pointer; }
.mf-viewer__strip button[aria-current="page"] { border-color: var(--accent); }
.mf-viewer__strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
@media (max-width: 600px) { .mf-viewer__stage { grid-template-columns: 1fr; } .mf-viewer__nav { display: none; } }

/* a lower card that is the last (or only) child: its drop is the ::before's right border, so that is as tall as the
   ::after of its siblings (Zandra under the coordinators she supports), and the stub above it is dashed with it */
.org-tree li.is-lower::before { height: 80px; }
.org-tree ul.has-caps > li.is-lower::before { height: 104px; }
.org-tree ul:has(> li.is-support:only-child)::before { background: none; width: 0; border-left: 1px dashed var(--org-brand); }

/* My Brand: the Zillow reviews import bar above the testimonials */
.mf-zillow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Insights (docs/eu-iq 8) ---------- */
.mf-incontrols .mf-field { min-width: 160px; flex: 0 1 auto; }
.mf-intiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.mf-intile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; }
.mf-intile span { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.mf-intile b { font-size: 26px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mf-intile small { font-size: 12px; color: var(--muted); }
.mf-insec { margin-top: 28px; }
.mf-inhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mf-intable .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-infunnel { display: grid; gap: 10px; max-width: 760px; }
.mf-infunnel > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px 48px; gap: 12px; align-items: center; font-size: 14px; }
.mf-infunnel__bar { height: 14px; background: var(--line-2); border-radius: 7px; overflow: hidden; }
.mf-infunnel__bar i { display: block; height: 100%; background: var(--accent); border-radius: 7px; }
.mf-infunnel b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.mf-infunnel small { color: var(--muted); text-align: right; }
.mf-inbars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.mf-inbar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.mf-inbar span { width: 100%; max-width: 44px; background: var(--accent); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.mf-inbar i { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font: 500 11px/1 var(--sans); color: var(--ink-2); font-style: normal; }
.mf-inbar small { font-size: 10px; color: var(--muted); margin-top: 6px; white-space: nowrap; transform: translateY(100%); position: absolute; }
.mf-inbars { position: relative; margin-bottom: 26px; }
.mf-inbar { position: relative; }
@media (max-width: 640px) { .mf-infunnel > div { grid-template-columns: 110px minmax(0, 1fr) 54px; } .mf-infunnel small { display: none; } .mf-inbar small { display: none; } }

/* ---------- Exclusives (docs/eu-iq 7) ---------- */
.mf-exptags { margin: 0 0 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.mf-tag--exp { background: var(--brand-ink, var(--ink)); color: #fff; }
.mf-tag--shared { background: var(--accent-soft); color: var(--accent); }
.mf-exclusive .mf-check span { font-size: 14px; line-height: 1.45; }
.mf-exdoc { margin: 8px 0 14px; }
.mf-exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mf-excard__btn { display: grid; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer;
  font: inherit; color: inherit; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.mf-excard__btn:hover { border-color: var(--ink-2); box-shadow: var(--shadow); }
.mf-excard__btn:focus-visible { box-shadow: var(--focus); outline: 0; }
.mf-excard__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.mf-excard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-excard__img .mf-tag { position: absolute; left: 10px; top: 10px; }
.mf-excard__body { display: grid; gap: 3px; padding: 12px 14px 14px; font-size: 14px; }
.mf-excard__body b { font-size: 18px; font-weight: 500; color: var(--ink); }
.mf-excard__agent { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.mf-excard__agent img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.mf-exdetail { position: fixed; inset: 0; z-index: 70; background: rgba(15, 16, 18, .55); overflow: auto; padding: 24px 16px; }
.mf-exdetail__inner { position: relative; max-width: 1040px; margin: 0 auto; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.mf-exdetail__close { position: absolute; right: 12px; top: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 22px; line-height: 1; cursor: pointer; }
.mf-exgallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 460px; overflow: hidden; }
.mf-exgallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mf-exgallery img.is-hero { grid-column: span 2; grid-row: span 2; }
.mf-exdetail__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 24px 28px 32px; }
.mf-exeyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.mf-exprice { font-size: 20px; margin: 4px 0 16px; }
.mf-exprice .mf-muted { font-size: 14px; }
.mf-exagent { align-self: start; position: sticky; top: 16px; }
.mf-exagent img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.mf-exagent h3 { margin: 2px 0 6px; }
@media (max-width: 800px) { .mf-exdetail__body { grid-template-columns: 1fr; padding: 18px; } .mf-exgallery { grid-template-columns: repeat(2, 1fr); max-height: none; } .mf-exagent { position: static; } }

/* ---------- The bell, notifications and announcements (docs/eu-iq 6) ---------- */
.mf-bell { position: relative; margin-left: auto; flex: none; }
.mf-bell + .mf-me { margin-left: 0; }
.mf-bell > summary { list-style: none; cursor: pointer; }
.mf-bell > summary::-webkit-details-marker { display: none; }
.mf-bell__btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink-2); transition: background .2s, color .2s; }
.mf-bell__btn:hover, .mf-bell[open] .mf-bell__btn { background: var(--line-2); color: var(--ink); }
.mf-bell__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mf-bell__count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
  font: 600 11px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.mf-bell__count[hidden] { display: none; }
.mf-bell__panel { position: absolute; right: -52px; top: calc(100% + 10px); z-index: 40; width: 360px; max-width: calc(100vw - 24px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.mf-bell__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 8px; }
.mf-bell__head b { font-weight: 500; }
.mf-bell__list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 420px); overflow: auto; }
.mf-bell__list a { display: grid; gap: 2px; padding: 10px 12px 10px 22px; border-radius: var(--radius); text-decoration: none; color: var(--ink-2); position: relative; }
.mf-bell__list a:hover { background: var(--line-2); }
.mf-bell__list b { font-weight: 500; color: var(--ink); font-size: 14px; line-height: 1.35; }
.mf-bell__list span { font-size: 13px; line-height: 1.4; }
.mf-bell__list time { font-size: 12px; color: var(--muted); }
.mf-bell__list .is-unread a::before { content: ""; position: absolute; left: 9px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mf-bell__empty { margin: 0; padding: 16px 12px; font-size: 14px; color: var(--muted); }
.mf-bell__foot { display: block; margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 13px; text-decoration: none; color: var(--ink); }
.mf-pushask { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); display: flex; gap: 12px 16px;
  align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.mf-pushask p { margin: 0; font-size: 14px; flex: 1 1 240px; }
.mf-pushask div { display: flex; gap: 8px; }
.mf-ntdevices { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mf-ntdevices li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mf-ntdevices li span:first-child { font-weight: 500; }
.mf-ntdevices .mf-link { margin-left: auto; }
.mf-ntprefs th[scope="row"] { font-weight: 400; text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.mf-ntprefs td, .mf-ntprefs thead th:not(:first-child) { text-align: center; width: 120px; }
.mf-ntprefs input { width: 18px; height: 18px; }
.mf-nthead { display: flex; justify-content: space-between; align-items: baseline; }
.mf-ntlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-ntlist a { display: grid; gap: 2px; padding: 12px 16px 12px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink-2); position: relative; }
.mf-ntlist a:hover { border-color: var(--ink-2); }
.mf-ntlist .is-unread a::before { content: ""; position: absolute; left: 12px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mf-ntlist b { font-weight: 500; color: var(--ink); }
.mf-ntlist span, .mf-ntlist time { font-size: 13px; }
.mf-ntlist time, .mf-ntcat { color: var(--muted); }
.mf-ntcat { font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; }
.mf-anform { margin-bottom: 20px; }
.mf-anform__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.mf-anpreview { position: sticky; top: calc(var(--top-h) + 16px); display: grid; gap: 12px; }
.mf-anpreview > p { margin: 0; }
.mf-anpush { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #f2f2f4; color: #1b1b1b; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 20px -12px rgba(0,0,0,.35); }
.mf-anpush__app { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.mf-anpush b, .mf-anpush span { overflow-wrap: anywhere; }
.mf-anpush span:last-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mf-anbell { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mf-anreport { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0; }
.mf-anreport div { background: var(--paper); border-radius: var(--radius); padding: 10px 12px; }
.mf-anreport dt { font-size: 12px; color: var(--muted); }
.mf-anreport dd { margin: 2px 0 0; font-size: 18px; color: var(--ink); }
@media (max-width: 860px) { .mf-anform__grid { grid-template-columns: 1fr; } .mf-anpreview { position: static; } }
@media (max-width: 640px) { .mf-bell__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--top-h) + 6px); width: auto; } }

/* ---------- Hubs and the avatar menu (Layout::HUBS, Layout::meMenu; Zach, 2026-10-02) ---------- */
/* The avatar, top right: the agent's headshot or initials; a <details> menu with My Profile, Account, Help, Sign out. */
.mf-me { position: relative; margin-left: auto; flex: none; }
.mf-me > summary { list-style: none; cursor: pointer; display: block; border-radius: 50%; }
.mf-me > summary::-webkit-details-marker { display: none; }
.mf-me > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mf-me__av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--line-2); color: var(--ink);
  font-size: 13px; font-weight: 500; letter-spacing: .04em; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s; }
.mf-me__av img { width: 100%; height: 100%; object-fit: cover; }
.mf-me[open] .mf-me__av, .mf-me > summary:hover .mf-me__av { box-shadow: 0 0 0 2px var(--ink); }
.mf-me__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: max-content; min-width: 240px; max-width: calc(100vw - 32px); padding: 8px;
  display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.mf-me__who { margin: 0 0 6px; padding: 8px 12px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.mf-me__who b { font-weight: 500; color: var(--ink); font-size: 15px; }
.mf-me__who span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.mf-me__menu a { display: block; padding: 9px 12px; border-radius: var(--radius); text-decoration: none; color: var(--ink-2); font-size: 14px; }
.mf-me__menu a:hover { background: var(--line-2); color: var(--ink); }
.mf-me__menu a[aria-current="page"] { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.mf-me__user { margin: 6px 0 0; padding: 10px 12px 2px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* A hub's tabs (Agent Website · My Profile · Leads): links, so each tab has its own address. */
.mf-hubtabs { display: flex; gap: 4px; margin: -12px 0 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.mf-hubtabs::-webkit-scrollbar { display: none; }
.mf-hubtabs a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .15s, border-color .15s; }
.mf-hubtabs a:hover { color: var(--ink); }
.mf-hubtabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) {
  .mf-hubtabs { margin: -8px -16px 22px; padding: 0 12px; }
  .mf-hubtabs a { padding: 10px 10px; }
  .mf-me__av { width: 34px; height: 34px; font-size: 12px; }
}

/* Lead Generation Studio: weekly booking hours */
.mf-lg-days { display: grid; gap: 8px; }
.mf-lg-day { display: grid; grid-template-columns: 9rem 8rem auto 8rem; gap: 10px; align-items: center; }
.mf-lg-day .mf-field { margin: 0; }
@media (max-width: 560px) { .mf-lg-day { grid-template-columns: 1fr 1fr; } .mf-lg-day > span { display: none; } .mf-lg-day .mf-check { grid-column: 1 / -1; } }
.mf-tabs--links a { padding: 12px 14px; color: var(--muted); font-weight: 500; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.mf-tabs--links a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.mf-lg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mf-lg-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mf-lg-card { display: grid; gap: 10px; align-content: start; }
.mf-lg-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mf-lg-card h3 { margin: 4px 0 2px; font: 400 21px/1.2 var(--display); }
.mf-lg-card h3 a { color: inherit; text-decoration: none; }
.mf-lg-choices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mf-lg-choices .mf-choice-card > span { display: grid; gap: 6px; }
.mf-lg-photos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.mf-lg-photo { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; }
.mf-lg-photo input { position: absolute; opacity: 0; }
.mf-lg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-lg-photo__none { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.mf-lg-photo:has(input:checked) { outline: 3px solid var(--ink); outline-offset: -3px; }
.mf-lg-photo:has(input:focus-visible) { outline: 3px solid var(--accent); }
.mf-lg-preview { display: grid; gap: 14px; }
.mf-lg-frame { background: var(--line-2); border-radius: var(--radius); padding: 12px; display: flex; justify-content: center; overflow: hidden; }
.mf-lg-frame iframe { height: 760px; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fff; transition: width .25s; }
.mf-lg-qr { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 16px 0; }
.mf-lg-qr img { border: 1px solid var(--line); border-radius: 6px; }
.mf-lg-qr > div { display: grid; gap: 8px; justify-items: start; }
.mf-lg-dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end; margin: 8px 0 20px; }
.mf-lg-dash-head h2 { margin: 4px 0; font: 400 28px/1.15 var(--display); }
.mf-lg-funnel { margin: 14px 0 0; display: grid; gap: 12px; }
.mf-lg-funnel div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; font-size: 14px; }
.mf-lg-funnel dd { margin: 0; display: flex; align-items: center; gap: 10px; }
.mf-lg-funnel dd span { height: 14px; background: var(--accent); border-radius: 3px; }
.mf-lg-funnel dd b { font-weight: 500; }
@media (max-width: 560px) { .mf-lg-funnel div { grid-template-columns: 1fr; gap: 4px; } }

/* My Profile → Notable sales: import from an MLS export (Services\SalesImport); preview first, then add. */
.mf-mlsimp { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.mf-mlsimp > div:first-child { flex: 1 1 420px; }
.mf-mlsimp__plan { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); }
/* Lead Generation Studio: calendar sync (LeadGen\CalendarSync) */
.mf-lg-cals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mf-lg-cals li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mf-lg-cals .mf-check { margin: 0; }
.mf-lg-cals .mf-small { padding-left: 28px; }
.mf-lg-copy { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.mf-lg-copy .mf-input { flex: 1; min-width: 0; font-size: 13px; }
.mf-error { color: var(--err); }
.mf-lg-win th,.mf-lg-win td{font-weight:600}

/* Agent Network (docs/mls-email) */
.nw-listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.nw-listing { padding: 0; overflow: hidden; display: grid; grid-template-rows: 150px 1fr; }
.nw-listing + .nw-listing { margin-top: 0; }
.nw-listing__img { background: var(--line-2) center / cover no-repeat; }
.nw-listing__body { padding: 16px; display: grid; gap: 6px; align-content: start; }
.nw-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nw-kinds .mf-chip { min-height: 32px; cursor: pointer; }
.nw-kinds .mf-chip { min-height: 36px; padding: 0 12px 0 10px; gap: 8px; font-size: 13px; line-height: 1.2; }
/* the portal styles every input full width with padding; a checkbox or radio in a chip stays a small native control */
.nw-kinds .mf-chip input[type="checkbox"], .nw-kinds .mf-chip input[type="radio"] { width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); box-shadow: none; }
/* previews: the email laid out at 640px and scaled to the width available (nwFit), never scrolled sideways */
.nw-fw { position: relative; width: 100%; max-width: 640px; min-width: 0; height: 480px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
/* absolute, so the 640px frame never widens its card: the card sets the width and nwFit scales the email down to it */
.nw-frame { position: absolute; top: 0; left: 0; display: block; border: 0; transform-origin: 0 0; background: #fff; }
.nw-preview { display: grid; gap: 0; justify-items: stretch; max-width: 640px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.nw-gallery { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.nw-gallery > * { min-width: 0; }
.nw-tpl + .nw-tpl { margin-top: 0; }
.nw-tpl__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.nw-tpl .nw-fw { margin-top: 16px; }
.nw-tpl__acts { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.nw-kindsel { margin: 0; min-width: 190px; }
.nw-tpl.is-approved { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }

/* ---------- Icons (portal/icons.svg, Phosphor Light; 2026-10-19) ---------- */
.mf-ic { width: 18px; height: 18px; flex: none; fill: currentColor; vertical-align: -3px; }
.mf-nav a { display: flex; align-items: center; gap: 11px; }
.mf-nav a .mf-ic { color: var(--muted); transition: color .15s; }
.mf-nav a:hover .mf-ic, .mf-nav a[aria-current="page"] .mf-ic { color: var(--accent); }
.mf-me__menu a { display: flex; align-items: center; gap: 10px; }
.mf-me__menu a .mf-ic { color: var(--muted); }
.mf-btn .mf-ic { width: 16px; height: 16px; margin-left: -2px; }
.mf-qa li .mf-ic { color: var(--warn); margin-right: 8px; }
.mf-h3 .mf-ic { margin-right: 8px; color: var(--accent); }

/* ---------- Home (the overview of every tool, Zach 2026-10-19) ---------- */
.mf-home-ann { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: -8px 0 24px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.mf-home-ann .mf-ic { color: var(--accent); }
.mf-home-ann span:first-of-type { flex: 1; min-width: 0; }
.mf-home-ann__go { font-size: 13px; font-weight: 500; color: var(--accent); }
.mf-home-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mf-home-strip a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color .15s; }
.mf-home-strip a:hover, .mf-home-strip a:focus-visible { border-color: var(--ink); }
.mf-home-strip a .mf-ic { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--accent); }
.mf-home-strip a.is-warn .mf-ic { color: var(--warn); }
.mf-home-strip b { font: 500 22px/1 var(--display); letter-spacing: -.01em; }
.mf-home-strip span { font-size: 13px; color: var(--muted); }
.mf-home-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-home-launch .mf-section-head h2 { font-size: 18px; }
.mf-home-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.mf-home-tool { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 18px 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.mf-home-tool:hover, .mf-home-tool:focus-visible { border-color: var(--ink); transform: translateY(-1px); }
.mf-home-tool__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.mf-home-tool__ic .mf-ic { width: 20px; height: 20px; }
.mf-home-tool__body { min-width: 0; }
.mf-home-tool h3 { margin: 2px 0 0; font-size: 15px; }
.mf-home-tool p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mf-home-tool__state { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 3px 8px; background: var(--line-2); border-radius: 99px; }
.mf-home-tool__go { align-self: center; color: var(--muted); transition: transform .15s, color .15s; }
.mf-home-tool:hover .mf-home-tool__go { color: var(--ink); transform: translateX(2px); }
.mf-home-help { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px dashed #d6d1c8; border-radius: var(--radius); color: var(--ink-2); }
.mf-home-help .mf-ic { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.mf-home-help p { margin: 0; font-size: 14px; }
@media (max-width: 640px) { .mf-home-actions .mf-btn { flex: 1 1 100%; } .mf-home-tools { grid-template-columns: 1fr; } }

/* ---------- Help Center ---------- */
.mf-help { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: 32px; align-items: start; }
@media (max-width: 960px) { .mf-help { grid-template-columns: 1fr; } }
.mf-help-search { position: relative; margin: 0 0 14px; }
.mf-help-search .mf-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.mf-help-search input { padding-left: 42px; min-height: 46px; }
.mf-help-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.mf-help-cat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.mf-help-cat .mf-ic { width: 16px; height: 16px; color: var(--muted); }
.mf-help-cat:hover { border-color: var(--ink); color: var(--ink); }
.mf-help-cat[aria-pressed="true"] { background: var(--brand-ink, var(--ink)); border-color: var(--brand-ink, var(--ink)); color: #fff; }
.mf-help-cat[aria-pressed="true"] .mf-ic { color: #fff; }
.mf-help-arts { display: grid; gap: 28px; }
.mf-help-group h2 { display: flex; align-items: center; margin: 0 0 10px; font-size: 16px; }
.mf-help-art { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; }
.mf-help-art + .mf-help-art { margin-top: 8px; }
.mf-help-art summary { cursor: pointer; padding: 14px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.mf-help-art summary::-webkit-details-marker { display: none; }
.mf-help-art summary::after { content: '+'; color: var(--muted); font-weight: 400; }
.mf-help-art[open] summary::after { content: '−'; }
.mf-help-art p { margin: 0 0 16px; color: var(--ink-2); max-width: 70ch; }
.mf-help-ask h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.mf-help-ask h2 .mf-ic { color: var(--accent); }

/* ---------- Quiet, collapsed sections (the optional extras, e.g. other languages) ---------- */
details.mf-fieldset--quiet { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 16px; }
details.mf-fieldset--quiet > summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 14px; color: var(--ink-2); }
details.mf-fieldset--quiet > summary::-webkit-details-marker { display: none; }
details.mf-fieldset--quiet > summary .mf-ic { color: var(--muted); }
details.mf-fieldset--quiet > summary > span:first-of-type { font-weight: 500; color: var(--ink); }
details.mf-fieldset--quiet > summary > .mf-small { margin-left: auto; }
details.mf-fieldset--quiet[open] > summary { border-bottom: 1px solid var(--line-2); margin-bottom: 16px; }
.mf-fieldset--inner { padding-bottom: 16px; }
.mf-fieldset--inner .mf-i18n legend { font-size: 16px; }
.mf-guide__langs { display: inline-flex; gap: 6px; align-items: center; margin-left: 4px; }
.mf-guide__langs a { color: var(--ink-2); }
.mf-twins { margin-top: 6px !important; }
.mf-twins .mf-link { margin-right: 4px; }

/* ---------- Search (Ctrl K) ---------- */
.mf-search-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.mf-search-btn:hover { border-color: var(--ink); color: var(--ink); }
.mf-search-btn kbd { font: 500 11px/1 var(--sans); padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.mf-search-btn + .mf-bell, .mf-search-btn + .mf-me { margin-left: 0; }
.mf-search { width: min(640px, calc(100vw - 32px)); margin: 10vh auto 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: 0 24px 64px -24px rgba(23, 24, 26, .4); }
.mf-search::backdrop { background: rgba(23, 24, 26, .32); backdrop-filter: blur(2px); }
.mf-search__form { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mf-search__form .mf-ic { color: var(--muted); width: 20px; height: 20px; }
.mf-search__form input { flex: 1; border: 0; outline: none; font-size: 17px; background: transparent; min-width: 0; }
.mf-search__form input:focus-visible { box-shadow: none; }
.mf-search__close { font: 500 11px/1 var(--sans); padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.mf-search__results { max-height: min(60vh, 520px); overflow: auto; padding: 8px; }
.mf-search__results ul { list-style: none; margin: 0; padding: 0; }
.mf-search__results a { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 4px; color: inherit; text-decoration: none; }
.mf-search__results li[aria-selected="true"] a, .mf-search__results a:hover { background: var(--line-2); }
.mf-search__results .mf-ic { color: var(--accent); }
.mf-search__label { display: grid; min-width: 0; }
.mf-search__label b { font-weight: 500; }
.mf-search__label span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-search__kind { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mf-search__hint { margin: 0; padding: 18px 14px; font-size: 14px; color: var(--muted); }

/* ---------- Skeletons ---------- */
.mf-skel { display: grid; gap: 12px; }
.mf-skel > span, .mf-skel__row > span { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--line-2) 0%, #f3f1ec 40%, var(--line-2) 80%); background-size: 200% 100%; animation: mf-shimmer 1.4s linear infinite; }
.mf-skel__eyebrow { width: 90px; height: 10px; }
.mf-skel__h1 { width: min(380px, 60%); height: 34px; margin: 4px 0 2px; }
.mf-skel__p { width: min(520px, 80%); height: 14px; }
.mf-skel__h2 { width: 160px; height: 20px; margin-top: 20px; }
.mf-skel__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.mf-skel__card { height: 120px; }
.mf-skel__block { height: 180px; }
.mf-skel__line { height: 52px; }
.mf-skel__field { height: 44px; }
@keyframes mf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mf-skel > span, .mf-skel__row > span { animation: none; } }

/* ---------- The phone's bottom bar ---------- */
.mf-tabbar { display: none; }
@media (max-width: 900px) {
  .mf-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.2) blur(8px); border-top: 1px solid var(--line); }
  .mf-tabbar a, .mf-tabbar button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--muted); font: 500 10.5px/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; }
  .mf-tabbar .mf-ic { width: 22px; height: 22px; }
  .mf-tabbar a[aria-current="page"] { color: var(--accent); }
  .mf-tabbar a[aria-current="page"] span { color: var(--ink); }
  .mf-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mf-nav { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mf-search-btn span, .mf-search-btn kbd { display: none; }
  .mf-search-btn { padding: 0; width: 36px; justify-content: center; border-color: transparent; }
  .mf-search { margin-top: 4vh; }
  .mf-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* a dotted head (2026-10-19): a dashed connector, the card in full colour, its reports beneath */
.org-tree li.is-dotted::before { border-top-style: dashed; border-right-style: dashed; }
.org-tree li.is-dotted::after { border-top-style: dashed; border-left-style: dashed; }
.org-tree ul:not(:has(> li:not(.is-support, .is-dotted)))::before { background: none; width: 0; border-left: 1px dashed var(--org-brand); }
/* the pool row: support cards drawn once, under the tree */
.org-pool { margin: 26px auto 0; text-align: center; }
.org-pool__cap { margin: 0 0 2px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.org-pool__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; margin: 0; padding: 0; }
.org-pool__row li { padding: 0; }
.org-pool .org-node { background: color-mix(in srgb, var(--org-brand) 78%, #fff); }

/* Agent Network report (nwReport): opens by hour, list health, the note under it */
.nw-report .mf-card { margin-bottom: 16px; }
.nw-report__main .mf-intile b { font-size: 30px; }
.nw-tile--warn { border-color: var(--warn, #b7791f); }
.nw-health .mf-intiles { margin-bottom: 8px; }
.nw-hours { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.nw-hours span { flex: 1 1 0; min-height: 1px; background: var(--accent, #17457a); border-radius: 2px 2px 0 0; opacity: .85; }
.nw-hours__axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.nw-report__note { max-width: 68ch; }
@media (max-width: 620px) { .nw-sm-hide { display: none; } .nw-report .mf-intable th, .nw-report .mf-intable td { padding-left: 8px; padding-right: 8px; } .nw-report__main { grid-template-columns: 1fr 1fr; } .nw-report__main .mf-intile b { font-size: 24px; } .nw-hours { gap: 1px; height: 96px; } }

/* ---- Agent Network home (Zach 2026-10-21): send first, photo-first listings, agents by city -------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw-send { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin: 0 0 40px; display: grid; gap: 18px; }
.nw-send__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.nw-send__head h2 { margin: 0 0 6px; }
.nw-send__head p { margin: 0; max-width: 60ch; }
.nw-send__left { margin: 0; padding: 8px 14px; background: var(--paper); border-radius: 999px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.nw-send__left b { color: var(--ink); font-size: 15px; }
.nw-nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--warn-soft); border-left: 3px solid var(--warn); font-size: 14px; }
.nw-send__to { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--paper); font-size: 14px; }
.nw-send__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nw-send__to .mf-link { margin-left: auto; }
.nw-send__search input, .nw-dir__search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; background: var(--surface) no-repeat 14px 50% / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f75' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.nw-send__search input:focus, .nw-dir__search input:focus { outline: none; box-shadow: var(--focus); }
.nw-send__fine { margin: 0; }
.nw-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.nw-pick { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: var(--surface); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.nw-pick:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: var(--shadow); }
.nw-pick__img { position: relative; aspect-ratio: 16 / 10; background: var(--line-2); overflow: hidden; }
.nw-pick__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-pick__img.is-empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.nw-pick__status { position: absolute; left: 12px; top: 12px; padding: 4px 10px; background: rgba(255, 255, 255, .92); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.nw-pick__body { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.nw-pick__addr { font-size: 16px; line-height: 1.3; }
.nw-pick__ask { margin: 10px 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nw-pick__kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-kindbtn { min-height: 40px; padding: 0 16px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--radius); transition: background .15s var(--ease), color .15s var(--ease); }
.nw-kindbtn:hover, .nw-kindbtn:focus-visible { background: var(--accent); color: #fff; outline: none; }
.nw-kindbtn:disabled { opacity: .6; cursor: progress; }
.nw-pick__not { margin: 6px 0 0; }
.nw-pick__not span { cursor: help; }
.nw-reach .nw-dir { display: grid; gap: 14px; margin-top: 12px; }
.nw-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nw-sel__chip { min-height: 34px; padding: 0 12px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 13px; cursor: pointer; border-radius: 999px; }
.nw-sel__chip span { margin-left: 4px; opacity: .8; }
.nw-region { border-top: 1px solid var(--line); }
.nw-region:last-child { border-bottom: 1px solid var(--line); }
.nw-region > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 4px; cursor: pointer; list-style: none; }
.nw-region > summary::-webkit-details-marker { display: none; }
.nw-region > summary::before { content: '+'; width: 18px; color: var(--muted); font-size: 18px; line-height: 1; }
.nw-region[open] > summary::before { content: '−'; }
.nw-region__name { flex: 1; font-weight: 500; font-size: 15px; }
.nw-region__counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.nw-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 0 0 18px 22px; }
.nw-city { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 14px; text-align: left; border-radius: var(--radius); cursor: pointer; color: var(--ink); }
.nw-city:hover:not(:disabled):not(.is-static) { border-color: var(--accent); }
.nw-city.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.nw-city.is-on .nw-city__n { color: #fff; }
.nw-city:disabled { opacity: .45; cursor: not-allowed; }
.nw-city.is-static { cursor: default; }
.nw-city__n { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.nw-dir__none { padding: 16px 4px; margin: 0; }
.nw-more { margin-top: 16px; padding: 0; }
.nw-more > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 24px; cursor: pointer; list-style: none; }
.nw-more > summary::-webkit-details-marker { display: none; }
.nw-more[open] > summary { border-bottom: 1px solid var(--line); }
.nw-more > :not(summary) { margin-left: 24px; margin-right: 24px; }
.nw-more > form, .nw-more > p:last-child, .nw-more > .mf-table-wrap { margin-bottom: 24px; }
.nw-more [data-nw-sender] { border: 0; padding: 0; margin: 16px 24px 24px; }
.nw-more [data-nw-sender] > h2 { display: none; }
@media (max-width: 640px) {
  .nw-send { padding: 18px; margin-bottom: 28px; }
  .nw-send__to .mf-link { margin-left: 0; }
  .nw-picks { grid-template-columns: 1fr; }
  .nw-cities { grid-template-columns: 1fr 1fr; padding-left: 0; }
  .nw-city { font-size: 13px; padding: 0 10px; }
  [data-nw] .mf-intable th:nth-child(n+3):not(:last-child), [data-nw] .mf-intable td:nth-child(n+3):not(:last-child) { display: none; } /* phones: the email, its status and when */
  .nw-more > summary { padding: 16px; }
  .nw-more > :not(summary) { margin-left: 16px; margin-right: 16px; }
}
/* Marketing-only luxury switches on the profile (Zach 2026-10-22) */
.mf-luxopts { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, rgba(116,119,131,.25)); }
/* Residential | Luxury logo tabs (Zach 2026-10-22) */
.mf-section .mf-seg { margin: 4px 0 16px; }
.mf-logo-note { margin: 8px 0 0; }
.mf-logo-acts { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mf-kitfam { margin: 22px 0 10px; }
.mf-kitfam:first-of-type { margin-top: 4px; }
/* Lead Generation Studio: the guide editor (LG10) */
.mf-lg-sec{margin-bottom:12px}
.mf-lg-sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:44px}
.mf-lg-sec>summary h3{margin:0}
.mf-lg-sec>summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted)}
.mf-lg-sec[open]>summary::after{content:"\2013"}
.mf-lg-sec[open]>summary{margin-bottom:12px}
.mf-lg-ch{margin-top:16px}
.mf-lg-ch textarea[name$="_body"]{font-family:var(--sans);font-size:14px;line-height:1.6}
.mf-lg-sticky{position:sticky;bottom:0;z-index:5;padding:12px 0;background:var(--bg,#fff);border-top:1px solid var(--line)}
.mf-lg-grid>.mf-card{margin:0}
.mf-lg-sec .mf-field{margin-bottom:15px}
.mf-lg-sec .mf-fieldset{margin-top:15px}
.mf-lg-video video{display:block;width:100%;max-width:420px;max-height:70vh;background:#111;margin:12px 0}

/* ---------- Calm pages (Zach 2026-10-24: "intentional and clean, not so much scrolling") ------------------------------
   One line of help under a heading, the rest behind an info tip; a sticky find-and-index bar on long pages; choices
   already made folded into a single line; one rhythm: 40px between sections, 16px under a heading. */
.mf-hint { color: var(--muted); font-size: 14px; line-height: 1.5; margin: -6px 0 16px; max-width: 72ch; }
.mf-hint .mf-tip, .mf-small .mf-tip, .mf-field > span .mf-tip, .mf-field small .mf-tip { margin-left: 6px; }
.mf-field > span .mf-tip { vertical-align: -4px; }
.mf-tip__txt { width: min(280px, 78vw); white-space: normal; text-align: left; }
.mf-tip.is-open .mf-tip__txt { opacity: 1; visibility: visible; }
.mf-tip__btn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }

/* The find-and-index bar: sticks under the top bar, edge to edge across the content column. */
.mf-wf { --wf-pad: clamp(20px, 4vw, 56px); position: sticky; top: var(--top-h); z-index: 15; display: flex; align-items: center; gap: 20px;
  margin: -12px calc(-1 * var(--wf-pad)) 32px; padding: 10px var(--wf-pad); background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.mf-wf__find { position: relative; flex: 0 0 260px; display: flex; align-items: center; }
.mf-wf__find .mf-ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.mf-wf__find input, .mf-find input { width: 100%; min-height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 14px; }
.mf-wf__find input:focus, .mf-find input:focus { border-color: var(--ink); outline: none; box-shadow: var(--focus); }
.mf-wf__count { position: absolute; right: 14px; color: var(--muted); pointer-events: none; background: var(--surface); padding-left: 6px; }
.mf-wf__index { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.mf-wf__index::-webkit-scrollbar { display: none; }
.mf-wf__index a { flex: none; padding: 7px 12px; border-radius: 99px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.mf-wf__index a:hover { color: var(--ink); background: var(--line-2); }
.mf-wf__index a[aria-current] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mf-wf.is-filtering .mf-wf__index a { color: var(--ink); }
[data-wf-sec] { scroll-margin-top: calc(var(--top-h) + 76px); }
.is-wf-out { display: none !important; }
@media (max-width: 900px) {
  /* Phones (Zach, 2026-10-24: "on the agent profile, there's some internal scrolling"): no bleed past the page's own
     padding, and the section index scrolls inside the bar instead of widening the page. */
  .mf-wf { --wf-pad: 0px; flex-direction: column; align-items: stretch; gap: 8px; padding-block: 8px; margin-top: -8px; margin-inline: 0; max-width: 100%; }
  .mf-wf__find { flex: none; }
  .mf-wf__index { max-width: 100%; }
  .mf-main { overflow-x: clip; }
  [data-wf-sec] { scroll-margin-top: calc(var(--top-h) + 108px); }
}
@media (prefers-reduced-motion: reduce) { .mf-wf__index { scroll-behavior: auto; } }

/* Agent Website at a glance: the four facts an agent checks, in one quiet row instead of a status grid at the bottom. */
.mf-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -8px 0 40px; border-block: 1px solid var(--line); }
.mf-glance > div { padding: 14px 20px 14px 0; min-width: 0; }
.mf-glance > div + div { padding-left: 20px; border-left: 1px solid var(--line-2); }
.mf-glance dt { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mf-glance dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.mf-glance a { color: var(--ink); }
@media (max-width: 760px) {
  .mf-glance { grid-template-columns: 1fr 1fr; }
  .mf-glance > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .mf-glance > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

/* A choice already made: one line with the current choice, opened to change it. */
details.mf-fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.mf-fold > summary { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
details.mf-fold > summary::-webkit-details-marker { display: none; }
details.mf-fold > summary h2 { flex: none; }
.mf-fold__meta { color: var(--muted); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-fold__go { margin-left: auto; align-self: center; display: inline-flex; color: var(--muted); transition: transform .2s var(--ease); }
.mf-fold__go .mf-ic { width: 18px; height: 18px; }
details.mf-fold > summary:hover .mf-fold__go { color: var(--ink); }
details.mf-fold[open] > summary .mf-fold__go { transform: rotate(180deg); }
.mf-fold__body { padding: 0 0 24px; }
/* folds in a row read as one list: no gap, one rule between them */
.mf-section:has(> details.mf-fold):has(+ .mf-section > details.mf-fold) { margin-bottom: 0; }
.mf-section:has(> details.mf-fold) + .mf-section > details.mf-fold { border-top: 0; }
details.mf-fold--quiet > summary h2 { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .mf-fold__go { transition: none; } }

.mf-donelist { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.mf-donelist li { display: flex; gap: 12px; align-items: flex-start; }
.mf-donelist .mf-ic { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }
.mf-donelist li > div { display: flex; flex-direction: column; gap: 2px; }

/* The included address once a custom domain is the address: a backup line, not a card. */
details.mf-backup { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 16px; }
details.mf-backup > summary { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 500; }
details.mf-backup > summary .mf-small { font-weight: 400; overflow-wrap: anywhere; }
.mf-backup__body { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 0 14px; }

/* Property websites: one find box above the status tabs. */
.mf-listbar { display: flex; align-items: center; gap: 16px; margin: -12px 0 16px; flex-wrap: wrap; }
.mf-find { position: relative; display: flex; align-items: center; flex: 0 1 340px; }
.mf-find .mf-ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }

/* Zillow reviews now sit inside Testimonials as a row, not a separate card between two fieldsets. */
.mf-fieldset > .mf-zillow { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mf-fieldset > .mf-zillow > div:first-child { flex: 1 1 320px; }
.mf-fieldset[hidden] { display: none; } /* Marketing materials waits hidden until the offices load; display:grid above was showing its empty legend */

/* Pathways (docs/pathways): the chooser cards, the plan's agenda and timeline, the scripts. */
.mf-pw-intro h2 { margin: 0 0 8px; font: 400 26px/1.2 var(--display); }
.mf-pw-intro p { margin: 0 0 6px; }
.mf-pw-card { display: grid; gap: 8px; align-content: start; position: relative; }
.mf-pw-card.is-on { border-color: var(--accent, var(--ink)); }
.mf-pw-card--add { align-content: center; text-align: center; border-style: dashed; text-decoration: none; color: inherit; }
.mf-pw-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mf-pw-card h3 { margin: 0; font: 400 22px/1.2 var(--display); }
.mf-pw-card h3 a { color: inherit; text-decoration: none; }
.mf-pw-card__tag { margin: 0; font-weight: 600; }
.mf-pw-card__fit { padding: 8px 10px; background: var(--surface); border-radius: var(--radius); }
.mf-pw-effort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 0; }
.mf-pw-effort dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mf-pw-effort dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.mf-pw-title { margin: 2px 0 6px; font: 400 30px/1.15 var(--display); }
.mf-pw-planhead { display: grid; gap: 12px; }
.mf-pw-progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mf-pw-progress span { display: block; height: 100%; background: var(--accent, var(--ink)); }
.mf-pw-plan-preview { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mf-pw-mini { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mf-pw-mini li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.mf-pw-mini__day { min-width: 56px; font-size: 12px; color: var(--muted); }
.mf-pw-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mf-pw-touch { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, #fff); }
.mf-pw-touch > div > b { display: block; }
.mf-pw-touch > div > .mf-small { display: block; margin-top: 2px; }
.mf-pw-touch.is-late { border-color: var(--warn, #c8742f); }
.mf-pw-touch.is-done, .mf-pw-touch.is-skipped { opacity: .62; }
.mf-pw-touch.is-flash { outline: 2px solid var(--accent, var(--ink)); outline-offset: 2px; }
.mf-pw-touch__ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); }
.mf-pw-touch__ic .mf-ic { width: 18px; height: 18px; }
.mf-pw-touch__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mf-pw-months { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mf-pw-month { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, #fff); }
.mf-pw-month.is-now { border-color: var(--accent, var(--ink)); }
.mf-pw-month h3 { margin: 0 0 8px; font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.mf-pw-month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-pw-month li a { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: start; font-size: 13.5px; color: inherit; text-decoration: none; }
.mf-pw-month li a small { color: var(--muted); }
.mf-pw-month li.is-done a span, .mf-pw-month li.is-skipped a span { text-decoration: line-through; color: var(--muted); }
.mf-pw-month li.is-late a span { color: var(--warn, #c8742f); }
.mf-pw-month .mf-ic { width: 14px; height: 14px; margin-top: 3px; }
.mf-pw-scripts { display: grid; gap: 10px; }
.mf-pw-script summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.mf-pw-script pre { white-space: pre-wrap; font: inherit; margin: 12px 0; line-height: 1.5; }
.mf-dialog { border: 0; border-radius: var(--radius); padding: 0; max-width: 640px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.mf-dialog::backdrop { background: rgba(0,0,0,.35); }
.mf-dialog__in { padding: 22px 24px; }
.mf-dialog__in h3 { margin: 0 0 10px; font: 400 22px/1.2 var(--display); }
.mf-dialog__in pre { white-space: pre-wrap; font: inherit; line-height: 1.5; max-height: 60vh; overflow: auto; margin: 0 0 16px; }
@media (max-width: 640px) { .mf-pw-touch { grid-template-columns: 32px 1fr; } .mf-pw-touch__acts { grid-column: 2; justify-content: flex-start; } }
/* My Profile → Designations (Support\Designations) */
.mf-desig { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mf-desig .mf-check span b { font-weight: 600; margin-right: 4px; }

/* Pathways (docs/pathways), round 2 (Zach 2026-10-25: "feels very text heavy"): visual cards, the piece itself on every
   touch, the setup steps folded into one progress card, and a campaign's pieces as one scrolling row. */
.mf-ic--flip { transform: scaleX(-1); }
.mf-pw-hero { padding: 8px 0 4px; }
.mf-pw-hero h2 { margin: 4px 0 6px; font: 400 clamp(26px, 3vw, 34px)/1.15 var(--display); }
.mf-pw-hero--setup { display: flex; gap: 18px; align-items: center; }
.mf-pw-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mf-chip { border: 1px solid var(--line); background: var(--card, #fff); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.mf-chip.is-on { background: var(--brand-ink, var(--ink)); color: var(--card, #fff); border-color: var(--brand-ink, var(--ink)); }
.mf-pw-picks { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 18px; }
.mf-pw-pick { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--card, #fff); color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.mf-pw-pick:hover { box-shadow: 0 8px 28px rgba(15, 25, 45, .08); transform: translateY(-1px); }
.mf-pw-pick.is-on { border-color: var(--accent, var(--ink)); box-shadow: inset 0 0 0 1px var(--accent, var(--ink)); }
.mf-pw-pick--add { place-items: center; text-align: center; border-style: dashed; min-height: 180px; }
.mf-pw-pick h3 { margin: 0; font: 400 22px/1.2 var(--display); }
.mf-pw-pick__top { display: flex; justify-content: space-between; align-items: center; }
.mf-pw-pick__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); flex: none; }
.mf-pw-pick__ic .mf-ic { width: 22px; height: 22px; }
.mf-pw-pick__ic--lg { width: 64px; height: 64px; }
.mf-pw-pick__ic--lg .mf-ic { width: 30px; height: 30px; }
.mf-pw-pick--territory .mf-pw-pick__ic { background: #e9f0f7; }
.mf-pw-pick--audience .mf-pw-pick__ic { background: #f1ede6; }
.mf-pw-pick--method .mf-pw-pick__ic { background: #ecefee; }
.mf-pw-pick__kind { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mf-pw-pick__tag { margin: -4px 0 0; color: var(--muted); }
.mf-pw-chips, .mf-pw-has { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mf-pw-chips li, .mf-pw-has li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 4px 9px; border-radius: 999px; background: var(--surface); }
.mf-pw-has li { background: none; padding: 0 8px 0 0; color: var(--muted); }
.mf-pw-chips .mf-ic, .mf-pw-has .mf-ic { width: 14px; height: 14px; }
.mf-pw-pick__more summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.mf-pw-pick__more p { margin: 6px 0 0; }
.mf-pw-setup { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 18px; align-items: start; }
.mf-pw-setup h3 { margin: 0 0 8px; font: 400 20px/1.2 var(--display); }
.mf-btn--lg { padding: 12px 22px; font-size: 15px; }
.mf-pw-yearbox { display: grid; gap: 12px; }
.mf-pw-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mf-pw-kinds li { display: grid; grid-template-columns: 20px auto 1fr; gap: 8px; align-items: center; font-size: 14px; }
.mf-pw-kinds b { font: 400 22px/1 var(--display); }
.mf-pw-planhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 8px 0 18px; }
.mf-pw-planhead h1 { margin: 2px 0 10px; font: 400 clamp(28px, 3.4vw, 38px)/1.1 var(--display); }
.mf-pw-planhead__t .mf-pw-progress { max-width: 420px; }
.mf-pw-planhead__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mf-pw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0 8px; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); overflow: hidden; background: var(--line); }
.mf-pw-stats--3 { grid-template-columns: repeat(3, 1fr); }
.mf-pw-stats > div { background: var(--card, #fff); padding: 16px 18px; }
.mf-pw-stats dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mf-pw-stats dd { margin: 6px 0 0; font: 400 34px/1 var(--display); }
.mf-pw-nexts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mf-pw-next { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); overflow: hidden; background: var(--card, #fff); }
.mf-pw-next.is-late { border-color: var(--warn, #c8742f); }
.mf-pw-next.is-done { opacity: .6; }
.mf-pw-next.is-flash { outline: 2px solid var(--accent, var(--ink)); }
.mf-pw-next__img { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; padding: 0; background: var(--surface); cursor: zoom-in; }
.mf-pw-next__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mf-pw-next__img--ic { display: grid; place-items: center; cursor: default; }
.mf-pw-next__img--ic .mf-ic { width: 40px; height: 40px; opacity: .55; }
.mf-pw-next__body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.mf-pw-next__body h3 { margin: 0; font: 400 19px/1.25 var(--display); }
.mf-pw-next__when { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mf-pw-next__when.is-late { color: var(--warn, #c8742f); }
.mf-pw-next__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.mf-pw-nexts--small { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mf-pw-nexts--small .mf-pw-next__img { aspect-ratio: 16 / 8; }
.mf-pw-nexts--small h3 { font-size: 16px; }
.mf-pw-steps { margin: 18px 0; padding: 0; }
.mf-pw-steps > summary { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; }
.mf-pw-steps > summary::-webkit-details-marker { display: none; }
.mf-pw-steps > summary > span:nth-child(2) { display: grid; gap: 2px; }
.mf-pw-steps[open] .mf-pw-steps__go { transform: rotate(180deg); }
.mf-pw-ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent, var(--ink)) calc(var(--p) * 1%), var(--surface) 0); position: relative; }
.mf-pw-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--card, #fff); }
.mf-pw-ring b { position: relative; font-size: 12px; }
.mf-pw-steps__h { margin: 4px 18px 6px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; }
.mf-pw-todo { list-style: none; margin: 0 0 12px; padding: 0 18px; display: grid; gap: 4px; }
.mf-pw-todo li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.mf-pw-todo li.is-done span { color: var(--muted); text-decoration: line-through; }
.mf-pw-todo__box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong, #b9bcc3); background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
.mf-pw-todo li.is-done .mf-pw-todo__box { border-color: var(--accent, var(--ink)); color: var(--accent, var(--ink)); }
.mf-pw-todo__box .mf-ic { width: 18px; height: 18px; }
.mf-pw-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-pw-words button { width: 100%; display: grid; grid-template-columns: 22px 1fr 18px; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, #fff); font: inherit; cursor: pointer; }
.mf-pw-words button:hover { border-color: var(--ink); }
.mf-pw-month li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: start; font-size: 13.5px; }
/* a campaign's pieces in one row (My materials and Pathways) */
.mf-rail__head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.mf-rail__head p { margin: 4px 0 0; }
.mf-rail__nav { display: flex; gap: 6px; align-items: center; }
.mf-rail__row { list-style: none; margin: 0; padding: 2px 2px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.mf-rail__card { scroll-snap-align: start; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--card, #fff); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.mf-rail__img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; background: var(--surface); cursor: zoom-in; }
.mf-rail__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mf-rail__img .mf-tag { position: absolute; right: 8px; bottom: 8px; }
.mf-rail__body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.mf-rail__body h3 { margin: 0; font: 400 17px/1.25 var(--display); }
.mf-rail__body .mf-btn .mf-ic { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .mf-pw-setup { grid-template-columns: 1fr; }
  .mf-pw-planhead { grid-template-columns: auto 1fr; }
  .mf-pw-planhead__acts { grid-column: 1 / -1; justify-content: flex-start; }
  .mf-pw-stats { grid-template-columns: repeat(2, 1fr); }
  .mf-rail__row { grid-auto-columns: 78%; }
}

/* ---------- Agent menu (Staff Console, Portal\AgentMenu) ---------- */
.mf-nav-tag { margin-left: auto; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; font: 500 10px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.mf-menu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.mf-menu-list { list-style: none; margin: 14px 0 0; padding: 0; }
.mf-menu-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.mf-menu-list .mf-check { margin: 0; }

/* ---------- Pathways: touches as the things they are (Zach 2026-10-25) ----------
   Near-square stages: a print piece whole on paper, an email in a mail window, a voicemail on a phone, a post as its
   picture. The rows scroll like Listing Studio's (.mf-rail__row). */
.mf-pw-rail { position: relative; }
.mf-pw-rail__nav { justify-content: flex-end; margin: -40px 0 10px; }
.mf-pw-row { grid-auto-columns: minmax(250px, 290px); }
.mf-pw-row .mf-pw-next { grid-template-rows: auto 1fr; }
.mf-pw-next__img--paper, .mf-pw-next__img--mock { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 18px; background: var(--line-2); overflow: hidden; }
.mf-pw-next__img--paper img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 24px -10px rgba(0, 0, 0, .3); }
.mf-pw-next__img--paper .mf-tag { position: absolute; right: 8px; bottom: 8px; }
.mf-pw-next__img--paper { position: relative; }
.mf-pw-next__img--mock { cursor: pointer; border: 0; font: inherit; text-align: left; }
.mf-pw-listcta { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: calc(var(--radius) * 2); background: var(--surface); color: var(--ink); text-decoration: none; }
.mf-pw-listcta > span { display: grid; gap: 2px; flex: 1; }
.mf-pw-listcta:hover { border-color: var(--brand-ink, var(--ink)); }

.mf-mock-mail { width: 100%; max-width: 300px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 28px -12px rgba(0, 0, 0, .3); overflow: hidden; font-size: 11px; line-height: 1.45; color: var(--ink); }
.mf-mock-mail__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #f1efeb; border-bottom: 1px solid var(--line); }
.mf-mock-mail__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.mf-mock-mail__bar i:nth-child(2) { background: #febc2e; }
.mf-mock-mail__bar i:nth-child(3) { background: #28c840; }
.mf-mock-mail__bar span { margin-left: 8px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-mock-mail__hd { margin: 0; padding: 4px 12px; border-bottom: 1px solid var(--line-2); }
.mf-mock-mail__hd div { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line-2); }
.mf-mock-mail__hd div:last-child { border-bottom: 0; }
.mf-mock-mail__hd dt { width: 48px; flex: none; color: var(--muted); }
.mf-mock-mail__hd dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-mock-mail__body { padding: 10px 12px 12px; }
.mf-mock-mail__body p { margin: 0 0 8px; }
.mf-mock-mail.is-big { max-width: none; font-size: 15px; line-height: 1.6; border-radius: 10px; }
.mf-mock-mail.is-big .mf-mock-mail__bar { padding: 11px 14px; }
.mf-mock-mail.is-big .mf-mock-mail__bar i { width: 12px; height: 12px; }
.mf-mock-mail.is-big .mf-mock-mail__hd { padding: 6px 20px; }
.mf-mock-mail.is-big .mf-mock-mail__hd dt { width: 64px; }
.mf-mock-mail.is-big .mf-mock-mail__hd dd { white-space: normal; }
.mf-mock-mail.is-big .mf-mock-mail__body { padding: 20px 24px 24px; max-height: 60vh; overflow: auto; }
.mf-mock-mail.is-big .mf-mock-mail__body p { margin: 0 0 14px; }
.mf-mock-mail__sig { display: block; max-width: 440px; width: 100%; height: auto; margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.mf-mock-mail__sigtxt { display: grid; gap: 1px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.mf-mock-mail__sigtxt b { color: var(--brand-ink, var(--ink)); font-size: 15px; }

.mf-mock-phone { width: 46%; max-width: 150px; aspect-ratio: 9 / 18.5; padding: 6px; border-radius: 26px; background: #1c1d20; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); }
.mf-mock-phone__scr { position: relative; height: 100%; border-radius: 21px; background: linear-gradient(180deg, #f7f5f1, #ebe8e2); padding: 26px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; overflow: hidden; }
.mf-mock-phone__notch { position: absolute; top: 7px; left: 50%; width: 38%; height: 12px; transform: translateX(-50%); border-radius: 8px; background: #1c1d20; }
.mf-mock-phone__lab { margin: 4px 0 0; font: 600 12px/1.2 var(--sans); color: var(--ink); }
.mf-mock-phone__who { margin: 0; font-size: 9px; line-height: 1.3; color: var(--muted); }
.mf-mock-phone__wave { display: flex; align-items: center; gap: 2px; height: 34px; width: 100%; margin-top: auto; }
.mf-mock-phone__wave i { flex: 1; border-radius: 2px; background: var(--brand-ink, var(--ink)); opacity: .75; }
.mf-mock-phone__time { margin: 0 0 auto; font-size: 9px; color: var(--muted); }
.mf-mock-phone__bubble { margin: auto 0 4px; align-self: flex-start; max-width: 92%; padding: 7px 9px; border-radius: 12px 12px 12px 3px; background: #fff; font-size: 9px; line-height: 1.35; text-align: left; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mf-mock-phone.is-big { width: 200px; max-width: none; flex: none; }
.mf-mock-phone.is-big .mf-mock-phone__lab { font-size: 15px; }
.mf-mock-phone.is-big .mf-mock-phone__who, .mf-mock-phone.is-big .mf-mock-phone__time { font-size: 11px; }
.mf-mock-phone.is-big .mf-mock-phone__bubble { font-size: 11px; }
.mf-mock-script { flex: 1; min-width: 0; max-height: 60vh; overflow: auto; font-size: 15px; line-height: 1.65; }

.mf-mock-post { width: 100%; max-width: 230px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 28px -12px rgba(0, 0, 0, .3); font-size: 11px; }
.mf-mock-post__hd { display: flex; align-items: center; gap: 7px; padding: 7px 9px; }
.mf-mock-post__hd img, .mf-mock-post__hd span { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--brand-ink, var(--ink)); color: #fff; font-size: 10px; }
.mf-mock-post__img { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--line-2); }
.mf-mock-post__img img { width: 100%; height: 100%; object-fit: cover; }
.mf-mock-post__img .mf-ic { width: 32px; height: 32px; opacity: .45; }
.mf-mock-post.is-big { max-width: 420px; margin: 0 auto; font-size: 14px; }
.mf-mock-post__cap { padding: 10px 12px 14px; line-height: 1.5; }
.mf-mock-post__cap p { display: inline; margin: 0; }
.mf-mock-post__cap p + p::before { content: ''; display: block; margin-top: 8px; }
.mf-mock-ic { display: grid; place-items: center; }
.mf-mock-ic .mf-ic { width: 44px; height: 44px; opacity: .5; }

.mf-pw-dlg .mf-dialog__in { width: min(720px, 92vw); }
.mf-pw-dlg__body { display: flex; gap: 24px; align-items: flex-start; margin: 14px 0 16px; }
.mf-pw-dlg__body > .mf-mock-mail { flex: 1; }
@media (max-width: 600px) { .mf-pw-dlg__body { flex-direction: column; align-items: center; } .mf-pw-rail__nav { display: none; } }
.mf-pw-next__img--mock .mf-mock-post { max-width: 168px; }

/* ---------- Listing Studio: an agent's listings as picture cards (Zach 2026-10-25) ---------- */
.mf-stcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mf-stcard { grid-template-rows: auto 1fr auto; }
.mf-stcard .mf-mylist__pill { background: none; }
.mf-stcard .mf-mylist__pill .mf-pill { background: rgba(255, 255, 255, .94); }
.mf-stcard__go { padding: 0 14px 14px; }
.mf-stcard__go .mf-btn { justify-content: center; gap: 8px; }

/* ---------- Page viewer: spreads (Zach 2026-10-25) and a postcard's back picker ---------- */
.mf-viewer__pages { display: flex; justify-content: center; align-items: center; min-width: 0; }
.mf-viewer__pages.is-spread img { max-width: 50%; margin: 0; }
.mf-viewer__pages.is-spread img + img { box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, .06); }
.mf-galback { margin: 8px 0 0; }
.mf-galback select { padding: 6px 8px; font-size: 13px; }

/* ---------- Adding an exclusive (Zach 2026-10-25) ---------- */
.mf-exkind { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mf-exkind__opt { position: relative; cursor: pointer; }
.mf-exkind__opt input { position: absolute; opacity: 0; }
.mf-exkind__opt > span { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.mf-exkind__opt > span .mf-ic { width: 24px; height: 24px; color: var(--brand-ink, var(--ink)); }
.mf-exkind__opt > span b { font: 400 20px/1.2 var(--display); }
.mf-exkind__opt > span small { color: var(--muted); font-size: 13px; }
.mf-exkind__opt input:checked + span { border-color: var(--brand-ink, var(--ink)); box-shadow: inset 0 0 0 1px var(--brand-ink, var(--ink)); }
.mf-exkind__opt input:focus-visible + span { box-shadow: var(--focus); }
.mf-exfacts__h { margin: 22px 0 8px; }
.mf-exfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 20px; margin: 0; }
.mf-exfacts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mf-exfacts dd { margin: 2px 0 0; }

/* ---------- City guide preview (Zach 2026-10-25) ---------- */
dialog.mf-guideview { width: min(1100px, calc(100vw - 32px)); max-width: none; height: calc(100vh - 32px); }
.mf-guideview .mf-viewer__head { gap: 12px; }
.mf-guideview .mf-viewer__head .mf-btn { margin-left: auto; }
.mf-guideview__stage { position: relative; flex: 1; min-height: 0; background: var(--paper); }
.mf-guideview__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mf-guideview__stage [data-gvwait] { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.mf-guide__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Landing Pages: the guide edited where its words appear (Zach 2026-10-25) ---------- */
.mf-ve-mode { margin: 4px 0 18px; }
.mf-ve-mode button { display: inline-flex; align-items: center; gap: 6px; }
.mf-ve-tip { margin: 0 0 14px; }
.mf-ve-sec { margin: 0 0 34px; }
.mf-ve-label { margin: 0 0 10px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mf-ve-f, .mf-ve-b { outline: none; border-radius: 3px; transition: box-shadow .15s, background .15s; cursor: text; white-space: pre-wrap; }
.mf-ve-f:hover, .mf-ve-b:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-ink, var(--ink)) 35%, transparent); background: color-mix(in srgb, var(--brand-ink, var(--ink)) 4%, transparent); }
.mf-ve-f:focus, .mf-ve-b:focus { box-shadow: 0 0 0 2px var(--brand-ink, var(--ink)); background: #fff; }
.mf-ve-f:empty::before, .mf-ve-b:empty::before { content: attr(data-ph); color: var(--muted); font-style: italic; opacity: .7; }
.mf-ve-browser { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.mf-ve-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1efeb; border-bottom: 1px solid var(--line); }
.mf-ve-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.mf-ve-bar i:nth-child(2) { background: #febc2e; }
.mf-ve-bar i:nth-child(3) { background: #28c840; }
.mf-ve-bar span { margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-ve-page { padding: clamp(24px, 5vw, 56px); }
.mf-ve-eyebrow { margin: 0 0 10px; font: 500 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink, var(--ink)); }
.mf-ve-title { margin: 0 0 12px; font: 400 clamp(30px, 4vw, 46px)/1.08 var(--display); color: var(--brand-ink, var(--ink)); }
.mf-ve-title--ch { font-size: clamp(26px, 3vw, 34px); }
.mf-ve-dek { margin: 0 0 14px; font: italic 400 22px/1.3 var(--display); color: var(--ink-2); }
.mf-ve-note { display: block; margin-top: 4px; font: 400 12px/1.4 var(--sans); font-style: normal; color: var(--muted); }
.mf-ve-lede { margin: 0 0 18px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.mf-ve-btn { display: inline-block; padding: 12px 22px; background: var(--brand-ink, var(--ink)); color: #fff; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; }
.mf-ve-btn .mf-ve-f:focus { background: transparent; box-shadow: 0 0 0 2px #fff; }
.mf-ve-free { margin-left: 14px; font-size: 12px; color: var(--muted); }
.mf-ve-inside { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.mf-ve-inside h3, .mf-ve-book h3 { margin: 0 0 6px; font: 400 26px/1.2 var(--display); color: var(--brand-ink, var(--ink)); }
.mf-ve-inside ol { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px 32px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mf-ve-inside li { display: grid; gap: 4px; }
.mf-ve-inside li b { font: 400 19px/1.3 var(--display); }
.mf-ve-inside li > span:last-child { font-size: 14px; color: var(--ink-2); }
.mf-ve-n { font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--brand-ink, var(--ink)); }
.mf-ve-pages { display: grid; gap: 22px; }
.mf-ve-sheet { max-width: 720px; width: 100%; margin: 0 auto; padding: clamp(28px, 6vw, 64px) clamp(24px, 6vw, 64px); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 34px -16px rgba(0, 0, 0, .28); }
.mf-ve-cover { display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; background: var(--brand-ink, var(--ink)); }
.mf-ve-cover .mf-ve-eyebrow, .mf-ve-cover .mf-ve-title { color: #fff; }
.mf-ve-rule { width: 48px; margin: 6px 0 16px; border: 0; border-top: 1px solid var(--brand-ink, var(--ink)); }
.mf-ve-prose, .mf-ve-body { font-size: 15px; line-height: 1.7; color: var(--ink); }
.mf-ve-body { display: grid; gap: 12px; }
.mf-ve-h { font: 400 21px/1.3 var(--display); color: var(--brand-ink, var(--ink)); margin-top: 8px; }
.mf-ve-q { padding: 6px 0 6px 18px; border-left: 2px solid var(--brand-ink, var(--ink)); font: italic 400 19px/1.45 var(--display); color: var(--ink-2); }
.mf-ve-li { position: relative; padding-left: 26px; }
.mf-ve-li::before { position: absolute; left: 4px; top: .15em; color: var(--brand-ink, var(--ink)); font-weight: 600; }
.mf-ve-li--n::before { content: '•'; }
.mf-ve-li--t::before { content: '→'; }
.mf-ve-li--c { padding: 10px 12px 10px 26px; background: color-mix(in srgb, var(--brand-ink, var(--ink)) 6%, #fff); }
.mf-ve-li--c::before { content: '◆'; font-size: 10px; top: 1.2em; }
.mf-ve-li--k::before { content: '☐'; }
.mf-ve-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--line); border-radius: 999px; background: none; font-size: 12px; color: var(--muted); cursor: pointer; }
.mf-ve-add:hover { color: var(--ink); border-color: var(--ink); }
.mf-ve-add .mf-ic { width: 12px; height: 12px; }
.mf-ve-closing blockquote { margin: 0; text-align: center; font: italic 400 24px/1.4 var(--display); color: var(--brand-ink, var(--ink)); }
.mf-ve-q2 { margin: 0 0 22px; }
.mf-ve-qlabel { margin: 0 0 8px; font-weight: 500; }
.mf-ve-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-ve-chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
.mf-ve-input { margin: 0; padding: 10px 12px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; max-width: 420px; }
.mf-ve-book { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.mf-ve-mails { display: grid; gap: 22px; }
.mf-ve-mail { max-width: 720px; }
.mf-ve-mail .mf-mock-mail__body { max-height: none; }

/* ---------- Presentations for one client (Zach 2026-10-25) ---------- */
.mf-pres .mf-section-head { align-items: flex-start; gap: 16px; }
.mf-presdlg .mf-dialog__in { width: min(520px, 92vw); }
.mf-presdlg [data-photobox] input[type=file] { margin-top: 8px; }

/* ---- Order prints (Studio\PrintShop; portal.js printDialog / printBag / printOrdersView) ---- */
.mf-printbtn { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: 500 13px/1.2 var(--sans); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.mf-printbtn .mf-ic { color: var(--brand-ink, var(--accent)); }
.mf-printbtn small { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; }
.mf-printbtn:hover { border-color: var(--brand-ink, var(--accent)); background: var(--surface); }
.mf-printbtn:focus-visible { outline: none; box-shadow: var(--focus); }

dialog.mf-printdlg { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); }
.mf-printdlg__load { padding: 40px; }
.mf-printdlg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); min-height: min(640px, calc(100vh - 32px)); }
.mf-printdlg__stage { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: 18px; padding: 40px; position: sticky; top: 0; max-height: calc(100vh - 32px);
  background: radial-gradient(120% 90% at 50% 35%, #fbfaf7 0%, #eeeae3 100%); }
.mf-printdlg__sheet { display: grid; place-items: center; min-height: 0; }
.mf-printdlg__sheet img { max-width: 100%; max-height: min(520px, calc(100vh - 200px)); object-fit: contain; background: #fff;
  box-shadow: 0 1px 1px rgba(23, 24, 26, .08), 0 12px 30px -10px rgba(23, 24, 26, .35), 0 30px 60px -30px rgba(23, 24, 26, .25); transform: rotate(-.6deg); }
.mf-printdlg__sheet > .mf-ic { width: 64px; height: 64px; color: var(--muted); }
.mf-printdlg__stage figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 12.5px; color: var(--ink-2); }
.mf-printdlg__ok { display: inline-flex; gap: 6px; align-items: center; color: var(--ok); }
.mf-printdlg__ok .mf-ic { width: 16px; height: 16px; }
.mf-printdlg__form { position: relative; padding: 36px 36px 28px; display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--line); }
.mf-printdlg__form h2 { margin: -6px 0 0; font: 400 28px/1.15 var(--display); color: var(--brand-ink, var(--ink)); padding-right: 40px; }
.mf-printdlg__form .mf-eyebrow { margin: 0; }
.mf-printdlg__product { margin: -10px 0 0; font-size: 15px; color: var(--ink-2); }
.mf-printdlg__x { position: absolute; top: 20px; right: 20px; }
.mf-printdlg__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 0; }
.mf-spec { font-size: 12px; color: var(--ink-2); padding: 4px 8px; background: var(--line-2); border-radius: var(--radius); }
.mf-printdlg__link { display: flex; gap: 6px; margin-top: 8px; }
.mf-printdlg__link input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }
.mf-printdlg__date { margin: 0; max-width: 220px; }
.mf-printdlg__total { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; padding: 16px 0 0; border-top: 1px solid var(--line); margin-top: auto; }
.mf-printdlg__total strong { grid-row: span 2; font: 400 34px/1 var(--display); color: var(--brand-ink, var(--ink)); justify-self: end; font-variant-numeric: tabular-nums; }
.mf-printdlg__total span:last-child { grid-column: 1; }
.mf-printdlg__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mf-printdlg__acts .mf-link { margin-left: auto; }
.mf-printdlg__fine { margin: -6px 0 0; }
.mf-printdlg__nudge { margin: 6px 0 0; color: var(--ok); min-height: 1.2em; }
.mf-printdlg [data-msg]:empty { display: none; }

/* segmented choices: paper, finish, envelope; the pack tiles of business cards */
.mf-pseg { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
.mf-pseg legend { padding: 0; margin-bottom: 8px; font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mf-seg__row { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-seg__opt { position: relative; cursor: pointer; }
.mf-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mf-seg__opt span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px;
  background: var(--surface); transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); }
.mf-seg__opt span em { font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.mf-seg__opt:hover span { border-color: var(--ink-2); }
.mf-seg__opt input:checked + span { border-color: var(--brand-ink, var(--accent)); box-shadow: inset 0 0 0 1px var(--brand-ink, var(--accent)); background: var(--accent-soft); }
.mf-seg__opt input:focus-visible + span { box-shadow: var(--focus); }
.mf-seg__row--tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); width: 100%; }
.mf-seg__opt--tile span { display: grid; gap: 2px; justify-items: start; padding: 12px 14px; width: 100%; }
.mf-seg__opt--tile b { font: 400 22px/1 var(--display); }
.mf-seg__opt--tile small { color: var(--muted); font-size: 12px; }

/* quantity: a stepper, quick picks at each price break, and the price breaks themselves */
.mf-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mf-qty input { width: 104px; height: 44px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); font: 500 18px/1 var(--sans); font-variant-numeric: tabular-nums; }
.mf-qty--sm { margin-top: 10px; }
.mf-qty--sm input { width: 64px; height: 36px; font-size: 15px; }
.mf-qty .mf-ic { width: 16px; height: 16px; }
.mf-qty__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.mf-qchip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 500 13px/1 var(--sans); cursor: pointer; color: var(--ink-2); }
.mf-qchip:hover { border-color: var(--ink-2); color: var(--ink); }
.mf-tiers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.mf-tiers li { display: grid; gap: 3px; padding: 10px 12px; font-size: 12px; color: var(--muted); transition: background .2s var(--ease), color .2s var(--ease); }
.mf-tiers li + li { border-left: 1px solid var(--line); }
.mf-tiers b { font-size: 14px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mf-tiers li.is-on { background: var(--accent-soft); color: var(--brand-ink, var(--accent)); }
.mf-tiers li.is-on b { color: var(--brand-ink, var(--ink)); }

/* the floating Print order button and its drawer */
.mf-printpill { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 16px; border: 0; border-radius: 999px;
  background: var(--brand-ink, var(--ink)); color: #fff; font: 500 14px/1 var(--sans); cursor: pointer; box-shadow: 0 10px 30px -8px rgba(23, 24, 26, .45); transition: transform .2s var(--ease); }
.mf-printpill:hover { transform: translateY(-1px); }
.mf-printpill:focus-visible { outline: none; box-shadow: var(--focus); }
.mf-printpill b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--brand-ink, var(--ink)); font-size: 12px; }
.mf-printpill__sum { opacity: .8; font-variant-numeric: tabular-nums; }
.mf-printpill.is-new { animation: mf-pillpop .5s var(--ease); }
@keyframes mf-pillpop { 40% { transform: scale(1.08); } }
body:has(#mf-printpill) .mf-toasts { bottom: 84px; }
dialog.mf-printbag { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(460px, 100vw); max-width: none; border-radius: 0; animation: mf-sheetin .25s var(--ease); }
@keyframes mf-sheetin { from { transform: translateX(24px); opacity: 0; } }
.mf-printbag__in { display: flex; flex-direction: column; height: 100%; }
.mf-printbag__in header { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px 28px 16px; border-bottom: 1px solid var(--line); }
.mf-printbag__in header h2 { margin: 0; font: 400 26px/1.1 var(--display); color: var(--brand-ink, var(--ink)); }
.mf-printbag__list { list-style: none; margin: 0; padding: 8px 28px; overflow: auto; flex: 1; }
.mf-printline { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.mf-printline__img { width: 64px; height: 80px; display: grid; place-items: center; background: var(--paper); }
.mf-printline__img img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 2px 8px -2px rgba(23, 24, 26, .25); }
.mf-printline__txt { display: grid; gap: 3px; min-width: 0; align-content: start; }
.mf-printline__acts { display: flex; gap: 12px; margin-top: 4px; }
.mf-printline__sum { font-variant-numeric: tabular-nums; font-weight: 500; }
.mf-printbag__in footer { padding: 20px 28px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); display: grid; gap: 12px; }
.mf-printbag__total { display: flex; justify-content: space-between; align-items: baseline; }
.mf-printbag__total strong { font: 400 30px/1 var(--display); color: var(--brand-ink, var(--ink)); font-variant-numeric: tabular-nums; }
.mf-printbag footer p { margin: 0; }

/* Listing Studio -> Print orders */
.mf-tabcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--brand-ink, var(--ink)); color: #fff; font-size: 11px; }
.mf-printopen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; background: var(--accent-soft); border-color: transparent; }
.mf-printopen h2 { margin: 0; }
.mf-printopen .mf-eyebrow { margin-bottom: 6px; }
.mf-printorders { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.mf-printorder { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; align-content: start; }
.mf-printorder header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mf-printorder header div { display: grid; gap: 2px; }
.mf-printorder header b { font: 400 20px/1.2 var(--display); }
.mf-printsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mf-printsteps li { position: relative; padding-top: 12px; font-size: 11.5px; color: var(--muted); }
.mf-printsteps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--line-2); }
.mf-printsteps li.is-done { color: var(--ink); }
.mf-printsteps li.is-done::before { background: var(--brand-ink, var(--accent)); }
.mf-printsteps li.is-next::before { background: linear-gradient(90deg, var(--brand-ink, var(--accent)) 0 30%, var(--line-2) 30%); }
.mf-printorder__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mf-printorder__items li { display: flex; gap: 12px; align-items: center; }
.mf-printorder__items img { width: 40px; height: 50px; object-fit: contain; background: var(--paper); box-shadow: 0 1px 4px rgba(23, 24, 26, .15); }
.mf-printorder__items span { display: grid; gap: 1px; min-width: 0; }
.mf-printorder .mf-link .mf-ic { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .mf-printdlg__grid { grid-template-columns: 1fr; }
  .mf-printdlg__stage { position: static; padding: 24px 24px 16px; max-height: none; }
  .mf-printdlg__sheet img { max-height: 240px; }
  .mf-printdlg__form { border-left: 0; border-top: 1px solid var(--line); padding: 24px; }
  .mf-printpill { bottom: calc(76px + env(safe-area-inset-bottom)); right: 16px; }
  body:has(#mf-printpill) .mf-toasts { bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { .mf-printpill.is-new, dialog.mf-printbag { animation: none; } .mf-printdlg__sheet img { transform: none; } }

/* ---- Print your own design (portal.js printUploadDialog, Studio\PrintUploads) ---- */
dialog.mf-updlg .mf-updlg__pick { position: relative; padding: 44px 48px 40px; max-width: 640px; margin: 0 auto; display: grid; gap: 16px; }
.mf-updlg__pick h2 { margin: -6px 0 0; font: 400 30px/1.15 var(--display); color: var(--brand-ink, var(--ink)); padding-right: 40px; }
.mf-updlg__pick .mf-eyebrow { margin: 0; }
.mf-updlg__pick > p { margin: 0; }
.mf-updrop { display: grid; justify-items: center; gap: 6px; padding: 44px 24px; border: 1.5px dashed #cfc9bf; border-radius: var(--radius); background: var(--paper); text-align: center; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); }
.mf-updrop .mf-ic { width: 40px; height: 40px; color: var(--brand-ink, var(--accent)); margin-bottom: 4px; }
.mf-updrop b { font: 400 20px/1.2 var(--display); }
.mf-updrop span { font-size: 13px; color: var(--muted); }
.mf-updrop:hover, .mf-updrop.is-over { border-color: var(--brand-ink, var(--accent)); background: var(--accent-soft); }
.mf-updrop.is-over { transform: scale(1.01); }
.mf-updrop:focus-within { box-shadow: var(--focus); }
.mf-upbar { height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.mf-upbar span { display: block; height: 100%; width: 0; background: var(--brand-ink, var(--accent)); transition: width .3s var(--ease); }
.mf-upsteps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.mf-upsteps li { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; transition: color .3s var(--ease); }
.mf-upsteps li .mf-ic { color: var(--line); transition: color .3s var(--ease); }
.mf-upsteps li.is-on { color: var(--ink); }
.mf-upsteps li.is-on .mf-ic { color: var(--brand-ink, var(--accent)); animation: mf-uppulse 1.2s ease-in-out infinite; }
.mf-upsteps li.is-done { color: var(--ink-2); }
.mf-upsteps li.is-done .mf-ic { color: var(--ok); }
@keyframes mf-uppulse { 50% { opacity: .35; } }

.mf-upsheet { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.mf-upsheet img { max-width: 100%; max-height: min(520px, calc(100vh - 220px)); transform: none; }
.mf-upguides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mf-upguides rect, .mf-upguides line { fill: none; vector-effect: non-scaling-stroke; }
.mf-upguides .t { stroke: #e0312b; stroke-width: 1.5; }
.mf-upguides .s { stroke: #2563eb; stroke-width: 1; stroke-dasharray: 5 4; }
.mf-upguides .f { stroke: #16a34a; stroke-width: 1.5; stroke-dasharray: 8 4; }
.mf-key { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin: 0 4px 0 6px; }
.mf-key--t { border-color: #e0312b; }
.mf-key--s { border-color: #2563eb; border-top-style: dashed; }
.mf-key--f { border-color: #16a34a; border-top-style: dashed; }
.mf-upstage figcaption { flex-direction: column; align-items: center; gap: 12px; }
.mf-upthumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mf-upthumbs button { position: relative; border: 1px solid var(--line); background: #fff; padding: 3px; cursor: pointer; line-height: 0; border-radius: var(--radius); }
.mf-upthumbs button.is-on { border-color: var(--brand-ink, var(--accent)); box-shadow: 0 0 0 1px var(--brand-ink, var(--accent)); }
.mf-upthumbs img { height: 54px; width: auto; }
.mf-upthumbs small { position: absolute; right: 3px; bottom: 3px; line-height: 1; font-size: 10px; background: rgba(255, 255, 255, .9); padding: 2px 4px; }

.mf-upstatus { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); }
.mf-upstatus .mf-ic { width: 22px; height: 22px; margin-top: 1px; }
.mf-upstatus div { display: grid; gap: 4px; }
.mf-upstatus b { font-size: 15px; }
.mf-upstatus span { font-size: 13.5px; color: var(--ink-2); }
.mf-upstatus.is-ok { background: var(--ok-soft); } .mf-upstatus.is-ok .mf-ic { color: var(--ok); }
.mf-upstatus.is-warn { background: var(--warn-soft); } .mf-upstatus.is-warn .mf-ic { color: var(--warn); }
.mf-upstatus.is-block { background: var(--err-soft); } .mf-upstatus.is-block .mf-ic { color: var(--err); }
.mf-upproduct { display: grid; gap: 6px; }
.mf-upproduct b { font-size: 16px; font-weight: 500; }
.mf-upproduct select { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); font: 500 14px var(--sans); background: var(--surface); }
.mf-upproduct__doubt { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; color: var(--warn); }
.mf-upproduct__doubt .mf-ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.mf-upchecks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.mf-upcheck { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.mf-upcheck > .mf-ic { width: 20px; height: 20px; margin-top: 1px; }
.mf-upcheck div { display: grid; gap: 3px; min-width: 0; }
.mf-upcheck b { font-weight: 500; font-size: 14px; }
.mf-upcheck span { font-size: 13px; color: var(--ink-2); }
.mf-upcheck small { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.mf-upcheck--ok > .mf-ic { color: var(--ok); }
.mf-upcheck--fixed > .mf-ic { color: var(--brand-ink, var(--accent)); }
.mf-upcheck--warn > .mf-ic { color: var(--warn); }
.mf-upcheck--block > .mf-ic { color: var(--err); }
.mf-upcheck--info > .mf-ic { color: var(--muted); }
.mf-upack { padding: 12px 14px; background: var(--warn-soft); border-radius: var(--radius); }
.mf-upsizes { margin: 6px 0 0; padding-left: 18px; columns: 2; font-size: 13px; }

/* Print orders tab: the way in, and the files checked before */
.mf-uphero { display: grid; gap: 14px; margin-bottom: 24px; }
.mf-uphero__drop { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; border: 1.5px dashed #cfc9bf; border-radius: var(--radius); background: var(--surface);
  text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s var(--ease), background .15s var(--ease); }
.mf-uphero__drop > .mf-ic:first-child { width: 34px; height: 34px; color: var(--brand-ink, var(--accent)); }
.mf-uphero__drop > .mf-ic:last-child { margin-left: auto; color: var(--muted); }
.mf-uphero__drop span { display: grid; gap: 4px; }
.mf-uphero__drop b { font: 400 21px/1.2 var(--display); color: var(--brand-ink, var(--ink)); }
.mf-uphero__drop small { color: var(--muted); font-size: 13.5px; }
.mf-uphero__drop:hover { border-color: var(--brand-ink, var(--accent)); background: var(--accent-soft); }
.mf-uplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mf-uplist button { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.mf-uplist button:hover { border-color: var(--ink-2); }
.mf-uplist img, .mf-uplist__blank { width: 44px; height: 56px; object-fit: contain; background: var(--paper); flex: none; display: grid; place-items: center; }
.mf-uplist span { display: grid; gap: 2px; min-width: 0; }
.mf-uplist b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-uplist small { font-size: 12px; color: var(--muted); }
.mf-upchip { font: 500 10.5px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--radius); justify-self: start; margin-top: 2px; }
.mf-upchip.is-ok { background: var(--ok-soft); color: var(--ok); }
.mf-upchip.is-warn { background: var(--warn-soft); color: var(--warn); }
.mf-upchip.is-block { background: var(--err-soft); color: var(--err); }
@media (max-width: 900px) { dialog.mf-updlg .mf-updlg__pick { padding: 32px 22px 26px; } .mf-upsizes { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .mf-upsteps li.is-on .mf-ic { animation: none; } }

/* Office TV slides (portal.js tvPage; Zach 2026-10-26): the running order and the people, side by side */
.mf-tvbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 8px; }
.mf-tvbar .mf-field { min-width: 220px; margin: 0; }
.mf-tvbar__acts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mf-tvcols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
@media (max-width: 1000px) { .mf-tvcols { grid-template-columns: 1fr; } }
.mf-tvhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mf-tvhead h2 { margin: 0; }
.mf-tvline { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mf-tvline > span { display: grid; gap: 2px; }
.mf-tvlist { list-style: none; margin: 0; padding: 0; }
.mf-tvrow { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line-2); background: var(--surface); cursor: grab; }
.mf-tvrow.is-off .mf-tvrow__main { opacity: .45; }
.mf-tvrow.is-off .mf-tvrow__main b { text-decoration: line-through; }
.mf-tvrow.is-dragging { opacity: .4; }
.mf-tvrow.is-over { box-shadow: inset 0 2px 0 var(--accent); }
.mf-tvrow__grip { color: var(--muted); letter-spacing: -2px; user-select: none; }
.mf-tvrow__n { width: 26px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.mf-tvrow__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mf-tvrow__main b, .mf-tvperson__main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-tvrow__acts { display: flex; align-items: center; gap: 4px; }
.mf-tvfilter { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mf-tvfilter .mf-input { flex: 1; }
.mf-tvgroup { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.mf-tvpeople { list-style: none; margin: 0; padding: 0; }
.mf-tvperson { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.mf-tvperson img, .mf-tvperson__init { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; background: var(--line-2); display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.mf-tvperson.is-off img { filter: grayscale(1); opacity: .55; }
.mf-tvperson__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mf-tvperson.is-off .mf-tvperson__main { opacity: .55; }
/* an on/off switch: a real checkbox under a drawn track */
.mf-tvt { position: relative; display: inline-flex; flex: none; width: 40px; height: 22px; cursor: pointer; }
.mf-tvt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mf-tvt__track { width: 100%; height: 100%; border-radius: 999px; background: var(--line); transition: background .2s; position: relative; }
.mf-tvt__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.mf-tvt input:checked + .mf-tvt__track { background: var(--accent); }
.mf-tvt input:checked + .mf-tvt__track::after { transform: translateX(18px); }
.mf-tvt input:focus-visible + .mf-tvt__track { outline: 2px solid var(--accent); outline-offset: 2px; }
/* how often it switches: the office's pace, the listings' rotation, and each slide's seconds */
.mf-tvtiming { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.mf-tvtiming .mf-field { margin: 0; }
.mf-tvtiming .mf-check, .mf-tvtiming p { grid-column: 1 / -1; margin: 0; }
.mf-tvsec { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.mf-tvsec input { width: 62px; padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.mf-tvsec.is-set input { border-color: var(--accent); font-weight: 600; color: var(--ink); }
/* add someone to an office's TV: a search across the Org tab with a short pick list */
.mf-tvadd { position: relative; margin-bottom: 12px; }
.mf-tvadd .mf-field { margin: 0; }
.mf-tvadd__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 30px -12px rgba(0,0,0,.25); max-height: 360px; overflow: auto; }
.mf-tvadd__list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.mf-tvadd__list button:hover, .mf-tvadd__list button:focus-visible { background: var(--line-2); }
.mf-tvadd__list img, .mf-tvadd__list .mf-tvperson__init { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; background: var(--line-2); display: grid; place-items: center; font-size: 12px; }
.mf-tvadd__list span { display: grid; gap: 1px; }
.mf-tvadd__none { padding: 8px; font-size: 13px; color: var(--muted); }