/* ═══════════════════════════════════════════════════════════════════════════
   /municipalities — public page for local authorities (consolidated redesign).
   Page chrome = Autil (the jw-* tokens loaded from join-workspace.css, purple brand); the municipality GOLD lives only
   inside the product visuals (the phone and the portal frame), exactly as it does in the real product:
     accent #F5B400 · deep #B87E00 · soft rgba(245,180,0,.14) · border rgba(245,180,0,.4) · page #FFF5F8 · link #845EC2
   Every class is prefixed mp-. Mobile-first, no horizontal page overflow, visible focus, reduced-motion support.
   ═══════════════════════════════════════════════════════════════════════════ */

.mp-page {
  --mp-brand: #6b4a9e;
  --mp-brand-2: #845ec2;
  --mp-brand-soft: #f3ecfc;
  --mp-soft-bg: #faf6fe;
  --mp-gold: #f5b400;
  --mp-gold-deep: #b87e00;
  --mp-gold-soft: rgba(245, 180, 0, 0.14);
  --mp-gold-border: rgba(245, 180, 0, 0.4);
  --mp-app-bg: #fff5f8;
  overflow-x: clip;
  line-height: 1.6;
}

.mp-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); box-sizing: border-box; }
.mp-shell--narrow { max-width: 820px; }
.mp-shell--wide { max-width: 1380px; }

/* ── type ── */
.mp-h1, .mp-h2 { text-wrap: balance; }
.mp-h1 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0.9rem 0 1rem; font-weight: 400; color: var(--jw-ink); }
.mp-h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1.15; margin: 0 0 0.7rem; font-weight: 400; color: var(--jw-ink); }
.mp-h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.3; margin: 0 0 0.35rem; color: var(--jw-ink); }
.mp-lead { font-size: 1.08rem; line-height: 1.75; color: var(--jw-sub); margin: 0 0 0.7rem; max-width: 56ch; }
.mp-head { margin-bottom: clamp(20px, 3vw, 32px); }
.mp-head--center { text-align: center; }
.mp-head--center .mp-lead { margin-inline: auto; }
.mp-note { margin: 1rem 0 0; font-size: 0.92rem; color: var(--jw-sub); }
.mp-note--center { text-align: center; }
.mp-caption { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--jw-muted); }
.mp-caption--center { text-align: center; }
.mp-hint { margin: 0.2rem 0 1rem; font-weight: 700; color: var(--mp-brand); font-size: 0.95rem; }

