.hero:has(.hero-native){grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);gap:40px;padding-top:54px;padding-bottom:38px;min-height:0}
.hero:has(.hero-native) .hero-copy{width:100%;min-width:0;container-type:inline-size}.hero:has(.hero-native) h1{font-size:clamp(28px,11.6cqi,58px);white-space:nowrap;line-height:1.16}.hero:has(.hero-native) h1 em{display:block}
.hero-native{min-width:0;min-height:0}.hero-native .visual-glow{pointer-events:none;opacity:.3;width:110%;right:-5%;background:var(--mint)}
.native-product-window{position:relative;z-index:1;min-width:0;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--white);box-shadow:0 28px 75px #173d7317;color:var(--ink)}
.native-window-bar{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;border-bottom:1px solid var(--line);font-size:9px;color:var(--ink-soft);background:var(--white)}
.native-window-dots{display:flex;gap:6px}.native-window-dots i{width:9px;height:9px;border-radius:50%;background:#ff6058}.native-window-dots i:nth-child(2){background:#ffbd2e}.native-window-dots i:nth-child(3){background:#28c840}.native-preview-badge{padding:3px 7px;background:var(--mint);border-radius:5px;color:var(--coral);font-size:9px}
.native-frame-stage{position:relative;width:100%;aspect-ratio:1466/920;background:var(--paper);overflow:hidden}.native-frame-stage iframe{position:absolute;top:0;left:0;border:0;width:1466px;height:920px;transform-origin:0 0;display:block;background:var(--white)}
.native-preview-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--paper);color:var(--ink-soft);font-size:13px}.native-preview-loading[hidden]{display:none!important}.native-preview-loading button{padding:8px 14px;border:1px solid var(--line);background:var(--white);border-radius:10px;color:var(--coral);font:inherit;cursor:pointer}
.native-window-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:43px;padding:5px 15px;border-top:1px solid var(--line);background:var(--white);color:var(--ink-soft);font-size:10px}.native-window-foot>div{display:flex;gap:8px}.native-window-foot button{border:0;background:transparent;color:var(--coral);font:inherit;cursor:pointer;padding:6px 8px;min-height:30px;border-radius:8px}.native-window-foot button:hover{background:var(--mint)}.native-window-foot button>span{font-size:16px;margin-left:5px}
.native-preview-caption{font-size:10px;letter-spacing:0;margin-top:16px;gap:12px}.native-preview-caption>span:last-child{color:var(--coral)}
.native-preview-notice{position:absolute;left:50%;bottom:58px;z-index:5;max-width:calc(100% - 32px);width:max-content;padding:11px 16px;border:1px solid var(--line);border-radius:13px;background:var(--white);color:var(--ink);box-shadow:0 8px 30px #173d7320;font-size:12px;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:opacity .18s,transform .18s;pointer-events:none}.native-preview-notice.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.native-preview-viewer.is-expanded{width:min(1500px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 28px);padding:0;margin:auto;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 35px 100px #10244850;overflow:auto;overscroll-behavior:contain}.native-preview-viewer.is-expanded::backdrop{background:#13253c73;backdrop-filter:blur(6px)}.native-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:12px}.native-viewer-bar button{font:inherit;padding:8px 13px;min-height:34px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);cursor:pointer}.native-preview-viewer.is-expanded [data-native-slot]{padding:12px}.native-preview-viewer.is-expanded .native-product-window{box-shadow:none;border-radius:18px}
@media(max-width:1050px){.hero:has(.hero-native){grid-template-columns:1fr;gap:34px}.hero-native{max-width:940px!important;width:100%;margin:auto}}
@media(max-width:760px){.hero:has(.hero-native){padding-top:40px;padding-bottom:28px;gap:28px}.native-product-window{border-radius:18px}.native-window-bar{padding:0 12px;font-size:8px}.native-window-foot{font-size:9px;padding:5px 10px}.native-window-foot button{font-size:10px}.native-preview-caption{font-size:9px}.native-preview-viewer.is-expanded{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:18px}.native-preview-viewer.is-expanded [data-native-slot]{padding:6px}.native-preview-viewer.is-expanded .native-frame-stage{height:calc(100dvh - 155px)!important;min-height:380px;overflow:auto;aspect-ratio:auto}.native-preview-viewer.is-expanded .native-frame-stage iframe{position:relative;transform:none!important;width:1120px!important;height:800px!important}.native-preview-viewer.is-expanded .native-window-bar{display:none}.native-preview-viewer.is-expanded .native-window-foot>span{max-width:160px}.native-viewer-bar{padding:9px 12px}.native-preview-viewer:not(.is-expanded) .native-product-window .native-window-foot [data-native-expand]{position:absolute;top:3px;right:10px;background:var(--mint);font-size:10px;min-height:26px;padding:4px 7px}.native-preview-viewer:not(.is-expanded) .native-product-window .native-preview-badge{visibility:hidden}.native-preview-viewer:not(.is-expanded) .native-product-window .native-window-bar{padding-right:80px}}
@media(prefers-reduced-motion:reduce){.native-product-window *{transition:none!important}}

.native-preview-viewer:not(.is-expanded){display:block;position:relative;inset:auto;width:100%;max-width:none;max-height:none;padding:0;margin:0;border:0;background:transparent;overflow:visible;color:inherit}.native-preview-viewer:not(.is-expanded) .native-viewer-bar{display:none}.native-preview-viewer:not(.is-expanded) [data-native-slot]{padding:0}