/* ─────────────────────────────────────────────────────────────────────────
 * hero-mockup.css — shared, tool-agnostic hero mockup system for SEO pages.
 *
 * Each SEO hero wraps its copy in <div class="hero-copy"> and adds an
 * <aside class="hero-mockup"> containing an <div class="hm-window"> with
 * topbar + body. Per-page body content composes from the primitives below.
 *
 * No images. No JS. Accent colour inherits from the page's existing
 * --accent variable, so one CSS file themes every page correctly.
 * ───────────────────────────────────────────────────────────────────────── */

.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.hero-copy{min-width:0}
.hero-mockup{position:relative;width:100%;max-width:520px;justify-self:end;perspective:1200px}

/* ── Window chrome (shared) ──────────────────────────────────────────── */
.hm-window{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;
  box-shadow:0 30px 70px -20px rgba(15,23,42,.22),0 2px 6px rgba(15,23,42,.05);
  overflow:hidden;transform:rotate(-.4deg);transition:transform .4s ease}
.hero-mockup:hover .hm-window{transform:rotate(0deg)}
.hm-topbar{display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:#f8fafc;border-bottom:1px solid #eef2f7}
.hm-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.hm-dot.r{background:#ef4444}.hm-dot.y{background:#f59e0b}.hm-dot.g{background:#10b981}
.hm-url{margin-left:14px;flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:6px;
  padding:4px 10px;font-size:11px;color:#64748b;
  font-family:'SF Mono',ui-monospace,Menlo,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-body{padding:18px;font-size:12px;color:#334155;line-height:1.55;min-height:260px}

/* ── Primitives used by per-page bodies ──────────────────────────────── */
.hm-skel{display:block;height:7px;border-radius:3px;
  background:linear-gradient(90deg,#eef2f7 0%,#e2e8f0 50%,#eef2f7 100%)}
.hm-skel.tall{height:10px}
.hm-skel.hl{background:linear-gradient(90deg,#fef08a 0%,#fde047 50%,#fef08a 100%)}
.hm-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.hm-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;
  font-size:11.5px;font-weight:700;color:#fff;background:var(--accent,#2563eb);border:none}
.hm-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;
  font-size:10.5px;font-weight:700;background:#f1f5f9;color:#475569}
.hm-chip.ok{background:#dcfce7;color:#166534}

/* ── Decorative depth blur behind the window ─────────────────────────── */
.hero-mockup::before{content:'';position:absolute;inset:8px -10px -14px 10px;z-index:-1;
  border-radius:20px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(15,23,42,.14) 0%,transparent 70%);
  filter:blur(18px)}

/* ── Mobile: stack below copy, flatten rotation, tighten padding ─────── */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-mockup{max-width:100%;justify-self:stretch;margin-top:6px}
  .hm-window{transform:none}
  .hm-body{min-height:200px;padding:14px}
}