*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eef3f7;color:#182534;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(238,243,247,.96);border-bottom:1px solid #d5e0e7;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:#215d87;color:#fff;padding:6px 10px;border-radius:5px;font-weight:900}.brand div strong,.brand div small{display:block}.brand small{font-size:9px;letter-spacing:.12em;color:#71899a}.desktop-nav{display:flex;gap:21px;color:#536d7e;font-size:14px}.header-cta{background:#215d87;color:#fff;padding:10px 15px;border-radius:5px;font-weight:900}.menu-btn,.mobile-nav{display:none}.hero{max-width:1200px;margin:auto;padding:76px 24px 64px;display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}.eyebrow,.section-label,.final-cta p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:#c36432}.hero h1{font-size:clamp(46px,6vw,76px);line-height:1.03;letter-spacing:-.045em;margin:10px 0 20px}.hero-lead{font-size:18px;color:#607686}.hero-actions{display:flex;gap:12px;margin-top:28px}.btn{display:inline-flex;min-height:50px;padding:0 22px;align-items:center;justify-content:center;border-radius:6px;font-weight:900}.primary{background:#215d87;color:#fff}.ghost{background:#fff;border:1px solid #cbd9e2}.browser-window{background:#fff;border:1px solid #cad7e0;border-radius:13px;overflow:hidden;box-shadow:0 30px 60px rgba(43,76,99,.14)}.browser-tabs{height:38px;background:#dfe7ed;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:10px;color:#768895}.browser-tabs i{width:8px;height:8px;border-radius:50%;background:#a5b4bf}.browser-tabs span{margin-left:7px}.address-bar{margin:12px;background:#f3f6f8;border:1px solid #dce5eb;border-radius:5px;padding:10px 12px;color:#718490;font-size:11px}.download-card{margin:12px 12px 18px;background:#f8fafb;border:1px solid #dce5eb;border-radius:8px;padding:18px;display:grid;grid-template-columns:50px 1fr auto;gap:14px;align-items:center}.file-icon{width:42px;height:42px;border-radius:8px;background:#215d87;color:#fff;display:grid;place-items:center;font-size:22px}.download-card small,.download-card strong,.download-card p{display:block}.download-card small{font-size:9px;color:#7b8e9a}.download-card p{font-size:11px;color:#7b8e9a;margin:3px 0}.status{font-size:10px;color:#c36432;font-weight:900}.visual-section,.steps-section,.download-record,.content-band{max-width:1200px;margin:auto;padding:74px 24px}.section-head,.steps-head{max-width:800px}.section-head h2,.browser-copy h2,.steps-head h2,.record-copy h2,.content-band h2,.faq-head h2{font-size:clamp(30px,4vw,48px);line-height:1.16;letter-spacing:-.03em;margin:7px 0 14px}.section-head>p:last-child,.browser-copy>p,.steps-head>p:last-child,.record-copy p,.content-band p,.faq-head>p:last-child{color:#687e8d}.visual-grid{display:grid;grid-template-columns:1.35fr .825fr .825fr;gap:13px;margin-top:28px}.visual-grid figure{margin:0;background:#fff;border:1px solid #d5e0e7;border-radius:10px;overflow:hidden}.visual-grid img{height:245px;width:100%;object-fit:contain;background:#e5ebef}.visual-grid .desktop img{object-fit:cover}.visual-grid figcaption{padding:11px 13px;font-size:12px;color:#697f8e}.browser-flow{background:#173247;color:#fff;padding:70px max(24px,calc((100vw - 1200px)/2));display:grid;grid-template-columns:.65fr 1.35fr;gap:48px}.browser-side{border-right:1px solid #345064;padding-right:28px}.browser-side .section-label{color:#f0a378}.browser-side div{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid #365166}.browser-side span{color:#f0a378;font-size:10px}.browser-copy h2{margin-top:0}.browser-copy>p{color:#bfd0db}.browser-copy article{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:15px 0;border-top:1px solid #345064}.browser-copy article b{color:#fff}.browser-copy article p{margin:0;color:#b9cbd6;font-size:13px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:30px}.steps-grid article{background:#fff;border:1px solid #d3dfe7;border-radius:9px;padding:20px;min-height:220px}.steps-grid span{width:35px;height:35px;border-radius:6px;background:#215d87;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900}.steps-grid h3{font-size:19px;margin:12px 0 7px}.steps-grid p{font-size:13px;color:#687e8d}.download-record{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}.record-box{background:#fff;border:1px solid #d3dfe7;border-radius:10px;padding:28px}.record-box>span{font-size:10px;color:#c36432;font-weight:900;letter-spacing:.1em}.record-box strong{display:block;font-size:28px;margin:6px 0}.record-box ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;list-style:none}.record-box li{background:#e8eff4;padding:9px 11px;border-radius:4px;font-size:12px}.content-band{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}.content-band figure{margin:0;background:#fff;border:1px solid #d3dfe7;border-radius:10px;padding:12px}.content-band img{height:260px;width:100%;object-fit:contain}.content-band figcaption{font-size:11px;color:#6e8290;padding:8px 2px 0}.faq-section{background:#e4ebf0;padding:70px max(24px,calc((100vw - 1200px)/2));display:grid;grid-template-columns:.7fr 1.3fr;gap:48px}.faq-list details{background:#fff;border:1px solid #cfdae2;border-radius:8px;padding:17px 18px;margin-bottom:9px}.faq-list summary{font-weight:900;cursor:pointer}.faq-list p{color:#657c8b;margin-bottom:0}.final-cta{max-width:1200px;margin:54px auto 76px;background:#c36432;color:#fff;border-radius:10px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:28px}.final-cta p{color:#ffd8c3;margin:0}.final-cta h2{font-size:30px;margin:4px 0}.final-cta span{color:#ffe4d5}.final-btn{background:#fff;color:#274154}.site-footer{max-width:1200px;margin:auto;padding:0 24px 34px;display:flex;justify-content:space-between;gap:22px;color:#738897}.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;border:1px solid #cbd8e0;background:#fff;border-radius:5px;padding:8px}.mobile-nav.open{display:flex}.mobile-nav{gap:14px;flex-wrap:wrap;padding:8px 24px 16px}.hero{grid-template-columns:1fr}.visual-grid{grid-template-columns:1fr 1fr}.browser-flow{grid-template-columns:1fr}.browser-side{border-right:0;border-bottom:1px solid #345064;padding:0 0 20px}.steps-grid{grid-template-columns:1fr 1fr}.download-record,.content-band{grid-template-columns: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{padding:46px 16px 36px;gap:28px}.hero h1{font-size:40px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column}.download-card{grid-template-columns:42px 1fr}.status{grid-column:2}.visual-section,.steps-section,.download-record,.content-band{padding-left:16px;padding-right:16px}.visual-grid{grid-template-columns:1fr}.browser-flow,.faq-section{padding-left:16px;padding-right:16px}.browser-copy article{grid-template-columns:1fr;gap:5px}.steps-grid{grid-template-columns:1fr}.record-box ul{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:#215d87;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:#c6d7e2}.mobile-download-bar a{background:#fff;color:#274154;padding:8px 12px;border-radius:5px;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;
    }
}