.forge-visual{display:contents}
@media(max-width:760px){
 /* Keep text, the sculpture and its controls in separate, predictable rows. */
 .hero{padding:108px var(--shell) 28px;row-gap:20px}
 .hero-copy .eyebrow,html:lang(de) .hero-copy .eyebrow{font-size:7px;line-height:1.7;letter-spacing:1px;margin-bottom:18px;max-width:330px}
 h1{font-size:clamp(46px,11.8vw,75px);line-height:1.04;letter-spacing:-2.8px}
 html:lang(de) h1{font-size:clamp(38px,10.5vw,65px);line-height:1.05;letter-spacing:-2px}
 .hero-description{font-size:14px;line-height:1.65;margin-top:19px;margin-bottom:22px}
 .forge-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"visual visual" "caption controls";align-items:center;gap:0 12px;width:100%;max-width:380px;aspect-ratio:auto;max-height:none;margin:0;min-width:0}
 .forge-visual{display:block;grid-area:visual;position:relative;width:100%;aspect-ratio:1.12;overflow:hidden}
 .forge-stage canvas{transform:none}
 .forge-stage figcaption,html:lang(de) .forge-stage figcaption{grid-area:caption;position:static;font-size:8px;letter-spacing:.8px;line-height:1.6;gap:7px;min-width:0;padding-block:10px}
 .forge-stage .caption-line,.forge-stage .caption-small{display:none}
 .stage-controls{grid-area:controls;position:static;gap:5px;padding-block:5px}
 .stage-controls .text-button{font-size:11px;min-height:44px;padding:10px 7px}
 .stage-controls .text-button span{margin-left:6px}
 .motion-toggle{width:44px;height:44px;flex-shrink:0}
 .hero-baseline{position:static;inset:auto;margin:0;padding-top:16px}
 .hero-baseline a{font-size:8px;letter-spacing:1.2px}
 /* Mobile product artwork uses normal flow; no annotation covers the app. */
 .product-stage{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;padding:32px 20px 25px;gap:16px}
 .orbit-label{position:static;order:0;font-size:8px;letter-spacing:1.2px;line-height:1.6;text-align:center;max-width:100%}
 .phone{order:1;width:clamp(220px,62vw,260px);height:calc(clamp(220px,62vw,260px)*2.14);max-width:100%;margin:10px 0 14px;transform:rotateZ(2deg);flex-shrink:0}
 .floating-note{position:static;max-width:100%;transform:none;z-index:auto;box-shadow:0 8px 25px #020d2130;backdrop-filter:none;pointer-events:none}
 .note-one{order:2;padding:11px 16px;font-size:11px;line-height:1.5;gap:10px}
 .note-one small{font-size:9px;line-height:1.5}
 .note-two{order:3;padding:12px 16px;font-size:11px;line-height:1.5;gap:9px}
 .concept-label{order:4;position:static;max-width:280px;font-size:8px;letter-spacing:.7px;line-height:1.8;margin-top:3px;text-wrap:balance}
 .product-orbit{pointer-events:none;width:420px;height:420px;top:25%;left:50%;translate:-50% 0}
 .orbit-two{width:550px;height:550px;top:18%}
 .phone-tabs button{min-height:44px}
 #concept-panel{overscroll-behavior-y:auto}
 .motion-paused .phone{transform:none}
}
@media(max-width:360px){
 .hero{padding-top:102px}
 html:lang(de) h1{font-size:clamp(34px,10.5vw,38px);letter-spacing:-1.5px}
 .forge-stage{column-gap:7px}
 .forge-stage figcaption,html:lang(de) .forge-stage figcaption{font-size:7px;letter-spacing:.5px}
 .stage-controls .text-button{font-size:10px;padding-inline:5px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.phone{transform:none}}