/* Mockups (2026-10): Google Chrome window + iPhone 15 Pro 3D renders. Markup and sources: see mock.js */

/* ---------- Chrome window ---------- */
.cw{--s:.4}
.cw-in{border-radius:calc(8px*var(--s));overflow:hidden;background:#fff;
  /* the layered shadow of the Figma file, scaled with the window */
  box-shadow:0 0 0 calc(1px*var(--s)) rgba(0,0,0,.06),
    0 calc(8px*var(--s)) calc(7px*var(--s)) rgba(20,16,40,.03),
    0 calc(20px*var(--s)) calc(13px*var(--s)) rgba(20,16,40,.04),
    0 calc(39px*var(--s)) calc(26px*var(--s)) rgba(20,16,40,.05),
    0 calc(65px*var(--s)) calc(47px*var(--s)) rgba(20,16,40,.06),
    0 calc(100px*var(--s)) calc(80px*var(--s)) rgba(20,16,40,var(--cw-sh,.12))}
.cw.dark .cw-in{background:#202124}
.cw-bar{display:block;width:100%;height:auto}
.cw-view{position:relative;overflow:hidden;aspect-ratio:var(--ar,auto)}
.cw-view img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}

/* ---------- iPhone 15 Pro renders ---------- */
.mk{display:block;height:auto;max-width:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 6px 7px rgba(14,10,34,var(--mk-s1,.16))) drop-shadow(0 28px 34px rgba(14,10,34,var(--mk-s2,.26)))}
/* a phone lying on its back: the shadow falls short and stays close */
.mk.flat{filter:drop-shadow(-4px 10px 8px rgba(14,10,34,var(--mk-s1,.2))) drop-shadow(-14px 30px 30px rgba(14,10,34,var(--mk-s2,.3)))}

/* ---------- MacBook Air M4, front view (screen baked in by _notes/tools/make_home_mb.py) ---------- */
/* a laptop stands on the surface: a tight shadow under the base and a soft wide one behind it */
.mk.mb{filter:drop-shadow(0 5px 5px rgba(14,10,34,var(--mk-s1,.14))) drop-shadow(0 26px 30px rgba(14,10,34,var(--mk-s2,.2)))}

/* ---------- home cards that use the new mockups ---------- */
/* the composition stays crisp down to the text: a short fade, no blur veil */
/* --fade: where the fade into the text starts (a composition that ends above the text sets it lower) */
.card.mck .media{--fade:76%;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 var(--fade),transparent calc(var(--fade) + 21%));mask-image:linear-gradient(to bottom,#000 0%,#000 var(--fade),transparent calc(var(--fade) + 21%))}
.card.mck .media::after{display:none}
.card.mck .body{margin-top:-30px}