/* mockups */
.mock{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--m-bg);color:var(--m-ink);position:relative;z-index:1;box-shadow:0 18px 40px -24px rgba(10,20,40,.35)}
.mock .bar{display:flex;gap:5px;align-items:center;padding:8px 10px;background:var(--sunk);border-bottom:1px solid var(--line)}
.mock .bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.mock .bar span{margin-left:8px;flex:1;height:14px;border-radius:7px;background:var(--surface);font:500 9px/14px var(--body);color:var(--muted);padding-left:8px;overflow:hidden;white-space:nowrap}
.m-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font:700 11px var(--m-font)}
.m-nav .dots{display:flex;gap:8px}
.m-nav .dots u{display:block;width:22px;height:5px;border-radius:3px;background:currentColor;opacity:.35;text-decoration:none}
.m-hero{display:grid;gap:10px;padding:14px 14px 16px}
.m-hero.split{grid-template-columns:1fr 1fr;align-items:center}
.m-hero.center{text-align:center;justify-items:center}
.m-title{font:800 clamp(14px,2.2vw,19px)/1.1 var(--m-font);letter-spacing:-.01em}
.m-sub{font-size:9.5px;opacity:.7;max-width:30ch;line-height:1.4}
.m-btn{display:inline-block;padding:5px 11px;border-radius:var(--m-rad);background:var(--m-acc);color:var(--m-on);font:700 9px var(--body);width:max-content}
.m-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--m-rad);background:var(--m-card);max-width:100%}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 14px}
.m-card{background:var(--m-card);border-radius:var(--m-rad);padding:6px;display:grid;gap:3px;min-width:0}
.m-card .ph{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--m-rad) * .6)}
.m-cl{font:700 9px/1.2 var(--m-font);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cp{font:600 8.5px/1.2 var(--body);color:var(--m-acc)}
.shot{display:block;text-decoration:none;background:var(--surface)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}