.met-hero{position:relative;isolation:isolate;height:100svh;min-height:820px;max-height:1200px;background:#111;overflow:hidden}
.met-hero-art{position:absolute;inset:0;z-index:-3;transform:translate3d(0,var(--met-parallax,0px),0);animation:qt-hero-arrive 1.25s cubic-bezier(.2,.65,.2,1) both}
.met-hero-frame{position:absolute;overflow:hidden;border:1px solid #ffffff29;box-shadow:0 25px 80px #0007;transform:rotate(-12deg);border-radius:7px;background:#fff}
.met-hero-frame img{display:block;width:100%;height:auto}
.met-hero-dashboard{left:14vw;top:85px;width:68vw;max-width:1160px}
.met-hero-website{left:60vw;top:320px;width:58vw;max-width:980px}
.met-hero-phone{left:9vw;top:110px;width:15vw;max-width:240px;border:6px solid #151515;border-radius:25px;transform:rotate(-12deg)}
.met-hero-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#111d 0%,#1117 16%,#1110 30%,#1118 50%,#111e 81%,#111 100%),linear-gradient(90deg,#1119,#1110 55%);pointer-events:none}
.met-hero-copy{position:absolute;left:50%;bottom:48px;transform:translateX(-50%)}
.met-hero-title{display:flex;align-items:end;justify-content:space-between;gap:40px}
.met-case .met-hero h1{font-size:clamp(92px,11.7vw,188px);line-height:.85;letter-spacing:-.078em;font-weight:400;margin-top:3px}
.met-hero-descriptor{font-size:clamp(18px,2.2vw,33px);line-height:1.2;letter-spacing:-.035em;color:#d5d5d5;padding-bottom:8px;text-align:right}
.met-hero .qt-hero-bottom{margin-top:32px}
.met-case [id^="met-"]{scroll-margin-top:160px}
.met-principles{padding-block:68px 80px}
.met-principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:38px;margin-top:39px}
.met-principle-grid>div{padding-top:20px;border-top:1px solid #bbb}
.met-principle-grid h3{font-size:clamp(32px,3.8vw,59px);line-height:1;margin-top:25px;letter-spacing:-.065em}
.met-principle-grid p{font-size:17px;line-height:1.5;color:#606060;margin-top:17px;max-width:240px}
.met-website{padding-block:110px}
.met-website .qt-chapter-heading{max-width:1120px}
.met-browser{padding:22px 28px 25px;background:#202020;border:1px solid #414141}
.met-browser-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:0 18px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#c2c2c2}
.met-browser-bar>div{display:flex;gap:6px;min-width:80px}
.met-browser-bar i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid #888}
.met-browser-bar button{display:grid;place-items:center;background:none;border:1px solid #666;border-radius:50%;width:31px;height:31px;color:#eee;margin-left:47px}
.met-browser-bar button svg{width:16px;height:16px}
.met-website-scroll{max-height:780px;height:65vw;min-height:400px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#777 #ddd;border-radius:3px;background:#f4f4f4;outline-offset:4px}
.met-website-scroll img{display:block;width:100%;height:auto}
.met-browser figcaption{margin-top:18px}
.met-product{padding-block:20px 105px}
.met-split-heading{display:grid;grid-template-columns:.32fr 1fr;gap:40px;margin-bottom:54px}
.met-split-heading>.qt-eyebrow{padding-top:12px}
.met-split-heading>div>p{max-width:660px;font-size:18px;line-height:1.6;color:#b8b8b8;margin-top:28px}
.met-case .qt-desktop-screen img{aspect-ratio:3/2;object-fit:contain;background:#f7f7f7}
.met-product .qt-product-copy h3{font-size:clamp(28px,2.55vw,39px)}
.met-journey{padding-block:10px 120px}
.met-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.met-step-grid>figure>p{font-size:17px;line-height:1.5;color:#b8b8b8;margin-top:14px;max-width:330px}
.met-step-grid figcaption{font-size:10px;color:#ddd;margin-top:22px}
.met-phone-grid{grid-template-columns:repeat(4,1fr);gap:35px;max-width:1400px}
.met-phone-grid>figure:nth-child(2){margin-top:60px}
.met-phone-grid>figure:nth-child(4){margin-top:60px}
.met-phone-grid .qt-phone{border-width:7px;border-radius:30px}
.met-phone-grid .qt-phone .qt-visual{border-radius:22px}
.met-phone-grid figcaption p{font-size:17px}
.met-confirmation{display:grid;grid-template-columns:1fr .65fr;align-items:center;gap:10%;padding-block:130px}
.met-confirmation-copy h2{font-size:clamp(43px,5.5vw,83px);margin-top:27px}
.met-confirmation-copy>p:not(.qt-eyebrow){font-size:18px;line-height:1.6;max-width:590px;color:#b8b8b8;margin-top:24px}
.met-confirmation>figure{background:#252525;padding:24px 25px 22px;border:1px solid #414141}
.met-email{max-width:480px;margin-inline:auto;border:0}
.met-identity{padding-block:110px}
.met-identity .qt-chapter-heading{max-width:1040px}
.met-identity-image{border-color:#b9b9b9;background:#f4f4f4}
.met-identity figcaption{color:#666}
.met-case.met-motion [data-met-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.met-case.met-motion [data-met-reveal].met-visible{opacity:1;transform:none}
@media(min-width:1700px){.met-hero-dashboard{left:18vw}.met-hero-website{left:61vw;top:400px}.met-hero-phone{left:14vw;top:160px}}
@media(max-width:1050px){.met-hero{min-height:780px}.met-hero-dashboard{width:88vw;left:7vw;top:150px}.met-hero-website{width:74vw;left:62vw;top:430px}.met-hero-phone{width:21vw;left:2vw;top:155px}.met-hero-title{gap:20px}.met-hero-descriptor{font-size:24px}.met-split-heading{grid-template-columns:.23fr 1fr;gap:28px}.met-phone-grid{gap:23px}.met-step-grid{gap:18px}.met-confirmation{gap:7%}.met-browser{padding-inline:20px}}
@media(max-width:760px){.met-hero{height:94svh;min-height:740px;max-height:1000px}.met-hero-dashboard{width:139vw;left:6vw;top:155px}.met-hero-website{width:105vw;left:50vw;top:345px}.met-hero-phone{width:32vw;left:3vw;top:145px;border-width:4px;border-radius:19px}.met-hero-copy{bottom:31px}.met-case .met-hero h1{font-size:clamp(81px,19vw,132px);line-height:.86;letter-spacing:-.075em}.met-hero-title{align-items:end;gap:10px}.met-hero-descriptor{font-size:13px;line-height:1.3;max-width:82px;text-align:right;padding-bottom:5px;letter-spacing:-.01em}.met-hero .qt-tags{margin-bottom:23px}.met-hero .qt-hero-bottom{margin-top:25px}.met-hero .qt-hero-bottom p{max-width:270px}.met-principles{padding-block:60px}.met-principle-grid{grid-template-columns:1fr 1fr;gap:35px 25px;margin-top:29px}.met-principle-grid>div{padding-top:18px}.met-principle-grid h3{font-size:38px;margin-top:21px}.met-principle-grid p{font-size:15px;margin-top:15px}.met-website{padding-block:75px}.met-browser{padding:12px 12px 17px}.met-browser-bar{padding-bottom:12px;font-size:8px;letter-spacing:.035em;gap:9px}.met-browser-bar>div{min-width:35px;gap:4px}.met-browser-bar i{width:5px;height:5px}.met-browser-bar button{width:28px;height:28px;margin-left:7px}.met-browser-bar button svg{width:14px;height:14px}.met-website-scroll{height:475px;min-height:0;max-height:70svh}.met-browser figcaption{font-size:7px;margin-top:14px;gap:8px}.met-product{padding-block:5px 75px}.met-split-heading{grid-template-columns:1fr;gap:25px;margin-bottom:35px}.met-split-heading>.qt-eyebrow{padding:0}.met-split-heading>div>p{font-size:16px;margin-top:24px}.met-product .qt-tabs{gap:0}.met-product .qt-tabs button{font-size:11px}.met-product .qt-product-copy h3{font-size:31px}.met-journey{padding-block:5px 75px}.met-step-grid{grid-template-columns:1fr;gap:33px}.met-step-grid figcaption{font-size:10px;margin-top:17px}.met-step-grid>figure>p{font-size:16px;margin-top:11px;max-width:none}.met-phone-grid{grid-template-columns:repeat(4,minmax(230px,1fr));gap:25px;overflow-y:hidden}.met-phone-grid>figure:nth-child(2),.met-phone-grid>figure:nth-child(4){margin-top:0}.met-phone-grid .qt-phone{border-width:6px;border-radius:29px}.met-phone-grid figcaption p{font-size:16px}.met-confirmation{grid-template-columns:1fr;gap:38px;padding-block:75px}.met-confirmation-copy h2{font-size:43px;margin-top:23px}.met-confirmation-copy>p:not(.qt-eyebrow){font-size:16px;margin-top:21px}.met-confirmation>figure{padding:20px}.met-email{max-width:380px}.met-identity{padding-block:75px}.met-case [id^="met-"]{scroll-margin-top:145px}}
@media(max-width:380px){.met-hero{min-height:710px}.met-case .met-hero h1{font-size:80px}.met-hero-descriptor{display:none}.met-hero-dashboard{top:140px}.met-hero-phone{top:135px}.met-hero-website{top:315px}.met-principle-grid{gap:30px 17px}.met-principle-grid h3{font-size:33px}}
@media(prefers-reduced-motion:reduce){.met-case *,.met-case *::before,.met-case *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.met-case [data-met-reveal]{opacity:1!important;transform:none!important}.met-hero-art{transform:none!important}}
