*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f8fbff;color:#172c40;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;line-height:1.75}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;background:#fff;padding:8px;z-index:99}.site-header{position:sticky;top:0;z-index:60;background:rgba(248,251,255,.96);border-bottom:1px solid #d7e3ed;backdrop-filter:blur(9px)}.header-inner{max-width:1200px;height:72px;margin:auto;padding:0 24px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand span{background:#176a9a;color:#fff;padding:6px 10px;border-radius:15px;font-weight:900}.brand small{font-size:9px;letter-spacing:.12em;color:#7491a3}.desktop-nav{display:flex;gap:22px;font-size:14px;color:#506c7e}.header-cta{background:#176a9a;color:#fff;padding:10px 15px;border-radius:20px;font-weight:900}.menu-btn,.mobile-nav{display:none}.hero{background:linear-gradient(180deg,#edf7ff 0%,#f8fbff 100%)}.hero-top{max-width:1200px;margin:auto;padding:72px 24px 62px;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.eyebrow,.section-label,.final-cta p{font-size:11px;letter-spacing:.14em;font-weight:900;color:#1474a9;text-transform:uppercase}.hero h1{font-size:clamp(44px,5.8vw,74px);line-height:1.04;letter-spacing:-.045em;margin:10px 0 20px}.hero-lead{font-size:18px;color:#5e7788}.hero-lead strong{color:#174e70}.hero-actions{display:flex;gap:12px;margin-top:28px}.btn{min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:25px;font-weight:900}.primary{background:#176a9a;color:#fff}.light{background:#fff;border:1px solid #cbdde8}.phone-transfer{position:relative;height:470px}.phone-transfer figure{position:absolute;margin:0;background:#0d2130;border-radius:30px;padding:9px;box-shadow:0 28px 55px rgba(27,83,116,.17)}.phone-transfer img{width:100%;height:100%;object-fit:contain;border-radius:23px;background:#0d1820}.old-phone{width:42%;height:350px;left:3%;top:25px;transform:rotate(-6deg)}.new-phone{width:47%;height:390px;right:4%;bottom:12px;transform:rotate(5deg);z-index:2}.transfer-arrow{position:absolute;left:34%;top:46%;z-index:5;background:#fff;border:1px solid #cfe0e9;border-radius:15px;padding:10px 13px;box-shadow:0 12px 28px rgba(33,76,102,.12);display:flex;gap:8px;align-items:center;font-size:11px}.transfer-arrow b{font-size:24px;color:#176a9a}.phone-story,.switch-cases,.steps-section,.do-dont{max-width:1200px;margin:auto;padding:76px 24px}.story-head,.switch-head,.steps-head{max-width:800px}.story-head h2,.choose-title h2,.switch-head h2,.steps-head h2,.do-dont h2,.faq-title h2{font-size:clamp(30px,4vw,48px);line-height:1.16;letter-spacing:-.03em;margin:7px 0 14px}.story-head>p:last-child,.choose-title>p:last-child,.steps-head>p:last-child,.faq-title>p:last-child{color:#698394}.story-gallery{display:grid;grid-template-columns:.75fr 1.35fr .9fr;gap:14px;margin-top:30px}.story-gallery figure{margin:0;background:#fff;border:1px solid #d8e5ed;border-radius:16px;overflow:hidden}.story-gallery img{width:100%;height:260px;object-fit:contain;background:#eaf2f7}.story-gallery .wide img{object-fit:contain}.story-gallery .banner img{object-fit:cover}.story-gallery figcaption{padding:11px 13px;font-size:12px;color:#688193}.choose-section{background:#176a9a;color:#fff;padding:70px max(24px,calc((100vw - 1200px)/2))}.choose-title{max-width:760px}.choose-title .section-label{color:#9edcff}.choose-title>p:last-child{color:#c6e2f1}.choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.choose-grid article{padding:28px;border-radius:18px}.choose-grid .android{background:#d9f4e4;color:#183b2c}.choose-grid .iphone{background:#fff;color:#173249}.choose-grid span{font-size:10px;letter-spacing:.12em;font-weight:900;color:#176a9a}.choose-grid h3{font-size:29px;margin:10px 0 8px}.choose-grid p{color:#587261}.iphone p{color:#617b8e}.route{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:20px 0}.route b{border:1px solid currentColor;border-radius:15px;padding:7px 10px;font-size:11px}.route i{font-style:normal}.choose-grid a{font-weight:900;border-bottom:1px solid currentColor}.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:28px}.case-grid article{background:#fff;border:1px solid #d7e4ec;border-radius:13px;padding:19px}.case-grid span{font-size:11px;font-weight:900;color:#176a9a}.case-grid h3{font-size:18px;margin:9px 0}.case-grid p{font-size:13px;color:#688193}.steps-section{padding-top:40px}.steps-track{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.steps-track article{background:#edf6fb;border:1px solid #d3e3ed;border-radius:14px;padding:20px;min-height:220px}.steps-track span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#176a9a;color:#fff;font-size:10px;font-weight:900}.steps-track h3{font-size:19px;margin:12px 0 7px}.steps-track p{font-size:13px;color:#657f90}.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px}.do-dont>div{padding:28px;border-radius:16px}.do{background:#d9f4e4}.dont{background:#fff0ed}.do-dont ul{padding-left:20px}.do-dont li{margin:8px 0}.faq-section{background:#122c3d;color:#fff;padding:70px max(24px,calc((100vw - 1200px)/2));display:grid;grid-template-columns:.7fr 1.3fr;gap:50px}.faq-title .section-label{color:#9edcff}.faq-title>p:last-child{color:#acc8d8}.faq-list details{background:#19394d;border:1px solid #2b5065;border-radius:11px;padding:17px 18px;margin-bottom:9px}.faq-list summary{cursor:pointer;font-weight:900}.faq-list p{color:#c0d4df;margin-bottom:0}.final-cta{max-width:1200px;margin:54px auto 76px;background:#d9f4e4;border-radius:18px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:28px}.final-cta p{margin:0;color:#1770a1}.final-cta h2{font-size:30px;margin:4px 0}.final-cta span{color:#587666}.final-btn{background:#176a9a;color:#fff}.site-footer{max-width:1200px;margin:auto;padding:0 24px 34px;display:flex;justify-content:space-between;gap:22px;color:#6f8797}.site-footer p{font-size:13px;margin:3px 0}.mobile-download-bar{display:none}
@media(max-width:900px){.desktop-nav,.header-cta{display:none}.menu-btn{display:block;background:#fff;border:1px solid #cedee7;border-radius:15px;padding:8px}.mobile-nav.open{display:flex}.mobile-nav{gap:14px;flex-wrap:wrap;padding:8px 24px 16px}.hero-top{grid-template-columns:1fr}.story-gallery{grid-template-columns:1fr 1fr}.story-gallery .wide{grid-column:1/-1}.choose-grid{grid-template-columns:1fr}.case-grid{grid-template-columns:1fr 1fr}.steps-track{grid-template-columns:1fr 1fr}.faq-section{grid-template-columns:1fr}}
@media(max-width:600px){body{padding-bottom:72px}.header-inner{height:64px;padding:0 16px}.brand small{display:none}.hero-top{padding:46px 16px 32px;gap:20px}.hero h1{font-size:40px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column}.phone-transfer{height:350px}.old-phone{height:255px}.new-phone{height:285px}.phone-story,.switch-cases,.steps-section,.do-dont{padding-left:16px;padding-right:16px}.story-gallery{grid-template-columns:1fr}.story-gallery .wide{grid-column:auto}.choose-section,.faq-section{padding-left:16px;padding-right:16px}.case-grid,.steps-track,.do-dont{grid-template-columns:1fr}.final-cta{margin:34px 16px 24px;padding:24px;display:block}.final-btn{width:100%;margin-top:18px}.site-footer{padding:0 16px 28px;display:block}.mobile-download-bar{position:fixed;left:0;right:0;bottom:0;height:60px;background:#176a9a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;z-index:90}.mobile-download-bar span strong,.mobile-download-bar span small{display:block}.mobile-download-bar span small{font-size:10px;color:#c4e1f0}.mobile-download-bar a{background:#d9f4e4;color:#163e55;padding:8px 12px;border-radius:18px;font-weight:900}}

/* WPT official brand icon */
.brand-logo{
    display:block;
    width:38px;
    height:38px;
    min-width:38px;
    object-fit:contain;
    flex:0 0 auto;
}

@media(max-width:600px){
    .brand-logo{
        width:34px;
        height:34px;
        min-width:34px;
    }
}