.mockup-root{isolation:isolate;background:#0a0a0f;min-height:100dvh;position:relative}.mockup-backdrop{z-index:0;filter:blur(40px)saturate(1.4);opacity:.85;background-position:50%;background-repeat:no-repeat;background-size:cover;position:fixed;inset:0;transform:scale(1.15)}.mockup-backdrop:after{content:"";background:radial-gradient(at 50% 0,#0000 0%,#08080e66 70%),linear-gradient(#08080e4d,#08080e99);position:absolute;inset:0}.mockup-container{z-index:1;flex-direction:column;align-items:center;gap:32px;max-width:1200px;margin:0 auto;padding:48px 24px 80px;display:flex;position:relative}@media (min-width:768px){.mockup-container{gap:40px;padding:72px 48px 120px}}.mockup-row{width:100%;max-width:960px}.mockup-row--pair{max-width:1100px}.mockup-header{text-align:center;color:#ffffffeb;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.mockup-header h1{letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(28px,4vw,44px);font-weight:700}.mockup-header p{color:#fff9;margin:0;font-size:14px}.mockup-row{grid-template-columns:1fr;gap:32px;display:grid}.mockup-row--pair{grid-template-columns:1fr}@media (min-width:1024px){.mockup-row--pair{grid-template-columns:1fr 1fr}}.mockup-card{contain:paint;background:#fff;border-radius:18px;position:relative;overflow:hidden;transform:translate(0,0);box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #0006,0 30px 60px -20px #0009,0 50px 100px -30px #00000080}.mockup-card-body [class*=fixed],.mockup-card-body .fixed,.mockup-card-body .sticky{position:static!important}.mockup-card--footer{border-radius:14px}.mockup-chrome{background:linear-gradient(#2c2c34,#1f1f26);border-bottom:1px solid #0009;flex-shrink:0;align-items:center;gap:10px;height:38px;padding:0 14px;display:flex;position:relative}.mockup-chrome-dots{flex-shrink:0;gap:6px;display:flex}.mockup-chrome-dots span{border-radius:50%;width:11px;height:11px;display:block}.mockup-chrome-dots span:first-child{background:#ff5f56;box-shadow:inset 0 0 0 .5px #0000004d}.mockup-chrome-dots span:nth-child(2){background:#ffbd2e;box-shadow:inset 0 0 0 .5px #0000004d}.mockup-chrome-dots span:nth-child(3){background:#27c93f;box-shadow:inset 0 0 0 .5px #0000004d}.mockup-chrome-url{flex:1;justify-content:center;min-width:0;display:flex}.mockup-chrome-url-pill{color:#ffffffb3;letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap;background:#00000059;border:1px solid #ffffff0d;border-radius:999px;max-width:320px;padding:4px 14px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;overflow:hidden}.mockup-chrome-spacer{flex-shrink:0;width:53px}.mockup-card-body{scrollbar-width:none;-ms-overflow-style:none;background:#fff;min-height:280px;position:relative;overflow:hidden auto}.mockup-card-body::-webkit-scrollbar{display:none}.mockup-card-body[data-measured=true]{min-height:0}.mockup-card-extent{width:100%;position:relative}.mockup-card-scaler{pointer-events:none;--space-3xs:calc(clamp(.125rem, .0625rem + .19cqi, .25rem) * var(--spacing-density,1));--space-2xs:calc(clamp(.25rem, .125rem + .39cqi, .375rem) * var(--spacing-density,1));--space-xs:calc(clamp(.375rem, .25rem + .39cqi, .5rem) * var(--spacing-density,1));--space-sm:calc(clamp(.75rem, .5rem + .75cqi, 1rem) * var(--spacing-density,1));--space-md:calc(clamp(1.5rem, 1rem + 1.5cqi, 2rem) * var(--spacing-density,1));--space-lg:calc(clamp(2.5rem, 1.25rem + 3.75cqi, 4rem) * var(--spacing-density,1));--space-xl:calc(clamp(3.5rem, 1.75rem + 5.25cqi, 6rem) * var(--spacing-density,1));--space-2xl:calc(clamp(5rem, 2.5rem + 7.5cqi, 8rem) * var(--spacing-density,1));--space-3xl:calc(clamp(6.5rem, 3.25rem + 9.75cqi, 10rem) * var(--spacing-density,1));--space-4xl:calc(clamp(8rem, 4rem + 12cqi, 12rem) * var(--spacing-density,1));position:absolute;top:0;left:0;container:ph-editor-canvas/inline-size}[data-ph-mockup-frame]{width:100%;display:block}.mockup-card-body [data-ph-site],.mockup-card-body main,.mockup-card-body .min-h-dvh,.mockup-card-body .min-h-screen,.mockup-card-body .h-dvh,.mockup-card-body .h-screen{height:auto!important;min-height:0!important}.mockup-row--hero-device{grid-template-columns:minmax(0,1fr) 180px;align-items:end;gap:20px;width:100%;max-width:980px;margin-bottom:32px;display:grid}@media (min-width:1024px){.mockup-row--hero-device{grid-template-columns:minmax(0,1fr) 210px;gap:24px}}.mockup-device-laptop{filter:drop-shadow(0 40px 60px #00000080);min-width:0;position:relative}.mockup-device-bezel{background:linear-gradient(155deg,#2a2a2e 0%,#1a1a1d 100%);border-radius:18px 18px 6px 6px;padding:22px 22px 18px;position:relative;box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 1px #ffffff1f}.mockup-device-bezel:before{content:"";background:#050505;border-radius:50%;width:5px;height:5px;position:absolute;top:9px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 .5px #ffffff1a}.mockup-device-screen{aspect-ratio:16/10;background:#fff;border-radius:3px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0009}.mockup-device-screen .mockup-card-body{min-height:0;position:absolute;inset:0;height:auto!important}.mockup-device-base{background:linear-gradient(#c8c9cd 0%,#aaabb0 35%,#8c8d92 60%,#6b6c70 85%,#4d4e52 100%);border-radius:0 0 12px 12px;height:14px;margin:0 -3.2%;position:relative;box-shadow:inset 0 1px #fff6,0 1px 2px #0006}.mockup-device-base:before{content:"";background:linear-gradient(#595a5e,#404145);border-radius:0 0 6px 6px;width:14%;height:5px;position:absolute;top:0;left:50%;transform:translate(-50%)}.mockup-device-phone{filter:drop-shadow(0 30px 50px #00000080);background:linear-gradient(155deg,#2a2a2e 0%,#1a1a1d 100%);border-radius:38px;min-width:0;padding:10px;position:relative;box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 1px #ffffff1f}.mockup-device-phone:before{display:none}.mockup-device-phone-screen{aspect-ratio:9/19;background:#fff;border-radius:30px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0009}.mockup-device-phone-screen .mockup-card-body{min-height:0;position:absolute;inset:0;height:auto!important}.mockup-footer-bar{z-index:1;text-align:center;color:#ffffff73;padding:24px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;position:relative}.mockup-footer-bar a{color:#ffffffb3;text-decoration:underline}