/* Only the requested image, purchase actions and central model viewport. */
.hero-product.hero-product-assembled{height:auto;width:84%;max-width:670px;max-height:none;object-fit:contain;top:60%;animation:assembled-float 7s ease-in-out infinite;transform:translate(-50%,-50%)}
@keyframes assembled-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 9px))}}
@media(prefers-reduced-motion:reduce){.hero-product.hero-product-assembled{animation:none}}
.purchase-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.purchase-actions .price-button{margin:0;background:var(--cream);color:var(--orange);border:2px solid var(--orange);box-shadow:none}
.purchase-actions .price-button:hover,.nav-cta:hover{background:#fff1df;color:#d85b18}
.kickstarter-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:2px solid #ff681c;border-radius:999px;background:#ff681c;color:#fffaf1;padding:19px 24px;font-family:inherit;font-weight:800;font-size:17px;line-height:1.25;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s;box-shadow:2px 4px 0 #74675126}
.kickstarter-button:hover{background:#ef5408;border-color:#ef5408;transform:translateY(-2px)}
.kickstarter-button:focus-visible{outline:3px solid var(--deep);outline-offset:4px}
.nav-cta{background:var(--cream);color:var(--orange);border-color:var(--orange)}
.nav-right{gap:12px}.nav-right .kickstarter-button{padding:12px 17px;font-size:13px}
.product-model{position:absolute;inset:0;pointer-events:none;z-index:20}
.product-model canvas{display:block;width:100%;height:100%}
.product-stage.model-ready>.product-main{visibility:hidden}
@media(min-width:1181px) and (max-width:1450px){.navigation nav{gap:15px}.nav-right .social-icons{gap:0}.navigation{padding-left:3%;padding-right:3%}.nav-right{gap:8px}.nav-right .kickstarter-button{padding:11px 13px;font-size:12px}}
@media(max-width:650px){.purchase-actions{gap:10px}.purchase-actions .price-button{padding:17px 20px}.kickstarter-button{padding:17px 22px;font-size:16px}.nav-right{gap:6px}.nav-right .nav-cta{padding:9px 10px;font-size:11px}.nav-right .kickstarter-button{padding:9px 10px;font-size:11px;gap:4px}.navigation .logo{width:86px;height:auto}.hero-product.hero-product-assembled{width:96%}}
@media(max-width:650px){.navigation{padding:0 12px;gap:9px}.navigation>a{flex:0 0 68px}.navigation .logo{width:68px}.nav-right{gap:5px}.nav-right .nav-cta{padding:9px 8px;gap:3px;font-size:10px;white-space:nowrap}.nav-right .kickstarter-button{padding:9px 8px;font-size:10px;gap:3px}.menu-toggle{flex:0 0 30px;width:30px;padding:6px}}
@media(max-width:360px){.navigation{padding:0 8px;gap:7px}.navigation>a{flex-basis:58px}.navigation .logo{width:58px}.nav-right .kickstarter-button{white-space:normal;max-width:110px}.nav-right .nav-cta span{display:none}}

/* Direct manipulation rotates the viewing frame, independently of the animation. */
.model-drag-area{position:absolute;left:50%;top:46%;width:40%;min-width:240px;height:85%;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;cursor:grab;border-radius:45%;user-select:none}
.model-drag-area.dragging{cursor:grabbing}
.model-drag-area:focus-visible{outline:2px dashed var(--orange);outline-offset:0}
.model-rotate-hint{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--deep);white-space:nowrap}

/* Keep the existing HTML copy and expose the entire lower illustration. */
.native-step .step-illustration{aspect-ratio:607/410}
.native-step:nth-child(2) .step-illustration{aspect-ratio:607/448}
.native-step:nth-child(3) .step-illustration{aspect-ratio:607/430}
.native-step .step-illustration img{width:100%;bottom:0}
/* Exclude the old raster card edges/shadows while retaining each full drawing. */
.native-step:nth-child(1) .step-illustration img{clip-path:polygon(5% 57%,96.5% 57%,96.5% 83%,70% 97%,25% 97%,25% 78%,5% 73%)}
.native-step:nth-child(2) .step-illustration img{clip-path:polygon(32% 53%,95% 53%,95% 63%,86% 75%,84% 90%,68% 96%,44% 96%,32% 86%)}
.native-step:nth-child(3) .step-illustration img{clip-path:polygon(21% 54%,72% 54%,97% 80%,97% 87%,73% 93%,44% 98%,21% 98%)}
.native-step:nth-child(4) .step-illustration img{clip-path:ellipse(30% 20% at 59% 76%)}
.native-step:nth-child(3){--step-color:#8854b5}
.native-step .step-surface{box-shadow:none}
.native-step:before{content:'';position:absolute;top:12%;bottom:2%;left:0;right:3%;border-radius:10cqw;box-shadow:5px 8px 14px #5f514520;mix-blend-mode:multiply;z-index:-1;pointer-events:none}
.native-step:hover,.native-step:focus-visible,.native-step.step-active{filter:none}
.arch-rings i:first-child{background:var(--purple)}
.arch-rings i:nth-child(2){background:#bba0e1}

.app-tabs{gap:10px;display:flex;flex-wrap:wrap;width:100%}
.app-copy{min-width:0;width:100%}
.app-tabs button{border:2px solid var(--purple);border-radius:999px;background:var(--cream);padding:13px 17px;box-shadow:2px 4px 0 var(--capsule-shadow);font-weight:800;transition:background .2s,color .2s,transform .2s,box-shadow .2s;cursor:pointer}
.app-tabs button:hover{background:#eee8f6;transform:translateY(-3px);border-color:var(--deep)}
.app-tabs button[aria-selected=true]{background:var(--deep);color:var(--cream);border-color:var(--deep);box-shadow:0 2px 0 var(--capsule-shadow);transform:translateY(1px)}
.app-tabs button[aria-selected=true]>span,.app-tabs button[aria-selected=true] b{color:var(--cream)}
.app-tabs button b{display:grid;place-items:center;width:23px;height:23px;background:var(--orange);color:var(--cream);border-radius:50%;font-size:15px}

:root{--section-round:48px}
.body-section{border-radius:var(--section-round);position:relative;z-index:1}
.product-section{background:#f5f1fa;border-radius:var(--section-round);position:relative;z-index:1}
/* The video texture continues behind the rounded FAQ corners. No white strip. */
.film-section{position:relative;overflow:visible;isolation:isolate;z-index:0}
.film-section:after{content:'';position:absolute;left:0;right:0;bottom:calc(-1 * var(--section-round));height:var(--section-round);background:var(--lavender) url('assets/film-pattern.png') center bottom/auto 850px repeat-x;pointer-events:none;z-index:-1}
.faq-section{position:relative;z-index:1;border-radius:var(--section-round) var(--section-round) 0 0}

/* Four opaque brand colors, shared by the opening and its final Hero circle. */
.hero-rings i:first-child,.intro-rings i:first-child{background:#f2ecff;inset:0}
.hero-rings i:nth-child(2),.intro-rings i:nth-child(2){background:#d9caff;inset:6.5%}
.hero-rings i:nth-child(3),.intro-rings i:nth-child(3){background:#bba7ee;inset:15%}
.hero-rings i:nth-child(4),.intro-rings i:nth-child(4){background:#9d70c6;inset:26.5%}
.brand-intro{display:none}
html.intro-pending{overflow:hidden;scroll-behavior:auto}
html.intro-pending .brand-intro{display:block;position:fixed;inset:0;z-index:1000;overflow:hidden;background:var(--cream)}
.intro-rings{position:absolute;left:50%;top:50%;width:600px;height:600px;transform:translate(-50%,-50%) scale(20);pointer-events:none}
.intro-rings i{position:absolute;border-radius:50%;opacity:1}
.intro-product{position:absolute;left:50%;top:50%;width:min(72vw,560px);height:auto;max-width:none;transform:translate(-50%,-50%)}
.intro-logo{position:absolute;left:50%;top:46%;width:clamp(220px,33vw,390px);transform:translate(-50%,-50%)}
.intro-corner,.intro-skip{position:absolute;color:var(--cream);font-size:10px;font-weight:750;letter-spacing:.13em;z-index:2}
.intro-corner-tl{left:30px;top:28px}.intro-corner-bl{left:30px;bottom:28px}.intro-corner-br{right:30px;bottom:28px}
.intro-skip{right:26px;top:20px;background:none;border:1px solid var(--cream);border-radius:999px;padding:10px 15px;cursor:pointer;letter-spacing:0}
html.intro-pending .navigation,html.intro-pending .hero-copy,html.intro-pending .hero-product-names,html.intro-pending .hero-kel,html.intro-pending .hero-kel-speech,html.intro-pending .hero-sticker,html.intro-pending .little-spark,html.intro-pending .hero-bottom,html.intro-pending .hero-edition{opacity:0;animation:none}
html.intro-pending .hero-product,html.intro-pending .hero-rings{visibility:hidden;animation:none}
html.intro-pending .hero-rings i,html.intro-pending .hero-art{animation:none}
@media(max-width:650px){:root{--section-round:28px}.hero-product.hero-product-assembled{width:104%}.model-drag-area{width:67%;min-width:0;height:72%;top:43%}.model-rotate-hint{bottom:15%}.app-tabs{gap:8px;flex-wrap:nowrap}.app-tabs button{flex:1;justify-content:center;font-size:13px;padding:12px 8px;gap:5px}.app-tabs button b{width:19px;height:19px;font-size:12px}.intro-logo{width:62vw}.intro-corner{font-size:8px;max-width:44%}.intro-corner-tl,.intro-corner-bl{left:18px}.intro-corner-br{right:18px;text-align:right}.intro-corner-bl,.intro-corner-br{bottom:22px}}
@media(max-width:650px){.app-section{grid-template-columns:minmax(0,1fr)}.app-tabs button{min-width:0;flex:1 1 0;font-size:12px;padding:12px 5px}.app-tabs button b{flex-shrink:0}}