/* === Mockup Hero (v5) — mobile first === */
.mh-hero{padding:26px 0 44px;text-align:center;overflow:hidden}
.mh-wrap{max-width:560px}
.mh-title{font-size:clamp(31px,8.4vw,52px);font-weight:600;letter-spacing:-0.038em;line-height:1.04;margin:0 auto;max-width:15ch;text-wrap:balance}
.mh-title .hl{background-image:linear-gradient(var(--signal),var(--signal));background-size:100% .26em;background-position:0 .72em;background-repeat:no-repeat;padding:0 4px}
.mh-sub{margin:16px auto 0;max-width:34ch;font-size:clamp(16px,4.1vw,19px);line-height:1.5;color:var(--muted);text-wrap:pretty}
.mh-cta-row{display:flex;justify-content:center;margin-top:26px}
.mh-cta{width:100%;max-width:400px;padding:18px 40px;font-size:17px;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 26px -8px color-mix(in oklab,var(--accent) 65%,transparent)}
.mh-subnote{margin-top:12px;font-size:13px;color:var(--muted)}
.mh-subnote .check{color:var(--good);font-weight:700;margin-right:4px}

/* Mockups */
.mh-shots{margin:22px -20px 0}
.mh-stage{position:relative;width:100%;aspect-ratio:1/.78;max-width:560px;margin:0 auto}
.mh-shot{position:absolute;display:block;filter:drop-shadow(0 26px 34px rgba(15,30,55,.18))}
.mh-shot--front{width:76%;left:2%;top:0;z-index:2}
.mh-shot--back{width:82%;right:-6%;top:2%;transform:rotate(42deg);transform-origin:50% 50%;z-index:1}
@media (min-width:761px){.mh-shots{margin:26px 0 0}}

/* Selling points */
.mh-points{list-style:none;display:flex;flex-direction:column;gap:12px;margin:6px auto 0;max-width:400px;text-align:left}
.mh-point{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.mh-point strong{color:var(--ink);font-weight:600}
.mh-check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--good);color:#fff;margin-top:1px}

.mh-proof{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Placeholder phone frames (used when real mockups aren't in yet) */
.mh-stage--slots{aspect-ratio:1/1.24;max-width:420px}
.mh-frame{position:absolute;width:47%;aspect-ratio:9/19;border-radius:34px;padding:7px;background:var(--ink);box-shadow:0 24px 40px -16px rgba(15,30,55,.35)}
.mh-frame image-slot{position:absolute;inset:7px;display:block;border-radius:28px;overflow:hidden;background:var(--bg-soft)}
.mh-frame--front{left:1%;top:0;z-index:2;transform:rotate(-5deg)}
.mh-frame--back{right:1%;top:10%;z-index:1;transform:rotate(6deg)}