/* Shared schematic mockups of Servi systems (home page cards, demo, project pages).
   Everything is sized in em off a container-query font size, so a mockup scales to any box. */
.mock { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; background: radial-gradient(80% 90% at 85% 0%, rgba(20,184,166,0.16), transparent 60%), linear-gradient(180deg, #F1F8F7, #E3F0EE); }
.mock-win { position: absolute; inset: 9% 6% -6% 6%; font-size: 2.35cqw; line-height: 1.35; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #0F172A; border: 1px solid rgba(15,23,42,0.1); border-radius: 1.1em 1.1em 0 0; box-shadow: 0 1.6em 3em -1.6em rgba(17,94,89,0.45); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.group:hover .mock-win { transform: translateY(-3%); }
.mock-bar { display: flex; align-items: center; gap: .6em; padding: .65em 1em; border-bottom: 1px solid rgba(15,23,42,0.07); font-weight: 600; white-space: nowrap; }
.mock-dots { display: flex; gap: .3em; }
.mock-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mock-dots i { width: .55em; height: .55em; border-radius: 99px; background: #E2E8F0; }
.mock-status { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .35em; border-radius: 99px; background: #E6F4F3; color: #0F766E; font-size: .85em; font-weight: 500; padding: .15em .65em; }
.mock-status::before { content: ''; width: .45em; height: .45em; border-radius: 99px; background: #14B8A6; }
.mock-search { margin-inline-start: auto; display: flex; align-items: center; gap: .4em; width: 48%; border-radius: 99px; background: #F1F5F9; color: #334155; font-weight: 400; font-size: .9em; padding: .3em .8em; }
.mock-search svg { width: 1em; height: 1em; flex-shrink: 0; color: #0F766E; }
.mock-body { flex: 1; display: grid; grid-template-columns: 30% 1fr; min-height: 0; }
.mock-side { display: flex; flex-direction: column; gap: .3em; padding: .85em .7em; background: #F8FAFB; border-inline-end: 1px solid rgba(15,23,42,0.06); }
.mock-label { margin-bottom: .2em; font-size: .8em; font-weight: 600; color: #94A3B8; }
.mock-item { display: flex; align-items: center; gap: .45em; border-radius: .5em; padding: .4em .55em; font-size: .92em; color: #475569; white-space: nowrap; }
.mock-item.on { background: #E6F4F3; color: #115E59; font-weight: 600; }
.mock-item small { margin-inline-start: auto; font-size: .85em; color: #94A3B8; }
.mock-pin { width: .55em; height: .55em; border-radius: 99px; flex-shrink: 0; }
.mock-main { display: flex; flex-direction: column; gap: .65em; min-width: 0; padding: .85em 1.1em; }
.mock-q { align-self: flex-start; max-width: 80%; border-radius: 1em; background: #0F766E; color: #fff; padding: .5em .85em; }
.mock-a { align-self: flex-end; width: 80%; border-radius: 1em; background: #F1F5F9; padding: .65em .85em; }
.mock-a b { font-size: 1.15em; }
.mock-bars { display: flex; align-items: flex-end; gap: .4em; height: 3em; margin-top: .5em; }
.mock-bars span { flex: 1; border-radius: .25em .25em 0 0; background: #A7DCD6; }
.mock-bars span:last-child { background: #0F766E; }
.mock-src { display: inline-block; margin-top: .55em; border-radius: 99px; border: 1px solid rgba(15,118,110,0.25); background: #fff; color: #0F766E; font-size: .8em; padding: .1em .6em; }
.mock-mail { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .1em .6em; border-radius: .7em; border: 1px solid rgba(15,23,42,0.07); padding: .5em .65em; }
.mock-mail.on { border-color: rgba(15,118,110,0.35); background: #F3FAF9; }
.mock-ava { grid-row: span 2; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 99px; background: #E2E8F0; color: #475569; font-weight: 600; font-size: .9em; }
.mock-mail b { font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-mail span { grid-column: 2; font-size: .82em; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-tag { grid-row: 1 / span 2; grid-column: 3; border-radius: 99px; font-size: .78em; font-weight: 600; font-style: normal; padding: .15em .6em; white-space: nowrap; }
@media (min-width: 768px) { .mock-lg .mock-win { inset: 7% 6% -5% 6%; font-size: 1.7cqw; } }