/* Desktop: the supplied approved composition, encoded losslessly without alteration.
   Its readable HTML counterpart supplies headings/list semantics and the mobile layout. */
.duo-experience-story{position:relative;max-width:1920px;margin:0 auto;padding:0;background:#fffcf9;overflow:hidden}
.duo-story-artwork{display:block;width:100%;height:auto;aspect-ratio:2/1}
.duo-story-content{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.duo-story-device{display:none}
@media(max-width:700px){
 .duo-experience-story{padding:44px 20px 42px;background:radial-gradient(ellipse at 5% 44%,#ffebdb66,transparent 48%),#fffcf9}
 .duo-story-artwork{display:none}
 .duo-story-content{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
 .duo-story-heading{text-align:center;margin:0 auto 25px;max-width:440px}
 .duo-story-eyebrow{font-size:10px;letter-spacing:.18em;line-height:1.5;text-transform:uppercase;color:#f16a3e;margin:0 0 18px}
 .duo-story-eyebrow span{padding-right:7px}
 .duo-story-heading h2{font:400 clamp(34px,8.8vw,49px)/1.02 var(--serif);letter-spacing:-.7px;color:#10182a;margin:0 0 15px}
 .duo-story-heading h2 em{font-weight:400}
 .duo-story-heading>p:last-child{font-size:13px;line-height:1.6;color:#84817f;margin:0}
 .duo-story-steps{list-style:none;padding:0;margin:0 auto;max-width:440px;display:grid;gap:27px}
 .duo-story-step{min-width:0;position:relative}
 .duo-story-device{display:block;width:100%;aspect-ratio:550/440;background-image:url('/assets/iphone-duo/experience-steps-v2.webp');background-size:322.545455% 201.590909%;background-repeat:no-repeat;background-position-y:54.138702%;margin:0 0 5px}
 /* These are viewports into the untouched image, not newly stretched device renders.
    Each selects a 550 × 440 region from the original 1774 × 887 composition. */
 .duo-story-closed{background-position-x:2.45098%;clip-path:inset(0 25% 0 0)}
 .duo-story-half{background-position-x:47.875817%;clip-path:inset(0 9% 0 8%)}
 .duo-story-open{background-position-x:97.875817%;clip-path:inset(0 0 0 9%)}
 .duo-story-copy{display:flex;align-items:flex-start;gap:14px;padding:0 5px}
 .duo-story-number{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #f18c65;border-radius:50%;color:#f16a3e;font:400 19px/1 var(--serif);margin-top:1px}
 .duo-story-copy h3{font:400 28px/1.12 var(--serif);letter-spacing:-.25px;color:#10182a;margin:4px 0 10px}
 .duo-story-copy p{font-size:13px;line-height:1.65;color:#84817f;margin:0}
}
@media(forced-colors:active){
 .duo-story-artwork{display:none}
 .duo-story-content{position:static;width:auto;height:auto;margin:20px;overflow:visible;clip:auto;clip-path:none;white-space:normal}
}
@media print{
 .duo-story-artwork{display:none}
 .duo-story-content{position:static;width:auto;height:auto;margin:20px;overflow:visible;clip:auto;clip-path:none;white-space:normal}
 .duo-story-device{display:none}
}