@font-face{font-family:Quicksand;src:url('./assets/fonts/quicksand-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Quicksand;src:url('./assets/fonts/quicksand-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Quicksand;src:url('./assets/fonts/quicksand-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--yellow:#fff200;--button:#fed600;--ink:#000;--heading:'Helvetica Neue',Helvetica,Arial,sans-serif;--body:Quicksand,Arial,sans-serif;--gutter:max(32px,calc((100vw - 1200px)/2));--split:43.819444%}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:var(--heading);-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button,summary{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #2d53b9;outline-offset:6px}.skip-link{position:fixed;left:16px;top:16px;transform:translateY(-200%);z-index:10;padding:12px 20px;background:#fff}.skip-link:focus{transform:none}
.hero{background:var(--yellow);min-height:428px}.hero-inner{padding:102px var(--gutter) 100px}.hero h1{font-size:96px;font-weight:700;line-height:1.1875;letter-spacing:-4px;white-space:nowrap}.hero .last-name{letter-spacing:-4px}.role{font-size:40px;font-weight:500;line-height:48px;letter-spacing:-1px}.intro{font-size:32px;line-height:1.2;font-weight:500;margin-top:24px;letter-spacing:-.5px}
.section-nav{background:#000;color:#fff;height:72px}.nav-inner{max-width:1200px;margin:auto;height:100%;display:flex;align-items:center;justify-content:space-between}.nav-inner a{display:flex;align-items:center;justify-content:center;min-height:48px;width:225px;text-decoration:none;font-size:24px;line-height:1.4;font-weight:700;letter-spacing:-.5px;transition:color .15s}.nav-inner a:hover{color:var(--yellow)}
.project{display:grid;grid-template-columns:var(--split) 1fr;scroll-margin-top:24px}.project-copy{padding:57px 32px 40px var(--gutter);position:relative;min-width:0}.project h2,.about h2{font-size:48px;line-height:58px;font-weight:700;letter-spacing:-1.65px}.eyebrow{font-family:var(--body);font-size:16px;font-weight:500;line-height:20px;letter-spacing:.48px}.project h2{margin-top:32px;white-space:nowrap}.metric{font-size:48px;font-weight:400;line-height:58px;letter-spacing:1.44px;margin-top:12px}.metric span{font-size:32px;letter-spacing:.96px}.metric-label{font-family:var(--body);font-size:24px;line-height:30px;letter-spacing:.72px;white-space:nowrap}.description{font-family:var(--body);font-size:16px;line-height:24px;letter-spacing:.8px;max-width:389px;margin-top:16px}.pill{border:0;background:var(--button);border-radius:140px;padding:16px 24px;min-height:51px;font-size:16px;line-height:19px;font-weight:700;margin-top:24px;transition:background .15s,transform .15s}.pill:hover{background:#f2c900;transform:translateY(-2px)}.pill:active{transform:translateY(0)}.divider{position:absolute;bottom:-1px;left:var(--gutter);right:0;height:2px;overflow:hidden;z-index:1}.divider img{display:block}
.project-stream{min-height:498px}.project-autopay{min-height:471px}.project-illustrations{min-height:345px}.project-art{position:relative;overflow:hidden;background:linear-gradient(#fbfbfb 68.263%,#d5d5d5);container-type:inline-size}.stream-composition{position:absolute;left:23.486%;top:14.286%;width:55.748%;aspect-ratio:451/384}.desktop-screen{position:absolute;left:2.065%;top:4.609%;width:89.603%;height:63.511%;overflow:hidden;transform:rotate(-.18deg)}.desktop-screen img{display:block;width:100%;height:129.07%;object-fit:fill}.desktop-device{position:absolute;left:0;top:0;width:94.598%;height:97.276%;object-fit:fill}.stream-phone{position:absolute;left:74.945%;top:41.406%;width:25.055%;height:58.594%;border:3px solid #383838;border-radius:11px;overflow:hidden;box-shadow:0 4px 4.4px 1px #0002}.stream-phone img{width:100%;height:100%;object-fit:cover;display:block}
.autopay-composition{position:absolute;width:811px;height:471px;left:0;top:0;transform-origin:top left;transform:scale(calc(100cqw / 811px));mask-image:url('./assets/autopay-mask.svg');mask-repeat:no-repeat;mask-size:811px 471px}.autopay-phone{position:absolute;left:302.775px;top:124.244px;width:234.022px;height:495.468px;border:9px solid #000;border-radius:11px;box-shadow:0 17px 13.1px 4px #0002;transform:rotate(-.3deg);overflow:hidden}.autopay-phone img{display:block;position:absolute;width:100.07%;height:123.97%;left:-.04%;top:0}.autopay-white-patch{position:absolute;left:373.628px;top:306.027px;width:42.51px;height:12.882px;transform:rotate(-4.03deg);background:#fff}.autopay-overlay{position:absolute;left:303.803px;top:124.355px}
.project-illustrations .description{margin-top:12px}.illustration-art{position:relative;overflow:hidden;border-radius:1px}.illustration-background{position:absolute;width:100%;height:100%;object-fit:cover}.illustration-banner{position:absolute;width:135.62%;height:158.84%;left:-4.82%;top:-24.76%;object-fit:fill}.about{display:grid;grid-template-columns:var(--split) 1fr;min-height:504px;scroll-margin-top:24px}.about-panel{background:#d9d9d9}.about-copy{background:var(--yellow);padding:50px max(32px,calc((100vw - 1200px)/2)) 64px 81px}.about-tagline{font-family:var(--body);font-size:24px;line-height:36px;letter-spacing:1.2px;margin-top:12px;white-space:nowrap}.about-body{font-family:var(--body);font-size:16px;line-height:24px;letter-spacing:.48px;margin-top:6px;max-width:608px}.about-body p+p{margin-top:24px}.site-footer{height:60px;background:#000;color:#fff;display:flex;align-items:center;gap:14px;padding:0 var(--gutter);font-size:12px;line-height:14px;letter-spacing:.12px}
dialog{border:0;padding:0;width:min(720px,calc(100% - 32px));max-height:85dvh;color:#000;background:#fff;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:16px;top:12px;background:#000;color:#fff;border:0;border-radius:50%;width:40px;height:40px;font-size:30px;line-height:1;z-index:1}.dialog-heading{background:var(--yellow);padding:40px 32px 32px}.dialog-heading h2{font-size:40px;line-height:1.1;margin-top:16px;letter-spacing:-1px}.dialog-body{padding:32px;font-family:var(--body);font-size:16px;line-height:1.6}.dialog-body h3{font-family:var(--heading);font-size:24px;line-height:1.2;margin:28px 0 12px}.dialog-body h3:first-child{margin-top:0}body:has(dialog[open]){overflow:hidden}details{border-top:1px solid #ccc;margin-top:24px;padding-top:20px}summary{font-family:var(--heading);font-weight:700;font-size:20px}details p{margin-top:16px}.gallery-image{display:block;max-width:100%;height:auto;margin-top:24px}
@media(min-width:1600px){:root{--gutter:8.333333vw}.project-copy{padding-right:40px}.description{max-width:420px}.about-copy{padding-right:8.333333vw}.project-art{min-height:34.58vw}.autopay-art{min-height:32.7vw}}
@media(min-width:701px) and (max-width:1199px){:root{--gutter:32px;--split:46%}.hero-inner{padding-top:90px}.hero h1{font-size:88px}.hero .intro{font-size:28px}.nav-inner{padding:0 16px}.nav-inner a{font-size:20px;width:auto;padding:0 16px}.project h2,.about h2{font-size:36px;line-height:44px;letter-spacing:-1.1px}.project-copy{padding-top:40px;padding-right:24px}.project h2{white-space:normal;margin-top:24px}.metric-label{white-space:normal;font-size:20px;line-height:26px}.about-copy{padding:40px 32px}.about-tagline{white-space:normal;font-size:20px;line-height:30px}.stream-composition{top:25%;left:10%;width:80%}.autopay-composition{top:70px}.project-illustrations .project-copy{padding-bottom:40px}}
@media(max-width:700px){:root{--gutter:16px}.hero{min-height:581px}.hero-inner{padding:84px 16px 140px}.hero h1{font-size:96px;line-height:92px;letter-spacing:-4.5px;white-space:normal}.first-name,.last-name{display:block}.hero .last-name{letter-spacing:-4.5px}.role{font-size:35px;line-height:42px;letter-spacing:-1px;margin-top:39px;white-space:nowrap}.intro{font-size:20px;line-height:24px;letter-spacing:.2px;margin-top:43px;max-width:340px}.section-nav,.desktop-section{display:none}.project{display:flex;flex-direction:column;min-height:0;scroll-margin-top:0}.project-stream{padding-top:59px}.project-copy{padding:40px 16px 24px;background:#fbfbfb}.project-stream .project-copy{background:linear-gradient(#fff,#fbfbfb 89.423%)}.project h2{font-size:36px;line-height:43px;letter-spacing:-1px;margin-top:32px}.metric{margin-top:4px}.metric-label{white-space:normal;font-size:24px;line-height:30px;max-width:343px}.description{max-width:100%;margin-top:16px}.pill{margin-top:24px}.divider{display:none}.project-art{height:auto;aspect-ratio:376/231;flex:none}.stream-composition{left:23.486%;top:14.286%;width:55.748%}.autopay-composition{width:811px;height:471px;transform:scale(calc(100cqw / 616px));left:calc(50% - 262.3px * (100vw / 375px));top:-55px}.site-footer{padding:0 16px;gap:24px}.dialog-heading,.dialog-body{padding:32px 24px}.dialog-heading h2{font-size:32px}}
@media(max-width:359px){.hero h1{font-size:82px;line-height:82px}.role{font-size:30px}.project h2{font-size:32px}.metric-label{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Each phone overlay retains the intrinsic dimensions supplied by Figma. */
.autopay-mobile-overlay{display:none}
@media(max-width:700px){
  .project.desktop-section{display:none}
  .autopay-composition{width:375px;height:231px;left:50%;top:0;transform:translateX(-50%);mask-image:url('./assets/autopay-mobile-mask.svg');mask-size:215px 228px;mask-position:80px 3px}
  .autopay-phone{width:142.529px;height:301.761px;left:117.632px;top:20.172px}
  .autopay-white-patch{width:25.89px;height:7.845px;left:160.783px;top:130.886px}
  .autopay-overlay{display:none}
  .autopay-mobile-overlay{display:block;position:absolute;left:118.258px;top:20.24px}
}
@media(min-width:701px) and (max-width:1199px){
  .autopay-composition{top:calc(100% - 58.077cqw)}
  .illustration-banner{object-fit:cover}
}