/* 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 { 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); }
.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(--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(--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(--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(--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(--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(--ink); color: #fff; border-color: 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(--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); }

/* 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; }
.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-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; }
.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); }
.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-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-fit, minmax(200px, 1fr)); gap: 12px; 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; }
.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 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(--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)); }
.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; }
@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 { margin: 0; }
.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; } }
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; }

/* ---------- 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}