/* O2IO Türkiye navigation / MobilePC. Outfit + Inter, pearl / sapphire / ink. */
.design-v2 .site-header{position:relative;z-index:80;height:100px}
.design-v2 .site-header nav{gap:12px}
.design-v2 .site-header nav>a:not(.nav-contact),.nav-dropdown>summary{font-size:13px;padding:12px 14px;border-radius:25px;transition:background .2s,color .2s;gap:9px}
.nav-dropdown{position:static}
.nav-dropdown>summary:hover,.nav-dropdown[open]>summary,.nav-dropdown.is-active>summary,.design-v2 .site-header nav>a[aria-current]{background:#e8e6fb;color:#4038b7}
.nav-chevron{transition:transform .25s!important;display:inline-block;font-size:14px!important}
.nav-dropdown[open] .nav-chevron{transform:rotate(180deg)}
.nav-dropdown-panel{left:0;right:0;top:calc(100% - 6px);min-width:0;display:grid;grid-template-columns:280px 1fr;gap:32px;padding:32px;background:#fffffff5;backdrop-filter:blur(24px);border:1px solid #e0dfef;border-radius:22px;box-shadow:0 25px 60px #1f194e1c,0 3px 8px #1f194e06;max-height:75svh;animation:nav-unfold .28s cubic-bezier(.2,.8,.2,1) both;transform-origin:top}
.nav-menu-intro{padding:10px 26px 10px 8px;border-right:1px solid #e9e6f2;display:flex;flex-direction:column;align-items:start}
.nav-orbit{font-size:34px;color:#6256dc;display:block;line-height:1;margin-bottom:24px;transition:transform .7s}
.nav-dropdown[open] .nav-orbit{transform:rotate(70deg)}
.nav-menu-intro strong{font:450 30px/1.12 Outfit,sans-serif;letter-spacing:-.035em;color:#282239;max-width:230px}
.nav-menu-intro p{font:13px/1.8 Inter,sans-serif;color:#686375;margin:14px 0 24px;max-width:220px}
.nav-menu-intro .dropdown-all{font:500 12px Inter,sans-serif;color:#5146dc;display:flex;gap:20px;align-items:center;margin-top:auto;padding:0;border:0}
.nav-menu-links{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:5px 14px}
.nav-menu-links>a{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px;font-size:13px;line-height:1.5;padding:13px 16px;color:#454052;border-radius:10px;transition:background .2s,color .2s,transform .2s;animation:nav-item .3s both;animation-delay:calc(var(--item)*18ms)}
.nav-menu-links>a svg{width:15px;flex:none;opacity:0;transform:translateX(-5px);transition:opacity .2s,transform .2s}
.nav-menu-links>a:hover,.nav-menu-links>a:focus-visible,.nav-menu-links>a[aria-current]{background:#f0effc;color:#4536c0}
.nav-menu-links>a:hover svg,.nav-menu-links>a:focus-visible svg{opacity:1;transform:translateX(0)}
.design-v2 .site-header nav .nav-contact{font-size:12px;margin-left:9px;box-shadow:0 5px 15px #25213515;transition:background .2s,transform .2s}
.design-v2 .site-header nav .nav-contact:hover{transform:translateY(-2px)}
:is(.nav-menu-links>a,.nav-dropdown>summary,.mp-mode-switch button,.mp-motion-toggle,.menu-toggle):focus-visible{outline:3px solid #778bfa;outline-offset:4px}
@keyframes nav-unfold{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes nav-item{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.mobilepc-story{position:relative;background:#f2f6fc;--mp-blue:#517aff;--mp-ink:#0a1125;overflow:hidden}
.mobilepc-story .mp-hero{position:relative;padding-block:48px 76px;isolation:isolate}
.mobilepc-story .mp-hero:before{content:'';position:absolute;inset:0 calc((100vw - 100%)/-2);background:radial-gradient(ellipse at 78% 50%,#263878 0,transparent 54%),#0a1125;z-index:-1}
.mobilepc-story .mp-hero .breadcrumb{color:#a9b9df;font-size:12px}
.mobilepc-story .mp-hero-grid{grid-template-columns:1fr 1.05fr;gap:35px;align-items:center;margin-top:42px;min-height:640px}
.mobilepc-story .mp-label{color:#bfcef0;font-size:13px;gap:15px;margin-bottom:28px}
.mobilepc-story .mp-label img{border-radius:13px;box-shadow:0 0 35px #4b71e82b}
.mobilepc-story .mp-hero h1{font-size:clamp(52px,5.4vw,80px);letter-spacing:-.05em;line-height:1.04;color:#f4f7ff;max-width:600px}
.mobilepc-story .mp-lead{color:#adbddb;font-size:15px;line-height:1.9;max-width:450px;margin-top:28px}
.mp-hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:32px}
.mobilepc-story .mp-hero-actions .button{background:#5a7dff;border:1px solid #7090ff;border-radius:30px;color:white;font-size:12px;padding:17px 22px;gap:18px;margin:0}
.mobilepc-story .mp-hero-actions .button+ .button{background:transparent;color:#dce5ff;border-color:#526181}
.mobilepc-story .mp-status{color:#aebedc;font-size:11px;margin-top:23px;display:flex;align-items:center;gap:9px}
.mobilepc-story .mp-status:before{content:'';height:6px;width:6px;background:#68dcbd;box-shadow:0 0 12px #68dcbd66;border-radius:50%}
.mp-motion-toggle{position:absolute;top:20px;right:max(30px,calc((100% - 1320px)/2));z-index:5;font:11px Inter,sans-serif;border:1px solid #45577b;background:transparent;color:#bac9e7;border-radius:25px;padding:9px 12px;cursor:pointer}
.mp-motion-toggle span{margin-left:8px}
.mp-experience{height:620px;position:relative;perspective:1200px;touch-action:pan-y}
.mp-halo{position:absolute;inset:20px -30px 0;border:1px solid #7891ff1c;border-radius:50%;transform:rotate(-22deg)}
.mp-halo:before,.mp-halo:after{content:'';position:absolute;inset:50px -30px;border:1px solid #7891ff20;border-radius:50%}
.mp-halo:after{inset:100px -60px}
.mp-desktop-demo{position:absolute;left:0;top:120px;width:87%;background:#152442;border:1px solid #7d9ac269;border-radius:16px;transform:rotateY(-8deg) rotate(-3deg);box-shadow:0 25px 60px #0005;overflow:hidden;transition:transform .4s}
.mp-desktop-bar{height:35px;background:#182742;display:flex;gap:5px;align-items:center;padding:0 14px;border-bottom:1px solid #354665}
.mp-desktop-bar i{height:5px;width:5px;border-radius:50%;background:#6881a8}.mp-desktop-bar i:first-child{background:#81a2ff}
.mp-desktop-bar span{font:9px Inter,sans-serif;color:#adbbd4;margin-left:auto}
.mp-workspace{height:230px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:30px;background:radial-gradient(ellipse at 85% 130%,#3667f8 0,#233e7e 28%,#14213c 66%);gap:14px;color:#e8efff}
.mp-window-icon{font-size:30px;color:#b5ccff}.mp-workspace strong{font:400 23px Outfit,sans-serif;letter-spacing:-.02em}.mp-workspace>span:last-of-type{font:10px Inter,sans-serif;color:#aabfde}
.mp-cursor{position:absolute;width:22px;height:28px;left:50%;top:60%;filter:drop-shadow(0 3px 5px #0005);animation:mp-cursor-travel 7s ease-in-out 2;transition:translate .3s}
.mp-connection-indicator{display:flex;gap:7px;align-items:center;padding:12px 14px;font:9px Inter,sans-serif;color:#b2c9ec;background:#10203a}
.mp-connection-indicator i{width:5px;height:5px;border-radius:50%;background:#65deba}
.mp-demo-phone{position:absolute;width:205px;height:auto;max-height:475px;object-fit:contain;right:0;top:30px;border:6px solid #253450;border-radius:29px;background:#08101d;box-shadow:0 30px 60px #0006;transform:rotate(6deg);animation:mp-phone-enter .9s cubic-bezier(.2,.8,.2,1) both;transition:transform .5s}
.mp-signal-path{position:absolute;left:36%;right:15%;bottom:150px;height:90px;border-left:1px solid #708bf56b;border-bottom:1px solid #708bf56b;border-radius:0 0 0 35px}
.mp-signal-path i{position:absolute;bottom:-3px;width:5px;height:5px;background:#7d9cff;border-radius:50%;box-shadow:0 0 14px #7d9cff;animation:mp-packet 3s ease-in-out 4}
.mp-signal-path i:nth-child(2){animation-delay:.6s}.mp-signal-path i:nth-child(3){animation-delay:1.2s}
.mp-experience-caption{position:absolute;bottom:57px;left:0;color:#d5e2ff;font:400 20px Outfit,sans-serif;letter-spacing:-.02em}
.mp-demo-note{position:absolute;bottom:32px;left:0;color:#8ba0c4;font:10px Inter,sans-serif}
.mobilepc-story .mp-ribbon{background:#142342;border:0;color:#bdcbed;padding-block:22px}
.mobilepc-story .mp-ribbon .wrap{display:flex;justify-content:space-between;gap:25px}
.mobilepc-story .mp-ribbon span{font:400 17px Outfit,sans-serif;display:flex;gap:14px;align-items:center;color:#c5d2ef}
.mobilepc-story .mp-ribbon span:before{content:'+';color:#7a9cff;font-size:20px}
.mobilepc-story .mp-intro{padding-block:100px 65px}.mobilepc-story .mp-intro h2{font-size:clamp(40px,4.5vw,64px);letter-spacing:-.045em}
.mp-mode-switch{display:flex;gap:8px;padding:7px;border-radius:35px;background:#e3eaf5;width:fit-content;margin:0 0 35px;flex-wrap:wrap}
.mp-mode-switch button{border:0;border-radius:28px;background:transparent;color:#52627e;min-height:42px;padding:11px 22px;font:500 12px Inter,sans-serif;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.mp-mode-switch button[aria-pressed=true]{background:#fff;color:#233e8b;box-shadow:0 3px 12px #223a6720}
.mobilepc-story .mp-showcase{padding-top:25px;scroll-margin-top:30px}
.mobilepc-story .mp-screen-grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:#97add4 #e2e9f4;scrollbar-width:thin;padding:8px 5px 24px;align-items:stretch}
.mobilepc-story .mp-screen-grid figure,.mobilepc-story .mp-screen-grid figure:nth-child(3){flex:0 0 340px;scroll-snap-align:start;transition:opacity .3s}
.mobilepc-story .mp-screen-grid:after{content:'';flex:0 0 max(0px,calc(100% - 364px))}
.mobilepc-story .mp-screen-link,.mobilepc-story .mp-screen-grid figure:nth-child(3) .mp-screen-link{height:465px;padding:26px 30px;display:flex;flex-direction:column;justify-content:center;background:#e0e8f5;border:1px solid transparent;border-radius:20px}
.mobilepc-story .mp-screen-grid .is-selected .mp-screen-link{border-color:#7491e6;background:#dde5fa}
.mobilepc-story .mp-screen-link img,.mobilepc-story .mp-screen-grid figure:nth-child(3) .mp-screen-link img{height:380px;width:100%;object-fit:contain;max-height:380px}
.mobilepc-story .mp-screen-grid figure:nth-child(3) .mp-screen-link img{height:auto}
.mobilepc-story .mp-screen-grid figure:nth-child(3) .mp-screen-link{background:#dcebe8}
.mobilepc-story .mp-screen-grid figcaption small{font:10px/1.6 Inter,sans-serif;color:#77849b;display:block;margin-top:12px}
.mobilepc-story .mp-features{gap:0;border:0;padding-bottom:90px}.mobilepc-story .mp-features article{padding:32px;border-bottom:1px solid #d2dcec;transition:background .25s}
.mobilepc-story .mp-features article:hover{background:#e8eef9}.mobilepc-story .mp-features .mp-symbol{font-size:28px;color:#5a7fd8;margin-bottom:20px;display:inline-block;transition:transform .3s}
.mobilepc-story .mp-features article:hover .mp-symbol{transform:translateX(5px)}
.mobilepc-story .mp-setup{background:#12203b;color:#e8efff;padding-block:80px;position:relative}.mobilepc-story .mp-setup h2{color:#f0f5ff;font-size:clamp(38px,4vw,58px)}
.mobilepc-story .mp-setup ol{counter-reset:setup;gap:45px}.mobilepc-story .mp-setup li{border-color:#425375}.mobilepc-story .mp-setup li:before{color:#7f9fff}.mobilepc-story .mp-setup li h3{color:#edf3ff}.mobilepc-story .mp-setup li p{color:#afbfdb}
.mobilepc-story .mp-context{padding-block:90px}.mobilepc-story .mp-finale{border-top:1px solid #ced8e8;padding-block:80px 100px;text-align:center}.mobilepc-story .mp-finale h2{font-size:clamp(42px,5vw,72px);letter-spacing:-.05em}.mobilepc-story .mp-finale .button{background:#466ae0;border-radius:30px}
.mp-motion-off *,.mp-motion-off *:before,.mp-motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes mp-phone-enter{from{opacity:0;transform:translateY(35px) rotate(10deg)}to{opacity:1;transform:translateY(0) rotate(6deg)}}
@keyframes mp-cursor-travel{0%,100%{transform:translate(0,0)}35%{transform:translate(-65px,-40px)}65%{transform:translate(10px,-20px)}}
@keyframes mp-packet{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@media(min-width:901px){.mp-experience:hover .mp-demo-phone{transform:rotate(2deg) translateY(-7px)}.mp-experience:hover .mp-desktop-demo{transform:rotateY(-3deg) rotate(-1deg)}}
@media(min-width:901px){
 .mp-interactive .mp-screen-grid{display:block;overflow:visible;padding:0}
 .mp-interactive .mp-screen-grid:after{display:none}
 .mp-interactive .mp-screen-grid figure:not(.is-selected){display:none}
 .mp-interactive .mp-screen-grid figure.is-selected{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;animation:nav-item .25s both}
 .mp-interactive .mp-screen-grid .mp-screen-link,.mp-interactive .mp-screen-grid figure:nth-child(3) .mp-screen-link{height:555px;padding:35px}
 .mp-interactive .mp-screen-grid .mp-screen-link img{height:470px;max-height:470px}
 .mp-interactive .mp-screen-grid figure:nth-child(3) .mp-screen-link img{height:auto;max-height:400px}
 .mp-interactive .mp-screen-grid figcaption{padding:30px 15px 30px 0}
 .mp-interactive .mp-screen-grid h3{font-size:44px;line-height:1.08;letter-spacing:-.035em;max-width:440px;margin-bottom:24px}
 .mp-interactive .mp-screen-grid figcaption p{font-size:15px;line-height:1.9;max-width:390px}
 .mp-interactive .mp-screen-grid figcaption small{font-size:11px;margin-top:23px}
}
@media(max-width:1180px) and (min-width:901px){.design-v2 .site-header nav{gap:0}.design-v2 .site-header nav>a:not(.nav-contact),.nav-dropdown>summary{padding-inline:10px;font-size:12px}.mobilepc-story .mp-hero-grid{gap:22px}.mp-demo-phone{width:180px}.mp-workspace{padding:25px}.mp-workspace strong{font-size:19px}.mp-desktop-demo{top:145px}}
@media(max-width:900px){.design-v2 .site-header{height:86px}.design-v2 .site-header nav{gap:0;left:0;right:0;top:78px;border:1px solid #e5dfef;border-radius:18px;padding:18px 22px;background:#fffffff5;max-height:calc(100svh - 105px);overflow:auto;backdrop-filter:blur(18px)}.nav-dropdown>summary{min-height:54px;justify-content:space-between;font-size:15px;border-radius:12px;padding:13px 15px}.nav-dropdown-panel{position:static;display:block;border:0;box-shadow:none;padding:10px 6px 20px;background:transparent;overflow:visible;max-height:none;animation:nav-unfold .2s both}.nav-menu-intro{border:0;padding:8px 10px}.nav-menu-intro strong,.nav-menu-intro p,.nav-orbit{display:none}.nav-menu-intro .dropdown-all{padding:8px 0}.nav-menu-links{gap:3px;grid-template-columns:1fr 1fr}.nav-menu-links>a{font-size:12px;min-height:46px;padding:10px}.design-v2 .site-header nav>a:not(.nav-contact){padding:16px 15px;border-radius:12px}.design-v2 .site-header nav .nav-contact{margin:12px 0 0;text-align:center;justify-content:center;display:flex}.mobilepc-story .mp-hero-grid{grid-template-columns:1fr;min-height:0;gap:30px;margin-top:32px}.mobilepc-story .mp-hero h1{font-size:clamp(52px,8vw,76px);max-width:700px}.mobilepc-story .mp-lead{max-width:590px}.mp-experience{height:530px;width:min(560px,100%);margin:auto}.mp-demo-phone{width:195px;top:10px}.mp-desktop-demo{top:105px}.mp-signal-path{bottom:120px}.mp-experience-caption{bottom:37px}.mp-demo-note{bottom:10px}.mobilepc-story .mp-hero{padding-bottom:45px}.mobilepc-story .mp-ribbon span{font-size:14px}.mobilepc-story .mp-ribbon .wrap{flex-wrap:wrap;justify-content:flex-start;gap:15px 28px}.mobilepc-story .mp-intro{padding-top:70px}.mobilepc-story .mp-features article{padding:24px}}
@media(max-width:650px){.design-v2 .site-header{height:78px}.design-v2 .site-header nav{top:70px;left:0;right:0;padding:12px}.nav-menu-links{grid-template-columns:1fr}.nav-menu-links>a{min-height:44px;font-size:13px}.nav-menu-links>a svg{opacity:.5;transform:none}.mobilepc-story .mp-hero{padding-top:27px}.mp-motion-toggle{position:relative;top:auto;right:auto;display:block;margin:0 20px 0 auto;padding:10px 0;border:0}.mobilepc-story{background:linear-gradient(#0a1125 0 75px,#f2f6fc 75px)}.mobilepc-story .mp-hero h1{font-size:clamp(47px,12vw,66px);letter-spacing:-.04em}.mobilepc-story .mp-label{margin-bottom:22px}.mobilepc-story .mp-lead{font-size:14px;margin-top:24px}.mobilepc-story .mp-hero-grid{margin-top:30px}.mp-hero-actions{gap:10px}.mobilepc-story .mp-hero-actions .button{font-size:11px;padding:15px 17px;gap:12px}.mp-experience{height:445px;margin-top:12px}.mp-desktop-demo{top:125px;width:86%;left:0}.mp-desktop-bar{height:27px;padding-inline:10px}.mp-desktop-bar span{font-size:7px}.mp-workspace{height:172px;padding:16px;gap:10px}.mp-workspace strong{font-size:16px;max-width:145px}.mp-workspace>span:last-of-type{font-size:8px;max-width:160px}.mp-window-icon{font-size:23px}.mp-demo-phone{width:143px;top:0;right:0;border-width:4px;border-radius:20px}.mp-connection-indicator{font-size:8px;padding:9px}.mp-signal-path{bottom:85px;height:50px}.mp-experience-caption{font-size:17px;bottom:32px;max-width:290px}.mp-demo-note{bottom:8px}.mp-halo{inset:20px 0 35px}.mp-mode-switch{width:100%;border-radius:16px;gap:5px;padding:6px}.mp-mode-switch button{flex:1 0 28%;padding:10px 12px;font-size:11px;min-height:42px}.mobilepc-story .mp-screen-grid figure,.mobilepc-story .mp-screen-grid figure:nth-child(3){flex-basis:88%}.mobilepc-story .mp-screen-grid figure:nth-child(3) .mp-screen-link{height:465px}.mobilepc-story .mp-screen-grid figcaption{padding:23px 3px}.mobilepc-story .mp-showcase>header{margin-bottom:27px}.mobilepc-story .mp-showcase h2{font-size:41px}.mobilepc-story .mp-showcase header>p:last-child{font-size:12px}.mobilepc-story .mp-intro{padding-block:60px 45px}.mobilepc-story .mp-intro h2{font-size:40px}.mobilepc-story .mp-features{padding-bottom:50px}.mobilepc-story .mp-features article{padding:26px 0}.mobilepc-story .mp-setup{padding-block:55px}.mobilepc-story .mp-context{padding-block:55px}.mobilepc-story .mp-finale{padding-block:55px 70px}.mobilepc-story .mp-finale h2{font-size:43px}}
@media(prefers-reduced-motion:reduce){.nav-dropdown-panel,.nav-menu-links>a,.mp-demo-phone,.mp-cursor,.mp-signal-path i{animation:none!important}.nav-orbit,.nav-chevron,.nav-menu-links>a,.nav-menu-links svg,.mp-mode-switch button,.mp-demo-phone,.mp-desktop-demo,.mp-cursor{transition:none!important}.mp-experience:hover .mp-demo-phone{transform:rotate(6deg)}.mp-experience:hover .mp-desktop-demo{transform:rotateY(-8deg) rotate(-3deg)}}

/* MobilePC — phone wall */
.mobilepc-story .mp-wall{position:relative;background:radial-gradient(900px 420px at 15% 0,rgba(81,122,255,.28),transparent 70%),radial-gradient(700px 400px at 90% 100%,rgba(63,214,255,.16),transparent 70%),#0a1125;color:#e8eeff;padding:104px 0 88px;overflow:hidden}
.mobilepc-story .mp-wall header{max-width:640px;margin-bottom:56px}.mobilepc-story .mp-wall .section-label{color:#8fb0ff}.mobilepc-story .mp-wall h2{color:#fff;font-size:clamp(34px,5vw,60px);line-height:1.04;margin:14px 0 0}
.mp-wall-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start}
.mp-wall-row figure{margin:0;display:grid;gap:18px}.mp-wall-row figure:nth-child(even){transform:translateY(34px)}
.mp-wall-phone{border-radius:30px;padding:8px;background:linear-gradient(160deg,#2a3a68,#0a1126 62%);box-shadow:0 34px 60px -26px rgba(0,0,0,.7),inset 0 0 0 1px rgba(150,180,255,.25);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.mp-wall figure:hover .mp-wall-phone{transform:translateY(-8px);box-shadow:0 44px 70px -26px rgba(81,122,255,.55),inset 0 0 0 1px rgba(150,180,255,.45)}
.mp-wall-phone img{display:block;width:100%;height:auto;border-radius:23px;background:#050a18}
.mp-wall figcaption{display:grid;gap:4px}.mp-wall figcaption b{font:600 20px Outfit,sans-serif;color:#fff}.mp-wall figcaption span{color:#aebfe6;font-size:15px;line-height:1.5}
.mp-wall-pad{margin:92px 0 0;display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;padding:36px;border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(150,180,255,.18)}
.mp-wall-land{border-radius:26px}.mp-wall-land img{border-radius:19px}.mp-wall-pad figcaption b{font-size:clamp(26px,3vw,38px)}.mp-wall-pad figcaption span{font-size:17px}
.mp-wall small{display:block;margin-top:30px;color:#8294bd;font-size:14px}
@media (max-width:1000px){.mp-wall-row{grid-template-columns:repeat(2,1fr);gap:40px 22px}.mp-wall-pad{grid-template-columns:1fr;gap:26px;padding:22px}}
@media (max-width:620px){.mobilepc-story .mp-wall{padding:72px 0 64px}.mp-wall-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-20px;padding:6px 20px 40px;scrollbar-width:none}.mp-wall-row::-webkit-scrollbar{display:none}.mp-wall-row figure{flex:0 0 70%;scroll-snap-align:center}.mp-wall-pad{margin-top:30px}}
@media (prefers-reduced-motion:reduce){.mp-wall-phone{transition:none}.mp-wall figure:hover .mp-wall-phone{transform:none}}

.mobilepc-story .mp-screen-grid #mp-screen-2 .mp-screen-link{height:auto;padding:clamp(12px,2vw,24px)}

/* MobilePC local connection and the handoff from setup. */
.mobilepc-story .mp-setup{padding-block:clamp(42px,5vw,72px)}
.mobilepc-story .mp-setup li:last-child{margin-bottom:0}
.mobilepc-story .mp-context{
  display:block;
  padding-block:clamp(36px,6vw,84px);
  margin-bottom:clamp(24px,4vw,56px);
  border-block:1px solid #cbd8eb;
  background:#e9effa;
  color:#192b49;
  --mp-network-surface:#f7faff;
  --mp-network-line:#bdcde5;
  --mp-network-accent:#2f57a4;
}
html[data-theme=dark] .design-v2 .mobilepc-story .mp-context{
  background:#121c2a;
  color:#e6effc;
  border-color:#35485e;
  --mp-network-surface:#1b2a3d;
  --mp-network-line:#415675;
  --mp-network-accent:#a9c5ff;
}
.mp-context-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:center;
  gap:clamp(28px,5vw,80px);
}
.mobilepc-story .mp-context h2{
  color:inherit;
  margin:0 0 16px;
  font-size:clamp(33px,4vw,60px);
}
.mp-context-copy p{max-width:46ch;margin:0}
.mp-network-panel{
  background:var(--mp-network-surface);
  border:1px solid var(--mp-network-line);
  border-radius:14px;
  padding:clamp(14px,2.8vw,34px);
}
.mp-network-path{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  color:var(--mp-network-accent);
  font-weight:700;
  font-size:clamp(11px,1.35vw,15px);
}
.mp-network-path > span:not(.mp-network-wifi){
  border:1px solid var(--mp-network-line);
  border-radius:6px;
  padding:8px clamp(7px,1.3vw,16px);
}
.mp-network-wifi{display:flex;align-items:center;gap:6px;white-space:nowrap}
.mp-network-wifi::before,.mp-network-wifi::after{
  content:"";
  flex:1;
  border-top:1px dashed var(--mp-network-accent);
}
.mp-network-details{margin:20px 0 0}
.mp-network-details > div{padding:10px 0;border-top:1px solid var(--mp-network-line)}
.mp-network-details dt{font-weight:700;font-size:14px}
.mp-network-details dd{margin:3px 0 0;font-size:13px;line-height:1.6}
.mp-context .mp-network-note{margin:8px 0 0;color:var(--mp-network-accent);font-size:12px}
@media(max-width:760px){.mp-context-layout{grid-template-columns:minmax(0,1fr)}}