/* Real native screens, kept in proportion; no illustrative app UI. */
.app-capture-shot,.app-video-shot{min-width:0;margin:0;background:#101a2c;border:1px solid #34445f;border-radius:14px;overflow:hidden;color:#fff}
.app-screenshot-link{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:360px;padding:22px;background:#0c1322;text-decoration:none;overflow:hidden}
.app-screenshot-link img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px}
.app-image-hint{position:absolute;right:12px;bottom:12px;background:#142849;color:#e9f0ff;border:1px solid #5976a9;border-radius:20px;padding:7px 11px;font-size:.6875rem;line-height:1.4}
.app-capture-shot figcaption,.app-video-shot figcaption{padding:13px 17px;color:#b9c8de;font-size:.75rem;line-height:1.5}
.app-video-shot video{display:block;width:100%;height:430px;object-fit:contain;background:#080b16}
.app-video-shot figcaption strong,.app-video-shot figcaption span{display:block}
.app-video-shot figcaption strong{font-size:.9375rem;color:#f0f5ff;margin-bottom:6px}
.app-video-shot figcaption span+span{margin-top:6px}
.app-demo-steps{border-top:1px solid #34445f;padding:0 17px}
.app-demo-steps summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:.8125rem;color:#d4e1f7}
.app-demo-steps ol{padding:0 0 12px 20px;margin:0;color:#b9c8de;font-size:.8125rem}
.app-demo-steps li{margin-bottom:8px}
.native-hero .app-capture-shot .app-screenshot-link{height:480px}
.native-hero .app-video-shot video{height:480px}
.native-hero .app-video-shot .app-demo-steps{display:none}
.native-hero .app-video-shot figcaption span{font-size:.6875rem}
.native-hero>figure,.native-hero>.app-capture-shot,.native-hero>.app-video-shot{width:100%;max-width:500px;justify-self:center}
.native-feature-story .feature-image{height:420px;display:flex;align-items:center;justify-content:center;background:#0c1322}
.native-feature-story .feature-image>img{object-fit:contain;object-position:center;width:100%;height:100%;padding:18px}
.native-feature-story .feature-image>video{width:100%;height:100%;object-fit:contain;background:#080b16}
.native-feature-story .hero-screen-link{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:18px}
.native-feature-story .hero-screen-link img{display:block;object-fit:contain;width:100%;height:100%}
.demo-real-screenshot{margin-top:22px;max-width:410px}
.demo-real-screenshot .app-screenshot-link{height:230px}
.native-updates-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.native-updates-hero h1{font-size:clamp(2.8rem,4.8vw,4.5rem)}
.native-updates-hero .app-screenshot-link{height:430px}
.native-update-note{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:36px}
.native-update-note .native-section-media{margin:0}
.native-update-note .app-screenshot-link{height:290px}
.breathing-options article .app-video-shot{margin:0 0 22px}
.breathing-options article .app-video-shot video{height:330px}
.breathing-options article .app-demo-steps{display:none}
.breathing-options article .app-video-shot figcaption{font-size:.6875rem}
.breathing-options article .app-video-shot figcaption strong{font-size:.8125rem}
.viewer-steps{margin-top:28px}
.native-feature-story .feature-caption{min-height:150px}
.native-feature-story .feature-caption h2{color:#fff}
.native-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.native-card-grid .visual-card{display:flex;flex-direction:column}
.native-card-grid .visual-card>.app-capture-shot,.native-card-grid .visual-card>.app-video-shot{border:0;border-bottom:1px solid #34445f;border-radius:0}
.native-card-grid .visual-card .app-screenshot-link{height:330px}
.native-card-grid .visual-card .app-video-shot video{height:330px}
.native-card-grid .visual-card .app-capture-shot figcaption{min-height:64px}
.native-card-grid .visual-card .app-video-shot figcaption{min-height:64px}
.native-card-grid .visual-card .app-video-shot figcaption strong,.native-card-grid .visual-card .app-video-shot figcaption span:first-of-type{display:none}
.native-card-grid .visual-card .app-demo-steps{display:none}
.native-card-grid .visual-card .visual-card-copy{flex:1}
.native-card-grid .visual-card>img{display:none}
.native-card-grid .text-link{flex-wrap:wrap;line-height:1.4}
.native-card-grid .visual-card .app-capture-shot p{color:#b9c8de}
.native-plan-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;margin-top:42px;padding-top:36px;border-top:1px solid #ccd3db}
.native-plan-band h3{font-size:2rem;line-height:1.15;margin-bottom:16px}
.native-plan-band .app-screenshot-link{height:290px}
.native-plan-band .text-link{display:inline-flex;min-height:44px;align-items:center;margin-top:16px}
.native-plan-band figcaption{color:#b9c8de}
.native-update-media{margin-bottom:22px}
.native-update-media .app-screenshot-link,.native-update-media video{height:340px}
.native-update-media .app-demo-steps{display:none}
.feature-grid article>.app-capture-shot{margin:0 0 24px}
.feature-grid article .app-screenshot-link{height:280px}
.feature-grid article .app-capture-shot figcaption{min-height:62px}
.feature-grid article .app-image-hint{font-size:.625rem}
.native-section-media{margin-top:28px;max-width:620px}
.native-section-media .app-screenshot-link{height:320px}
.native-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.native-pair .app-screenshot-link,.native-pair video{height:390px}
.guide-opening figure.app-capture-shot{border-radius:12px}
.guide-opening .app-screenshot-link{height:320px}
.guide-opening .app-capture-shot img{height:100%;object-fit:contain;object-position:center}
.guide-links .app-capture-shot{max-width:580px;margin-top:28px}
.guide-links .app-screenshot-link{height:260px}
.guide-app-example{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:26px;border:1px solid #34445f;border-radius:12px;margin-block:24px;background:#10182a}
.guide-app-example .app-screenshot-link{height:260px}
.guide-app-example h3{font-size:1.6rem;margin-bottom:12px}
.guide-app-example p{margin:0 0 15px}
.guide-app-example .text-link{display:inline-flex;align-items:center;min-height:44px}
.native-connected{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:42px;padding-block:40px}
.native-connected h2{font-size:2.2rem;line-height:1.12;margin-bottom:18px}
.native-connected p+p{margin-top:16px}
.native-connected .app-screenshot-link{height:310px}
.app-screen-dialog{max-width:min(95vw,900px);max-height:95dvh;overflow:auto;padding:20px;background:#080b16;color:#fff;border:1px solid #5a76aa;border-radius:14px}
.app-screen-dialog::backdrop{background:#020713e8}
.app-screen-dialog>button{display:block;margin:0 0 12px auto;min-height:44px;padding:10px 16px;font:600 .875rem Arial,sans-serif;background:#1a5cff;color:#fff;border:0;border-radius:6px;cursor:pointer}
.app-screen-dialog h2{font-size:1.2rem;margin-bottom:18px}
.app-screen-dialog>img{display:block;width:auto;max-width:100%;max-height:75dvh;height:auto;margin:auto;object-fit:contain}
.guide-app-example .app-capture-shot p{color:#b9c8de}
@media(max-width:900px){.native-hero{grid-template-columns:1fr 1fr;gap:25px}.native-hero .app-screenshot-link,.native-hero .app-video-shot video{height:400px}.native-pair{gap:18px}.native-card-grid{gap:16px}.native-card-grid .visual-card .visual-card-copy{padding:20px}}
@media(max-width:760px){.native-hero,.native-updates-hero,.native-update-note{grid-template-columns:1fr}.native-hero>figure{max-width:480px}.native-card-grid{grid-template-columns:1fr}.native-card-grid .visual-card{display:grid;grid-template-columns:.9fr 1fr}.native-card-grid .visual-card .app-screenshot-link,.native-card-grid .visual-card .app-video-shot video{height:340px}.native-plan-band,.native-connected,.guide-app-example{grid-template-columns:1fr;gap:25px}.native-connected{padding-block:24px}.native-plan-band{gap:22px}.guide-opening .app-screenshot-link{height:310px}.guide-app-example{padding:20px}.guide-app-example .app-capture-shot{max-width:none}.native-feature-story .feature-image{height:360px}.breathing-options{grid-template-columns:1fr}.breathing-options article .app-video-shot video{height:390px}}
@media(max-width:500px){.native-card-grid .visual-card{display:flex}.native-card-grid .visual-card .app-screenshot-link,.native-card-grid .visual-card .app-video-shot video{height:350px}.native-pair{grid-template-columns:1fr}.native-pair video{height:400px}.native-feature-story .feature-image{height:360px}.native-feature-story .feature-caption{min-height:178px}.app-screenshot-link{height:340px}.app-video-shot video{height:390px}.native-hero .app-screenshot-link,.native-hero .app-video-shot video{height:430px}.native-plan-band h3{font-size:1.75rem}.app-screen-dialog{padding:14px}.native-update-media video{height:390px}}
/* Put the app before the longer introduction on phones. */
@media(max-width:760px){
  .hero.visual-hero,.hero.native-hero,.native-updates-hero,.guide-opening{display:flex;flex-direction:column;align-items:stretch;gap:22px}
  .hero-copy,.native-updates-hero>div,.guide-opening>div{display:contents}
  .hero-copy>.eyebrow,.native-updates-hero>div>.eyebrow,.guide-opening>div>.eyebrow{order:0;margin:0}
  .hero.hero h1.hero-title,.native-updates-hero h1,.guide-opening h1{order:1;font-size:clamp(2rem,9.6vw,2.8rem);line-height:1.08;margin:0;max-width:620px}
  .visual-hero>.native-feature-story,.native-hero>figure,.native-updates-hero>figure,.guide-opening>figure{order:2;width:100%;margin:0}
  .hero-copy>.hero-lead,.native-updates-hero>div>.hero-lead,.guide-opening>div>.intro{order:3;margin:0}
  .hero-copy>.hero-description,.native-updates-hero>div>.updates-intro,.guide-opening>div>p:not(.eyebrow):not(.intro){order:4;margin:0}
  .hero-copy>.actions,.native-updates-hero>div>.release-note,.guide-opening>div>.guide-quick-facts{order:5;margin:0}
  .hero-copy>.launch-status,.native-updates-hero>div>.article-nav{order:6;margin:0}
  .hero.native-hero,.hero.visual-hero{padding-top:30px}
}
@media print{.app-video-shot,.app-screen-dialog,.app-image-hint{display:none}.app-capture-shot{background:#fff;border-color:#888;break-inside:avoid}.app-screenshot-link{height:220px!important}.app-capture-shot figcaption{color:#111}.guide-app-example,.native-plan-band{display:block}.native-card-grid .visual-card{display:block}}