/* Homepage-only native render viewer; all layout rules stay inside its root. */
#crane-native{--native-header:96px;background:#111225;color:#fff}
#crane-native .native-journey{height:calc(100svh - var(--native-header))}
#crane-native.native-enhanced .native-journey{height:820vh}
#crane-native .native-stage{position:sticky;top:var(--native-header);height:calc(100svh - var(--native-header));min-height:360px;background:#111225;overflow:hidden}
#crane-native .native-stage picture,#crane-native canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#crane-native .native-stage picture img{display:block;width:100%;height:100%;object-fit:contain}
#crane-native canvas{opacity:0}
#crane-native .native-caption{position:absolute;left:5%;bottom:86px;z-index:2;max-width:500px;padding:20px 24px;border-radius:20px;background:#1f1943e8;box-shadow:0 10px 50px #0003}
#crane-native h1{font-size:clamp(24px,2.1vw,36px);line-height:1.3;margin:10px 0;color:#fff;text-wrap:balance;word-break:normal}
#crane-native .native-title-group{white-space:nowrap}
#crane-native .native-caption p{line-height:1.6;margin:10px 0 18px;color:#ddd6e9}
#crane-native .native-caption a{color:var(--yellow);text-decoration:underline;text-underline-offset:5px}
#crane-native #native-step{color:var(--yellow);letter-spacing:.15em;font-size:13px}
#crane-native .native-boundary{display:block;font-size:10px;color:#c9cbcb;margin-top:10px}
#crane-native .native-control{position:absolute;bottom:0;left:0;width:100%;display:flex;align-items:center;gap:16px;padding:20px 5%;background:#1f1943e8;z-index:3}
#crane-native .native-control input{flex:1;min-width:0;accent-color:var(--yellow)}
#crane-native .native-control output,#crane-native .native-control label{font-size:12px;white-space:nowrap}
#crane-native #native-transition{display:none;position:absolute;inset:0;z-index:1;background:#111225;place-content:center;text-align:center;font-size:30px;line-height:1.6;pointer-events:none}
#crane-native #native-transition small{font-size:16px;color:#bfb8d2}
#crane-native .native-directory{padding:60px max(5vw,24px) 80px;max-width:1450px;margin:auto}
#crane-native h2,#crane-native h3,#crane-native .eyebrow{color:#fff}
#crane-native .native-directory>p{line-height:1.7;color:#d5cee5}
#crane-native .native-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:35px}
#crane-native .native-cards article{background:#2b2452;border-radius:18px;padding:16px;min-width:0}
#crane-native .native-cards img{width:100%;height:auto;border-radius:10px;aspect-ratio:16/9;object-fit:cover}
#crane-native .native-cards h3{font-size:22px;margin:16px 0 10px}
#crane-native .native-cards p{line-height:1.65;color:#d5cee5;font-size:14px}
#crane-native .native-class-links{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0}
#crane-native .native-class-links a{padding:8px 12px;border:1px solid #c9cbcb;border-radius:3px;font-size:14px}
#crane-native .native-demo-prices{display:flex;flex-wrap:wrap;gap:18px}
#crane-native .native-demo-prices a{padding:14px 18px;border:1px solid #c9cbcb}
#crane-native .native-demo-prices small{display:block;color:#c9cbcb;font-size:11px}
#crane-native .native-credit{font-size:12px;margin-top:40px}
#crane-native .native-credit a{text-decoration:underline}
#crane-native:not(.native-enhanced) .native-control{display:none}
#crane-native:not(.native-enhanced) .native-caption{bottom:25px}
@media(max-width:650px){#crane-native{--native-header:82px}#crane-native .native-caption{left:4%;right:4%;bottom:76px;padding:12px 16px;max-width:none}#crane-native h1{font-size:23px;margin:6px 0}#crane-native .native-caption p{font-size:13px;margin:7px 0 10px}#crane-native .native-caption a{font-size:13px}#crane-native .native-control{padding:16px 4%;gap:9px}#crane-native .native-cards{grid-template-columns:1fr}#crane-native .native-directory{padding-top:30px}#crane-native #native-transition{font-size:23px}}
@media(prefers-reduced-motion:reduce){#crane-native.native-enhanced .native-journey{height:calc(100svh - var(--native-header))}#crane-native .native-control,#crane-native canvas{display:none}#crane-native .native-caption{bottom:25px}}