/* A larger hardware view without changing the native three-chapter scroll track. */
.experience,
.experience-end{background:#000}
.experience-device-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;width:min(100%,460px);margin:14px 0 0}
.experience-device-panel figcaption{display:block;max-width:210px;padding:0;border:0;font-size:14px;line-height:1.6;color:#c3c0b8}
.experience-device-panel figcaption svg{display:block;width:26px;height:26px;margin:0 0 15px;color:#e2b264}

/* The source is square; the complete hardware sits within x=354–914, y=73–1185.
   This window removes only the empty surround. The image retains its proportions. */
.experience-device-crop{position:relative;display:block;width:auto;height:clamp(270px,38svh,340px);aspect-ratio:610/1160;overflow:hidden;isolation:isolate;flex:none}
.experience-device-crop>img{position:absolute;display:block;width:205.574%;max-width:none;height:auto;left:-53.443%;top:-4.138%;margin:0}
.experience-device-crop:after{content:"";position:absolute;z-index:1;left:84.6%;top:10.6%;width:1.8%;height:20.2%;border-radius:10px;background:#fff5d9;box-shadow:0 0 8px 3px #ffb553,0 0 24px 7px #ffa7358c;opacity:0;pointer-events:none}

/* Every cue ends. Returning to a chapter restarts only its own cue. */
.experience.is-in-view .experience-device-panel[aria-hidden="false"][data-experience-panel="0"] .experience-device-crop:after{animation:experience-click-light 1.35s ease-out both}
.experience.is-in-view .experience-device-panel[aria-hidden="false"][data-experience-panel="1"] .experience-device-crop:after{animation:experience-hold-light 2.8s ease-in-out both}
.experience-device-panel[aria-hidden="true"] .experience-device-crop:after,
.experience-device-panel[data-experience-panel="2"] .experience-device-crop:after{animation:none;opacity:0}
@keyframes experience-click-light{0%,12%,100%{opacity:0}24%{opacity:1}42%{opacity:.4}78%{opacity:0}}
@keyframes experience-hold-light{0%,100%{opacity:0}18%{opacity:.5}35%,69%{opacity:.95}85%{opacity:.45}}

/* The compact desktop scene stays comfortably inside the sticky stage. */
@media(min-width:760px) and (max-height:850px){
 .experience.is-pinned .experience-eyebrow{margin-bottom:14px}
 .experience.is-pinned .experience-chapters{min-height:176px}
 .experience.is-pinned .experience-device-panel{margin-top:10px;gap:22px}
 .experience.is-pinned .experience-device-crop{height:clamp(225px,37svh,302px)}
 .experience.is-pinned .experience-device-panel figcaption{font-size:13px;line-height:1.55}
 .experience.is-pinned .experience-device-panel figcaption svg{width:24px;height:24px;margin-bottom:13px}
}
@media(min-width:760px) and (max-width:1000px){
 .experience-device-panel{gap:18px}
 .experience-device-panel figcaption{font-size:12px}
 .experience-device-crop{height:clamp(230px,34svh,300px)}
}

/* On phones the cropped hardware has real presence beside the app preview. */
@media(max-width:759px){
 .experience.is-pinned .experience-input-panels{align-self:center;margin-bottom:38px}
 .experience.is-pinned .experience-device-panel{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;margin:0}
 .experience.is-pinned .experience-device-crop{order:0;align-self:center;width:100%;height:auto;max-width:122px;aspect-ratio:610/1160}
 .experience.is-pinned .experience-device-panel figcaption{order:1;display:block;max-width:125px;padding:0;font-size:10px;line-height:1.5;color:#c0bcb3}
 .experience.is-pinned .experience-device-panel figcaption svg{display:block;width:19px;height:19px;margin:0 0 8px}
 .experience.is-pinned .experience-nav{align-self:end}
 .experience.is-manual .experience-device-panel{width:100%;max-width:390px;gap:28px}
 .experience.is-manual .experience-device-crop{height:300px}
 .experience.is-manual .experience-device-panel figcaption{font-size:13px}
}
@media(max-width:359px){
 .experience.is-manual .experience-device-panel{gap:18px}
 .experience.is-manual .experience-device-crop{height:250px}
 .experience.is-manual .experience-device-panel figcaption{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .experience.is-in-view .experience-device-panel[aria-hidden][data-experience-panel] .experience-device-crop:after{animation:none;opacity:0}
}

/* Phones: keep the pinned scroll story, with a slightly denser app preview so no screen clips. */
@media(max-width:759px){
 .experience.is-pinned .xp-composer{margin-top:4.5cqi}
 .experience.is-pinned .xp-section-label{margin:5cqi 0 2.4cqi}
 .experience.is-pinned .xp-home-list{gap:1.8cqi}
 .experience.is-pinned .xp-home-row{min-height:15.5cqi;padding:2.6cqi 3cqi}
 .experience.is-pinned .xp-action-row{min-height:14cqi;padding:2cqi 0}
 .experience.is-pinned .xp-rules-note{margin:2.6cqi 0}
 .experience.is-pinned .xp-demo-status{margin-top:1.4cqi}
 /* The hardware view follows the viewport height, like the phone preview beside it. */
 .experience.is-pinned .experience-device-crop{max-width:min(122px,calc((100svh - var(--site-header-height) - 385px)*.5259))}
}
@media(max-width:759px) and (max-height:700px){
 .experience.is-pinned .xp-action-row{min-height:12.5cqi;padding:1.6cqi 0}
 .experience.is-pinned .xp-home-row{min-height:14cqi;padding:2cqi 3cqi}
 .experience.is-pinned .xp-transcript-card{padding:3cqi}
 .experience.is-pinned .xp-transcript-card blockquote{font-size:3.9cqi}
 .experience.is-pinned .xp-ready-summary{margin:2cqi 0}
}