/* Physical device illustration is product media; page surfaces retain the programme's flat fields. */
.opening-product{animation:none;perspective:1200px;max-width:350px}
.phone-stage{position:relative;width:100%;isolation:isolate}
.memory-traces{position:absolute;inset:-8% -32%;width:164%;height:116%;z-index:-1;pointer-events:none}
.phone-pose{transform:rotateY(-9deg) rotateX(3deg) rotateZ(2deg);transform-style:preserve-3d}
.iphone{position:relative;width:100%;aspect-ratio:360/751;transform-style:preserve-3d}
.phone-hardware{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.phone-screen{position:absolute;inset:1.6% 4.1%;overflow:hidden;border-radius:13% / 6%;background:#080808;isolation:isolate}
.opening-product .phone-app{width:100%;height:100%;max-width:none;object-fit:fill;margin:0;mix-blend-mode:normal}
.opening-product figcaption{max-width:none;margin-top:24px}
.opening-product figcaption p{font-size:16px;color:var(--secondary);line-height:1.5;margin-top:10px}
@media(min-width:1001px){.opening-spread{align-items:center;min-height:650px}.opening-product{max-width:310px;width:min(100%,310px);margin-top:-105px;justify-self:center}.relationship-example{padding-bottom:75px}.opening-content{padding-bottom:45px}.scene-image{height:calc(100% - 180px)}}
@media(min-width:601px) and (max-width:1000px){.opening-product{max-width:none;grid-template-columns:minmax(0,300px) 1fr;justify-self:center;width:min(100%,690px);gap:55px}.opening-product figcaption{margin:0}.phone-pose{transform:rotateY(-7deg) rotateZ(1deg)}}
@media(max-width:600px){.opening-product{width:min(77%,290px);max-width:none;margin:20px auto 0;justify-self:center}.phone-pose{transform:none}.opening-product figcaption{margin-top:20px}.memory-traces{inset:-5% -14%;width:128%;height:110%}.opening-content{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.phone-pose{transform:none!important}.memory-traces{display:none}}

/* One composed text group beside a gently floating device. */
.relationship-example{display:flex;flex-direction:column;align-items:flex-start;padding:0;min-width:0}
.relationship-example>p{max-width:none;margin-top:20px}
.relationship-example .action{margin-top:24px;align-self:flex-start}
.opening-product figcaption{font-size:16px;max-width:30ch;margin-top:24px}
@media(min-width:1001px){.opening-spread{min-height:610px}.relationship-example{align-self:start;margin-top:80px;padding:0}.opening-product{margin-top:-80px}}
@media(min-width:601px) and (max-width:1000px){.relationship-example{padding:12px 0 24px}.opening-product figcaption{margin:0;max-width:24ch}}
@media(max-width:600px){.relationship-example{padding-left:38%;min-height:270px;justify-content:center}.relationship-example .action{display:inline-flex;font-size:14px;padding:12px;min-height:46px;max-width:100%;margin-top:24px}.relationship-example>p{margin-top:18px}.opening-product figcaption{margin-top:22px;max-width:28ch}}
@media(max-width:350px){.relationship-example{padding-left:34%}.relationship-example .action{font-size:13px}}

/* Align the entire message and action to one deliberate right edge. */
.relationship-example{text-align:right;align-items:flex-end}
.relationship-example .action{align-self:flex-end}
.phone-screen .phone-app{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.phone-screen .phone-app:first-child{opacity:1}
@media(prefers-reduced-motion:reduce){.phone-screen .phone-app{opacity:0!important}.phone-screen .phone-app:first-child{opacity:1!important}}
/* Keep decorative relationship traces beneath the reading column. */
.relationship-example{position:relative;z-index:1}