/* Preserve source-screen proportions and provide readable, full-size originals. */
html:not(.game-case-study) .content .perkshot-gallery {display:flex;align-items:flex-start;justify-content:center;gap:24px;overflow-x:auto;padding:0;}
html:not(.game-case-study) .content .perkshot {flex:1 1 0;min-width:0;text-align:center;}
html:not(.game-case-study) .content .perkshot a {display:block;}
html:not(.game-case-study) .content .perkshot img {display:block;width:100%;height:auto;max-height:none;object-fit:contain;}
html:not(.game-case-study) .content .perkshot span {display:block;margin:8px 0 0;font-size:13px;line-height:1.5;font-style:italic;text-align:center;color:var(--text-secondary);}
@media(max-width:600px){html:not(.game-case-study) .content .perkshot-gallery{justify-content:flex-start;gap:16px;scroll-snap-type:x mandatory;padding-bottom:12px;}html:not(.game-case-study) .content .perkshot{flex:0 0 80%;scroll-snap-align:start;}html:not(.game-case-study) .content .perkshot a{max-width:320px;}}
html:not(.game-case-study) .content .perk-feedback-scroll {overflow-x:auto;padding:20px;}
.perk-feedback-grid {display:grid;grid-template-columns:291fr 324fr 324fr;gap:32px;min-width:580px;align-items:start;}
.perk-feedback-column h4 {text-align:center;margin:0 0 16px;font:600 17px/1.4 var(--font-sans);color:var(--text);}
.perk-feedback-crop {position:relative;overflow:hidden;width:100%;}
html:not(.game-case-study) .content .perk-feedback-crop img {position:absolute;max-width:none;max-height:none;height:auto;display:block;}
.perk-screen-excerpt {position:relative;overflow:hidden;width:100%;background:#fff;}
html:not(.game-case-study) .content .perk-screen-excerpt > .perk-excerpt-content {position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;max-height:none;}
.perk-excerpt-nav {position:absolute;bottom:0;left:0;right:0;overflow:hidden;background:#fff;}
html:not(.game-case-study) .content .perk-excerpt-nav > .perk-excerpt-footer {position:absolute;bottom:0;left:0;width:100%;height:auto;max-width:none;max-height:none;}
.perk-excerpt-body {position:absolute;top:0;left:0;right:0;overflow:hidden;}
html:not(.game-case-study) .content .perk-excerpt-body img {display:block;width:100%;height:auto;max-width:none;max-height:none;}

/* Match the shared phone-row presentation used by the other case studies. */
html:not(.game-case-study) .content .perk-screen-figure {background:transparent;}
html:not(.game-case-study) .content .perkshot a {width:100%;max-width:220px;margin:0 auto;}
html:not(.game-case-study) .content .perk-screen-excerpt {border:1px solid var(--border);border-radius:16px;box-sizing:border-box;}
@media(max-width:600px){html:not(.game-case-study) .content .perkshot a{max-width:320px;}html:not(.game-case-study) .content .perk-screen-excerpt{border-radius:10px;}}

/* Keep actual screen edges close instead of distributing empty column space. */
html:not(.game-case-study) .content .perkshot {flex:0 1 220px;}
html:not(.game-case-study) .content .perk-feedback-scroll {padding:0;}
html:not(.game-case-study) .content .perk-feedback-grid {grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:24px;min-width:0;}
html:not(.game-case-study) .content .perk-feedback-crop {border:1px solid var(--border);border-radius:16px;box-sizing:border-box;}
html:not(.game-case-study) .content .perk-feedback-column h4 {margin:8px 0 0;font:italic 13px/1.5 var(--font-sans);color:var(--text-secondary);}
html:not(.game-case-study) .content .perk-image-figure {background:transparent;}
html:not(.game-case-study) .content .perk-image-figure > .figure-media {padding:0;}
html:not(.game-case-study) .content .perk-image-figure > .figure-media > img {border:1px solid var(--border);border-radius:16px;box-sizing:border-box;}
@media(max-width:600px){
 html:not(.game-case-study) .content .perkshot {flex:0 0 80%;}
 html:not(.game-case-study) .content .perk-feedback-grid {display:flex;justify-content:flex-start;gap:16px;scroll-snap-type:x mandatory;}
 html:not(.game-case-study) .content .perk-feedback-column {flex:0 0 80%;min-width:0;scroll-snap-align:start;}
 html:not(.game-case-study) .content .perk-feedback-crop {max-width:320px;margin:0 auto;border-radius:10px;}
}

/* Composite offsets are relative to crop height; keep corners clear of UI. */
html:not(.game-case-study) .content .perk-feedback-crop {border-radius:6px;}

html:not(.game-case-study) .content .perk-feedback-crop {box-shadow:none;}

/* One phone silhouette across browsing, discovery, and redemption. */
html:not(.game-case-study) .content .perk-feedback-phone {aspect-ratio:10/21;position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:16px;}
html:not(.game-case-study) .content .perk-feedback-phone .perk-feedback-crop {border:0;border-radius:0;}
@media(max-width:600px){html:not(.game-case-study) .content .perk-feedback-phone{max-width:320px;margin:0 auto;border-radius:10px;}}

/* Showcase the app without placing title bands across the interfaces. */
html:not(.game-case-study) .content .perk-hero-showcase {display:flex;flex-direction:column;padding:0;min-height:0;border:0;border-radius:0;overflow:visible;gap:24px;}
html:not(.game-case-study) .content .perk-hero-showcase .hero-titles {order:0;width:100%;max-width:100%;}
html:not(.game-case-study) .content .perk-hero-showcase .hero-img {order:1;position:static;display:block;width:100%;height:auto;object-fit:contain;border-radius:12px;}
html:not(.game-case-study) .content .perk-hero-showcase .hero-subtitle {max-width:100%;}
html:not(.game-case-study) .content .perk-hero-showcase .hero-subtitle span {white-space:normal;text-wrap:wrap;}

/* Compact showcase with the portfolio's title bands over the artwork. */
html:not(.game-case-study) .content .perk-hero-showcase {display:block;position:relative;aspect-ratio:1200/520;min-height:0;overflow:hidden;border-radius:12px;}
html:not(.game-case-study) .content .perk-hero-showcase .hero-img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;border-radius:0;}
html:not(.game-case-study) .content .perk-hero-showcase .hero-titles {position:absolute;top:20px;left:0;width:94%;max-width:94%;z-index:2;}
@media(max-width:600px){html:not(.game-case-study) .content .perk-hero-showcase .hero-titles{top:12px;}}

/* Match the wide case-study banners; artwork is composed at this exact ratio. */
html:not(.game-case-study) .content .perk-hero-showcase {aspect-ratio:1200/460;border:1px solid var(--border);border-radius:8px;}
html:not(.game-case-study) .content .perk-hero-showcase .hero-img {object-fit:contain;object-position:center;}