/* Original MacBook placeholder. Screen media always stays inside the bezel. */
.macbook-figure { margin: 0; position: relative; width: 100%; }
.macbook { position: relative; width: 70%; margin-inline: auto; padding-bottom: 1%; filter: drop-shadow(0 18px 16px #15132312); }
.macbook-lid { position: relative; width: 89%; margin: auto; padding: 1.5% 1.4% 1.8%; border-radius: 2.3% 2.3% 1.3% 1.3% / 3.8% 3.8% 2% 2%; background: linear-gradient(145deg, #64666d, #303136 25%, #1a1b1e 65%, #51535a); border: 1px solid #64666b; box-shadow: inset 0 0 0 2px #25262b; }
.macbook-camera { position: absolute; z-index: 2; top: 2.3%; left: calc(50% - 3.3%); width: 6.6%; height: 2.3%; background: #16171b; border-radius: 0 0 4px 4px; }
.macbook-camera::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #2a3044; left: calc(50% - 2px); top: 1px; }
.macbook-screen { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1.6; background: #dedfe8; border-radius: 4px; }
.macbook-screen>img, .macbook-screen>video { display: block; width: 100%; height: 100%; object-fit: contain; background: #101115; }
.macbook-screen>.media-cover { object-fit: cover; }
.macbook-placeholder { position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; background: #e0e0ec; }
.macbook-wallpaper { position: absolute; inset: 0; background: radial-gradient(ellipse at 82% 5%, #ebe9ff 0%, transparent 55%), radial-gradient(ellipse at 6% 110%, #8085ad 0%, transparent 62%), linear-gradient(135deg, #d9dce6, #adacd0 65%, #8d91b3); }
.macbook-wallpaper::before, .macbook-wallpaper::after { content: ''; position: absolute; width: 90%; height: 150%; border: 1px solid #ffffff42; border-radius: 50%; transform: rotate(-35deg); top: -80%; right: -20%; box-shadow: 0 0 0 35px #ffffff06, 0 0 0 70px #ffffff06, 0 0 0 105px #ffffff06; }
.macbook-wallpaper::after { width: 110%; top: 65%; right: 40%; }
.macbook-placeholder-brand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.macbook-placeholder-brand img { width: clamp(30px, 5vw, 70px); height: auto; filter: drop-shadow(0 8px 15px #31305022); }
.macbook-placeholder-brand span { font-size: clamp(16px, 2.6vw, 30px); letter-spacing: -.065em; font-weight: 600; color: #3d3f61; }
.macbook-base { position: relative; width: 100%; height: 12px; background: linear-gradient(#c8c9ce 0%, #e4e5e9 30%, #b5b6bc 75%, #8d8f96); border-radius: 1px 1px 12px 12px; border-top: 1px solid #d7d8dd; }
.macbook-notch { width: 13%; height: 5px; margin: auto; border-radius: 0 0 8px 8px; background: #8f919a; box-shadow: inset 0 1px 2px #51535a55; }
.macbook-foot { position: relative; margin: auto; width: 89%; height: 3px; background: #686a73; border-radius: 0 0 60% 60%; }
.macbook-caption { margin: 20px 0 0; text-align: center; color: var(--muted); font-size: 12px; }
.hero-product>.macbook-figure { width: 100%; }
.demo-section .macbook-figure { max-width: 950px; margin: 50px auto 35px; }
.home-workflow-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: 20px 0 35px; }
.home-workflow-notes p { font-size: 13px; color: #b8b9c5; }
.home-workflow-notes strong { display: block; color: #fff; font-size: 17px; margin-bottom: 8px; }
.macbook-play { position: absolute; z-index: 3; bottom: 12px; right: 12px; border: 1px solid #ffffff99; border-radius: 100px; background: #181820d9; color: #fff; padding: 7px 12px; font: 12px/1.4 -apple-system, sans-serif; }
.macbook-screen:has(.macbook-play) { background: #101115; }
@media (max-width: 600px) { .macbook-base { height: 8px; } .macbook-notch { height: 3px; } .macbook-camera::after { width: 3px; height: 3px; } .home-workflow-notes { grid-template-columns: 1fr; gap: 12px; } .home-workflow-notes p { margin: 0; } .demo-section .macbook-figure { margin-block: 35px; } }