/* iOS and Mac share the existing site's blue, ink and pale network surfaces. */
.ios-pair-section { display:block; padding-block:90px; }
.ios-pair-header { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.ios-pair-header .phone-copy { max-width:650px; }
.ios-pair-header .phone-copy h2 { margin-top:0; }
.ios-pair-actions { display:flex; flex-direction:column; gap:16px; flex-shrink:0; padding-bottom:30px; }
.ios-pair-actions .text-link { font-size:13px; text-align:center; }
.ios-pair-stage { display:flex; align-items:flex-end; gap:26px; margin-top:50px; }
.ios-pair-stage figure { margin:0; min-width:0; }
.ios-pair-phone { flex:0 0 222px; }
.ios-screen { border:1px solid #d3e3f5; border-radius:29px; box-shadow:0 12px 32px #203e6512; cursor:zoom-in; }
.ios-device-role { display:block; font-size:14px; font-weight:600; margin-bottom:16px; }
.ios-pair-bridge { align-self:center; width:66px; flex-shrink:0; color:var(--muted); text-align:center; font-size:11px; }
.ios-pair-bridge svg { width:100%; height:22px; margin-bottom:8px; color:var(--blue); }
.ios-pair-mac { flex:1; }
.ios-mac-window { border:1px solid #cad5e2; border-radius:12px; overflow:hidden; background:white; box-shadow:0 12px 32px #203e6512; }
.ios-mac-window img { width:100%; cursor:zoom-in; }
.ios-window-bar { height:29px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#edf1f7; border-bottom:1px solid #d8e0e9; font-size:10px; color:#68788b; padding-inline:11px; }
.ios-window-bar>span:first-child { display:flex; gap:4px; }
.ios-window-bar i { width:7px; height:7px; border-radius:50%; background:#d2d9e3; }
.ios-window-bar>span:last-child { width:29px; }
.ios-pair-stage figcaption { font-size:11px; line-height:1.6; color:var(--muted); margin-top:13px; }
.ios-gallery { padding-block:90px; border-top:1px solid var(--line); }
.ios-gallery-heading { max-width:680px; margin-bottom:42px; }
.ios-gallery-heading h2 { margin-bottom:22px; }
.ios-gallery-download { margin-top:24px; }
.ios-gallery-heading>p,.ios-profile-note p { font-size:15px; color:var(--muted); line-height:1.85; }
.ios-gallery-note { font-size:12px; color:var(--muted); line-height:1.8; margin-bottom:32px; }
.ios-screens { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; }
.ios-screens figure { margin:0; min-width:0; }
.ios-screens img { width:min(100%,250px); margin-inline:auto; }
.ios-screens figcaption { margin:25px auto 0; max-width:280px; }
.ios-screens h3 { font-size:18px; font-weight:600; margin-bottom:10px; }
.ios-screens figcaption p { font-size:14px; line-height:1.85; color:var(--muted); }
.ios-profile-note { display:grid; grid-template-columns:240px 1fr; gap:36px; margin-top:50px; padding-top:30px; border-top:1px solid var(--line); }
.ios-profile-note h3 { font-size:18px; line-height:1.6; }
.ios-guide { margin-top:42px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ios-guide summary { padding:22px 0; cursor:pointer; font-size:16px; font-weight:600; }
.ios-guide-panel { display:grid; grid-template-columns:220px 1fr; gap:60px; align-items:center; padding:15px 0 34px; }
.ios-guide-panel img { width:100%; }
.ios-guide-panel h3 { font-size:26px; font-weight:600; line-height:1.4; margin-bottom:22px; }
.ios-guide-panel p { font-size:15px; line-height:1.9; color:var(--muted); margin-bottom:18px; }
.ios-guide-panel p:last-of-type { color:var(--ink); }
@media(max-width:1000px) {
  .ios-pair-header { align-items:flex-start; flex-direction:column; gap:0; }
  .ios-pair-actions { flex-direction:row; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:0; }
  .ios-pair-phone { flex-basis:190px; }
  .ios-pair-bridge { width:48px; }
  .ios-pair-stage { gap:18px; }
  .ios-screens { gap:26px; }
}
@media(max-width:700px) {
  .ios-pair-section,.ios-gallery { padding-block:56px; }
  .ios-pair-stage { flex-direction:column; align-items:center; gap:35px; margin-top:36px; }
  .ios-pair-phone { flex:initial; width:225px; }
  .ios-pair-bridge { display:none; }
  .ios-pair-mac { width:100%; }
  .ios-screens { grid-template-columns:1fr; gap:42px; }
  .ios-screens img { width:240px; max-width:100%; }
  .ios-screens figcaption { max-width:320px; }
  .ios-profile-note { grid-template-columns:1fr; gap:12px; }
  .ios-guide-panel { grid-template-columns:1fr; gap:28px; }
  .ios-guide-panel>img { width:220px; margin-inline:auto; }
  .ios-guide-panel h3 { font-size:24px; }
}