/* Player uses Community’s shared story typography, grid and section rhythm.
   Only media compositions are specific to this case study. */
.desktop-break{display:block}
.player-cover{margin-inline:auto;border-radius:18px;overflow:hidden;background:#fff6ed}
.player-cover img{border-radius:18px}
.story-challenge .chapter-copy{padding-bottom:0}
.transformation{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.transformation article{min-width:0;container-type:inline-size}
.transformation h3{font-size:clamp(24px,2.5vw,36px);line-height:1.15;letter-spacing:-.04em;margin:0 16px 24px}
.transformation figure{margin:0;height:560px;padding:24px;display:flex;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;background:#fff}
.transformation .media img{width:100%;height:100%;object-fit:contain;border-radius:0}
.transformation .after-player>img{height:min(480px,72cqw);max-width:100%;width:auto;object-fit:contain;clip-path:inset(1.2% 3% round 15% / 7%)}
.phone-mockup{position:relative;width:min(100%,320px);aspect-ratio:1948/3940;margin:auto}
.phone-mockup::before{content:"";position:absolute;inset:1.8% 5%;background:#000;border-radius:13%/6%}
.phone-mockup .phone-screen{position:absolute;left:5.35%;top:2%;width:89.3%;height:96%;object-fit:fill;background:#000;border-radius:12%/6%;display:block}
.phone-mockup .phone-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.demo-panel{background:#e9e0fb;border-radius:18px;padding:48px;overflow:hidden}
.spoiler-chapter .demo-panel{background:#fff6ed}
.inline-results{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:40px 8.5% 0}
.inline-results h3{font-size:21px;margin:0;line-height:1.3}
.inline-results .result-number{margin-bottom:16px}
.beyond-visual{border-radius:18px;overflow:hidden;background:#e9e0fb;padding:32px}
.beyond-visual img{display:block;width:min(100%,880px);margin:auto;border-radius:0}
.lock-composition{display:block}
.lock-result{grid-template-columns:1fr}
.context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:48px 32px;background:#e9e0fb;border-radius:18px;align-items:start}
.context-grid figure{margin:0;min-width:0;text-align:center}
.context-grid img{width:100%;height:560px;object-fit:contain;display:block}
.context-grid figcaption{font-size:15px;line-height:1.5;margin:24px 0 0;color:#555d56}
.live-demo{background:#000;border-radius:18px;padding:32px;overflow:hidden}
.live-demo video{display:block;width:100%;aspect-ratio:1280/592;object-fit:contain;border-radius:18px;background:#000}
.player-results .chapter-copy{padding-bottom:40px}
.player-metrics{row-gap:48px}
.player-immersive .next{background:#efe7fa}
@media(max-width:1000px){.context-grid img{height:400px}.transformation figure{height:480px}}
@media(max-width:600px){.desktop-break{display:inline}.transformation{grid-template-columns:1fr;gap:40px}.transformation h3{margin-inline:0}.transformation figure{height:360px;padding:16px}.demo-panel{padding:32px}.phone-mockup{width:min(100%,280px)}.inline-results{padding:28px 16px 0;gap:24px}.inline-results h3{font-size:18px}.inline-results .result-number{font-size:40px}.context-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:32px 24px;gap:24px}.context-grid figure{flex:0 0 85%;scroll-snap-align:center}.context-grid img{height:480px}.beyond-visual,.live-demo{padding:16px}.player-metrics{row-gap:40px}}

/* Restore the preceding Player composition. */
.player-immersive h1{line-height:1}
.product-chapter{margin-top:96px}
.product-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:48px}
.product-heading h2,.feature-copy h2{font-size:clamp(32px,3.5vw,52px);line-height:1.08;font-weight:800;letter-spacing:-.045em;margin:0;text-wrap:balance}
.product-heading p,.feature-copy p{font-size:20px;line-height:1.5;margin:0;max-width:52ch}
.demonstration-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.feature-copy h2{margin-bottom:32px}
.feature-evidence{padding:48px}
.feature-evidence strong{font-family:var(--font-display);font-size:clamp(48px,6vw,88px);font-weight:800;line-height:1;letter-spacing:-.05em;display:block}
.feature-evidence p{font-size:20px;line-height:1.5;margin:16px 0 48px;max-width:25ch}
.feature-evidence p:last-child{margin-bottom:0}
.lock-composition{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:center}
.player-results{margin-top:96px;border-top:1px solid #d6d8d2;padding-top:48px}
.player-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:32px 0 48px}
.player-metrics strong{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4vw,64px);line-height:1;letter-spacing:-.05em}
.player-metrics p{font-size:18px;line-height:1.5;margin:16px 0 0;max-width:24ch}
.player-immersive .next{margin-top:96px;background:#e9e1fa}
.transformation figure{height:640px;padding:32px}
.transformation h3{font-size:24px;font-weight:600;margin:0 0 24px}
.transformation .media img{width:auto;max-width:100%;height:576px}
.transformation .after-player>img{height:min(576px,72cqw)}
.demo-panel,.context-grid,.beyond-visual{border-radius:24px;background:#e9e1fa}
@media(max-width:1000px){.product-heading,.demonstration-layout{gap:32px}.player-metrics{grid-template-columns:1fr 1fr}.transformation figure{height:520px;padding:24px}.transformation .media img{height:472px}}
@media(max-width:767px){.desktop-break{display:inline}.product-chapter,.player-results{margin-top:64px}.product-heading,.demonstration-layout,.lock-composition{display:block}.product-heading{margin-bottom:32px}.product-heading h2{font-size:32px;margin-bottom:24px}.product-heading p,.feature-copy p{font-size:18px}.feature-copy{margin-bottom:32px}.feature-evidence{padding:24px 0}.transformation{display:block}.transformation article+article{margin-top:32px}.transformation figure{height:480px;padding:24px}.transformation .media img{height:432px}.player-metrics strong{font-size:36px}.player-metrics p{font-size:16px}.player-immersive .next{margin-top:64px}}

/* Alternating feature stories; comparisons conclude the product narrative. */
.intro-demo{display:flex;justify-content:center;background:#fff;border-radius:24px;padding:32px;overflow:hidden}
.intro-demo img{display:block;width:min(100%,400px);height:auto;clip-path:inset(1.2% 3% round 15% / 7%)}
.reverse-demo .feature-copy{order:2}
.reverse-demo .demo-panel{order:1}
.compact-metrics{display:flex;flex-wrap:wrap;gap:40px;margin-top:32px}
.compact-metrics article{flex:1;min-width:120px}
.compact-metrics strong{display:block;font-family:var(--font-display);font-size:clamp(36px,4vw,56px);font-weight:800;letter-spacing:-.05em;line-height:1}
.compact-metrics span{display:block;font-size:16px;line-height:1.5;margin-top:12px;max-width:25ch}
.lock-chapter .beyond-visual{padding:16px;width:100%;margin:0}
.landscape-comparison{padding:32px;background:#fff6ed;border-radius:24px}
.landscape-labels,.landscape-row{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.landscape-labels h3{font-size:24px;margin:0 0 24px;letter-spacing:-.025em}
.landscape-row figure{margin:0;min-width:0}
.landscape-row img{display:block;width:100%;aspect-ratio:3376/1592;object-fit:contain;border-radius:16px;background:#000}
.landscape-row figcaption{font-size:15px;line-height:1.5;margin:16px 0 0;color:#555d56}
.landscape-row+.landscape-row{margin-top:32px}
@media(max-width:767px){.reverse-demo .feature-copy{order:0}.compact-metrics{gap:24px;margin-top:24px}.compact-metrics strong{font-size:36px}.landscape-comparison{padding:16px}.landscape-labels,.landscape-row{gap:16px}.landscape-labels h3{font-size:20px}.landscape-row figcaption{font-size:13px}.intro-demo{padding:16px}.reverse-demo .feature-copy{margin-bottom:32px}}
.landscape-row img{height:auto}