.hero-dual .hero-copy{text-align:center;justify-items:center;max-width:980px;margin:0 auto}.hero-dual .hero-copy .breadcrumb ol{justify-content:center}.hero-dual .hero-copy .lead{margin-inline:auto}.hero-dual .hero-copy .btn-row{justify-content:center}.hero-dual h1{font-size:clamp(2.375rem,1.1rem + 3.7vw,4.5rem)}.dual{border-bottom:1px solid var(--ink);grid-template-columns:minmax(0,1fr) minmax(240px,300px) minmax(0,1fr);align-items:start;column-gap:44px;margin-top:clamp(40px,5vw,64px);display:grid}.dual-pair{display:contents}.dual-side{justify-items:center;gap:12px;height:560px;display:grid;overflow:hidden}.dual-side.is-ios{grid-area:1/1;justify-items:end}.dual-side.is-android{grid-area:1/3;justify-items:start}.dual-side .phone{--pw:290px}.dual-side .hd-label{width:290px}.dual-spine{grid-area:1/2;align-content:start;align-self:stretch;gap:10px;padding-top:74px;display:grid;position:relative}.dual-spine:before{content:"";border-left:1.5px dashed var(--shared);position:absolute;top:30px;bottom:0;left:50%}.spine-core{border:1.5px solid var(--shared);background:var(--shared-wash);border-radius:var(--r-node);text-align:center;gap:8px;padding:14px;display:grid;position:relative}.spine-core .lane-h{color:var(--shared-ink);justify-content:center}.spine-core ul{gap:6px;list-style:none;display:grid}.spine-core li{border-radius:var(--r-tag);background:var(--surface);border:1px solid color-mix(in srgb, var(--shared) 50%, transparent);font-family:var(--mono);padding:7px 10px;font-size:12px;position:relative}.spine-core li:before,.spine-core li:after{content:"";border-top:1.5px dashed color-mix(in srgb, var(--shared) 70%, transparent);width:59px;position:absolute;top:50%}.spine-core li:before{right:calc(100% + 15px)}.spine-core li:after{left:calc(100% + 15px)}.spine-native{grid-template-columns:1fr 1fr;gap:6px;display:grid;position:relative}.spine-native span{border-radius:var(--r-tag);background:var(--surface);text-align:center;border:1.5px solid color-mix(in srgb, var(--ios) 55%, transparent);padding:8px;font-size:12px;line-height:1.3}.spine-native span+span{border-color:color-mix(in srgb, var(--android) 55%, transparent)}.spine-api{border-radius:var(--r-node);background:var(--ink);color:var(--surface);text-align:center;padding:11px 14px;font-size:.9375rem;font-weight:600;position:relative}.spine-api small{font-family:var(--mono);color:#b8bfba;font-size:11px;font-weight:400;display:block}.dual-hint{display:none}@media (width<=1080px){.dual{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);column-gap:28px}.dual-side .phone,.dual-side .hd-label{--pw:240px;width:240px}.spine-core li:before,.spine-core li:after{width:13px}}@media (width<=760px){.dual{border-bottom:0;display:block}.dual-hint{font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);justify-content:space-between;margin-bottom:10px;font-size:11.5px;display:flex}.dual-pair{scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scrollbar-width:none;gap:12px;display:flex;overflow-x:auto}.dual-pair::-webkit-scrollbar{display:none}.dual-side,.dual-side.is-ios,.dual-side.is-android{scroll-snap-align:start;flex:0 0 82%;justify-items:stretch;height:auto}.dual-side .phone,.dual-side .hd-label{--pw:100%;width:100%}.dual-spine{padding-top:18px}.dual-spine:before,.spine-core li:before,.spine-core li:after{display:none}}.boundary{border-top:1px solid var(--ink);grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);display:grid}.boundary .side{border-radius:0 0 var(--r-card) var(--r-card);padding:24px 28px 28px}.boundary .side+.side{border-left:0;padding:24px 28px 28px}.boundary .is-shared{background:var(--shared-wash);box-shadow:inset 0 3px 0 var(--shared)}.boundary .is-native{background:var(--surface);box-shadow:inset 0 3px 0 var(--ios), inset 0 -3px 0 var(--android)}.boundary-line{justify-items:center;display:grid;position:relative}.boundary-line:before{content:"";border-left:1.5px dashed var(--ink);position:absolute;top:0;bottom:0;left:50%}.boundary-line span{writing-mode:vertical-rl;background:var(--paper);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:60px;padding:10px 0;font-size:11px;position:sticky;top:50%;transform:rotate(180deg)}@media (width<=760px){.boundary{grid-template-columns:1fr}.boundary-line{height:44px}.boundary-line:before{border-left:0;border-top:1.5px dashed var(--ink);inset:50% 0 auto}.boundary-line span{writing-mode:horizontal-tb;align-self:center;margin:0;padding:0 10px;position:relative;top:auto;transform:none}.boundary .side,.boundary .side+.side{border-top:0;padding:20px 16px}}