/* ── sections ── */
.mp-section { padding: clamp(44px, 6vw, 76px) 0; scroll-margin-top: 80px; }
.mp-section--soft { background: var(--mp-soft-bg); }
/* quiet sections: a soft lilac -> gold-tint band (the Municipality identity, never a yellow block) */
.mp-section--band { background: linear-gradient(180deg, #faf6fe 0%, #f6efff 48%, rgba(245, 180, 0, 0.08) 100%), #fffdf8; }
.mp-section--sped { padding: clamp(36px, 5vw, 60px) 0; }
#demo, #portal, #how-it-works, #resident { scroll-margin-top: 80px; }
.mp-section--tight { padding: clamp(24px, 4vw, 40px) 0; }

/* ── buttons ── */
.mp-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 48px; padding: 0.75rem 1.7rem; border-radius: 14px; border: 2px solid transparent;
  font: inherit; font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, background .2s ease;
}
.mp-btn--primary { background: linear-gradient(135deg, #6b4a9e, #845ec2); color: #fff; box-shadow: 0 10px 26px rgba(107, 74, 158, 0.28); }
.mp-btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(107, 74, 158, 0.36); }
.mp-btn--primary:disabled { background: #e5e1ef; color: #6e6882; box-shadow: none; cursor: not-allowed; }
.mp-btn--ghost { background: #fff; color: var(--mp-brand); border-color: #d9ccf0; }
.mp-btn--ghost:hover { background: var(--mp-brand-soft); }
.mp-btn:focus-visible, .mp-linkbtn:focus-visible, .mp-faq-item summary:focus-visible, .mp-source__link:focus-visible { outline: 3px solid rgba(107, 74, 158, 0.55); outline-offset: 3px; border-radius: 10px; }
.mp-linkbtn { margin-top: 1rem; padding: 0.4rem 0; background: none; border: 0; font: inherit; font-weight: 700; color: var(--mp-brand); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.mp-linkbtn--inline { margin-top: 0; align-self: center; text-decoration: none; padding: 0.4rem 0.6rem; }
.mp-linkbtn--inline:hover { text-decoration: underline; }
.mp-hero__more { display: inline-block; margin-top: 1rem; padding: 0.3rem 0.5rem; color: var(--mp-brand); font-weight: 700; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; border-radius: 8px; }
.mp-hero__more:hover { color: #523783; }
.mp-hero__more:focus-visible { outline: 3px solid rgba(107, 74, 158, 0.55); outline-offset: 3px; }
.mp-cta-row { align-items: center; }
.mp-cta__access { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1.2rem 0 0; font-size: 0.93rem; color: var(--jw-sub); }
.mp-badge { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 100px; background: var(--mp-brand-soft); color: var(--mp-brand); font-weight: 800; font-size: 0.85rem; }

/* The Municipality portal's own login art behind the sections: faded + masked so it adds identity, never noise (scoped to this page). */
.mp-page .ps-bgwash { opacity: 0.14; -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 20%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 85%); }
.mp-page .ps-bgwash--soft { opacity: 0.12; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 48%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 48%, transparent 100%); }
.mp-page .ps-bgwash--strong { opacity: 0.18; }

/* ── A. hero ── */
.mp-hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0 clamp(44px, 6vw, 72px);
  background: radial-gradient(900px 460px at 85% -12%, rgba(245, 180, 0, 0.26) 0%, transparent 62%), radial-gradient(760px 420px at 8% 108%, rgba(245, 180, 0, 0.18) 0%, transparent 64%), radial-gradient(600px 300px at 50% 40%, #efe3ff 0%, transparent 70%), #fffdf6;
}
.mp-hero__inner { display: block; text-align: center; }
.mp-hero__copy { max-width: 820px; margin: 0 auto; }
.mp-hero__copy .mp-hero__sub { margin-inline: auto; }
.mp-hero .mp-cta-row, .mp-hero .mp-flow { justify-content: center; }
.mp-hero .mp-flow { margin-top: 1.3rem; }
.mp-badge--gold { background: rgba(245, 180, 0, 0.18); color: #7a4a00; border: 1px solid rgba(245, 180, 0, 0.45); }
.mp-hero__shape { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(255, 224, 140, 0.9), rgba(245, 180, 0, 0.35) 55%, transparent 72%); filter: blur(2px); }
.mp-hero__shape--a { width: 220px; height: 220px; top: -60px; inset-inline-start: 6%; }
.mp-hero__shape--b { width: 120px; height: 120px; bottom: 12%; inset-inline-end: 8%; opacity: 0.8; }
.mp-hero__shape--c { width: 56px; height: 56px; top: 24%; inset-inline-end: 22%; opacity: 0.7; }
.mp-hero__sub { font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.75; color: var(--jw-sub); margin: 0 0 1.6rem; max-width: 50ch; }
.mp-flow { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.mp-flow li { padding: 0.45rem 1rem; border-radius: 100px; background: #fff; border: 1px solid #e5dcf4; color: var(--jw-ink); font-weight: 700; font-size: 0.92rem; box-shadow: var(--jw-shadow-sm); }
.mp-flow li:not(:last-child)::after { content: "\2190"; margin-inline-start: 0.7rem; color: var(--mp-brand-2); font-weight: 800; }

/* ── the real-looking phone (CityScreen) ── */
.mp-art { display: block; width: 100%; height: 100%; }
.mp-dphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The screen is laid out at the REAL 360px phone width (so real px font sizes) and scaled as a whole: --mp-s per viewport. */
.mp-dscale { --mp-s: 0.92; position: relative; flex: none; width: calc(378px * var(--mp-s)); height: calc(662px * var(--mp-s)); max-width: 100%; }
.mp-dscale > .mp-dphone { position: absolute; top: 0; right: 0; transform: scale(var(--mp-s)); transform-origin: top right; }
.mp-dscale--hero { --mp-s: 0.86; }
.mp-dscale--canvas { --mp-s: 0.7; }
.mp-dphone { position: relative; width: 378px; box-sizing: border-box; padding: 9px; border-radius: 46px; background: #111; box-shadow: 0 28px 56px rgba(0, 0, 0, 0.28); direction: rtl; text-align: right; }
.mp-dphone__punch { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); z-index: 5; }
.mp-dphone__screen { position: relative; height: 644px; display: flex; flex-direction: column; overflow: hidden; border-radius: 37px; background: var(--mp-app-bg); color: #1a1a2e; }
.mp-dstatus { flex: none; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 11px; font-weight: 600; color: #1a1a2e; background: var(--mp-app-bg); }
.mp-dstatus__r { display: inline-flex; gap: 4px; align-items: center; }
.mp-dphone__scroll { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mp-dphone__scroll::-webkit-scrollbar { display: none; }
.mp-dphone__scroll[hidden] { display: none; }
.mp-dphone--hero .mp-dphone__scroll { overflow: hidden; }

.mp-dhero { position: relative; overflow: hidden; padding: 12px 16px 44px; text-align: center; color: #fff; background: linear-gradient(135deg, #2e1d00, #f5b400, #2e1d00); }
.mp-dhero--plain { background: linear-gradient(135deg, #7a4a00, #f5b400, #7a4a00); }
.mp-dhero__scrim { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(46, 29, 0, 0.72), rgba(46, 29, 0, 0.3), rgba(46, 29, 0, 0.72)); }
.mp-dhero__toolbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; min-height: 46px; }
.mp-dhero__info { width: 34px; height: 34px; }
.mp-dhero__title { position: relative; z-index: 1; margin: 6px 8px 0; font-size: 26px; font-weight: 900; line-height: 32px; letter-spacing: -0.3px; color: #fff; overflow-wrap: anywhere; }
.mp-did { display: flex; justify-content: center; margin: -34px 0 12px; position: relative; z-index: 2; }
.mp-did__badge { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(45, 42, 50, 0.22); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mp-did__badge { position: relative; }
.mp-did__letter { font-size: 28px; font-weight: 900; color: var(--mp-gold-deep); }

.mp-dbody { padding: 0 0 24px; }
.mp-dsec { margin-top: 18px; padding: 8px 18px 10px; border-radius: 14px; transition: background .25s ease, box-shadow .25s ease; }
.mp-dsec[data-highlight="true"] { background: rgba(245, 180, 0, 0.13); box-shadow: inset 0 0 0 2px rgba(245, 180, 0, 0.55); }
.mp-dsec__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; font-weight: 800; color: #1a1a2e; }
.mp-dsec__dot { width: 7px; height: 7px; border-radius: 4px; background: var(--mp-gold); flex: none; }

.mp-dcar { display: flex; gap: 12px; margin-inline: -18px; padding: 2px 18px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; overscroll-behavior-x: contain; scrollbar-width: none; }
.mp-dcar::-webkit-scrollbar { display: none; }
.mp-dcar > .mp-dcard { flex: none; width: 220px; margin: 0; scroll-snap-align: start; }
.mp-dcard { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 0; text-align: right; font: inherit; color: inherit; border-radius: 18px; overflow: hidden; position: relative; }
button.mp-dcard { cursor: pointer; border: 0; transition: transform .15s ease, box-shadow .15s ease; }
button.mp-dcard:hover { transform: translateY(-1px); }
.mp-dcard--image { background: #3b2a00; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border: 1px solid #f0d27a; }
.mp-dcard__img { position: relative; display: block; height: 168px; overflow: hidden; }
.mp-dcard__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 75%); }
.mp-dcard__over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px 14px; color: #fff; }
.mp-dcard--themed { gap: 7px; padding: 14px; background: #fff8e1; border: 1px solid #f0d27a; color: #3b2a00; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.mp-dcard--static { cursor: default; }
.mp-dchips { display: flex; flex-wrap: wrap; gap: 5px; }
.mp-dchip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 16px; background: #ffe9a8; color: #3b2a00; border: 1px solid #f0d27a; }
.mp-dchip--on-image { background: rgba(255, 255, 255, 0.9); color: #1b1b1b; border: 0; }
.mp-dcard__title { font-size: 16px; font-weight: 800; line-height: 1.3; }
.mp-dcard__title--white { font-size: 15px; color: #fff; }
.mp-dcard__title--plain { font-size: 14px; font-weight: 700; color: #2a2000; margin: 0; }
.mp-dcard__sum { font-size: 13px; line-height: 1.45; opacity: 0.85; }
.mp-dcard__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.mp-dcard__meta--muted { font-size: 13px; color: #5b6472; margin: 2px 0 0; }
.mp-dcta { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--mp-gold); color: #1b1b1b; font-size: 12px; font-weight: 800; }
.mp-dflag { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: var(--mp-gold); color: #1b1b1b; font-size: 11px; font-weight: 800; }
.mp-dchans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mp-dchan { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--mp-gold-soft); border: 1px solid var(--mp-gold-border); color: #7a4a00; font-size: 12px; font-weight: 800; }
.mp-dlist-card { background: #fff; border: 1px solid rgba(132, 94, 194, 0.12); border-radius: 18px; padding: 12px; margin-bottom: 12px; box-shadow: 0 3px 12px rgba(45, 42, 50, 0.06); }

.mp-dactions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.mp-dtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 4px; border-radius: 14px; border: 1px solid var(--mp-gold-border); background: var(--mp-gold-soft); font: inherit; }
button.mp-dtile { cursor: pointer; }
.mp-dtile__icon { width: 26px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, 0.55); display: flex; align-items: center; justify-content: center; color: var(--mp-gold-deep); }
.mp-dtile__label { font-size: 12px; font-weight: 800; color: #7a4a00; text-align: center; }
.mp-dinfo, .mp-ddept { background: #fff; border: 1px solid var(--mp-gold-border); border-radius: 18px; overflow: hidden; }
.mp-ddept { margin-bottom: 12px; }
.mp-ddept--hl { border: 1.5px solid var(--mp-gold); }
.mp-ddept[data-highlight="true"] { box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.45); }
.mp-drow { display: flex; align-items: center; gap: 12px; padding: 12px 8px; }
.mp-drow--line { border-top: 1px solid var(--mp-gold-border); }
.mp-drow--head { padding: 8px; }
.mp-drow__icon { width: 32px; height: 32px; flex: none; border-radius: 16px; background: var(--mp-gold-soft); color: var(--mp-gold-deep); display: flex; align-items: center; justify-content: center; }
.mp-drow__label { margin: 0; font-size: 11px; color: #5b6472; }
.mp-drow__value { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #1a1a2e; overflow-wrap: anywhere; }
.mp-ddept__name { margin: 0; font-size: 13px; font-weight: 800; color: #1a1a2e; }
.mp-ddept__link { padding: 8px; }
.mp-dlinkrow { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px; margin-bottom: 4px; border: 0; border-radius: 14px; background: var(--mp-gold-soft); color: #6b4a9e; font: inherit; text-align: right; }
button.mp-dlinkrow { cursor: pointer; }
.mp-dlinkrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; font-weight: 700; }
.mp-dlinkrow__text small { font-size: 11.5px; font-weight: 500; color: #5b6472; line-height: 16px; }
.mp-dlinkrow__cta { flex: none; font-size: 11px; font-weight: 700; }

.mp-dtabs { flex: none; position: relative; z-index: 3; background: #fff; border-top: 1px solid rgba(132, 94, 194, 0.1); box-shadow: 0 -4px 18px rgba(28, 10, 60, 0.1); padding: 14px 0 8px; }
.mp-dtabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; align-items: flex-end; }
.mp-dtab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #5b6472; }
.mp-dtab__dot { width: 5px; height: 5px; border-radius: 3px; background: transparent; }
.mp-dtab__label { font-size: 11px; font-weight: 700; }
.mp-dtab.is-active { color: var(--mp-gold); }
.mp-dtab.is-active .mp-dtab__dot { background: var(--mp-gold); }
.mp-dtab.is-active .mp-dtab__label { font-weight: 800; color: #8a5a00; }
.mp-dtab__home { margin-top: -34px; width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: 0 8px 16px rgba(28, 10, 60, 0.22); display: flex; align-items: center; justify-content: center; color: #5b6472; }
.mp-dtoast { position: absolute; inset-inline: 12px; bottom: 84px; margin: 0; z-index: 4; border-radius: 12px; background: #241a38; color: #fff; font-size: 12px; line-height: 1.5; text-align: center; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .2s ease; pointer-events: none; }
.mp-dtoast:not(:empty) { opacity: 1; max-height: 90px; padding: 8px 12px; }

.mp-ddetail { padding: 8px 12px 20px; }
.mp-dback { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 10px; padding: 6px 12px; min-height: 34px; border-radius: 100px; border: 1.5px solid var(--mp-gold-border); background: #fff; color: #7a4a00; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.mp-darticle { background: #fff; border: 1px solid rgba(132, 94, 194, 0.12); border-radius: 18px; overflow: hidden; }
.mp-dcover { display: block; height: 170px; position: relative; overflow: hidden; }
.mp-darticle__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mp-darticle__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: #1a1a2e; }
.mp-darticle__meta { margin: 0; font-size: 12px; color: #5b6472; }
.mp-darticle__lead { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.mp-darticle__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #2a2a3a; }
.mp-dcta--btn { border: 0; font: inherit; font-size: 13px; font-weight: 800; padding: 8px 14px; cursor: pointer; }

.mp-dnav { display: grid; gap: 0.5rem; max-width: 360px; margin: 0.4rem 0 1.4rem; }
.mp-dnav__btn { display: flex; align-items: center; gap: 0.7rem; min-height: 48px; padding: 0.55rem 1rem; border-radius: 14px; border: 1.5px solid #e5dcf4; background: #fff; color: var(--jw-ink); font: inherit; font-weight: 700; text-align: right; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.mp-dnav__btn svg { flex: none; padding: 7px; box-sizing: content-box; width: 16px; height: 16px; border-radius: 10px; background: var(--mp-gold-soft); color: var(--mp-gold-deep); }
.mp-dnav__btn:hover { border-color: var(--mp-brand-2); box-shadow: var(--jw-shadow-sm); transform: translateX(-2px); }
.mp-personalize { margin: 1.2rem 0 0; max-width: 360px; }
.mp-personalize .jw-label { font-size: 0.82rem; }

.mp-dnav__btn:focus-visible, .mp-pnav__item:focus-visible, .mp-dcard:focus-visible, .mp-dtile:focus-visible, .mp-dlinkrow:focus-visible, .mp-dback:focus-visible, .mp-dcta--btn:focus-visible,
.mp-kpi:focus-visible, .mp-pbtn:focus-visible, .mp-pchip:focus-visible, .mp-pseg button:focus-visible, .mp-pinlist button:focus-visible, .mp-portal__main:focus-visible { outline: 3px solid rgba(107, 74, 158, 0.6); outline-offset: 2px; }
.mp-portal :is(button, a, [role="tab"], input, select, textarea, [tabindex="0"]):focus-visible { outline: 3px solid rgba(107, 74, 158, 0.6); outline-offset: 2px; }

/* ── B. family demo: two phones side by side ── */
.mp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); justify-items: center; align-items: start; }
.mp-duo__col { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; max-width: 100%; }
.mp-duo__label { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mp-duo__pill { display: inline-block; padding: 6px 18px; border-radius: 100px; background: #fff; border: 1.5px solid #d9ccf0; color: var(--mp-brand); font-weight: 800; font-size: 0.95rem; }
.mp-duo__pill--active { background: linear-gradient(135deg, #f5b400, #e0a000); border-color: transparent; color: #2e1d00; box-shadow: 0 6px 16px rgba(245, 180, 0, 0.35); }
.mp-duo__note { max-width: 34ch; min-height: 3em; font-weight: 700; line-height: 1.55; color: var(--jw-sub); font-size: 0.95rem; }
.mp-dnav--row { display: flex; flex-wrap: wrap; justify-content: center; max-width: 760px; margin: clamp(20px, 3vw, 32px) auto 0; }
.mp-demo__extra--center { display: flex; flex-direction: column; align-items: center; margin-top: clamp(20px, 3vw, 32px); }
.mp-demo__extra--center .mp-personalize { width: min(100%, 360px); }
.mp-section.ps-scope > .mp-shell { position: relative; }


/* ── C. the portal frame ── */
.mp-portal { background: #f7f8fc; border: 1px solid #e4e5ee; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 64px rgba(36, 26, 56, 0.16); direction: rtl; text-align: right; color: #111827; min-width: 0; }
.mp-portal--loading { min-height: 640px; }
.mp-portal__chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eceef5; border-bottom: 1px solid #e4e5ee; }
.mp-portal__chrome span { width: 10px; height: 10px; border-radius: 50%; background: #cfd2de; }
.mp-portal__chrome em { margin-inline-start: 12px; padding: 3px 14px; border-radius: 100px; background: #fff; color: #5b6472; font-size: 12px; font-style: normal; direction: ltr; }
.mp-portal__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 720px; transition: grid-template-columns .2s ease; }
.mp-portal__body.is-collapsed { grid-template-columns: 68px minmax(0, 1fr); }
.mp-portal__main { min-width: 0; padding: clamp(16px, 3vw, 28px); background: #f7f8fc; }
.mp-pnav { display: flex; flex-direction: column; background: #fff; border-inline-end: 1px solid #e4e5ee; }
.mp-pnav__brand { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 16px; border-bottom: 1px solid #f0f0f8; }
.mp-pnav__collapse { margin-inline-start: auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e4e5ee; border-radius: 8px; background: #fff; color: #4b5563; cursor: pointer; }
.mp-pnav__collapse:hover { background: #f5f5fb; }
.mp-pnav__logo { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(90deg, #b45300, #f5b400); display: flex; align-items: center; justify-content: center; }
.mp-pnav__brand b { display: block; font-size: 13px; }
.mp-pnav__brand small { display: block; font-size: 11px; color: #5b6472; }
.mp-pnav__list { flex: 1; padding: 6px 0; overflow-y: auto; }
.mp-pnav__glabel { margin: 0; padding: 14px 22px 6px; font-size: 11px; font-weight: 700; color: #5b6472; }
.mp-pnav__item { position: relative; display: flex; align-items: center; gap: 12px; width: calc(100% - 20px); min-height: 40px; margin: 1px 10px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: #4b5563; font: inherit; font-size: 14px; text-align: right; cursor: pointer; }
.mp-pnav__item svg { opacity: 0.65; flex: none; }
.mp-pnav__item:hover { background: #f5f5fb; }
.mp-pnav__item[aria-selected="true"] { background: #fef3c7; color: #b45300; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(245, 180, 0, 0.38); }
.mp-pnav__item[aria-selected="true"] svg { opacity: 1; }
.mp-pnav__item[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 3px; border-radius: 0 2px 2px 0; background: #f5b400; }
.mp-pnav__badge { margin-inline-start: auto; min-width: 18px; padding: 0 6px; border-radius: 100px; background: #b45309; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; text-align: center; }
.mp-pnav__who { display: flex; align-items: center; gap: 10px; margin: 12px; padding: 10px; border-radius: 10px; background: #f3f4f9; border: 1px solid #f0f0f8; }
.mp-pnav__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: linear-gradient(90deg, #b45300, #f5b400); color: #1a1200; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mp-pnav__who b { display: block; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.mp-pnav__who small { display: block; font-size: 11px; color: #5b6472; }
.mp-pnav__whotext { min-width: 0; }
.mp-pnav__footer { border-top: 1px solid #f0f0f8; padding: 8px 10px 12px; display: grid; gap: 4px; }
.mp-pnav__footer .mp-pnav__who { margin: 4px 0; }
.mp-pnav__actions { display: flex; gap: 6px; }
.mp-pnav__fbtn, .mp-pnav__logout { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid #e4e5ee; border-radius: 10px; background: #fff; color: #4b5563; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mp-pnav__fbtn:hover, .mp-pnav__logout:hover, .mp-pnav__item:hover { background: #f5f5fb; }
.mp-pnav__fbtn--wide { flex: 1; }
.mp-pnav__logout { width: 100%; }
.mp-portal__body.is-collapsed .mp-pnav__label, .mp-portal__body.is-collapsed .mp-pnav__brandtext, .mp-portal__body.is-collapsed .mp-pnav__glabel, .mp-portal__body.is-collapsed .mp-pnav__whotext, .mp-portal__body.is-collapsed .mp-pnav__badge { display: none; }
.mp-portal__body.is-collapsed .mp-pnav__brand { padding: 0 8px; flex-direction: column; justify-content: center; gap: 4px; height: 76px; }
.mp-portal__body.is-collapsed .mp-pnav__collapse { margin-inline-start: 0; }
.mp-portal__body.is-collapsed .mp-pnav__item { justify-content: center; padding: 8px; }
.mp-portal__body.is-collapsed .mp-pnav__actions { flex-direction: column; }
.mp-portal__body.is-collapsed .mp-pnav__who { justify-content: center; padding: 6px; }

.mp-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.mp-phead__title { margin: 0; font-size: 18px; font-weight: 800; }
.mp-phead__sub { margin: 2px 0 0; font-size: 12px; color: #5b6472; }
.mp-pwelcome { padding: 22px; margin-bottom: 18px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #7a4a00 0%, #a66a00 38%, #d68f00 72%, #f5b400 100%); }
.mp-pwelcome h3 { margin: 0; font-size: 20px; font-weight: 900; }
.mp-pwelcome p { margin: 4px 0 12px; font-size: 14px; opacity: 0.88; }
.mp-pwelcome__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-pwelcome__chips span { padding: 4px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.28); font-size: 12px; font-weight: 700; }
.mp-pgroup { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #5b6472; }
.mp-pkpis { margin-bottom: 14px; }
.mp-pkpis .mp-pgroup { margin: 0 2px 6px; }
.mp-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.mp-kpi { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 12px; text-align: right; font: inherit; border: 1px solid #e4e5ee; border-radius: 16px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.mp-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.mp-kpi__icon { width: 32px; height: 32px; border-radius: 12px; background: #fef3c7; color: #b45300; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.mp-kpi strong { font-size: 24px; font-weight: 900; line-height: 1.1; }
.mp-kpi strong small { font-size: 13px; font-weight: 600; color: #5b6472; margin-inline-start: 2px; }
.mp-kpi__label { font-size: 13px; font-weight: 600; }
.mp-kpi__hint { font-size: 11.5px; color: #5b6472; }
/* phone: two compact columns instead of six full-width cards stacked (the demo is a marketing preview, not the live grid) */
@media (max-width: 560px) { .mp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mp-kpi { padding: 10px; } .mp-kpi strong { font-size: 21px; } }
.mp-pquick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 14px; background: #fff; border: 1px solid #e4e5ee; border-radius: 16px; }
.mp-pquick__label { font-size: 13px; font-weight: 800; color: #5b6472; margin-inline-end: 4px; }
.mp-pquick__btn { min-height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #e4e5ee; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: #111827; cursor: pointer; }
.mp-pquick__btn.is-primary { background: #fef3c7; border-color: rgba(245, 180, 0, 0.5); color: #b45300; }
.mp-pcard { background: #fff; border: 1px solid #e4e5ee; border-radius: 20px; padding: 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); margin-bottom: 14px; }
.mp-pcard__title { margin: 0; font-size: 14px; font-weight: 800; }
.mp-pcard__sub { margin: 2px 0 10px; font-size: 12px; color: #5b6472; }
.mp-prows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-prows li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f3f4f9; border: 1px solid #e4e5ee; font-size: 13px; }
.mp-prows li svg { flex: none; color: #b45300; }
.mp-prows li span { margin-inline-start: auto; color: #5b6472; font-size: 12px; }
.mp-prows li em { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: #e4e5ee; }
.mp-pchipx { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; background: transparent !important; border: 1px solid #5b6472; color: #4b5563; font-size: 11px !important; }

.mp-portal__body { position: relative; }
.mp-portal__body::before { content: ""; position: absolute; inset: 0; background: url('/images/portal-bg/municipality.webp') center / cover no-repeat; opacity: 0.09; pointer-events: none; }
.mp-portal__main, .mp-pnav { position: relative; }
.mp-pquick__btn { display: inline-flex; align-items: center; gap: 6px; }
.mp-pquick__btn svg { color: var(--mp-gold-deep); }
/* working area, like the real dashboard: 2/3 (scheduled + upcoming, activity) and 1/3 (content health, inquiries) */
.mp-dash__work { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mp-dash__wide, .mp-dash__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mp-dash__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; align-items: start; }
.mp-pcard--tall { margin-bottom: 0; min-width: 0; }
.mp-pcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.mp-pempty { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: #f3f4f9; border: 1px solid #e4e5ee; }
.mp-pempty__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mp-gold-soft); color: var(--mp-gold-deep); display: flex; align-items: center; justify-content: center; }
.mp-pempty > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-pempty b { font-size: 13px; font-weight: 700; }
.mp-pempty small { font-size: 11.5px; color: #5b6472; }
.mp-plink { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 4px; color: #9a4500; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.mp-plink--block { display: flex; justify-content: center; width: 100%; margin-top: 10px; font-size: 13px; }
.mp-pcounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 10px; }
.mp-pcount { padding: 10px 12px; border-radius: 14px; background: #f3f4f9; }
.mp-pcount b { display: block; font-size: 22px; font-weight: 900; line-height: 1; }
.mp-pcount span { display: block; margin-top: 4px; font-size: 12px; color: #5b6472; }
.mp-prec { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mp-prec li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #f3f4f9; }
.mp-prec li i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #cfd2de; }
.mp-prec li i.is-unread { background: #b45300; }
.mp-prec__text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mp-prec__text b { font-size: 13px; font-weight: 500; }
.mp-prec__text b.is-unread { font-weight: 700; }
.mp-prec__text small { font-size: 12px; color: #5b6472; }
.mp-prec li em { font-style: normal; font-size: 12px; color: #4b5563; }
/* read-only pages: פרטי הרשות / הגדרות / מדריך למערכת */
.mp-pdl { margin: 10px 0 0; display: grid; gap: 8px; }
.mp-pdl > div { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; background: #f3f4f9; }
.mp-pdl dt { font-size: 12px; color: #5b6472; }
.mp-pdl dd { margin: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.mp-psettings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }
.mp-psettings__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mp-psettings__nav li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: #4b5563; }
.mp-psettings__nav li.is-on { background: #fef3c7; color: #9a4500; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(245, 180, 0, 0.38); }
.mp-pmembers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-pmember__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-pmfa { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #5b6472; }
.mp-pguide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.mp-pguide li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #f3f4f9; font-size: 13px; font-weight: 600; }
.mp-prows .mp-prows__text { margin-inline-start: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; font-size: inherit; }
.mp-prows .mp-prows__text b { font-size: 13px; font-weight: 700; }
.mp-prows .mp-prows__text small { font-size: 12px; color: #5b6472; }
.mp-ring { position: relative; flex: none; width: 84px; height: 84px; display: inline-flex; align-items: center; justify-content: center; }
.mp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mp-ring circle { fill: none; stroke-width: 9; }
.mp-ring__bg { stroke: #fef3c7; }
.mp-ring__fg { stroke: #f5b400; stroke-linecap: round; }
.mp-ring b { font-size: 17px; font-weight: 900; }
.mp-phealth { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.mp-phealth__txt { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.mp-phealth__txt b { font-size: 13.5px; }
.mp-phealth__txt small { font-size: 11.5px; color: #5b6472; }
.mp-phealth__ok { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12.5px; font-weight: 600; color: #047857; }
.mp-ptiles { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mp-ptiles li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #f3f4f9; border: 1px solid #e4e5ee; }
.mp-ptiles strong { font-size: 20px; font-weight: 900; line-height: 1.1; }
.mp-ptiles span { font-size: 12px; color: #5b6472; }
.mp-phealth__media { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 12px; color: #4b5563; }
.mp-phealth__media i { font-style: normal; }
.mp-pcard__sub--strong { margin-top: 12px; font-weight: 800; color: #111827; font-size: 12.5px; }
.mp-pattns { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mp-pattn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #f3f4f9; border: 1px solid #e4e5ee; }
.mp-pattn[data-severity="info"] svg { color: #1d4ed8; }
.mp-pattn svg { flex: none; color: #d97706; margin-top: 2px; }
.mp-pattn span { display: flex; flex-direction: column; }
.mp-pattn b { font-size: 12.5px; }
.mp-pattn small { font-size: 11.5px; color: #5b6472; }
.mp-pfeed { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.mp-pfeed li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f0f8; }
.mp-pfeed li:first-child { border-top: 0; }
.mp-pfeed__icon { flex: none; width: 30px; height: 30px; border-radius: 12px; background: #f3f4f9; color: #4b5563; display: flex; align-items: center; justify-content: center; }
.mp-pfeed__body { min-width: 0; flex: 1; display: grid; gap: 1px; }
.mp-pfeed b { font-size: 13px; }
.mp-pfeed span { font-size: 12px; color: #4b5563; }
.mp-pfeed small { font-size: 12px; color: #5b6472; }
.mp-pfeed__toggle { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 4px; padding: 8px 0 2px; border: 0; border-top: 1px solid #f0f0f8; background: none; color: #9a4500; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mp-pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mp-pbtn--primary { background: linear-gradient(135deg, #b45300, #7a3800); color: #fff; box-shadow: 0 1px 3px rgba(180, 83, 0, 0.28); }
.mp-pbtn--secondary { background: #f3f4f9; color: #111827; border-color: #e4e5ee; }
.mp-pbtn--ghost { background: transparent; color: #4b5563; }
.mp-pbtn--sm { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.mp-pfilters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mp-pchip { padding: 5px 14px; border-radius: 100px; border: 1px solid #e4e5ee; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #4b5563; cursor: pointer; }
.mp-pchip[aria-pressed="true"] { background: #fef3c7; border-color: rgba(245, 180, 0, 0.5); color: #b45300; }
.mp-pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.mp-pitem { display: flex; gap: 14px; padding: 14px; background: #fff; border: 1px solid #e4e5ee; border-radius: 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); min-width: 0; }
.mp-pitem__thumb { position: relative; flex: none; width: 112px; height: 112px; border-radius: 14px; overflow: hidden; background: #fef3c7; color: #b45300; display: flex; align-items: center; justify-content: center; }
.mp-pitem__date { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 38px; padding: 3px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); color: #3a2400; line-height: 1.1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.mp-pitem__date b { font-size: 17px; font-weight: 900; }
.mp-pitem__date small { font-size: 11px; font-weight: 700; }
.mp-pitem__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mp-pitem__title { margin: 0; font-size: 14px; font-weight: 800; }
.mp-pitem__meta { margin: 0; font-size: 12px; color: #5b6472; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mp-pitem__sum { margin: 0; font-size: 12px; color: #4b5563; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-pitem__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-pbadge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.mp-pbadge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mp-pbadge--green { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.25); color: #047857; }
.mp-pbadge--blue { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); color: #1d4ed8; }
.mp-pbadge--yellow { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.3); color: #92400e; }
.mp-pbadge--gray { background: rgba(107, 114, 128, 0.14); border-color: rgba(107, 114, 128, 0.22); color: #4b5563; }
.mp-pgold { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 100px; background: #f5b400; color: #1a1200; font-size: 11px; font-weight: 800; }
.mp-prsvp { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; width: 100%; }
.mp-prsvp__bar { flex: 1; min-width: 40px; height: 6px; border-radius: 4px; background: #e4e5ee; overflow: hidden; }
.mp-prsvp__bar i { display: block; height: 100%; background: #f5b400; }
.mp-pnote { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-size: 13px; font-weight: 600; }

.mp-pbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: #fff; border: 1px solid #e4e5ee; border-radius: 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.mp-pbar--end { justify-content: flex-end; margin: 0; }
.mp-peditor { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.mp-pform { display: grid; gap: 12px; min-width: 0; }
.mp-pform .jw-field { margin-bottom: 10px; }
.mp-ppreview { padding: 14px; background: #fff; border: 1px solid #e4e5ee; border-radius: 16px; }
.mp-ppreview__label { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.mp-ppreview .mp-dcard { margin: 0; }

.mp-btoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px; background: #fff; border: 1px solid #e4e5ee; border-radius: 14px; }
.mp-btoolbar__spacer { flex: 1; }
.mp-pseg { display: inline-flex; padding: 3px; border-radius: 10px; background: #f3f4f9; border: 1px solid #e4e5ee; }
.mp-pseg button { padding: 5px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: #4b5563; cursor: pointer; }
.mp-pseg button[aria-pressed="true"], .mp-pseg button[aria-selected="true"] { background: #f5b400; color: #2b1d00; }
.mp-pseg--tabs { display: flex; margin-bottom: 12px; }
.mp-pseg--tabs button { flex: 1; }
.mp-bgrid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.mp-bnav, .mp-binspector { padding: 12px; background: #fff; border: 1px solid #e4e5ee; border-radius: 16px; }
.mp-bnav__title { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.mp-bnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mp-bnav li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #f7f8fc; font-size: 12.5px; }
.mp-bnav li .is-off { color: #5b6472; text-decoration: line-through; }
.mp-bnav li input { margin-inline-start: auto; width: 16px; height: 16px; accent-color: #f5b400; }
.mp-bnav__n { width: 18px; height: 18px; border-radius: 6px; background: #e4e5ee; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mp-bcanvas { display: flex; justify-content: center; padding: 20px 8px; border-radius: 18px; background: #20222b radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 22px 22px; overflow: hidden; }
.mp-binspector__hint { margin: 0 0 10px; font-size: 11.5px; color: #5b6472; }
.mp-binspector .jw-field { margin-bottom: 10px; }
.mp-swatches { display: flex; gap: 8px; margin: 4px 0 12px; }
.mp-swatches i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #e4e5ee; }
.mp-pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-pchips span { padding: 3px 12px; border-radius: 100px; border: 1px solid #e4e5ee; font-size: 12px; font-weight: 600; }
.mp-pchips .is-on { background: #fef3c7; border-color: rgba(245, 180, 0, 0.5); color: #b45300; }

.mp-pinbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mp-pinlist { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #e4e5ee; border-radius: 16px; overflow: hidden; }
.mp-pinlist li + li { border-top: 1px solid #f0f0f8; }
.mp-pinlist button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 12px 14px; border: 0; background: transparent; font: inherit; text-align: right; cursor: pointer; }
.mp-pinlist button[aria-pressed="true"] { background: #fef3c7; box-shadow: inset 3px 0 0 #f5b400; }
.mp-pinlist b { font-size: 14px; font-weight: 600; }
.mp-pinlist .is-unread b { font-weight: 800; }
.mp-pinlist__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.mp-pinlist__top small { color: #5b6472; font-size: 11.5px; }
.mp-pinlist__subject { font-size: 12.5px; color: #4b5563; }
.mp-pcat { padding: 2px 10px; border-radius: 100px; background: rgba(245, 180, 0, 0.14); color: #b45300; font-size: 11.5px; font-weight: 700; }
.mp-pdetail { padding: 14px; background: #fff; border: 1px dashed #d9dbe6; border-radius: 16px; min-height: 140px; font-size: 13.5px; }
.mp-pdetail__title { margin: 0 0 2px; font-size: 14px; font-weight: 800; }
.mp-tiles { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-tiles li { display: flex; flex-direction: column; gap: 3px; padding: 14px; background: #fff; border: 1px solid #e4e5ee; border-radius: 18px; font-size: 12.5px; color: #5b6472; }
.mp-tiles strong { font-size: 24px; font-weight: 900; color: #111827; line-height: 1.1; }
.mp-pmember { display: flex; gap: 14px; padding: 14px; background: #fff; border: 1px solid #e4e5ee; border-radius: 18px; min-width: 0; }
.mp-pmember__avatar { width: 42px; height: 42px; flex: none; border-radius: 14px; background: linear-gradient(90deg, #b45300, #f5b400); color: #1a1200; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.mp-pmember__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mp-pmember__name { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; }
.mp-pmember__name svg { color: #f5b400; }
.mp-pmember__email { margin: 0; font-size: 12.5px; color: #5b6472; }

/* ── D. benefits ── */
.mp-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mp-benefit { padding: 1.3rem 1.2rem; background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius); box-shadow: var(--jw-shadow-sm); }
.mp-benefit p { margin: 0; color: var(--jw-sub); font-size: 0.93rem; line-height: 1.6; }
.mp-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; background: var(--mp-brand-soft); color: var(--mp-brand); margin-bottom: 0.8rem; }
.mp-benefit__title { margin: 0 0 0.25rem; font-size: 1.02rem; font-weight: 800; color: var(--jw-ink); }
.mp-soon-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1.4rem 0 0; color: var(--jw-sub); font-weight: 600; }
.mp-soon { display: inline-block; padding: 0.1rem 0.65rem; border-radius: 100px; background: var(--mp-brand-soft); color: var(--mp-brand); font-size: 0.75rem; font-weight: 800; }

/* ── E. special education ── */
.mp-sped { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.mp-sped__card { max-width: 400px; width: 100%; justify-self: center; padding: 14px; border-radius: 26px; background: var(--mp-app-bg); border: 1px solid #f3e1e8; box-shadow: var(--jw-shadow-md); }
.mp-sped__card .mp-ddept { margin: 0; }

/* ── F. how it works ── */
.mp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.mp-step { position: relative; padding: 0.2rem 0; }
.mp-step p { margin: 0; color: var(--jw-sub); font-size: 0.94rem; line-height: 1.6; }
.mp-step__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #6b4a9e, #845ec2); color: #fff; font-weight: 800; margin-bottom: 0.8rem; }

/* ── H. FAQ ── */
.mp-faq { display: grid; gap: 0.7rem; }
.mp-faq-item { background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius-sm); padding: 0 1.1rem; }
.mp-faq-item[open] { border-color: #d9ccf0; box-shadow: var(--jw-shadow-sm); }
.mp-faq-item summary { cursor: pointer; padding: 1rem 0; font-weight: 800; color: var(--jw-ink); list-style-position: inside; }
.mp-faq-item p { margin: 0 0 1rem; color: var(--jw-sub); line-height: 1.7; }

/* ── G. CTA + form ── */
.mp-cta { background: linear-gradient(135deg, #f3ecfc, #fff3e0); }
.mp-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.mp-cta__note { margin: 0 0 1.4rem; font-weight: 800; color: var(--mp-brand); }
.mp-cta__form { padding: clamp(18px, 3vw, 30px); background: #fff; border-radius: 24px; box-shadow: var(--jw-shadow-md); scroll-margin-top: 90px; }
.mp-summary { margin-top: 1.2rem; padding: 1.1rem; background: #fff; border-radius: var(--jw-radius); border: 1px solid #e5dcf4; }
.mp-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.mp-field-error { display: flex; align-items: flex-start; gap: 0.35rem; font-weight: 700; }
.mp-field-error svg { flex: none; margin-top: 0.2rem; }
.mp-form__error { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: var(--jw-radius-sm); background: var(--jw-error-bg); border: 1px solid var(--jw-error-bd); color: #b91c1c; font-weight: 600; }
.mp-form__submit { width: 100%; }
/* spam trap: off-screen (not display:none), never reachable by keyboard or screen reader */
.mp-hp { position: absolute; inset-inline-start: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mp-form__status:empty { display: none; }
.mp-form--done:focus { outline: none; }
.mp-form--done { text-align: center; color: var(--jw-ok); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1rem 0; }
.mp-form--done p { margin: 0; font-weight: 800; font-size: 1.1rem; color: var(--jw-ink); }
.mp-form__ticket { font-size: 1rem; color: var(--jw-sub); }
.mp-form input[type="email"], .mp-form input[type="tel"] { direction: ltr; text-align: right; }
/* the shared jw-input placeholder (#B3ADC4) is 2.2:1 — legible on this page only */
.mp-page .jw-input::placeholder, .mp-page .jw-textarea::placeholder { color: #6b6585; opacity: 1; }
#contact { scroll-margin-top: 72px; }

/* ── I. resident (compact) ── */
.mp-resident { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius); box-shadow: var(--jw-shadow-sm); }
.mp-resident > div { flex: 1 1 340px; min-width: 0; }
.mp-resident__title { margin: 0 0 0.25rem; }
.mp-resident__body { margin: 0; color: var(--jw-sub); font-size: 0.93rem; line-height: 1.65; }
.mp-resident__panel { margin-top: 1rem; padding: 1.2rem; background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius); }
.mp-resident__panel .mp-form { padding: 0; box-shadow: none; border: 0; }

/* ── J. source note ── */
.mp-source { padding: 0 0 clamp(28px, 4vw, 48px); }
.mp-source__text { margin: 0; display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.84rem; line-height: 1.7; color: var(--jw-muted); }
.mp-source__text svg { flex: none; margin-top: 0.3rem; color: var(--mp-brand-2); }
.mp-source__link { color: var(--mp-brand); font-weight: 700; text-underline-offset: 3px; }

/* ── responsive ── */
@media (max-width: 1099px) {
  .mp-dash__work { grid-template-columns: minmax(0, 1fr); }
  .mp-psettings { grid-template-columns: minmax(0, 1fr); }
  .mp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-bgrid { grid-template-columns: minmax(0, 1fr) 220px; }
  .mp-bnav { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .mp-sped, .mp-cta__inner { grid-template-columns: minmax(0, 1fr); }
  .mp-duo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* phones/tablets: the two phones stack (each labelled), the shared topic row follows them, personalize last */
  .mp-dnav { display: flex; flex-wrap: wrap; max-width: none; margin-bottom: 0; }
  .mp-dnav__btn { min-height: 42px; padding: 0.35rem 0.8rem; gap: 0.4rem; font-size: 0.9rem; }
  .mp-page .jw-input, .mp-page .jw-textarea, .mp-page .jw-select { font-size: 16px; }
  .mp-pnav__footer, .mp-pnav__collapse { display: none; }
  .mp-portal__body, .mp-portal__body.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .mp-portal__body { grid-template-columns: minmax(0, 1fr); }
  .mp-pnav { flex-direction: row; border-inline-end: 0; border-bottom: 1px solid #e4e5ee; overflow-x: auto; }
  .mp-pnav__brand, .mp-pnav__who, .mp-pnav__glabel { display: none; }
  .mp-pnav__list { display: flex; gap: 4px; padding: 6px; }
  .mp-pnav__group { display: flex; gap: 4px; }
  .mp-pnav__item { width: auto; margin: 0; white-space: nowrap; }
  .mp-pnav__item[aria-selected="true"]::before { display: none; }
  .mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-peditor, .mp-pinbox, .mp-bgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 601px) and (max-width: 900px) {
  .mp-dscale { --mp-s: 1; }
  .mp-dscale--hero { --mp-s: 0.95; }
}
@media (max-width: 600px) {
  .mp-benefits, .mp-steps, .mp-form__grid { grid-template-columns: minmax(0, 1fr); }
  .mp-cta-row .mp-btn { width: 100%; }
  .mp-pitem { flex-direction: column; }
  .mp-pitem__thumb { width: 100%; height: 120px; }
  .mp-flow li { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
}
/* 378px x scale must fit (viewport - 32px gutters): 600 -> .9 (340px) · 380 -> .86 (325px) · 359 -> .8 (302px) · 339 -> .74 (280px, fits 320) */
@media (max-width: 600px) { .mp-dscale, .mp-dscale--hero { --mp-s: 0.9; } }
@media (max-width: 380px) { .mp-dscale, .mp-dscale--hero { --mp-s: 0.86; } }
@media (max-width: 359px) { .mp-dscale, .mp-dscale--hero { --mp-s: 0.8; } }
@media (max-width: 339px) { .mp-dscale, .mp-dscale--hero { --mp-s: 0.74; } }
/* builder canvas (smaller phone inside the portal frame: page gutters + portal padding + canvas padding = 80px) — after the viewport rules above so it keeps its own scale */
@media (min-width: 601px) and (max-width: 900px) { .mp-dscale--canvas { --mp-s: 0.85; } }
@media (max-width: 600px) { .mp-dscale--canvas { --mp-s: 0.72; } }
@media (max-width: 380px) { .mp-dscale--canvas { --mp-s: 0.62; } }
@media (max-width: 339px) { .mp-dscale--canvas { --mp-s: 0.58; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mp-btn, .mp-dnav__btn, .mp-kpi, .mp-dsec, button.mp-dcard, .mp-dtoast, .mp-portal__body, .mp-pnav__item { transition: none; }
  .mp-btn--primary:hover:not(:disabled), .mp-kpi:hover, button.mp-dcard:hover, .mp-dnav__btn:hover { transform: none; }
}