
/* v38 — Trafpay: original Maze web case study */
#mp-page .tw-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:end;padding:44px 0 42px}
#mp-page .tw-hero h1{font-size:clamp(64px,9vw,132px);line-height:.95;letter-spacing:-.065em;margin:20px 0 26px}
#mp-page .tw-hero h2{font-size:clamp(25px,3vw,40px);font-weight:450;line-height:1.2;letter-spacing:-.035em;margin:0 0 22px}
#mp-page .tw-hero h2 em{font-family:Georgia,serif;color:#a48aff;font-weight:400}
#mp-page .tw-hero p,#mp-page .tw-story p{color:#a4adbd;line-height:1.75;font-size:16px}
#mp-page .tw-tags{display:flex;gap:8px;flex-wrap:wrap}.tw-tags span{border:1px solid #303647;border-radius:30px;padding:8px 13px;font-size:12px;color:#c2c7d1}
#mp-page .tw-facts{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:24px;border-top:1px solid #2c3040;border-bottom:1px solid #2c3040;padding:25px 0;align-items:center}
#mp-page .tw-facts small{display:block;color:#7f889b;font-size:10px;letter-spacing:.14em;margin-bottom:8px}#mp-page .tw-facts strong{font-size:14px;font-weight:500}
#mp-page .tw-story{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:58px 0 46px}#mp-page .tw-story h3{font-size:23px;font-weight:500;margin:12px 0}
#mp-page .tw-screen-section{margin:0 -24px 64px;border:1px solid #2b3040;border-radius:16px;overflow:clip;background:#0d111c}
#mp-page .tw-screen-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;background:#10141e;position:sticky;top:0;z-index:3;border-bottom:1px solid #2b3040}
.tw-screen-bar div{display:flex;align-items:center;gap:12px}.tw-screen-bar span{font-size:12px;color:#a4adbd}.tw-screen-bar i{width:7px;height:7px;border-radius:50%;background:#baff4a}
#mp-page .tw-screen{position:relative;border:0;padding:0;display:block;width:100%;background:none;line-height:0}
#mp-page .tw-screen img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
#mp-page .tw-screen::after{content:'';position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color .2s}#mp-page .tw-screen:hover::after,#mp-page .tw-screen:focus-visible::after{border-color:#baff4a}
#mp-page .tw-cta{display:flex;justify-content:space-between;gap:30px;align-items:center;border-top:1px solid #2b3040;padding:48px 0 60px}#mp-page .tw-cta h2{font-size:clamp(28px,4vw,48px);letter-spacing:-.04em;line-height:1.15;margin:12px 0}#mp-page .tw-cta em{font-family:Georgia,serif;color:#a48aff;font-weight:400}
#mp-page .tw-cta .mp-btn{background:#baff4a;color:#08100a;border-color:#baff4a}
#mp-page .tw-hero small,#mp-page .tw-story small,#mp-page .tw-cta small{color:#baff4a;letter-spacing:.13em;font-size:11px}
#mp-viewer.tw-view{padding:0;background:#080b12;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh}
#mp-viewer.tw-view .mp-view-toolbar{position:sticky;top:0;background:#10141e;z-index:2}
#mp-viewer.tw-view .mp-view-body{display:block;overflow:auto;height:calc(100dvh - 80px);padding:0}
#mp-viewer.tw-view .mp-view-body img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:contain}
#mp-viewer.tw-view.is-zoomed .mp-view-body img{width:max(1348px,100%);max-width:none}
@media(max-width:760px){#mp-page .tw-hero{grid-template-columns:1fr;gap:28px;padding-top:30px}#mp-page .tw-facts{grid-template-columns:1fr 1fr;gap:24px}#mp-page .tw-story{grid-template-columns:1fr;gap:20px;padding:35px 0}#mp-page .tw-screen-section{margin:0 -6px 40px;border-radius:10px}#mp-page .tw-screen-bar{padding:12px;flex-wrap:wrap}#mp-page .tw-cta{flex-direction:column;align-items:flex-start}#mp-page .tw-hero h1{font-size:76px}.tw-screen-bar span{font-size:11px}}
