/* Maid profile page: theme tokens only. */
.mp { padding: 24px 0 calc(var(--mf-section-y) * .8); background: var(--mf-bg); }
.mp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 14px; color: var(--mf-text-muted); }
.mp-crumbs a { color: var(--mf-text-muted); } .mp-crumbs a:hover { color: var(--mf-primary); }
.mp-crumbs b { color: var(--mf-text); font-weight: var(--mf-w-button); } .mp-crumbs span { opacity: .5; }
.mp-grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 28px; align-items: start; }
.mp-side { min-width: 0; }
@media (min-width: 1024px) { .mp-side { position: sticky; top: calc(var(--mf-nav-h) + 16px); } }

.mp-card { overflow: hidden; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) + 4px); background: var(--mf-surface); box-shadow: var(--mf-shadow); }
.mp-photo { position: relative; aspect-ratio: 16 / 10; background: var(--mf-accent-soft); overflow: hidden; }
.mp-photo__initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; font-weight: var(--mf-w-hero); color: var(--mf-primary); }
.mp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.mp-badge { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 10px; border-radius: var(--mf-radius-pill); background: var(--mf-chrome); color: var(--mf-accent); font-size: 12.5px; font-weight: var(--mf-w-button); }
.mp-badge--hired { background: var(--mf-text); color: var(--mf-bg); left: auto; right: 14px; padding-left: 13px; }
.mp-play { right: 12px; bottom: 12px; width: 44px; height: 44px; z-index: 2; }
.mp-id { padding: 16px 18px 18px; }
.mp-nat { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 13.5px; font-weight: var(--mf-w-button); color: var(--mf-text-muted); }
.mp-nat img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.mp-id h1 { margin: 0 0 4px; font-size: clamp(24px, 2.4vw, 28px); }
.mp-role { margin: 0 0 10px; font-size: 12px; font-weight: var(--mf-w-button); letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--mf-primary); }
.mp-salary { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--mf-accent-soft); }
.mp-salary b { font-size: 24px; font-weight: var(--mf-w-hero); letter-spacing: -.03em; color: var(--mf-primary); }
.mp-salary small { font-size: 13px; font-weight: var(--mf-w-button); color: var(--mf-text-muted); }
.mp-cta { display: grid; gap: 8px; }
.mp-cta .mf-btn { width: 100%; padding: 12px 16px; font-size: 14.5px; }
.mp-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mf-border); }
.mp-fav { position: static; width: auto; height: auto; padding: 9px 16px 9px 12px; gap: 8px; display: inline-flex; align-items: center; border: 1.5px solid var(--mf-border); border-radius: var(--mf-radius-pill); background: var(--mf-surface); backdrop-filter: none; font: var(--mf-w-button) 14px/1 var(--mf-font); }
.mp-fav.is-on { border-color: var(--mf-primary); }
.mp-back { padding: 0; border: 0; background: none; color: var(--mf-text-muted); font: var(--mf-w-button) 14px/1 var(--mf-font); cursor: pointer; }
.mp-back:hover { color: var(--mf-primary); }

