/* v2.3 (Oct 19): real app motion clips (assets/motion/*-polished) inside the
   same CSS device frames as the screenshots. Videos start only when they
   scroll into view (motion.js); with reduced motion they show a still. */
.device-crop>video{display:block;max-width:none;height:auto;background:#f5f7fa;object-fit:cover}
.device-crop.tablet>video{margin:2.6%;width:94.8%;border-radius:3.1% / 4.6%}
.device-crop.phone>video{margin:3.6%;width:92.8%;border-radius:14.5% / 6.7%}
.clip-ipad{aspect-ratio:1600/1080}
.clip-frame{aspect-ratio:1600/1112}
.clip-phone{aspect-ratio:780/1696}
.clip-widget{aspect-ratio:640/1392}


/* Widgets card: the real Home Screen and Lock Screen, side by side. */
.widgets-panel .widget-preview{max-width:520px}
.widget-duo{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start;padding:16px 7% 12px}
.widget-duo>.device-crop{position:relative;width:100%}
.widget-duo>.widget-phone-home{transform:rotate(-3deg)}
.widget-duo>.widget-phone-lock{transform:rotate(3deg);margin-top:22px}
.widgets-panel .widget-screen-labels{padding:0 7%;gap:9%}
.widget-premium-note{margin:10px 24px 0;text-align:center;font-size:12px;line-height:1.5;color:#5b6a7c}

/* Meals and handwriting strips: a real iPad clip where the sticky note was. */
.note-strip>.strip-ipad{position:relative;flex:0 0 auto;width:min(46%,500px);margin:-8px 0;transform:rotate(2deg)}
.meal-strip{flex-direction:row-reverse}
.meal-strip>.strip-ipad{transform:rotate(-2deg)}
.meal-strip .note-strip-title>.icon{color:#b39a7c}

/* Photo frame card: full width while the Alexa card is hidden. */
.photo-card .photo-art{position:relative;display:flex;align-items:center;justify-content:center;padding:40px 38px;background:radial-gradient(ellipse at 50% 50%,#e0e9df 0,rgba(224,233,223,0) 68%)}
.photo-card .photo-ipad{position:relative;width:100%;max-width:560px;transform:rotate(-1.5deg)}
.lifestyle-grid:has(>.alexa-card[hidden])>.photo-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center}
.lifestyle-copy .photo-credit{margin-top:14px;font-size:11px;line-height:1.5;color:#7d847e}

@media(max-width:1000px){
  .widgets-panel .widget-preview{width:calc(100% - 24px)}
  .widget-duo{grid-template-columns:1.2fr 1fr;gap:5%;padding:12px 2% 8px;align-items:end}
  .widgets-panel .widget-screen-labels{grid-template-columns:1.2fr 1fr;padding:0 2%;gap:5%}
  .widget-duo>.widget-phone-lock{margin-top:0}
  .note-strip>.strip-ipad{width:48%;margin:0}
  .photo-card .photo-art{padding:30px 24px}
}
@media(max-width:700px){
  .meal-strip{flex-direction:column}
  .note-strip>.strip-ipad{width:100%;align-self:stretch;margin:0;transform:none}
  .lifestyle-grid:has(>.alexa-card[hidden])>.photo-card{grid-template-columns:1fr}
  .photo-card .photo-art{padding:26px 20px}
}

/* Smart Add (Oct 21): a real iPhone clip where the drawn flyer and review card were. */
.smart-art .smart-phone{position:absolute;width:276px;left:50%;margin-left:-138px;top:28px;transform:rotate(4deg)}
@media(max-width:1250px){.smart-art .smart-phone{width:262px;margin-left:-131px}}
@media(max-width:1000px){.smart-art{min-height:0;height:580px}.smart-art .smart-phone{width:240px;margin-left:-120px;top:26px}}
@media(max-width:700px){.smart-art{min-height:0;height:550px}.smart-art .smart-phone{width:236px;margin-left:-118px;top:18px;transform:rotate(3deg)}}