/* the app's screens, Stripe-style: cards in a row you scroll sideways, lifting on hover */
.sh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.sh-arrows{display:flex;gap:10px}
.sh-arrow{width:44px;height:44px;border-radius:999px;border:1px solid var(--rim);background:#fff;color:var(--accent);display:grid;place-items:center;cursor:pointer;transition:background .2s,opacity .2s}
.sh-arrow:hover{background:#F2EEF8}
.sh-arrow:disabled{opacity:.35;cursor:default}
.sh-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sh-row{list-style:none;margin:1.75rem calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0;padding:12px max(16px, env(safe-area-inset-left, 0px)) 28px;display:grid;grid-auto-flow:column;grid-auto-columns:min(30rem,86vw);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(16px, env(safe-area-inset-left, 0px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sh-row::-webkit-scrollbar{display:none}
.sc{scroll-snap-align:start;display:flex}
.sc-open{font:inherit;text-align:left;width:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #E9E2F1;border-radius:20px;padding:0;overflow:hidden;cursor:pointer;color:inherit;box-shadow:0 1px 0 rgba(34,19,47,.04),0 10px 30px -22px rgba(91,42,134,.35);transition:transform .25s,box-shadow .25s}
.sc-open:hover,.sc-open:focus-visible{transform:translateY(-6px);box-shadow:0 2px 0 rgba(34,19,47,.04),0 26px 46px -24px rgba(91,42,134,.5)}
.sc-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(120deg,#F6E7B8 0%,#F3D6E6 40%,#E5D6F6 75%,#EFE6F7 100%)}
.sc-shot > *{transition:transform .35s}
.sc-open:hover .sc-shot > :first-child{transform:translateY(-4px)}
.sc-body{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;flex:1}
.sc-tag{font-size:0.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sc-title{font-size:1.375rem;font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.sc-line{color:var(--muted);font-size:1rem;line-height:1.5}
.sc-ticks{display:grid;gap:7px;margin:6px 0 4px}
.sc-ticks span{position:relative;padding-left:28px;font-size:0.9375rem;color:var(--ink);line-height:1.4}
.sc-ticks span::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:999px;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%235B2A86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.sc-more{margin-top:auto;padding-top:8px;font-weight:700;color:var(--accent);font-size:0.9375rem}
/* the screens, recreated from the real app (Omar, Oct 21 2026: faithful and detailed, like the ohelloo Work page's
   tiles, so they don't look like anyone could make them): a browser window cropped by the card, sometimes with the
   customer's phone or a note floating over it. Sized by the card's width (container units), so the window shows the
   very same picture larger. */
.sc-open{container-type:inline-size}
.sh-dlg{container-type:inline-size}
.sc-shot{font-size:2.05cqw;color:#22132F;letter-spacing:0;line-height:1.3}
.sh-dlg .sh-dlg-art{font-size:2.05cqw}
.sc-shot > *{position:absolute}
.sc-shot span,.sc-shot b,.sc-shot small,.sc-shot em,.sc-shot i,.sc-shot a{font-style:normal}
.mk-w{left:6%;top:9%;width:90%;height:100%;background:#fff;border-radius:.9em;box-shadow:0 1.6em 3.2em -1.4em rgba(34,19,47,.42),0 0 0 1px rgba(34,19,47,.06);overflow:hidden;display:flex;flex-direction:column}
.mk-w.narrow{width:63%}
.mk-cb{flex:none;display:flex;align-items:center;gap:.4em;height:2.1em;padding:0 .9em;background:#F7F5FA;border-bottom:1px solid #EEE9F3}
.mk-cb i{width:.6em;height:.6em;border-radius:99em;background:#E3DCEA}
.mk-cb span{margin-left:.6em;font-size:.72em;color:#8A8197;background:#fff;border:1px solid #EEE9F3;border-radius:99em;padding:.1em .9em}
.mk-in{flex:1;min-height:0;padding:1em 1.2em;display:flex;flex-direction:column;gap:.6em}
.mk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1em}
.mk-top > span:first-child{display:flex;flex-direction:column;gap:.15em;min-width:0}
.mk-h1{font-size:1.55em;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.mk-sub{font-size:.8em;color:#6E6579}
.mk-sub strong{color:#B0283C}
.mk-btns{display:flex;gap:.4em;align-items:center;flex:none}
.mk-b{font-size:.72em;font-weight:700;border:1px solid #E6E0EE;border-radius:.6em;padding:.4em .75em;background:#fff;white-space:nowrap}
.mk-b.dk{background:#22132F;color:#fff;border-color:#22132F;box-shadow:inset 0 -.2em 0 #F2C14E}
.mk-link{font-size:.72em;font-weight:600;color:#5B2A86}
.mk-pl{display:inline-block;font-size:.68em;font-weight:700;border-radius:99em;padding:.2em .65em;white-space:nowrap;vertical-align:middle}
.mk-pl.red{background:#FCE8EA;color:#B0283C}.mk-pl.grn{background:#E3F3EA;color:#1F7A4D}.mk-pl.blu{background:#E6EEFB;color:#2F5DA8}
.mk-pl.gry{background:#F1EEF4;color:#6E6579}.mk-pl.yel{background:#FFF1CC;color:#7A5200}
.mk-tabs{display:inline-flex;align-self:flex-start;gap:.15em;background:#F4F1F8;border-radius:.6em;padding:.2em}
.mk-tabs span{font-size:.7em;font-weight:600;color:#6E6579;padding:.3em .65em;border-radius:.45em;white-space:nowrap}
.mk-tabs .on{background:#fff;color:#22132F;box-shadow:0 1px 2px rgba(34,19,47,.08)}
.mk-list{display:flex;flex-direction:column;border:1px solid #EEE9F3;border-radius:.8em;overflow:hidden}
.mk-it,.mk-th{display:flex;justify-content:space-between;align-items:center;gap:.8em;padding:.55em .8em;border-bottom:1px solid #F1ECF6}
.mk-it:last-child,.mk-th:last-child{border-bottom:0}
.mk-it-l{display:flex;flex-direction:column;min-width:0}
.mk-it-l b{font-size:.88em;font-weight:700}
.mk-it-l small{font-size:.7em;color:#6E6579;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-amt{display:flex;flex-direction:column;align-items:flex-end;gap:.25em;flex:none}
.mk-amt b{font-size:.88em;font-weight:800}
.mk-card{display:flex;justify-content:space-between;align-items:center;gap:.8em;border:1px solid #EEE9F3;border-radius:.8em;padding:.55em .8em}
.mk-card.col{flex-direction:column;align-items:stretch;gap:.35em}
.mk-alert{display:flex;flex-direction:column;gap:.3em;border:1px solid #EEE9F3;border-left:.25em solid #8FB8E8;border-radius:.8em;padding:.55em .8em}
.mk-alert b{font-size:.82em}.mk-alert small{font-size:.7em;color:#6E6579}.mk-alert .mk-btns{margin-top:.2em}
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.mk-tile{display:flex;align-items:center;gap:.5em;font-size:.68em;border:1px solid #EEE9F3;border-left:.3em solid #E4D8F1;border-radius:.6em;padding:.5em .6em}
.mk-tile.y{border-left-color:#F2C14E}
.mk-tile i{flex:none;width:1.6em;height:1.6em;border-radius:.4em;background:#F4F1F8;display:grid;place-items:center;font-weight:800}
.mk-days{display:flex;gap:.35em}
.mk-days span{flex:1;display:flex;flex-direction:column;align-items:center;font-size:.66em;color:#6E6579;border:1px solid #EEE9F3;border-radius:.6em;padding:.3em 0}
.mk-days b{font-size:1.4em;color:#22132F}.mk-days small{font-size:.9em}
.mk-days .on{background:#F3EEFA;border-color:#CDB3E8;color:#5B2A86}.mk-days .on b{color:#5B2A86}
.mk-cal{position:relative;flex:1;display:grid;grid-template-columns:3.2em 1fr 1fr 1fr;border:1px solid #EEE9F3;border-radius:.8em;overflow:hidden;min-height:16em}
.mk-times{display:flex;flex-direction:column;justify-content:space-between;padding:2.4em .3em .4em;font-size:.62em;color:#8A8197;text-align:right;border-right:1px solid #EEE9F3}
.mk-pc{position:relative;border-right:1px solid #F1ECF6;padding-top:2.2em}
.mk-pc:last-of-type{border-right:0}
.mk-ph-h{position:absolute;top:0;left:0;right:0;height:2.2em;display:flex;align-items:center;gap:.4em;padding:0 .6em;font-size:.78em;font-weight:700;border-bottom:1px solid #EEE9F3}
.mk-ph-h em{color:#8A8197;font-weight:600}
.mk-ph-h .d{width:.6em;height:.6em;border-radius:99em}.d.g{background:#1F7A4D}.d.o{background:#C2581E}.d.n{background:#C9C1D3}
.mk-ev{position:absolute;left:.25em;right:.25em;margin-top:2.2em;border:1px solid #EEE9F3;border-left:.25em solid var(--c);border-radius:.45em;padding:.3em .45em;font-size:.66em;line-height:1.25;overflow:hidden}
.mk-ev small{display:block;color:#6E6579}
.mk-ev.lv{background:#FBF5FA}.mk-ev.bl{background:#EEF3FC}.mk-ev.wt{background:#fff}
.mk-ev.hot{border-color:#F3B6BF;border-left-color:var(--c)}
.mk-ev.hot em{display:block;color:#B0283C;font-weight:700}
.mk-now{position:absolute;left:3.2em;right:0;height:.12em;background:#C0392B;margin-top:2em}
.mk-now::before{content:"";position:absolute;left:-.3em;top:-.25em;width:.6em;height:.6em;border-radius:99em;background:#C0392B}
.mk-phone{right:4%;top:7%;bottom:5%;width:29%;background:#fff;border-radius:1.6em;border:.35em solid #22132F;box-shadow:0 1.8em 3em -1.2em rgba(34,19,47,.55);padding:1.2em .8em;display:flex;flex-direction:column;gap:.45em;overflow:hidden}
.mk-phone.dk{background:#22132F;color:#fff;align-items:center;justify-content:center;text-align:center}
.mk-ph-bz{font-size:.62em;font-weight:700;color:#5B2A86;text-transform:uppercase;letter-spacing:.06em}
.mk-ph-t{font-size:1.05em;font-weight:800;line-height:1.15}
.mk-ph-s{font-size:.66em;color:#8A8197}
.mk-phone.dk .mk-ph-s{color:#CDB3E8}
.mk-ph-amt{font-size:1.6em;font-weight:800}
.mk-opt{position:relative;display:flex;flex-direction:column;border:1px solid #EEE9F3;border-radius:.6em;padding:.4em .55em;font-size:.72em}
.mk-opt small{font-size:.8em;font-weight:700;color:#8A8197;text-transform:uppercase;letter-spacing:.05em}
.mk-opt em{font-weight:800}
.mk-opt.on{border:.15em solid #5B2A86;background:#F8F4FC}
.mk-tk{position:absolute;right:.5em;top:.5em;width:1.2em;height:1.2em;border-radius:99em;background:#5B2A86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/90% no-repeat}
.mk-go{margin-top:auto;text-align:center;font-size:.7em;font-weight:800;background:#F2C14E;color:#3A2400;border-radius:.6em;padding:.55em .4em}
.mk-go.pur{background:#5B2A86;color:#fff}
.mk-tap{position:relative;width:3.6em;height:3.6em;margin:.4em 0}
.mk-tap i{position:absolute;inset:0;border:.16em solid #F2C14E;border-radius:99em}
.mk-tap i:nth-child(2){inset:.6em;opacity:.75}.mk-tap i:nth-child(3){inset:1.2em;background:#F2C14E;border:0}
.mk-done{font-size:.72em;font-weight:800;background:#1F7A4D;color:#fff;border-radius:99em;padding:.25em .9em;margin-top:.3em}
.mk-search{font-size:.75em;color:#8A8197;border:1px solid #EEE9F3;border-radius:.6em;padding:.45em .8em}
.mk-pg{display:flex;flex-direction:column;gap:.1em;background:#F8F6FB;border-radius:.6em;padding:.45em .55em}
.mk-pg small{font-size:.62em;color:#8A8197}.mk-pg b{font-size:.74em}
.mk-crumb{font-size:.72em;color:#6E6579;font-weight:600}
.mk-jd{display:block;text-align:center;font-size:.85em;font-weight:700;color:#fff;background:#22132F;border-radius:.6em;padding:.55em;box-shadow:inset 0 -.22em 0 #F2C14E}
.mk-chkline{display:flex;align-items:center;gap:.5em;font-size:.72em;color:#4A3F57;margin-top:-.2em}
.mk-cbx{flex:none;width:1.15em;height:1.15em;border-radius:.3em;border:.12em solid #CDC5D8;background:#fff}
.mk-cbx.on{border-color:#5B2A86;background:#5B2A86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/90% no-repeat}
.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.mk-kv{display:grid;grid-template-columns:4.6em 1fr;align-items:center;font-size:.7em}
.mk-kv small{color:#8A8197;font-size:1em}.mk-kv a{color:#5B2A86}
.mk-ct{font-size:.85em}.mk-ct small{font-weight:500;color:#8A8197}
.mk-cl{display:flex;align-items:center;gap:.5em;font-size:.7em}
.mk-talk{left:9%;bottom:7%;display:flex;align-items:center;gap:.5em;background:#fff;border-radius:99em;padding:.55em 1em;font-size:.85em;font-weight:700;box-shadow:0 1.2em 2.4em -1em rgba(34,19,47,.5)}
.mk-talk svg{width:1.2em;height:1.2em;fill:none;stroke:#5B2A86;stroke-width:1.5;stroke-linecap:round}
.mk-th.new{background:#FBF8FE}
.mk-src{flex:none;width:2em;height:2em;border-radius:99em;display:grid;place-items:center}
.mk-src svg{width:1.15em;height:1.15em;fill:none;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.mk-src svg .fill{fill:#fff;stroke:none}
.mk-src.txt{background:#5B2A86}.mk-src.call{background:#C0392B}.mk-src.web{background:#2F5DA8}.mk-src.fb{background:#1877F2}
.mk-src.ig{background:linear-gradient(45deg,#F2A65A,#E1306C 55%,#8A3AB9)}
.mk-th .mk-it-l{flex:1}
.mk-when{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.3em;font-size:.66em;color:#8A8197}
.mk-when i{width:.6em;height:.6em;border-radius:99em;background:#5B2A86}
.mk-bub{right:4%;bottom:9%;width:36%;background:#22132F;color:#fff;border-radius:1em 1em .3em 1em;padding:.8em 1em;display:flex;flex-direction:column;gap:.35em;box-shadow:0 1.4em 2.6em -1.2em rgba(34,19,47,.6)}
.mk-bub b{font-size:.8em;font-weight:500;line-height:1.4}.mk-bub small{font-size:.62em;color:#CDB3E8}
.mk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em}
.mk-kpis.three{grid-template-columns:repeat(3,1fr);width:75%}
.mk-kpi{display:flex;flex-direction:column;gap:.15em;border:1px solid #EEE9F3;border-radius:.7em;padding:.5em .65em}
.mk-kpi small{font-size:.66em;color:#6E6579;font-weight:600}.mk-kpi b{font-size:1.25em;font-weight:800;letter-spacing:-.02em}
.mk-kpi em{font-size:.6em;color:#6E6579;min-height:1.3em}
.mk-kpi.dk{background:#3B1A5C;border-color:#3B1A5C;color:#fff}.mk-kpi.dk small,.mk-kpi.dk em{color:#E2D3F2}
.mk-pr{font-size:.72em;color:#6E6579}.mk-pr b{color:#22132F;font-size:1.15em}
/* pizzazz (Omar, Oct 21 2026: "faithful recreations, but with added pizzazz"): a soft blurred ribbon of the brand's
   colours behind each window, and a little notice floating over it that tells the moment's good news; on hover the
   notice lifts too */
.sc-shot{isolation:isolate}
.sc-shot::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:42%;height:70%;border-radius:50%;background:linear-gradient(90deg,#F2C14E,#E98AA8 45%,#9B70DA 80%,#5B2A86);filter:blur(2.6em);opacity:.55;transform:rotate(-8deg)}
.mk-toast{z-index:3;display:flex;align-items:center;gap:.6em;background:rgba(255,255,255,.96);border-radius:.9em;padding:.55em .9em .55em .6em;box-shadow:0 1.2em 2.4em -1em rgba(34,19,47,.5),0 0 0 1px rgba(34,19,47,.05);backdrop-filter:blur(6px);transition:transform .35s}
.mk-toast.tr{right:4%;top:4%}.mk-toast.tl{left:3%;top:46%}.mk-toast.br{right:4%;bottom:7%}.mk-toast.bl{left:3%;bottom:7%}
.mk-toast > span{display:flex;flex-direction:column}
.mk-toast b{font-size:.82em;font-weight:800}.mk-toast small{font-size:.66em;color:#6E6579}
.mk-toast i{flex:none;width:2.1em;height:2.1em;border-radius:99em;display:grid;place-items:center}
.mk-toast i.g{background:#1F7A4D}.mk-toast i.p{background:#5B2A86}.mk-toast i.y{background:#F2C14E}
.mk-toast svg{width:1.2em;height:1.2em;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-toast i.y svg .fill{fill:#3A2400;stroke:none}
.sc-open:hover .mk-toast{transform:translateY(-.5em) scale(1.03)}
@media (prefers-reduced-motion:reduce){.mk-toast{transition:none}.sc-open:hover .mk-toast{transform:none}}
/* a different wash behind each picture */
.sc-shot.mk-today{background:linear-gradient(135deg,#FFF3D6,#F3D6E6)}
.sc-shot.mk-schedule{background:linear-gradient(135deg,#E6E0FA,#F6E7F1)}
.sc-shot.mk-quotes{background:linear-gradient(135deg,#F3D6E6,#E5D6F6)}
.sc-shot.mk-money{background:linear-gradient(135deg,#E3F3EA,#FFF3D6)}
.sc-shot.mk-customers{background:linear-gradient(135deg,#EFE6F7,#FDF6E6)}
.sc-shot.mk-job{background:linear-gradient(135deg,#FFE9DB,#EFE6F7)}
.sc-shot.mk-chat{background:linear-gradient(135deg,#E2EEFB,#F3D6E6)}
.sc-shot.mk-numbers{background:linear-gradient(135deg,#F6E7B8,#E5D6F6)}
.sh-dlg-art{position:relative;aspect-ratio:16/10;overflow:hidden}
.sh-dlg{width:min(68rem,94vw);max-height:92vh;border:0;border-radius:22px;padding:0;overflow:auto;box-shadow:0 30px 80px -20px rgba(34,19,47,.55)}
.sh-dlg::backdrop{background:rgba(34,19,47,.55)}
.sh-dlg .sh-dlg-art{display:block;width:100%}
.sh-dlg-body{padding:24px 28px 28px;display:grid;gap:10px;justify-items:start}
.sh-dlg-body h3{margin:0;font-size:1.625rem;font-weight:800;letter-spacing:-.015em}
.sh-dlg-body p{margin:0;color:var(--body);font-size:1.0625rem;line-height:1.55;max-width:48rem}
.sh-dlg-body .cc-btn{margin-top:8px}
.sh-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px -6px rgba(34,19,47,.4)}
.sh-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.sc-open,.sc-shot img{transition:none}.sc-open:hover,.sc-open:focus-visible{transform:none}}

/* centred up-close window (the Work pages reset margins) */
.wk dialog.sh-dlg{margin:auto}
.wk .sh-row{margin-top:1.75rem}