/* ==========================================================================
   Holty mobile mockup kit (README "Mobile mockup kit", design M1-M12).
   Opt-in per page: link /assets/mobile-kit.css in <head> and
   /assets/mobile-kit.js (defer) at the end of <body>.

   Below 640px a compact `.m` mockup replaces a heavy desktop mockup:
     <div class="m-only"><div class="m" data-m [data-auto]> ... </div></div>
     <div class="desktop-mockup d-only"> ... </div>
   Panel markup (.m-top, .m-chips buttons[data-t], .m-stage, .m-p[data-p],
   [data-a] children) stays in each page. Copied verbatim from the design
   (identical on all-in-one, retention-engine, messenger-bots,
   dermatology-triage and call-intelligence).
   ========================================================================== */
.m-only { display: none; }
@media (max-width: 640px) { .m-only { display: block; width: 100%; max-width: 420px; margin: 32px auto 0; text-align: left; } .d-only { display: none !important; } }
/* mobile mockup kit */
.m { background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 4px rgba(18,22,36,0.04), 0 16px 36px rgba(18,22,36,0.10); font-size: 13px; line-height: 1.45; color: var(--dark); }
.m-top { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--gray-200); font-size: 12px; color: var(--gray-400); font-weight: 600; }
.m-top img { height: 11px; width: auto; }
.m-top > span:not(.m-av) { padding-left: 10px; border-left: 1px solid var(--gray-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-top b { color: var(--dark); }
.m-chips { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--gray-200); background: #fff; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chips button { position: relative; flex-shrink: 0; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); cursor: pointer; transition: all 0.2s ease; min-height: 34px; }
/* 44px tap target on phones without changing the 34px pill: an invisible hit area 5px above and below. */
.m-chips button::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.m-chips button.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.m-stage { display: grid; padding: 12px; background: #F6F8FA; }
.m-p { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.m-p.on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.mk .m [data-a] { opacity: 0; transform: translateY(6px); }
.mk .m.seen .m-p.on [data-a] { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 60ms); }
.mk .m.seen .m-p:not(.on) [data-a] { opacity: 1; transform: none; }
.m-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.m-head b { display: block; font-size: 14.5px; }
.m-head span:not(.m-pill):not(.m-btn) { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--gray-400); }
.m-inl { width: 12px; height: 12px; }
.m-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.m-card.ok { background: #F2FBF6; border-color: rgba(63,186,115,0.3); }
.m-card.note { background: transparent; border-style: dashed; }
.m-card.ai { background: #EEF9F2; border-color: rgba(63,186,115,0.25); }
.m-lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); }
.m-pad { padding: 6px 2px 0; }
.m-field { padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: 9px; font-weight: 600; margin-bottom: 4px; }
.m-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--gray-100); }
.m-seg span { text-align: center; padding: 6px; border-radius: 8px; font-weight: 600; color: #54565F; }
.m-seg span.on { background: #fff; color: var(--dark); box-shadow: 0 1px 3px rgba(18,22,36,0.1); }
.m-quote { margin: 0; color: var(--gray-700); }
.m-res { display: flex; align-items: baseline; gap: 8px; }
.m-res b { white-space: nowrap; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-text); }
.m-res span { font-size: 12px; color: var(--gray-700); }
.m-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.m-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gray-200); font-size: 12px; font-weight: 600; color: var(--gray-400); }
.m-tags span.on { background: #E8F8EF; border-color: rgba(63,186,115,0.35); color: var(--accent-text); }
.m-tags svg { width: 12px; height: 12px; }
.m-steps { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.m-steps span { padding: 5px 10px; border-radius: 8px; background: var(--gray-100); }
.m-steps svg { width: 13px; height: 13px; color: var(--gray-400); }
.m-strong { font-size: 13.5px; }
.m-sub { font-size: 12px; color: var(--gray-700); }
.m-push { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: var(--gray-100); }
.m-push img { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: #fff; }
.m-push b { display: block; font-size: 12.5px; }
.m-push span { font-size: 12px; color: var(--gray-700); }
.m-actions, .m-bar-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-bar-a { grid-template-columns: 1fr 1fr 1.2fr; padding: 10px 12px; border-top: 1px solid var(--gray-200); background: #fff; }
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: #3FBA73; color: #fff; font-size: 13px; font-weight: 600; }
.m-btn.sm { min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; }
.m-btn.ghost { background: #fff; color: var(--dark); border: 1px solid var(--gray-200); }
.m-btn.wide { width: 100%; }
.m-btn svg { width: 11px; height: 11px; }
.m-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #E5F4F9; color: #1F6F82; flex-shrink: 0; }
.m-pill.ok { background: #E8F8EF; color: var(--accent-text); }
.m-pill.wait { background: #FFF1DC; color: #8A5300; }
.m-pill.bad { background: #FDECEA; color: #B3261E; }
.m-pill.mute { background: var(--gray-100); color: var(--gray-700); }
.m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-200); }
.m-kpi span { font-size: 11.5px; color: var(--gray-400); }
.m-kpi b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.m-kpi i { font-style: normal; font-size: 11px; color: var(--gray-700); }
.m-bar-r { display: grid; grid-template-columns: 40px minmax(0, 1fr) 68px; gap: 10px; align-items: center; font-size: 12px; }
.m-bar-r b { text-align: right; font-variant-numeric: tabular-nums; }
.m-bar { display: block; height: 6px; border-radius: 6px; background: var(--gray-100); overflow: hidden; }
.m-bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: #2F90A8; transform-origin: left; }
.m-bar.medium i { background: #E08A2E; } .m-bar.high i { background: #D2483F; }
.mk .m [data-a] .m-bar i, .mk .m .m-vr .m-bar i { transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s; }
.mk .m.seen .m-bar i { transform: none; }
.m-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-200); }
.m-row-t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-t span { display: block; font-size: 11.5px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--secondary-light); color: var(--secondary-hover); display: grid; place-items: center; }
.m-ic.ok { background: #3FBA73; color: #fff; }
.m-ic svg { width: 15px; height: 15px; }
.m-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.m-end b { font-size: 12.5px; }
.m-t { font-size: 11.5px; font-weight: 600; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.m-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(150deg, #46B4CD 0%, #2F90A8 100%); flex-shrink: 0; }
.m-av.g { width: 24px; height: 24px; font-size: 10px; background: linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); }
.m-banner { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 14px; border-radius: 14px; color: #fff; }
.m-banner.g { background: linear-gradient(140deg, #54CB88 0%, #2F9E5B 100%); }
.m-banner.b { background: linear-gradient(140deg, #46B4CD 0%, #2F90A8 100%); }
.m-banner.w { background: linear-gradient(140deg, #F0A75A 0%, #D9822B 100%); }
.m-banner b { display: block; font-size: 14px; }
.m-banner span { font-size: 12px; opacity: 0.92; }
.m-banner em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.25); white-space: nowrap; }
.m-offer { position: relative; padding: 14px; border-radius: 14px; background: linear-gradient(140deg, #54CB88 0%, #2F9E5B 100%); color: #fff; }
.m-offer span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.m-offer b { display: block; font-size: 15px; margin-top: 4px; max-width: 75%; }
.m-offer em { position: absolute; top: 12px; right: 12px; font-style: normal; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--accent-text); }
.m-ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.m-ch b { display: block; font-size: 13.5px; }
.m-ch span:not(.m-pill) { font-size: 11.5px; color: var(--gray-400); }
.m-p-t { margin: 0; color: var(--gray-700); }
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-two .m-card { flex-direction: row; align-items: center; gap: 10px; }
.m-two .m-card.col { flex-direction: column; align-items: flex-start; justify-content: center; }
.m-two b { font-size: 12.5px; }
.m-ring { position: relative; width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; }
.m-ring svg { position: absolute; inset: 0; }
.m-ring b { position: relative; font-size: 13px; font-weight: 800; }
.m-mood { display: flex; align-items: center; gap: 4px; }
.m-mood i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); }
.m-mood i.pos { background: #E8F8EF; color: var(--accent-text); } .m-mood i.neg { background: #FDECEA; color: #B3261E; }
.m-mood svg { width: 11px; height: 11px; color: var(--gray-400); }
.m-vio { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #FFF6EA; color: #6B4100; font-weight: 600; }
.m-vio > svg { width: 14px; height: 14px; color: #C27400; flex-shrink: 0; }
.m-vio > span:nth-child(2) { flex: 1; min-width: 0; }
.m-vio.none { background: #F2FBF6; color: var(--accent-text); } .m-vio.none > svg { color: #3FBA73; }
.m-bub { max-width: 86%; padding: 10px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px; }
.m-bub.ai { align-self: flex-start; background: #fff; border: 1px solid var(--gray-200); border-bottom-left-radius: 4px; }
.m-bub.pt { align-self: flex-end; background: #3FBA73; color: #fff; font-weight: 500; border-bottom-right-radius: 4px; }
.m-bub.pics { flex-direction: row; gap: 6px; padding: 8px; }
.m-bub.pics span, .m-bub.file > span { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.22); display: grid; place-items: center; }
.m-bub.pics svg, .m-bub.file svg { width: 15px; height: 15px; }
.m-bub.file { flex-direction: row; align-items: center; }
.m-bub.file b { display: block; font-size: 12.5px; } .m-bub.file i { font-style: normal; font-size: 11px; opacity: 0.85; }
.m-qr { display: flex; flex-wrap: wrap; gap: 6px; }
.m-qr i { font-style: normal; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--gray-200); color: var(--gray-700); }
.m-qr i.on { background: #3FBA73; border-color: #3FBA73; color: #fff; }
.m-from { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--secondary-text); }
.m-from svg { width: 12px; height: 12px; }
.m-done { align-self: center; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #E8F8EF; color: var(--accent-text); font-size: 12px; font-weight: 700; }
.m-done svg { width: 13px; height: 13px; }
.m-fr { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #F2FBF6; border: 1px solid rgba(63,186,115,0.25); }
.m-fr b { display: block; font-size: 12.5px; } .m-fr span { font-size: 12px; color: var(--gray-700); }
.m-ck { width: 22px; height: 22px; border-radius: 50%; background: #3FBA73; color: #fff; display: grid; place-items: center; }
.m-ck svg { width: 12px; height: 12px; }
.m-out { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-200); font-weight: 600; color: var(--gray-700); }
.m-out svg { width: 16px; height: 16px; color: var(--gray-400); }
.m-out.on { background: #3FBA73; border-color: #3FBA73; color: #fff; box-shadow: 0 8px 20px rgba(63,186,115,0.3); } .m-out.on svg { color: #fff; }
.m-cfh { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); }
.m-cfh span:first-child { font-size: 11.5px; color: var(--gray-400); }
.m-cfh b { font-size: 16px; }
.m-f { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-200); }
.m-f span { font-size: 11px; color: var(--gray-400); }
.m-f b { font-size: 13px; font-weight: 500; }
.m-f b.warn { color: #8A5300; font-weight: 600; }
.m-vr { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-200); }
.m-vr > div { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.m-vr > div b { font-size: 12.5px; font-weight: 600; }
.m-vr em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.m-qt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 12px; border-radius: 12px; background: #FFFBF5; border: 1px solid rgba(224,138,46,0.3); }
.m-qt b { display: block; font-size: 11.5px; margin-bottom: 2px; }
.m-qr-r { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-200); }
.m-qr-r.sel { background: #E5F4F9; border-color: rgba(47,144,168,0.3); }
.m-qr-r b { text-align: right; }
.m-ul { margin: 0; padding-left: 16px; color: var(--gray-700); display: flex; flex-direction: column; gap: 4px; }
.m-chart { height: 96px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; border-bottom: 1px solid var(--gray-200); padding-bottom: 4px; }
.m-chart i { display: block; height: var(--h); border-radius: 4px 4px 0 0; background: #2F90A8; transform-origin: bottom; }
.mk .m .m-chart i { transform: scaleY(0); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(0.2s + var(--i) * 50ms); }
.mk .m.seen .m-chart i { transform: none; }
.m-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; font-size: 10.5px; color: var(--gray-400); text-align: center; }
.m-op { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-200); }
.m-op b { display: block; font-size: 13px; } .m-op div span { font-size: 11.5px; color: var(--gray-400); }
.m-op .m-av { background: var(--secondary-light); color: var(--dark); }
.m-op em { font-style: normal; font-weight: 800; font-size: 15px; text-align: right; } .m-op em.bad { color: #B3261E; }
.m-call { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #121624; }
.m-feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.m-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,22,36,0.4) 0%, rgba(18,22,36,0) 25%, rgba(18,22,36,0) 55%, rgba(18,22,36,0.8) 100%); }
.m-call-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.9); }
.m-call-top > span { display: inline-flex; align-items: center; gap: 5px; } .m-call-top svg { width: 12px; height: 12px; }
.m-live { padding: 3px 9px; border-radius: 999px; background: rgba(18,22,36,0.4); }
.m-live i { width: 7px; height: 7px; border-radius: 50%; background: #3FBA73; }
.m-pip { position: absolute; top: 44px; right: 12px; width: 76px; height: 104px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 8px 18px rgba(0,0,0,0.3); }
.m-pip img { width: 100%; height: 100%; object-fit: cover; }
.m-doc { position: absolute; left: 14px; bottom: 74px; color: #fff; }
.m-doc b { display: block; font-size: 15px; } .m-doc span { font-size: 12px; opacity: 0.8; }
.m-ctrl { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 12px; }
.m-ctrl span { width: 44px; height: 44px; border-radius: 50%; background: rgba(18,22,36,0.45); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; }
.m-ctrl span.end { background: #D2483F; } .m-ctrl svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .mk .m [data-a], .mk .m .m-bar i, .mk .m [data-a] .m-bar i, .mk .m .m-vr .m-bar i, .mk .m .m-chart i { opacity: 1; transform: none; transition: none; } }