.v2-story { position:relative; }
.v2-story.is-active:not(.is-static) { height:420svh; }
.v2-story.is-active #hero { position:sticky; top:64px; min-height:0; height:calc(100svh - 64px); max-height:none; overflow:hidden; }
.v2-story.is-static #hero { min-height:700px; }
.v2-story.is-active .field-grid { height:calc(100% - 82px); min-height:0; padding-top:30px; padding-bottom:30px; }
.v2-story.is-active .field-box { height:100%; min-height:320px; min-width:0; width:100%; aspect-ratio:auto; }
.v2-layer { position:absolute; inset:0; z-index:0; pointer-events:none; }
.v2-layer canvas { display:block; width:100%; height:100%; }
.v2-layer.is-switching > .box3d-canvas { opacity:0; }
/* First appearance: the model fades up into the empty stage from its first drawn frame. */
.v2-layer.is-revealed { animation:v2-reveal .9s cubic-bezier(.22,.68,0,1) both; }
@keyframes v2-reveal { from { opacity:0; transform:translateY(10px); } }
.v2-transition-snapshot { position:absolute; inset:0; z-index:1; pointer-events:none; }
/* Match the PDP drawing buffer to its CSS viewport while retaining 2x detail. */
.stage.v2-stage > .box3d-canvas { width:100%; height:100%; }
.v2-stage { touch-action:pan-y pinch-zoom; cursor:grab; outline-offset:5px; user-select:none; -webkit-user-select:none; }
.v2-stage:focus-visible { outline:2px solid white; border-radius:20px; }
.v2-stage.dragging { cursor:grabbing; }
.v2-copy-slot { position:relative; }
.v2-panel { display:none; }
.v2-story.is-active[data-beat]:not([data-beat="0"]) .v2-hero-copy { display:none; }
.v2-story.is-active[data-beat]:not([data-beat="0"]) .v2-panel { display:block; }
.v2-panel h2 { font-size:clamp(40px,4.4vw,64px); line-height:1.03; letter-spacing:-.055em; margin:18px 0 28px; }
.v2-panel .v2-step-title { font-size:22px; margin:12px 0; font-weight:600; }
.v2-panel .v2-step-body { font-size:16px; line-height:1.6; max-width:29em; opacity:.87; }
.v2-progress { display:flex; gap:7px; margin:26px 0 20px; }
.v2-progress button { width:43px; min-height:38px; border:0; background:none; color:rgba(255,255,255,.55); cursor:pointer; padding:0; font-size:11px; }
.v2-progress button::before { content:""; display:block; height:2px; background:currentColor; margin-bottom:7px; }
.v2-progress button[aria-current="step"] { color:#fff; }
.v2-controls { display:flex; gap:8px; margin-top:12px; }
.v2-controls button { border:1px solid #ffffff65; background:#ffffff0d; color:inherit; border-radius:25px; padding:8px 13px; font:inherit; font-size:12px; cursor:pointer; }
.v2-story:not(.is-active) .v2-controls,.v2-story:not(.is-active) .v2-progress { display:none; }
.v2-story.is-active .field-box .art { opacity:0; pointer-events:none; }
.v2-story.is-active .tabs { z-index:4; }
html.v2-has-story #unbox { display:none; }
html.v2-has-story .proto-flag { top:78px; bottom:auto; font-size:8px; padding:5px 8px; opacity:.7; }
.v2-pdp-controls { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:4; width:max-content; }
.v2-pdp-controls button { padding:9px 13px; border:1px solid #2223; border-radius:30px; background:#fffffff0; color:#16181e; cursor:pointer; font-size:12px; }
.stage:has(.v2-pdp-controls) .hint { bottom:60px; }
@media(max-width:900px) {
 .v2-story.is-active:not(.is-static) { height:380svh; }
 .v2-story.is-active #hero { display:flex; flex-direction:column; justify-content:center; height:auto; min-height:calc(100svh - 60px); top:var(--v2-sticky-top,60px); }
 /* The carton exits downward during extraction. Fade it inside the model
    area so the full-canvas renderer never paints over the mobile captions. */
 .v2-story.is-active .v2-layer {
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--v2-caption-top,100%) - 16px),transparent calc(var(--v2-caption-top,100%) - 4px));
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--v2-caption-top,100%) - 16px),transparent calc(var(--v2-caption-top,100%) - 4px));
 }
 .v2-story .field-grid { display:flex; flex-direction:column; justify-content:flex-start; gap:12px; width:100%; height:auto; padding-top:24px; padding-bottom:14px; }
 .v2-story.is-active .field-grid { flex:0 0 auto; height:auto; min-height:0; padding-top:24px; padding-bottom:14px; }
 .v2-story .v2-heading,.v2-story .v2-copy-slot { flex:0 0 auto; width:100%; }
 .v2-story .field-box { order:0; }
 /* Keep the content together; spare viewport height belongs around the group,
    not inside the model. This height retains the full-width closed-box view. */
 .v2-story.is-active .field-box { flex:0 0 auto; height:clamp(210px,65vw,320px); min-height:0; width:100%; }
 .v2-story .v2-heading h1 { font-size:clamp(34px,10.6vw,43px); }
 .v2-story .v2-heading .kicker { font-size:10px; }
 .v2-story .v2-hero-copy,.v2-story.is-active[data-beat]:not([data-beat="0"]) .v2-panel { display:flow-root; }
 .v2-story.is-active .v2-hero-copy .lead { font-size:14px; line-height:1.5; margin:12px 0; }
 .v2-story.is-active .v2-hero-copy .ctas { margin-top:14px; }
 .v2-story.is-active .v2-hero-copy .btn { padding:10px 16px; font-size:12px; }
 /* Extraction uses the caption's reserved space, keeping the open carton
    clear without increasing the hero height on small phones. */
 .v2-story[data-beat="3"] .v2-step-title,.v2-story[data-beat="3"] .v2-step-body { transform:translateY(32px); }
 .v2-panel h2,.v2-panel .kicker { display:none; }
 .v2-panel .v2-step-title { font-size:18px; margin:8px 0; }
 .v2-panel .v2-step-body { font-size:13px; line-height:1.45; max-width:32em; margin:0; }
 .v2-panel .ctas { display:none; gap:8px; margin-top:10px; }
 .v2-story[data-beat="4"] .v2-panel .ctas { display:flex; }
 .v2-panel .ctas .btn { padding:8px 12px; font-size:11px; }
 .v2-progress { margin:12px 0 0; }
 .v2-progress button { min-height:28px; }
 .v2-controls { position:static; flex-wrap:wrap; margin:8px 0 0; }
 .v2-controls button { font-size:10px; padding:7px 9px; }
 .v2-story .tabs { position:relative; left:auto; bottom:auto; transform:none; flex:0 0 auto; align-self:center; margin:0 auto 16px; }
 .v2-story .tabs button { padding:10px 12px; font-size:12px; }
 .v2-story.is-static #hero { min-height:calc(100svh - 60px); }
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape) {
 .v2-story.is-active .field-grid { gap:6px; padding-top:8px; padding-bottom:8px; }
 .v2-story .v2-heading h1 { font-size:28px; margin-top:4px; }
 .v2-story .v2-heading .kicker { font-size:9px; }
 .v2-story.is-active .field-box { height:150px; min-height:0; }
 .v2-story .v2-copy-slot { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; row-gap:4px; }
 .v2-story .v2-hero-copy,.v2-story.is-active[data-beat]:not([data-beat="0"]) .v2-panel { display:grid; grid-column:1 / -1; grid-template-columns:minmax(0,1fr) auto; column-gap:20px; align-items:center; }
 .v2-story[data-beat="3"] .v2-step-title,.v2-story[data-beat="3"] .v2-step-body { transform:none; }
 .v2-story.is-active .v2-hero-copy .lead { margin:0; max-width:none; font-size:12px; line-height:1.4; }
 .v2-story.is-active .v2-hero-copy .ctas,.v2-panel .ctas { margin:0; gap:6px; flex-wrap:nowrap; }
 .v2-story.is-active .v2-hero-copy .btn,.v2-panel .ctas .btn { height:32px; padding:6px 10px; font-size:11px; white-space:nowrap; }
 .v2-panel .v2-step-title { grid-column:1; grid-row:1; font-size:15px; margin:0 0 3px; }
 .v2-panel .v2-step-body { grid-column:1; grid-row:2; max-width:none; font-size:12px; line-height:1.4; }
 .v2-panel .ctas { grid-column:2; grid-row:1 / span 2; }
 .v2-progress,.v2-controls { margin:0; align-items:center; }
 .v2-controls { justify-content:flex-end; }
 .v2-story .tabs { margin-bottom:8px; padding:4px; }
 .v2-story .tabs button { padding:8px 12px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .v2-story *, .v2-story *::before { transition:none!important; animation:none!important; } }