/* Genuine Maker 1.0 screenshot presentation. The image assets are the original
   App Store PNGs; framing and layout never alter their pixels. */

.app-device{margin:0;overflow:hidden;border:8px solid #3B2A22;border-radius:34px;background:#F8F8F1;box-shadow:0 24px 50px rgba(59,42,34,.20)}
.app-device img{display:block;width:100%;height:auto;background:#F8F8F1}

.app-shot-hero{min-height:570px;isolation:isolate}
.app-shot-hero:before{content:"";position:absolute;inset:8% 2% 3% 10%;border-radius:48% 52% 46% 54%;background:linear-gradient(145deg,rgba(221,233,223,.96),rgba(244,225,212,.88));transform:rotate(-7deg);z-index:-1}
.app-shot-hero .preview-label{right:4%;top:2%;z-index:5;background:rgba(255,253,248,.94)}
.app-device-primary{position:absolute;top:18px;right:8%;width:min(55%,300px);transform:rotate(2.2deg);z-index:2}
.app-device-secondary{position:absolute;left:7%;bottom:-42px;width:min(43%,232px);transform:rotate(-7deg);z-index:1;filter:saturate(.96)}

.screenshot-section{overflow:hidden;background:linear-gradient(180deg,#EEF4ED 0%,#FFF8EC 100%)}
.screenshot-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;align-items:start}
.screenshot-card{margin:0;min-width:0}
.screenshot-card:nth-child(even){margin-top:42px}
.screenshot-card .app-device{border-width:6px;border-radius:27px;box-shadow:0 17px 34px rgba(59,42,34,.15);transition:transform .22s ease,box-shadow .22s ease}
.screenshot-card:hover .app-device{transform:translateY(-5px);box-shadow:0 23px 42px rgba(59,42,34,.20)}
.screenshot-card figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:1px;margin-top:16px;color:var(--navy)}
.screenshot-card figcaption span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--gold);color:#2C1D17;font-size:.69rem;font-weight:950}
.screenshot-card figcaption strong{font-size:.94rem;line-height:1.15}
.screenshot-card figcaption small{color:var(--muted);font-size:.72rem;line-height:1.35}

.store-coming{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;max-width:620px;scroll-margin-top:100px}
.store-card{display:flex;align-items:center;gap:11px;min-height:74px;padding:12px 14px;border:1px solid #DDD2C6;border-radius:14px;background:#fff;box-shadow:0 7px 18px rgba(59,42,34,.06)}
.store-device{display:grid;place-items:center;width:38px;height:44px;border:2px solid #3B2A22;border-radius:9px;color:#3B2A22;font-size:1.25rem;line-height:1}.store-device-play{border-radius:12px}
.store-card>div{display:grid;line-height:1.15}.store-card small{text-transform:uppercase;letter-spacing:.08em;color:#6F625A;font-size:.54rem;font-weight:900}.store-card strong{color:#3B2A22;font-size:.86rem;margin:2px 0}.store-card em{color:#6F625A;font-size:.58rem;font-style:normal}
.store-note{max-width:620px!important;margin-top:9px!important;color:#6F625A!important;font-size:.72rem!important}

.availability-shots{display:flex;align-items:center;justify-content:center;min-height:520px;padding:14px 0}
.availability-shots .app-device{width:min(47%,245px);border-width:6px;border-radius:28px}
.availability-shots .app-device:first-child{transform:rotate(-5deg) translateX(12px)}
.availability-shots .app-device:last-child{transform:rotate(5deg) translateX(-12px);margin-top:42px}

@media (max-width:1050px){
  .app-shot-hero{min-height:600px;max-width:650px}
  .screenshot-gallery{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px;margin:0 auto}
  .screenshot-card:nth-child(even){margin-top:0}.screenshot-card:nth-child(2),.screenshot-card:nth-child(5){margin-top:36px}
}

@media (max-width:760px){
  .app-shot-hero{min-height:500px;margin-top:10px}
  .app-device-primary{right:9%;width:56%;max-width:250px}
  .app-device-secondary{left:7%;bottom:-28px;width:43%;max-width:190px}
  .screenshot-gallery{display:flex;gap:18px;overflow-x:auto;margin:0 -20px;padding:6px 20px 26px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain}
  .screenshot-card,.screenshot-card:nth-child(2),.screenshot-card:nth-child(5),.screenshot-card:nth-child(even){flex:0 0 min(76vw,285px);margin-top:0;scroll-snap-align:center}
  .screenshot-card .app-device{border-width:6px}
  .store-coming{grid-template-columns:1fr}
  .availability-shots{min-height:460px}
}

@media (max-width:480px){
  .app-shot-hero{min-height:440px}
  .app-device-primary{right:5%;width:61%}
  .app-device-secondary{left:2%;width:45%;bottom:-10px}
  .availability-shots{min-height:400px}
}