.mp-main { display: grid; gap: 24px; min-width: 0; }
.mp-main .mf-panel + .mf-panel { margin-top: 0; }
.mp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mp-facts div { padding: 16px 18px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm); background: var(--mf-surface); }
.mp-facts span { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: var(--mf-w-button); letter-spacing: .08em; text-transform: uppercase; color: var(--mf-text-muted); }
.mp-facts b { font-size: 16px; font-weight: var(--mf-w-heading); overflow-wrap: anywhere; }
.mp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mp-two h3 { margin: 0 0 12px; font-size: 16px; }
.mp-skills { margin: 0; }
.mp-langs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-langs li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--mf-radius-sm); background: var(--mf-bg); }
.mp-langs li > span:first-child { flex: 1; font-weight: var(--mf-w-button); }
.mp-langs small { min-width: 64px; text-align: right; color: var(--mf-text-muted); font-size: 12.5px; }
.mp-stars { display: inline-flex; gap: 3px; }
.mp-stars i { width: 13px; height: 13px; background: color-mix(in srgb, var(--mf-text) 15%, transparent); clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 91%, 50% 70%, 20% 91%, 31% 57%, 2% 35%, 38% 35%); }
.mp-stars i.on { background: var(--mf-accent); }
.mp-text { margin: 0; color: var(--mf-text); }
.mp-list { display: grid; gap: 14px; }
.mp-item { padding: 18px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm); background: var(--mf-bg); }
.mp-item header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mp-item__n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mf-primary); color: var(--mf-on-primary); font-weight: var(--mf-w-heading); font-size: 14px; }
.mp-item header b { display: block; font-size: 17px; }
.mp-item header small { color: var(--mf-text-muted); font-size: 13.5px; }
.mp-item dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 4px; }
.mp-item dt { font-size: 11.5px; font-weight: var(--mf-w-button); letter-spacing: .08em; text-transform: uppercase; color: var(--mf-text-muted); }
.mp-item dd { margin: 2px 0 0; font-weight: var(--mf-w-button); }
.mp-item .mp-text { margin-top: 12px; font-size: 15px; color: var(--mf-text-muted); }

.mp-bar { display: none; }
@media (max-width: 1023px) {
  .mp-grid { grid-template-columns: minmax(0, 1fr); }
  .mp-side { position: static; }
  .mp-card { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
  .mp-photo { aspect-ratio: auto; min-height: 100%; }
  .mp-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: flex; gap: 10px; padding: 10px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-pill); background: color-mix(in srgb, var(--mf-surface) 94%, transparent); backdrop-filter: blur(10px); box-shadow: var(--mf-shadow-lg); transform: translateY(140%); transition: transform .4s var(--mf-ease); }
  .mp-bar.is-on { transform: none; }
  .mp-bar .mf-btn { flex: 1; }
  body.ml-lock .mp-bar { display: none; }
  body:has(.mp-bar) .mf-aya, body:has(.mp-bar) .mf-top { bottom: 86px; }   /* sit above the unlock bar */
}
@media (max-width: 640px) {
  .mp-card { grid-template-columns: minmax(0, 1fr); }
  .mp-photo { aspect-ratio: 1 / .85; }
  .mp-two { grid-template-columns: minmax(0, 1fr); }
  .mp-id { padding: 18px; }
  .mp { padding-bottom: 96px; }
}

/* formatted free text (job descriptions, notes) */
.mp-rich > :first-child { margin-top: 0; }
.mp-rich > :last-child { margin-bottom: 0; }
.mp-rich p { margin: 0 0 .75em; }
.mp-rich ul, .mp-rich ol { margin: 0 0 .75em; padding-left: 1.3em; }
.mp-rich li { margin: 0 0 .3em; }
.mp-rich h3, .mp-rich h4, .mp-rich h5, .mp-rich h6 { margin: 1em 0 .4em; font-size: 1.05em; }
.mp-rich blockquote { margin: 0 0 .75em; padding-left: 1em; border-left: 3px solid var(--mf-accent); color: var(--mf-text-muted); }
.mp-item .mp-rich { margin-top: 12px; font-size: 15px; color: var(--mf-text-muted); }

