/* Website captures remain intact; only the hardware moves. */
.rd { padding-top: clamp(55px, 7vw, 100px); padding-bottom: clamp(60px, 8vw, 110px); }
.rd-copy { text-align: center; }
.rd-eyebrow { display: block; margin-bottom: 18px; color: var(--ink-3); font: 500 .76rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.rd-copy h2 { font: 300 clamp(2.4rem, 4.2vw, 4rem)/1.06 var(--display); color: var(--navy); }
.rd-copy p { max-width: 54ch; margin: 20px auto; color: var(--ink-2); font-size: .95rem; line-height: 1.75; }
.rd-copy a { display: inline-flex; gap: 20px; align-items: center; color: var(--navy); font-size: .86rem; border-bottom: 1px solid var(--hair-2); padding-bottom: 6px; }
.rd-demo { width: 100%; max-width: 960px; margin: 0 auto; }
.rd-stage { position: relative; width: 100%; aspect-ratio: 1200 / 760; margin-top: 32px; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, rgba(120,160,224,.13), transparent 66%); }
.rd-canvas { position: absolute; top: 50%; left: 50%; width: 1200px; height: 760px; margin: -380px 0 0 -600px; transform: scale(var(--rd-scale, .8)); transform-origin: center; transition: transform 1.2s cubic-bezier(.65,0,.2,1); }
.rd-hardware { position: absolute; transform-origin: top left; transition: transform 1.2s cubic-bezier(.65,0,.2,1), opacity .7s; filter: drop-shadow(0 20px 18px rgba(14,30,56,.16)); }
/* Source photos stay intact. CSS crops to the front-facing device and positions the site in its screen. */
.rd-photo-viewport { position: absolute; inset: 0; overflow: hidden; }
.rd-product-photo { position: absolute; max-width: none; height: auto; }
.rd-display { position: absolute; overflow: hidden; background: #111; }
/* Viewport captures match the screens; contain preserves the complete composition. */
.rd-display img { display: block; max-width: none; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.rd-imac { left: 235px; top: 24px; width: 660px; aspect-ratio: 665 / 558; z-index: 1; }
.rd-imac .rd-product-photo { width: 189.474%; left: -44.812%; top: -7.168%; }
.rd-imac .rd-photo-viewport { clip-path: polygon(2% 0,98% 0,99.55% 2%,99.55% 79.2%,98% 81%,61.5% 81%,61.5% 97.3%,61.95% 97.85%,61.8% 99.7%,38.1% 99.7%,37.9% 97.85%,38.2% 97.3%,38.2% 81%,2% 81%,.3% 79.2%,.3% 2%); }
.rd-imac .rd-display { left: 2.707%; top: 2.867%; width: 94.436%; height: 63.441%; }
.rd-macbook { left: 30px; top: 366px; width: 585px; aspect-ratio: 480 / 291; z-index: 3; }
.rd-macbook .rd-product-photo { width: 250%; left: -62.916%; top: -63.23%; }
.rd-macbook .rd-photo-viewport { clip-path: polygon(10% 0,90% 0,91.9% 3%,91.9% 95.5%,100% 95.5%,100% 100%,0 100%,0 95.5%,8.3% 95.5%,8.3% 3%); }
.rd-macbook .rd-display { left: 10%; top: 3.09%; width: 80.42%; height: 85.567%; }
.rd-ipad { left: 865px; top: 195px; width: 245px; aspect-ratio: 558 / 784; z-index: 2; }
.rd-tablet-body { position: absolute; inset: 0; animation: rdTabletTurn 10s ease-in-out infinite paused; }
.rd-ipad .rd-product-photo { width: 168.459%; left: -45.52%; top: -27.551%; }
.rd-ipad .rd-photo-viewport { border-radius: 8% / 5.7%; }
.rd-ipad .rd-display { left: 2.9%; top: 2.5%; width: 94.2%; height: 95%; border-radius: 5% / 3.5%; }
.rd-ipad .rd-portrait { animation: rdTabletPortrait 10s ease-in-out infinite paused; }
.rd-ipad .rd-landscape { position: absolute; left: 50%; top: 50%; width: 141.698%; height: 70.571%; transform: translate(-50%,-50%) rotate(90deg); opacity: 0; animation: rdTabletLandscape 10s ease-in-out infinite paused; }
.rd.is-playing:is([data-device="all"],[data-device="ipad"]) .rd-tablet-body,
.rd.is-playing:is([data-device="all"],[data-device="ipad"]) .rd-ipad .rd-display img { animation-play-state: running; }
@keyframes rdTabletTurn { 0%,20%,90%,100% { transform: rotate(0); } 37%,73% { transform: rotate(-90deg); } }
@keyframes rdTabletPortrait { 0%,26%,86%,100% { opacity: 1; } 33%,79% { opacity: 0; } }
@keyframes rdTabletLandscape { 0%,26%,86%,100% { opacity: 0; } 33%,79% { opacity: 1; } }
/* Apple iPhone Duo: 164.6 x 117.8 mm open. The real model replaces this flat fallback. */
.rd-foldable { left: 690px; top: 440px; width: 310px; aspect-ratio: 164.6 / 117.8; z-index: 4; }
.rd-foldable::before { content: ""; position: absolute; inset: -28%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, rgba(63,149,255,.58) 10%, rgba(87,166,255,.25) 43%, transparent 70%); filter: blur(12px); opacity: var(--rd-fold-glow,0); transform: scaleX(var(--rd-fold-width,1)); }
.rd-fold-flat { position: absolute; inset: 0; }
.rd-foldable .rd-product-photo { width: 198.895%; left: -82.873%; top: -23.643%; }
.rd-foldable .rd-photo-viewport { border-radius: 8%; }
.rd-foldable .rd-display { left: 1.934%; top: 2.713%; width: 95.856%; height: 94.961%; border-radius: 6% / 8%; }
.rd-model { position: absolute; width: 106%; aspect-ratio: 1; left: -3%; top: 50%; transform: translateY(-50%); }
.rd-model canvas { display: block; width: 100%; height: 100%; }
.rd-model-ready .rd-fold-flat { visibility: hidden; }
/* Actual Apple Pro Max front: 340 x 712 crop at (255,47) in the 612 x 760 photo. */
.rd-phone-home { left: 960px; top: 430px; width: 140px; aspect-ratio: 340 / 712; z-index: 5; }
.rd-phone-body { position: absolute; inset: 0; animation: rdTabletTurn 10s ease-in-out infinite paused; }
.rd-phone-home .rd-product-photo { width: 180%; left: -75%; top: -6.601%; }
.rd-phone-home .rd-photo-viewport { border-radius: 16.765% / 8.006%; }
.rd-phone-home .rd-display { left: 2.941%; top: 1.685%; width: 94.118%; height: 96.629%; border-radius: 15.625% / 7.267%; background: #0266b1; }
/* Half a pixel of overlap seals the status-bar edge at fractional display scales. */
.rd-phone-page { position: absolute; inset: calc(7.267% - .5px) 0 -.5px; background: #fff; container-type: size; }
.rd-phone-page img { object-fit: cover; }
.rd-phone-page .rd-portrait,.rd-phone-status { animation: rdTabletPortrait 10s ease-in-out infinite paused; }
.rd-phone-page .rd-landscape { position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqw; transform: translate(-50%,-50%) rotate(90deg); opacity: 0; animation: rdTabletLandscape 10s ease-in-out infinite paused; }
.rd.is-playing:is([data-device="all"],[data-device="iphone"]) .rd-phone-body,
.rd.is-playing:is([data-device="all"],[data-device="iphone"]) .rd-phone-page img,
.rd.is-playing:is([data-device="all"],[data-device="iphone"]) .rd-phone-status { animation-play-state: running; }
/* Preserve the camera from the same Apple photograph above the website's safe area. */
.rd-phone-island { position: absolute; left: 39.706%; top: 3.09%; width: 20%; aspect-ratio: 68 / 26; overflow: hidden; border-radius: 999px; }
.rd-phone-island img { position: absolute; max-width: none; width: 900%; height: auto; left: -573.529%; top: -265.385%; }
.rd-phone-status { position: absolute; left: 12.5%; top: 3.09%; width: 75%; height: 3.652%; display: flex; align-items: center; justify-content: space-between; color: #fff; font: 600 6.2px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.15px; }
.rd-phone-status svg { display: block; width: 28px; height: 7px; }
/* Use the full stage in the group view, leaving room for each rotating device. */
.rd[data-device="all"] .rd-imac { transform: translate(84.5px,4px) scale(.85); }
.rd[data-device="all"] .rd-macbook { transform: translate(-15px,70px) scale(.9); }
.rd[data-device="all"] .rd-ipad { transform: translate(88px,-95px) scale(.7); }
.rd[data-device="all"] .rd-foldable { transform: translate(-125px,42px) scale(.96); }
.rd[data-device="all"] .rd-phone-home { transform: translate(10px,15px) scale(.96); }
.rd:not([data-device="all"]) .rd-hardware { opacity: 0; }
.rd[data-device="imac"] .rd-imac { opacity: 1; transform: translate(-31px,8px) scale(1.2); }
.rd[data-device="macbook"] .rd-macbook { opacity: 1; transform: translate(175px,-230px) scale(1.35); }
.rd[data-device="ipad"] .rd-ipad { opacity: 1; transform: translate(-467px,-99px) scale(1.65); }
.rd[data-device="duo"] .rd-foldable { opacity: 1; transform: translate(-377px,-285px) scale(1.85); }
.rd[data-device="iphone"] .rd-phone-home { opacity: 1; transform: translate(-507px,-365px) scale(2.1); }
.rd-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; margin-top: 6px; }
.rd-controls button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 9px; flex-shrink: 0; border-radius: 100px; border: 1px solid transparent; background: transparent; color: var(--ink-3); font: 500 .76rem var(--sans); cursor: pointer; }
.rd-controls button[hidden] { display: none; }
.rd-controls svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rd-controls button:hover { color: var(--navy); background: rgba(112,150,215,.07); }
.rd-controls button[aria-pressed="true"] { border-color: var(--hair-2); color: var(--navy); background: rgba(112,150,215,.07); }
.rd-controls button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.rd-controls .rd-pause { margin-left: 4px; border-color: var(--hair); width: 44px; padding: 0; }
.rd-layouts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; min-height: 44px; }
.rd-layouts[hidden],.rd-layouts button[hidden] { display: none; }
.rd-layouts button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 9px; border: 1px solid var(--hair); border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.rd-layouts svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rd-layouts button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.rd-layouts button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* A chosen layout holds still until the visitor chooses Auto again. */
.rd:is([data-device="ipad"],[data-device="iphone"]):not([data-layout="auto"]) :is(.rd-tablet-body,.rd-phone-body,.rd-display img,.rd-phone-status) { animation: none; }
.rd:is([data-device="ipad"],[data-device="iphone"])[data-layout="landscape"] :is(.rd-tablet-body,.rd-phone-body) { transform: rotate(-90deg); }
.rd:is([data-device="ipad"],[data-device="iphone"])[data-layout="landscape"] :is(.rd-portrait,.rd-phone-status) { opacity: 0; }
.rd:is([data-device="ipad"],[data-device="iphone"])[data-layout="landscape"] .rd-landscape { opacity: 1; }
@media (max-width: 600px) {
  .rd-stage { aspect-ratio: 1 / 1.13; margin-top: 12px; }.rd-copy p { max-width: 33ch; }.rd-controls { column-gap: 3px; }.rd-controls .rd-pause { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .rd-canvas,.rd-hardware { transition: none; } .rd-tablet-body,.rd-ipad .rd-display img,.rd-phone-body,.rd-phone-page img,.rd-phone-status { animation: none; } .rd-foldable::before { opacity: 0; } }