:root{--ink:#142441;--muted:#647186;--blue:#275dd3;--blue-soft:#eaf0ff;--warm:#b57b4e;--line:#dbe2ed;--paper:#f5f7fc;font-family:Arial,"PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--paper);scroll-behavior:smooth;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-width:320px}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer;color:inherit}img{display:block;max-width:100%}h1,h2,h3,h4,p,figure{margin:0}p{line-height:1.85}::selection{background:#cbd9ff;color:#122343}:focus-visible{outline:2px solid var(--blue);outline-offset:4px}[hidden]{display:none!important}.wrap{width:min(1360px,calc(100% - 112px));margin:auto}.skip-link{position:fixed;top:-80px;left:16px;z-index:100;background:var(--ink);color:white;padding:12px}.skip-link:focus{top:16px}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px;padding:0 56px;border-bottom:1px solid var(--line);background:#f8faff}.brand{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.12em}.brand-mark{width:35px;height:35px;border:1px solid #6686c1;border-radius:50%;display:grid;place-items:center;letter-spacing:-.06em;color:var(--blue)}.brand small{display:block;font-weight:500;font-size:9px;letter-spacing:.16em;color:#6e7f99;margin-top:4px}.header nav{display:flex;gap:32px;color:#62728b;font-size:12px}.header nav a:hover{color:var(--blue)}.header-project{font-size:11px;letter-spacing:.12em;color:var(--blue);font-weight:800}.hero{background:linear-gradient(110deg,#f5f8ff,#edf2fc 60%,#f2eee9);overflow:hidden}.hero-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center;min-height:660px;padding:65px 0 45px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:700;color:#5474a4}.hero h1{font-size:clamp(42px,4.2vw,64px);letter-spacing:-.055em;line-height:1.25;margin:30px 0 23px;font-weight:800}.hero h1 em{font-style:normal;color:var(--blue)}.hero-lede{font-size:21px;font-weight:500;letter-spacing:-.03em;line-height:1.6}.hero-intro{max-width:480px;font-size:13px;color:var(--muted);margin:20px 0 25px}.button{display:inline-flex;align-items:center;justify-content:center;gap:32px;padding:14px 22px;font-size:12px;border-radius:4px}.button-primary{background:var(--blue);color:white;border:1px solid var(--blue)}.button-primary:hover{background:#1c48ab}.hero-meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:37px;border-top:1px solid #cfdaed;padding-top:22px}.hero-meta span{display:block;font-size:9px;color:#7c8aa0;margin-bottom:9px}.hero-meta strong{font-size:11px;font-weight:500}.hero-art{position:relative;min-width:0;height:495px}.hero-browser{position:absolute;top:12px;left:0;width:94%;height:394px;background:white;border:5px solid #29354a;border-radius:11px;box-shadow:0 25px 45px #273b5724;overflow:hidden;transform:rotate(-3deg)}.browser-chrome{height:30px;background:#f4f5f7;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid #e2e7ef;flex-shrink:0}.browser-chrome i{height:5px;width:5px;border-radius:50%;background:#c2cad6}.browser-chrome span{font-size:7px;letter-spacing:.12em;color:#7c899b;margin:auto}.hero-browser>img{width:100%;height:auto}.hero-phone{position:absolute;bottom:24px;right:0;width:34%;height:420px;border:5px solid #243044;border-radius:24px;overflow:hidden;background:white;box-shadow:0 22px 35px #172b573b;transform:rotate(5deg)}.hero-phone img{width:100%;height:auto}.hero-art-label{position:absolute;bottom:-9px;left:8px;letter-spacing:.15em;font-size:8px;color:#73849b}.section{padding:85px 0;scroll-margin-top:22px}.section-id{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #cbd5e6;padding-top:17px;color:#6881a6;font-size:10px;letter-spacing:.12em;font-weight:700}.section-id>span:last-child{font-size:9px;letter-spacing:.1em;color:#8a96a9}.section-id>span:first-child:before{content:"";display:inline-block;width:25px;height:1px;background:#728dbc;vertical-align:middle;margin-right:10px}.section-heading{display:grid;grid-template-columns:1fr 1.1fr;gap:90px;align-items:end;margin:39px 0 36px}.section-heading h2{font-size:clamp(30px,3.2vw,45px);line-height:1.3;letter-spacing:-.05em}.section-heading em{font-style:normal;color:var(--blue)}.section-heading>p{font-size:14px;color:var(--muted);max-width:560px}.context{background:white}.ecosystem{display:grid;grid-template-columns:1fr 35px 1fr 35px 1fr;align-items:center;gap:12px}.ecosystem article{background:#f6f8fc;border:1px solid #dbe4f1;padding:28px 25px;min-height:158px;border-radius:6px}.ecosystem article.ecosystem-new{background:#eef3ff;border-color:#c9d7f9}.ecosystem article>span{font-size:8px;letter-spacing:.11em;color:#7790b5}.ecosystem h3{font-size:19px;letter-spacing:-.025em;margin:18px 0 10px}.ecosystem p{font-size:11px;color:#718098}.ecosystem-arrow{color:#81a0d4;text-align:center;font-size:20px}.context-note{color:#8190a6;font-size:11px;margin-top:19px}.merchant-details{margin-top:32px;border:1px solid var(--line);background:#fbfcff;border-radius:5px}.merchant-details summary{cursor:pointer;padding:22px 25px;display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;font-size:14px}.merchant-details summary::-webkit-details-marker{display:none}.merchant-details summary small{display:block;color:#7e95b7;font-size:8px;letter-spacing:.14em;margin-bottom:8px}.merchant-details summary b{font-size:20px;color:var(--blue);font-weight:400}.merchant-details[open] summary b{transform:rotate(45deg)}.merchant-body{padding:0 25px 25px}.tabs{display:flex;overflow:auto;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line);scrollbar-width:thin}.tabs button{background:transparent;border:1px solid transparent;border-radius:4px;padding:11px 19px;color:#697d9a;font-size:12px;white-space:nowrap}.tabs button[aria-selected="true"]{background:#e5edff;border-color:#d1ddfb;color:#204ca5;font-weight:700}.tabs button:hover{background:#eef3fc}.merchant-panel-inner{display:grid;grid-template-columns:1fr 1.6fr;gap:50px;padding-top:28px;align-items:start}.merchant-copy{padding-top:17px}.merchant-copy h3{font-size:24px;line-height:1.4;letter-spacing:-.03em;margin-bottom:18px}.merchant-copy p{font-size:13px;color:var(--muted)}.merchant-image{border:1px solid #d8e1f1;cursor:zoom-in;padding:0;background:white;border-radius:6px;overflow:hidden;height:370px}.merchant-image img{width:100%;height:auto;object-position:top}.merchant-copy>span{display:block;font-size:11px;color:var(--blue);margin-top:22px}
.experience{background:#f5f7fc}.preview-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start;margin-top:40px}.preview-label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;margin-bottom:16px;color:#7d8da5}.preview-label strong{font-size:10px;color:#496489;letter-spacing:.1em;font-weight:600}.device-browser{border:6px solid #233249;border-radius:11px;overflow:hidden;box-shadow:0 15px 35px #22385315;background:white}.device-browser .browser-chrome{height:29px}.page-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9dabc1 #edf1f8;background:white;height:558px;position:relative}.page-scroll img{width:100%;height:auto;max-width:none}.page-scroll:focus-visible{outline-offset:-4px}.device-phone{border:6px solid #233249;border-radius:25px;background:#233249;overflow:hidden;box-shadow:0 15px 35px #22385320;width:270px;margin:0 auto}.phone-top{height:29px;display:flex;align-items:center;justify-content:center}.phone-top span{height:6px;width:50px;border-radius:6px;background:#101c2c}.device-phone .page-scroll{border-radius:0 0 17px 17px;height:558px}.preview-grid figcaption{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:18px;font-size:10px;color:#8795ab}.mobile-preview figcaption{display:block;text-align:center}.preview-jumps{display:flex;align-items:center;gap:6px}.preview-jumps button{background:#fff;border:1px solid #ccd7e8;padding:6px 11px;font-size:10px;border-radius:3px;color:#5c7294}.preview-jumps button:hover{border-color:#668ac6;color:var(--blue)}.mobile-preview .preview-jumps{justify-content:center;margin-bottom:10px}.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:48px}.journey article{border-top:1px solid #cbd7e8;padding-top:20px}.journey span{font-size:9px;letter-spacing:.1em;color:#7d99c2}.journey h3{font-size:18px;margin:12px 0 9px;letter-spacing:-.03em}.journey p{color:#7c8aa0;font-size:12px}.preview-note{font-size:10px;color:#92a0b4;margin-top:26px}
.research{background:white;padding-bottom:100px}.research-heading{max-width:790px;margin:40px 0 36px}.research-heading h2{font-size:clamp(34px,4vw,56px);line-height:1.25;letter-spacing:-.045em;margin:17px 0 25px}.research-heading h2 em{font-style:normal;color:var(--blue)}.research-heading>p:last-child{font-size:14px;color:var(--muted);max-width:690px}.research-summary{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid #d4dff0;border-radius:6px;background:#f5f8fe;overflow:hidden}.summary-main{padding:32px 35px}.mini-label{font-size:9px;letter-spacing:.11em;font-weight:700;color:#728caf}.summary-main ol{margin:25px 0 0;padding-left:21px}.summary-main li{padding-left:13px;color:#6381b1;margin-bottom:23px;font-size:13px}.summary-main li:last-child{margin-bottom:0}.summary-main strong{font-size:16px;color:#233f66;font-weight:600;line-height:1.6}.summary-main p{font-size:12px;color:#7789a3;margin-top:5px}.sus-card{padding:32px 35px;background:#edf2fd;border-left:1px solid #d4dff0}.sus-score{display:flex;justify-content:space-between;align-items:end;margin-top:24px;font-size:13px;color:#526a92}.sus-score>span small{display:block;font-size:9px;margin-top:5px;color:#8298b7}.sus-score strong{font-size:34px;line-height:1;letter-spacing:-.035em;font-weight:600;color:#2c5fc2}.sus-score strong small{font-size:10px;letter-spacing:0;color:#859dc5;margin-left:7px;font-weight:500}.sus-track{height:6px;background:#dce5f7;margin-top:12px;border-radius:3px;overflow:hidden}.sus-track i{height:100%;display:block;background:#527de0;border-radius:3px}.sus-track.second i{background:#89a4dd}.sus-card>p{font-size:11px;line-height:1.75;color:#7c91b2;margin-top:25px}.research-method{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;padding:24px 0;border-bottom:1px solid var(--line)}.research-method strong{font-size:12px;display:block;margin-bottom:8px;font-weight:500;color:#50698f}.research-method span{font-size:10px;color:#8091aa}.research-method p{font-size:10px;color:#8a98ad;grid-column:1/-1}.insights-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:52px 0 23px}.insights-heading h3{font-size:23px;letter-spacing:-.035em}.insights-heading p{font-size:11px;color:#8c9ab0}.research-tabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:white}.insight-panel{border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;background:#fbfcff;min-height:646px;padding:34px}.insight-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:50px}.insight-copy{padding-top:12px}.insight-copy h3{font-size:26px;letter-spacing:-.035em;line-height:1.45;margin:16px 0 18px}.insight-copy>p{font-size:13px;color:var(--muted)}.insight-copy ul{padding:0;margin:23px 0;list-style:none}.insight-copy li{border-top:1px solid #dae3ef;padding:13px 0;line-height:1.75;font-size:12px;color:#6c7f9b}.insight-copy li strong{color:#2c456a;font-weight:600}.insight-quote{border-left:2px solid #87a5df;margin:20px 0 0;padding:4px 0 4px 18px;color:#425e85;font-size:13px;line-height:1.8}.insight-quote cite{display:block;font-size:9px;color:#8a9cba;font-style:normal;margin-top:10px}.insight-response{background:#eaf1ff;padding:17px 20px;border-radius:4px;margin-top:24px}.insight-response>span{font-size:9px;letter-spacing:.09em;color:#6184c3;font-weight:700}.insight-response p{font-size:12px;color:#4c6da4;line-height:1.8;margin-top:8px}.insight-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;justify-content:center;max-width:580px;justify-self:end;width:100%}.insight-media figure{min-width:0}.insight-image{background:#fff;border:3px solid #d7e0ed;border-radius:12px;padding:0;overflow:hidden;cursor:zoom-in;width:100%;height:472px;position:relative}.insight-image img{width:100%;height:auto}.insight-image:after{content:"↗";position:absolute;right:8px;bottom:8px;background:#203e6be6;color:#fff;padding:5px 9px;font-size:11px;border-radius:3px}.insight-media figcaption{font-size:10px;color:#758bac;margin-top:12px;line-height:1.7}.insight-media figcaption strong{display:block;font-weight:600;color:#3e5d8d;margin-bottom:5px}.insight-source{border-top:1px solid var(--line);padding-top:16px;margin-top:29px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;color:#8b9cb3}.insight-source button{border:0;background:none;color:#5c7fb9;font-size:10px;padding:4px 0;text-decoration:underline;text-underline-offset:4px}.iteration{margin-top:62px}.iteration-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 80px;align-items:end}.iteration-head>.mini-label{grid-column:1/-1}.iteration-head h3{font-size:31px;letter-spacing:-.035em;line-height:1.4}.iteration-head p{font-size:13px;color:var(--muted);max-width:510px}.iteration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:27px;margin-top:33px}.iteration-grid article{border-top:1px solid #c7d6ed;padding-top:19px}.iteration-grid span{font-size:8px;letter-spacing:.1em;color:#8198bd}.iteration-grid h4{font-size:17px;letter-spacing:-.025em;line-height:1.5;margin:13px 0 10px}.iteration-grid p{font-size:11px;color:#7c8da7}.revised-flow{display:grid;grid-template-columns:1fr 90px 1fr 90px 1fr;align-items:center;gap:20px;max-width:1020px;margin:48px auto 0;background:#f4f7fd;border:1px solid #dce6f4;padding:30px 40px;border-radius:6px}.revision-image{padding:0;border:1px solid #d5deec;background:#fff;border-radius:11px;overflow:hidden;cursor:zoom-in}.revision-image img{width:100%;height:auto}.revision-arrow{text-align:center;color:#7091c8;font-size:10px}.revision-arrow b{display:block;font-weight:400;font-size:24px;margin-top:13px}.research-footer{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid var(--line);padding-top:25px;margin-top:38px;color:#798fac;font-size:11px}.research-footer a{white-space:nowrap;color:#416aa8;text-decoration:underline;text-underline-offset:4px}.footer{background:#172742;color:#d7e3f7;padding:60px 0 95px}.footer-inner{display:flex;align-items:end;justify-content:space-between;gap:25px}.footer span{font-size:9px;letter-spacing:.13em;color:#8fa6ce}.footer strong{display:block;font-size:28px;letter-spacing:-.035em;margin-top:15px}.footer-links{display:flex;gap:30px;font-size:10px;color:#abc1e4}
#image-dialog{border:1px solid #d0d9e8;background:white;color:var(--ink);padding:0;width:min(96vw,1600px);max-width:1600px;max-height:94vh;box-shadow:0 25px 80px #12284c55;border-radius:6px}#image-dialog::backdrop{background:#18243ccb;backdrop-filter:blur(5px)}.dialog-bar{min-height:55px;padding:12px 20px;display:flex;gap:24px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px}.dialog-bar button{border:0;background:none;font-size:25px;padding:0 6px;flex-shrink:0}.dialog-tools{display:flex;align-items:center;gap:14px;padding:10px 20px;border-bottom:1px solid var(--line);font-size:11px}.dialog-tools button{background:#eef3ff;border:1px solid #cfdbef;border-radius:3px;padding:5px 11px}.dialog-tools output{min-width:40px;text-align:center}.dialog-tools>span{margin-left:auto;color:#96a3b8;font-size:10px}.dialog-scroll{overflow:auto;max-height:calc(94vh - 110px);background:#e9eff8;overscroll-behavior:contain}.dialog-scroll img{height:auto;max-width:none;width:100%;margin:auto;display:block}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header{padding:0 32px}.hero-layout{gap:32px;min-height:610px}.hero h1{font-size:45px}.hero-lede{font-size:18px}.hero-art{height:440px}.hero-browser{height:337px}.hero-phone{height:365px;border-radius:19px;border-width:4px}.hero-meta{gap:25px}.section-heading{gap:50px}.preview-grid{grid-template-columns:minmax(0,1fr) 240px;gap:30px}.device-phone{width:230px}.page-scroll,.device-phone .page-scroll{height:485px}.ecosystem article{padding:25px 20px}.ecosystem h3{font-size:17px}.research-summary{grid-template-columns:1.4fr 1fr}.insight-layout{gap:32px;grid-template-columns:1fr 1.1fr}.insight-media{gap:14px}.insight-image{height:425px}.insight-panel{padding:28px}.iteration-grid{gap:20px}.revised-flow{padding:25px;grid-template-columns:1fr 70px 1fr 70px 1fr;gap:12px}}
@media(max-width:1100px){.hero-layout{grid-template-columns:1fr;min-height:0;padding-top:50px}.hero-art{max-width:640px;width:100%;justify-self:center;height:450px;margin-top:25px}.hero-browser{height:360px;width:90%}.hero-phone{width:30%;height:390px}.hero h1{font-size:52px}.hero-intro{max-width:560px}.hero-meta{max-width:570px}.section-heading{grid-template-columns:1fr;gap:23px}.section-heading>p{max-width:650px}.ecosystem{grid-template-columns:1fr 22px 1fr 22px 1fr;gap:7px}.ecosystem article{padding:25px 15px}.ecosystem article>span{font-size:7px}.ecosystem h3{font-size:16px}.ecosystem p{font-size:10px}.merchant-panel-inner{grid-template-columns:1fr;gap:25px}.merchant-copy{padding-top:0}.merchant-image{height:350px}.preview-grid{gap:25px;grid-template-columns:1fr 230px}.page-scroll,.device-phone .page-scroll{height:455px}.preview-grid figcaption{display:block}.desktop-preview .preview-jumps{margin-bottom:10px}.journey{gap:25px}.research-summary{grid-template-columns:1.4fr 1fr}.summary-main,.sus-card{padding:27px}.summary-main li{padding-left:7px}.summary-main strong{font-size:14px}.insight-layout{grid-template-columns:1fr;gap:30px}.insight-copy{padding-top:0}.insight-media{justify-self:center;max-width:510px;gap:35px}.insight-image{height:470px}.iteration-head{grid-template-columns:1fr;gap:20px}.iteration-grid{grid-template-columns:repeat(2,1fr);gap:28px}.revised-flow{padding:25px 20px;gap:10px;grid-template-columns:1fr 50px 1fr 50px 1fr}.revision-arrow{font-size:8px}.research-footer{gap:25px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:66px;padding:0 20px}.brand{font-size:10px;gap:9px}.brand-mark{width:29px;height:29px;font-size:9px}.brand small,.header-project{display:none}.header nav{gap:15px;font-size:10px}.header nav a:first-child{display:none}.hero-layout{padding:37px 0 43px;gap:25px}.hero .eyebrow{font-size:8px;letter-spacing:.1em}.hero h1{font-size:39px;margin:24px 0 19px}.hero-lede{font-size:17px;line-height:1.65}.hero-intro{font-size:12px;margin:17px 0 21px}.hero-meta{gap:23px;margin-top:27px;padding-top:17px}.hero-meta strong{font-size:10px}.hero-meta span{font-size:8px}.button{font-size:11px;padding:12px 18px;gap:24px}.hero-art{height:320px;margin-top:15px}.hero-browser{height:267px;width:91%;border-width:4px}.hero-phone{width:33%;height:276px;bottom:21px;border-width:3px;border-radius:17px}.hero-art-label{font-size:7px;letter-spacing:.1em;bottom:0}.browser-chrome{height:22px;padding:0 9px}.browser-chrome span{font-size:5px}.browser-chrome i{width:4px;height:4px}.section{padding:60px 0;scroll-margin-top:12px}.section-id{font-size:8px;letter-spacing:.1em}.section-id>span:last-child{display:none}.section-heading{margin:31px 0 29px;gap:22px}.section-heading h2{font-size:29px}.section-heading>p{font-size:12px}.ecosystem{grid-template-columns:1fr;gap:7px}.ecosystem article{min-height:0;padding:20px}.ecosystem h3{font-size:18px;margin:12px 0 8px}.ecosystem p{font-size:11px}.ecosystem article>span{font-size:8px}.ecosystem-arrow{transform:rotate(90deg);font-size:18px;line-height:1}.context-note{font-size:10px;margin-top:20px}.merchant-details{margin-top:24px}.merchant-details summary{padding:19px 18px;font-size:12px}.merchant-details summary small{font-size:7px}.merchant-body{padding:0 18px 18px}.tabs{gap:2px;padding-bottom:10px}.tabs button{padding:10px 13px;font-size:10px}.merchant-copy h3{font-size:22px}.merchant-copy p{font-size:12px}.merchant-image{height:240px}.preview-grid{grid-template-columns:1fr;gap:38px;margin-top:30px}.preview-label{font-size:9px;margin-bottom:13px}.device-browser{border-width:4px;border-radius:7px}.device-browser .browser-chrome{height:24px}.page-scroll{height:350px}.mobile-preview{max-width:310px;width:100%;margin:auto}.device-phone{width:270px;border-width:5px}.device-phone .page-scroll{height:495px}.preview-grid figcaption{font-size:9px}.preview-jumps button{font-size:9px;padding:6px 11px}.journey{grid-template-columns:1fr;gap:25px;margin-top:34px}.journey h3{font-size:17px}.journey p{font-size:11px}.preview-note{font-size:9px}.research-heading{margin:31px 0 28px}.research-heading h2{font-size:34px;margin:16px 0 21px}.research-heading>p:last-child{font-size:12px}.research-heading .eyebrow{font-size:9px}.research-summary{grid-template-columns:1fr}.summary-main{padding:26px 22px}.summary-main ol{padding-left:15px;margin-top:22px}.summary-main strong{font-size:14px}.summary-main p{font-size:11px}.sus-card{border-left:0;border-top:1px solid #d4dff0;padding:25px 22px}.sus-score{margin-top:21px}.sus-score strong{font-size:32px}.research-method{grid-template-columns:1fr;gap:18px;padding:23px 0}.research-method>div{display:flex;justify-content:space-between;gap:15px;align-items:center}.research-method strong{font-size:10px;margin:0}.research-method span{font-size:9px}.research-method p{font-size:9px}.insights-heading{display:block;margin-top:39px}.insights-heading h3{font-size:21px}.insights-heading p{font-size:10px;margin-top:10px}.research-tabs button{padding:10px 15px;font-size:11px}.insight-panel{padding:25px 18px;min-height:0}.insight-copy h3{font-size:24px;margin:14px 0 17px}.insight-copy>p{font-size:12px}.insight-copy li{font-size:11px}.insight-quote{font-size:12px;padding-left:14px}.insight-response{padding:15px 16px}.insight-response p{font-size:11px}.insight-media{gap:15px}.insight-image{height:340px;border-width:2px;border-radius:9px}.insight-media figcaption{font-size:9px}.insight-source{font-size:9px;display:block}.insight-source button{margin-top:10px;font-size:9px}.iteration{margin-top:45px}.iteration-head h3{font-size:28px}.iteration-head p{font-size:12px}.iteration-grid{gap:26px 20px}.iteration-grid h4{font-size:16px}.iteration-grid p{font-size:10px}.iteration-grid span{font-size:7px}.revised-flow{grid-template-columns:1fr;max-width:300px;padding:26px 35px;gap:19px;margin-top:32px}.revision-arrow{font-size:10px}.revision-arrow b{transform:rotate(90deg);margin-top:4px;font-size:22px}.research-footer{display:block;font-size:10px;margin-top:30px}.research-footer a{display:inline-block;margin-top:17px;font-size:10px}.footer{padding:43px 0 105px}.footer-inner{display:block}.footer strong{font-size:24px}.footer span{font-size:8px}.footer-links{margin-top:28px;font-size:9px;gap:27px}.dialog-tools>span{display:none}.dialog-bar{font-size:10px;padding:12px 14px}.dialog-tools{padding:9px 14px;gap:10px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.open-preview{background:none;border:0;padding:0;font-size:10px;color:#7792ba;text-decoration:underline;text-underline-offset:3px}

/* ===== Unified spec (tasks/unify.md): shared type scale, Inter + Noto Sans TC, mono labels,
   #dcdcdc greys on the dark footer, auto-hiding sticky header, 90px / 1400px desktop column.
   Mock-up content inside the device previews keeps its own sizes. ===== */
:root{font-family:var(--font-sans)}
.eyebrow,.section-id,.mini-label,.brand small,.header-project,.hero-meta span,.preview-label,.insight-response>span,.footer span,.footer-links{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;font-weight:500}
/* labels / tags */
.eyebrow,.section-id,.section-id>span:last-child,.mini-label,.header-project,.hero-meta span,.preview-label,.preview-label strong,.preview-note,.context-note,.insight-response>span,.insight-media figcaption,.insight-source,.research-footer,.footer span,.footer-links{font-size:var(--t-tag-size);line-height:var(--t-tag-line)}
.header nav{font-size:var(--t-small-size);line-height:var(--t-small-line)}
/* hero 大標題 */
.hero h1{font-size:var(--t-h1-size);line-height:var(--t-h1-line);font-weight:700}
.hero-lede{font-size:var(--t-h5-size);line-height:var(--t-h5-line)}
.hero-intro{font-size:var(--t-body-size);line-height:var(--t-body-line)}
.hero-meta strong{font-size:var(--t-small-size);line-height:var(--t-small-line)}
/* section titles 中標題 */
.section-heading h2,.research-heading h2{font-size:var(--t-h2-size);line-height:var(--t-h2-line);font-weight:700;letter-spacing:-.02em}
.section-heading>p,.research-heading>p:last-child{font-size:var(--t-body-size);line-height:var(--t-body-line)}
/* 超小標題 1 / 2 / 3 */
.iteration-head h3,.insight-copy h3{font-size:var(--t-h4-size);line-height:var(--t-h4-line);font-weight:700}
.merchant-copy h3,.insights-heading h3,.footer strong{font-size:var(--t-h5-size);line-height:var(--t-h5-line);font-weight:700}
.ecosystem h3,.iteration-grid h4,.summary-main strong{font-size:var(--t-h6-size);line-height:var(--t-h6-line);font-weight:700}
/* 小描述 / tab */
.ecosystem p,.merchant-copy p,.tabs button,.summary-main li,.summary-main p,.sus-card>p,.research-method p,.insights-heading p,.insight-copy>p,.insight-copy li,.insight-quote,.insight-response p,.iteration-head p,.iteration-grid p{font-size:var(--t-small-size);line-height:var(--t-small-line)}
/* buttons */
.button{font-size:var(--t-btn-m-size);line-height:var(--t-btn-m-line);font-weight:var(--t-btn-m-weight)}
.open-preview,.preview-jumps button,.insight-source button{font-size:var(--t-btn-s-size);line-height:var(--t-btn-s-line);font-weight:var(--t-btn-s-weight)}
/* dark footer greys -> #dcdcdc */
.footer span,.footer-links{color:#dcdcdc}

/* Header: sticky, slides away while scrolling down, returns on scroll up. */
.header{position:sticky;top:0;z-index:50;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.header.is-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.header{transition:none}}
/* Desktop gutters: 90px sides, 1400px column; header aligned to it. */
@media(min-width:0px){.wrap{width:min(1400px,calc(100% - 2 * var(--gutter)))}.header{padding:0 max(var(--gutter),calc((100% - 1400px)/2))}}

/* Keep both device frames and their shortcuts within a short desktop viewport. */
.preview-grid{--device-height:min(590px,calc(100svh - 220px));grid-template-columns:minmax(0,1fr) calc(var(--device-height)*.46);gap:32px;scroll-margin-top:80px}
.preview-grid>.desktop-preview,.preview-grid>.mobile-preview{min-width:0;margin:0}
.preview-grid .preview-label{min-height:24px;margin-bottom:8px;gap:12px}
.preview-grid .preview-jumps{justify-content:flex-start;min-height:38px;margin:8px 0 10px;gap:6px}
.preview-grid .preview-jumps button{min-height:34px;padding:4px 12px}
.preview-jumps button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:white}
.preview-grid .device-browser,.preview-grid .device-phone{height:var(--device-height);box-sizing:border-box}
.preview-grid .device-browser .page-scroll{height:calc(var(--device-height) - 41px)}
.preview-grid .device-phone{width:100%;max-width:none}
.preview-grid .device-phone .page-scroll{height:calc(var(--device-height) - 43px)}
.preview-grid figcaption{margin-top:8px}
@media(max-width:760px){.preview-grid{grid-template-columns:1fr;--device-height:min(510px,calc(100svh - 180px))}.preview-grid>.mobile-preview{max-width:270px;width:100%;margin:auto}.preview-grid .device-browser .page-scroll{height:calc(var(--device-height) - 32px)}}

/* Merchant setup is a standalone second section. */
.merchant-section .merchant-body{padding:0}
.merchant-section .section-heading{margin-bottom:28px}

.detail-tabs{gap:16px;margin-bottom:20px;border-bottom:0;padding-bottom:0}
.detail-tabs button{font-size:var(--t-h5-size);padding:12px 20px}
.detail-tabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
[hidden]{display:none!important}
@media(max-width:760px){.detail-tabs{gap:4px}.detail-tabs button{font-size:16px;padding:10px 12px}}

/* KV: two phones like the home cover; --y is the offset into mobile-full.webp (617px wide) */
.kv-phones{height:560px}
.kv-phone{position:absolute;aspect-ratio:9/19.3;border:10px solid #0d121b;border-radius:46px;overflow:hidden;background:#fff;box-shadow:0 30px 60px #10204033,inset 0 0 0 1px #2a3446}
.kv-phone img{width:100%;height:auto;margin-top:calc(var(--y) / 617 * -100%)}
.kv-p1{--y:2840;width:40%;left:6%;top:9%;transform:rotate(-10deg)}
.kv-p2{--y:4330;width:44%;right:4%;top:1%;z-index:2;transform:rotate(11deg)}
@media(max-width:1100px){.kv-phones{height:480px}.kv-phone{border-width:8px;border-radius:38px}}
@media(max-width:760px){.kv-phones{height:min(440px,112vw)}.kv-phone{border-width:6px;border-radius:28px}}

/* 02: one tab bar above both devices */
.preview-tabs{display:flex;justify-content:center;gap:6px;margin-top:8px;padding:6px;border:1px solid var(--line);border-radius:999px;background:#fff;width:max-content;margin-inline:auto}
.preview-tabs button{border:0;background:transparent;border-radius:999px;padding:10px 26px;font-size:13px;color:#5c7294}
.preview-tabs button[aria-pressed="true"]{background:var(--blue);color:#fff;font-weight:700}
.preview-tabs button:hover:not([aria-pressed="true"]){background:#eef3fc}
.preview-grid{margin-top:28px}

/* 03: backend panel is about one screen tall; the screen scrolls inside */
.merchant-body{padding:0}
.merchant-panel-inner{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:stretch}
.merchant-copy{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.merchant-copy span{font-size:12px;color:#7d8da5}
.merchant-scroll{max-height:min(calc(100vh - 220px),680px);overflow:auto;overscroll-behavior:contain;border:1px solid #d8e1f1;border-radius:8px;background:#fff;scrollbar-width:thin;scrollbar-color:#9dabc1 #edf1f8}
.merchant-scroll img{width:100%;height:auto}
@media(max-width:1100px){.merchant-panel-inner{grid-template-columns:1fr;gap:20px}.merchant-scroll{max-height:min(70vh,560px)}}
@media(max-width:760px){.merchant-scroll{max-height:60vh}}

/* 04: why -> findings -> evidence -> final */
.research-block{margin-top:72px}
.research-block:first-of-type{margin-top:40px}
.research-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.block-copy h2{font-size:clamp(30px,3.2vw,45px);line-height:1.3;letter-spacing:-.05em;margin:16px 0 20px}
.block-copy h2 em,.block-title em{font-style:normal;color:var(--blue)}
.block-copy>p,.block-lede{font-size:14px;color:var(--muted);max-width:620px}
.research-why .research-method{margin-top:26px;border-top:1px solid var(--line)}
.block-title{font-size:clamp(22px,2.2vw,30px);line-height:1.4;letter-spacing:-.03em;margin:12px 0 24px}
.version-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.version-card{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.version-image{display:block;width:100%;height:340px;padding:0;border:0;border-bottom:1px solid var(--line);background:#f5f7fc;overflow:hidden;cursor:zoom-in}
.version-image img{width:100%;height:auto}
.version-card figcaption{padding:16px 18px 18px}
.version-card strong{font-size:14px;color:var(--ink)}
.version-card ul{margin:10px 0 0;padding-left:18px;font-size:12px;line-height:1.9;color:var(--muted)}
.research-final .revised-flow{margin-top:28px}
@media(max-width:1100px){.research-why{grid-template-columns:1fr;gap:32px}}
@media(max-width:760px){.research-block{margin-top:52px}.version-image{height:260px}.preview-tabs button{padding:9px 18px}}
.version-shots{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.version-shots .version-image{height:320px;border:0}
@media(max-width:760px){.version-shots .version-image{height:240px}}
@media(max-width:760px){.kv-phones{height:88vw;margin-top:8px}.version-cards{grid-template-columns:1fr}.version-shots .version-image{height:300px}}
/* Phone screenshots keep a phone-screen ratio at every width */
.version-shots .version-image,.insight-image,.revision-image{height:auto!important;aspect-ratio:9/19;overflow:hidden}
@media(max-width:760px){.version-shots .version-image{height:auto!important}}
.research-why .research-method strong{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.research-why .research-method span{font-size:14px;line-height:1.6;color:var(--muted)}
@media(max-width:760px){.research-why .research-method{grid-template-columns:1fr;gap:16px}.research-why .research-method strong{font-size:18px}}
.research .summary-main strong{font-size:18px}
.research .summary-main p{font-size:14px;line-height:1.7}
.version-card strong{font-size:16px}
.version-card ul{font-size:14px}
.research .sus-card>p{font-size:13px}
.version-note{grid-column:2;margin-top:-40px;font-size:13px;color:var(--muted)}
@media(max-width:1100px){.version-note{grid-column:1;margin-top:-16px}}
/* Response + quote merged into one compact block */
.insight-response{margin-top:18px;padding:14px 16px;border-left:3px solid var(--blue);border-radius:0 6px 6px 0}
.insight-response p{margin:0}
.insight-response b{color:var(--blue);font-weight:700;margin-right:10px}
.insight-response .insight-quote-line{margin-top:8px;padding-top:8px;border-top:1px solid #cfdcf6;color:#5d759b}
.insight-quote-line cite{font-style:normal;color:#8a9cba;margin-left:8px;font-size:12px}
/* KV phones: smaller, softer shadow, fit in the first screen */
.kv-phones{height:min(500px,calc(100vh - 230px));min-height:400px}
.kv-phone{box-shadow:0 14px 30px #1020401f;border-width:9px;border-radius:42px}
.kv-p1{width:34%;left:10%;top:9%}
.kv-p2{width:37%;right:8%;top:1%}
@media(max-width:760px){.kv-phones{height:88vw;min-height:0}.kv-phone{border-width:6px;border-radius:28px}}
/* Device tabs align left with the heading */
.preview-tabs{margin-inline:0}
/* KV phones overlap like the home cover */
.kv-p1{width:36%;left:12%;top:10%}
.kv-p2{width:39%;left:40%;right:auto;top:2%}
@media(max-width:760px){.kv-phones{height:104vw}.kv-p1{width:44%;left:4%;top:9%}.kv-p2{width:48%;left:44%;top:0}}
/* KV phones sized by height so they never reach the bottom of the first screen */
.kv-phones{height:min(520px,calc(100vh - 260px));min-height:380px}
.kv-phone{width:auto!important}
.kv-p1{height:80%;left:12%;top:12%}
.kv-p2{height:88%;left:42%;top:2%}
@media(max-width:760px){.kv-phones{height:104vw;min-height:0}.kv-p1{height:84%;left:4%;top:10%}.kv-p2{height:92%;left:44%;top:0}}
/* Type scale alignment (shared/type.css roles) */
.block-copy h2{font-size:var(--t-h2-size);line-height:var(--t-h2-line);letter-spacing:var(--t-h2-tracking)}
.block-title{font-size:var(--t-h4-size);line-height:var(--t-h4-line);font-weight:700;letter-spacing:0}
.research-why .research-method strong{font-size:var(--t-h5-size);line-height:var(--t-h5-line)}
.sus-score strong{font-size:var(--t-h3-size);line-height:var(--t-h3-line)}
.sus-score span,.research .sus-card>p,.version-note,.preview-tabs button{font-size:var(--t-small-size);line-height:var(--t-small-line)}
.sus-score small,.sus-score strong small,.revision-arrow span,figcaption>span{font-size:var(--t-tag-size);line-height:var(--t-tag-line)}
.sus-score span small{font-size:var(--t-tag-size);line-height:var(--t-tag-line)}
.research-final .revised-flow{max-width:none;width:100%}
/* KV phones +20% */
.kv-phones{height:min(624px,calc(100vh - 170px));min-height:440px}
.kv-p1{left:6%}
.kv-p2{left:38%}
.research-final .revised-flow{grid-template-columns:minmax(0,260px) 120px minmax(0,260px) 120px minmax(0,260px);justify-content:center}
@media(max-width:760px){.research-final .revised-flow{grid-template-columns:1fr}}
.kv-phones{top:-50px;left:50px}
@media(max-width:1100px){.kv-phones{top:0;left:0}}
.hero{background:#fff!important}

/* ===== Mobile: each block fits within one screen ===== */
@media(max-width:760px){
  .kv-phones{height:300px;min-height:0;top:0;margin-top:4px}
  .kv-p1{height:84%;left:10%;top:10%}
  .kv-p2{height:94%;left:42%;top:0}
  /* one device is enough on a phone; the tabs still drive it */
  .desktop-preview{display:none}
  .preview-grid{margin-top:20px}
  .mobile-preview{max-width:none}
  .device-phone{width:236px}
  .device-phone .page-scroll{height:min(440px,60vh)}
  .merchant-scroll{max-height:52vh}
  /* side-by-side swipers instead of tall stacks */
  .version-cards,.research-final .revised-flow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;scroll-padding:0 24px;max-width:none}
  .version-cards::-webkit-scrollbar,.research-final .revised-flow::-webkit-scrollbar{display:none}
  .version-card{flex:0 0 84%;scroll-snap-align:start}
  .version-shots .version-image{aspect-ratio:auto!important;height:240px!important}
  .version-card figcaption{padding:12px 14px 14px}
  .version-card ul{margin-top:6px;line-height:1.7}
  .version-note{margin-top:4px}
  .research-final .revised-flow{padding-top:18px;padding-bottom:18px;border-radius:0;border-left:0;border-right:0;align-items:center}
  .research-final .revision-image{flex:0 0 56%;scroll-snap-align:center}
  .research-final .revision-arrow{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px}
  .research-final .revision-arrow b{transform:none}
  /* evidence: keep the claim, screenshots and response; drop the long point list */
  .insight-copy ul{display:none}
  .insight-copy h3{margin:10px 0 10px}
  .insight-panel{padding:20px 16px}
  .insight-layout{gap:18px}
  .insight-response{margin-top:12px}
  .summary-main,.sus-card{padding:20px 18px}
  .summary-main ol{margin-top:0}
  .summary-main li{margin-bottom:14px}
  .research-block{margin-top:44px}
}
.insight-copy>p{font-size:var(--t-body-size);line-height:var(--t-body-line)}
@media(max-width:760px){.hero-layout{padding-bottom:20px}.kv-phones{height:270px}}
@media(max-width:760px){.research-final .revision-image{scroll-snap-align:start}.research-final .revised-flow{margin-top:20px}}
@media(max-width:760px){.research-final .revised-flow,.version-cards{justify-content:flex-start;width:auto}.research-final .revision-image{flex:0 0 62%}}
@media(max-width:760px){.merchant-scroll{aspect-ratio:2896/1536;max-height:none;height:auto}}
/* Mobile final flow: same screenshot size as the evidence tabs, swipe sideways */
@media(max-width:760px){
  .research-final .revision-image{flex:0 0 139px;border:2px solid #d7e0ed;border-radius:9px}
  .research-final .revision-arrow{flex:0 0 64px;text-align:center}
  .research-final .revision-arrow span{white-space:normal}
  .research-final .revised-flow{gap:10px}
}
@media(max-width:760px){.research-final .revision-arrow{flex-basis:84px}.research-final .revision-arrow span{white-space:nowrap}}
/* Section descriptions sit in the right column, flush with the right edge */
.section-heading>p{justify-self:end;max-width:560px}
/* Unify pass 2: phones sized like Brand UI's (≈ full box height), right edge on the content edge. */
@media(min-width:761px){
  section#top[data-kv] .kv-p2{height:96%!important;top:2%!important;left:auto!important;right:8%!important}
  section#top[data-kv] .kv-p1{height:88%!important;top:9%!important;left:auto!important;right:40%!important}
}

/* Unify pass 2: section spacing 88 / compact 56 (phone 56 / 40) and section titles on the h2 role. */
main section#experience,main section#merchant,main section#research{padding-top:88px!important;padding-bottom:88px!important}
@media(max-width:760px){main section#experience,main section#merchant,main section#research{padding-top:56px!important;padding-bottom:56px!important}}

/* Tablet: section titles stack above their intro so authored line breaks hold. */
@media(min-width:761px) and (max-width:1399px){main .section-heading{display:block}main .section-heading>p{max-width:none;margin-top:24px}}
/* KV phones: frame thickness and corner radius scale with the phone pair (Figma 598-wide frame: 10.1px / 47.3px), so a smaller KV is the same drawing, just smaller. */
section#top.kv-shopline-group-buy[data-kv] .kv-phones[data-kv-art]{container-type:inline-size}
section#top.kv-shopline-group-buy[data-kv] .kv-phone{border-width:1.694cqw!important;border-radius:7.904cqw!important}
/* KV keeps its 1440 size at every desktop/tablet width; the art slides in under the copy column's empty side until it would reach the text, then the KV stacks. */
@media(min-width:761px){section#top.kv-shopline-group-buy[data-kv] .kv-phones[data-kv-art]{width:596px!important;max-width:none!important;justify-self:end!important}}
@media(min-width:761px) and (max-width:1199px){
 section#top.kv-shopline-group-buy[data-kv] [data-kv-grid]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;row-gap:48px}
 section#top.kv-shopline-group-buy[data-kv] .kv-phones[data-kv-art]{justify-self:center!important;margin:0 auto!important}
}
/* KV eyebrow stays on one line at every width. */
#top [data-kv-eyebrow]{white-space:nowrap}
@media(max-width:760px){#top [data-kv-eyebrow]{font-size:min(12px,2.7vw)!important;letter-spacing:.08em!important}}
/* KV phones: white frame like the Beanfun KV (7.4px frame, 24px corners at full size), lifted off the white page by a soft shadow. */
section#top.kv-shopline-group-buy[data-kv] .kv-phone{border-color:#fff!important;border-width:1.24cqw!important;border-radius:4.03cqw!important;box-shadow:0 22px 55px rgba(16,32,64,.22)!important}
/* KV phones: same hover lift as Beanfun */
section#top.kv-shopline-group-buy[data-kv] .kv-phone{transition:transform .25s!important}
section#top.kv-shopline-group-buy[data-kv] .kv-phone:hover{transform:translateY(-8px) rotate(0)!important}
/* Phone: Safari mis-sized the cqw-based phones; use a fixed-size stage and px frames like Beanfun. */
@media(max-width:760px){
 section#top.kv-shopline-group-buy[data-kv] .kv-phones[data-kv-art]{container-type:normal;width:min(340px,calc(100vw - 40px))!important;height:auto!important;aspect-ratio:598/480!important}
 section#top.kv-shopline-group-buy[data-kv] .kv-phone{border-width:5px!important;border-radius:22px!important}
}
/* Phone: explicit width AND height for each phone (no %, no aspect-ratio) so Safari can't size them differently. */
@media(max-width:760px){
 section#top.kv-shopline-group-buy[data-kv] .kv-phones[data-kv-art]{--w:min(340px,calc(100vw - 40px));width:var(--w)!important;height:calc(var(--w) * .8027)!important;aspect-ratio:auto!important}
 section#top.kv-shopline-group-buy[data-kv] .kv-p1{width:calc(var(--w) * .3708)!important;height:calc(var(--w) * .7942)!important;left:calc(var(--w) * .1794)!important;top:calc(var(--w) * .0121)!important;right:auto!important;bottom:auto!important;aspect-ratio:auto!important}
 section#top.kv-shopline-group-buy[data-kv] .kv-p2{width:calc(var(--w) * .4046)!important;height:calc(var(--w) * .8676)!important;left:calc(var(--w) * .5062)!important;top:calc(var(--w) * -.0536)!important;right:auto!important;bottom:auto!important;aspect-ratio:auto!important}
}