/* ---------- trust + conversion ---------- */
.mp-trust { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.mp-trust li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: var(--mf-radius-pill); background: var(--mf-bg); font-size: 12.5px; font-weight: var(--mf-w-button); color: var(--mf-text); }
.mp-trust svg { color: var(--mf-primary); flex: none; }
.mp-live { width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: #2e9e6b; box-shadow: 0 0 0 0 rgba(46, 158, 107, .5); animation: mp-pulse 2s infinite; }
@keyframes mp-pulse { 70% { box-shadow: 0 0 0 7px rgba(46, 158, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 158, 107, 0); } }

.mp-unlock { margin-top: 14px; padding: 18px; border-radius: calc(var(--mf-radius) + 4px); background: var(--mf-chrome); color: var(--mf-on-chrome); box-shadow: var(--mf-shadow-lg); scroll-margin-top: calc(var(--mf-nav-h) + 20px); }
.mp-unlock__kicker { margin: 0 0 8px; font-size: 12px; font-weight: var(--mf-w-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-accent); }
.mp-unlock h2 { margin: 0 0 6px; font-size: 20px; color: var(--mf-on-chrome); }
.mp-unlock__lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--mf-on-chrome) 78%, transparent); }
.mp-plans { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.mp-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border: 1.5px solid color-mix(in srgb, var(--mf-on-chrome) 22%, transparent); border-radius: var(--mf-radius-sm); color: var(--mf-on-chrome); text-decoration: none !important; transition: border-color .25s, background .25s; }
.mp-plan:hover { border-color: var(--mf-accent); background: color-mix(in srgb, var(--mf-on-chrome) 7%, transparent); }
.mp-plan.is-best { border-color: var(--mf-accent); background: color-mix(in srgb, var(--mf-accent) 14%, transparent); }
.mp-plan span { display: flex; flex-direction: column; gap: 2px; }
.mp-plan b { font-size: 14.5px; }
.mp-plan em { font-style: normal; font-size: 12px; font-weight: var(--mf-w-button); color: var(--mf-accent); }
.mp-plan strong { font-size: 18px; font-weight: var(--mf-w-hero); letter-spacing: -.02em; }
.mp-plan small { font-size: 12px; font-weight: var(--mf-w-label); opacity: .75; }
.mp-assure { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: color-mix(in srgb, var(--mf-on-chrome) 82%, transparent); }
.mp-assure li { display: flex; gap: 10px; align-items: flex-start; }
.mp-assure svg { flex: none; margin-top: 1px; color: var(--mf-accent); }
.mp-unlock__login { margin: 10px 0 0; text-align: center; font-size: 14px; color: color-mix(in srgb, var(--mf-on-chrome) 78%, transparent); }
.mp-unlock__login a { color: var(--mf-accent); font-weight: var(--mf-w-button); }

.mp-main section, .mp-after section { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); box-shadow: var(--mf-shadow); }
.mp-main section h2, .mp-after section h2 { margin: 0 0 18px; font-size: 22px; }
.mp-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.mp-why__grid div { padding: 18px; border-radius: var(--mf-radius-sm); background: var(--mf-bg); }
.mp-why__grid b { display: block; margin-bottom: 4px; font-size: 26px; font-weight: var(--mf-w-hero); letter-spacing: -.03em; color: var(--mf-primary); }
.mp-why__grid span { font-size: 14px; color: var(--mf-text-muted); line-height: 1.45; }
.mp-why__link { margin: 16px 0 0; font-size: 14.5px; font-weight: var(--mf-w-button); }
.mp-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mp-reviews__head h2 { margin: 0 !important; }
.mp-reviews__head a { font-size: 14.5px; font-weight: var(--mf-w-button); }
.mp-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.mp-review { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; margin: 0; padding: 20px; border-radius: var(--mf-radius-sm); background: var(--mf-bg); }
.mp-review blockquote { margin: 0; font-size: 15px; line-height: 1.6; }
.mp-review blockquote::before { content: "\201C"; display: block; margin-bottom: -6px; font-size: 40px; line-height: 1; color: var(--mf-accent-ink); }
.mp-review figcaption { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: var(--mf-w-button); }
.mp-review figcaption span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--mf-primary); color: var(--mf-on-primary); font-size: 14px; }
.mp-similar { padding: clamp(20px, 3vw, 30px); }
.mp-similar__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.mp-faq details { border-top: 1px solid var(--mf-border); }
.mp-faq details:first-of-type { border-top: 0; }
.mp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 2px; cursor: pointer; font-weight: var(--mf-w-heading); list-style: none; }
.mp-faq summary::-webkit-details-marker { display: none; }
.mp-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--mf-primary); transition: transform .3s var(--mf-ease); }
.mp-faq details[open] summary::after { transform: rotate(45deg); }
.mp-faq details p { margin: 0 0 16px; color: var(--mf-text-muted); font-size: 15px; }
@media (max-width: 1023px) {
  .mp-unlock { margin-top: 16px; }
  .mp-card { display: block; }
}

@media print { .mp-unlock, .mp-why, .mp-reviews, .mp-similar, .mp-faq, .mp-trust { display: none !important; } }


/* the save button on the profile page must not pick up the grid-card heart rules */
html[data-ml-view] .ml-fav.mp-fav { position: static; top: auto; right: auto; width: auto; height: auto; padding: 9px 16px 9px 12px; gap: 8px; display: inline-flex; align-items: center; border: 1.5px solid var(--mf-border); border-radius: var(--mf-radius-pill); background: var(--mf-surface); color: var(--mf-text); backdrop-filter: none; }
html[data-ml-view] .ml-fav.mp-fav svg { width: 18px; height: 18px; color: var(--mf-primary); }
html[data-ml-view] .ml-fav.mp-fav:hover { border-color: var(--mf-primary); transform: none; }
html[data-ml-view] .ml-fav.mp-fav.is-on { border-color: var(--mf-primary); background: var(--mf-accent-soft); color: var(--mf-text); }
html[data-ml-view] .ml-fav.mp-fav.is-on svg { fill: var(--mf-primary); color: var(--mf-primary); }
.mp-fav .mp-fav__on { display: none; }
.mp-fav.is-on .mp-fav__on { display: inline; }
.mp-fav.is-on .mp-fav__off { display: none; }

/* FAQ: only the answer animates, one open at a time */
.mp-faq__a { display: grid; grid-template-rows: 1fr; }
.mp-faq__a > div { overflow: hidden; min-height: 0; }
.js .mp-faq__a { grid-template-rows: 0fr; transition: grid-template-rows .35s var(--mf-ease); }
.js .mp-faq details.is-shown .mp-faq__a { grid-template-rows: 1fr; }
.mp-faq details summary { transition: color .2s; }
.mp-faq details.is-shown summary { color: var(--mf-primary); }

/* only the FAQ sits below the two columns, so opening an answer can never move the pinned left column */
.mp-after { margin-top: 40px; }

.mp-cta--locked { grid-template-columns: 1fr 1fr; }
.mp-cta--locked .mf-btn { gap: 7px; padding-inline: 10px; }

@media (max-width: 767px) { .mp-item dt { font-size: 12px; } }

/* long values wrap inside their box */
.mp :where(p, b, strong, small, span, dd, li, h1, h2, h3) { overflow-wrap: anywhere; }

/* mobile: grid / flex children may shrink below their content, so long names, employers, languages and emails wrap instead of being cut by the card */
.mp-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mp-two > *, .mp-facts > div, .mp-item, .mp-item dl > div, .mp-why__grid > div, .mp-id, .mp-side { min-width: 0; }
.mp-item header > div, .mp-item header > span:not(.mp-item__n), .mp-langs li > span:first-child, .mp-plan > span, .mp-tools > * { min-width: 0; }
.mp-langs li { flex-wrap: wrap; row-gap: 4px; }
.mp-skills { max-width: 100%; }
.mp-skills li { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 640px) { .mp-two { grid-template-columns: minmax(0, 1fr); } }

/* this page sets data-ml-view="gallery" for its "similar maids" cards, and that mode clips every .ml-card__skills to one line and hides the 4th+.
   The profile's own Key skills list must show every skill, wrapping onto as many lines as it needs. */
html[data-ml-view="gallery"] .mp-skills { flex-wrap: wrap; overflow: visible; gap: 8px; margin: 0; }
html[data-ml-view="gallery"] .mp-skills li { flex: 0 1 auto; max-width: 100%; padding: 6px 13px; font-size: 13.5px; }
html[data-ml-view="gallery"] .mp-skills li:nth-child(n+4) { display: list-item; }