:root{color-scheme:dark;background:#000;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html,body{background:#000000}
*{box-sizing:border-box}
body{position:relative;margin:0;min-width:280px;min-height:100svh}
.site-footer{position:absolute;bottom:0;width:100%;padding:12px 28px;text-align:center;font-size:11px;font-weight:400;line-height:18px}
.site-footer a{display:inline-block;padding:4px 8px;color:#777;text-decoration:none;text-underline-offset:3px}
.site-footer a:hover{color:#aaa;text-decoration:underline}
.site-footer a:focus-visible,.privacy-page a:focus-visible,.privacy-page button:focus-visible{outline:2px solid #fff;outline-offset:5px}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:760px;min-height:64px;margin:auto;padding:8px 28px}
.header-logo{display:flex;align-items:center;width:38px;min-height:40px;flex-shrink:0}
.header-logo img{display:block;width:100%;height:auto}
.header-menu{position:relative}
.header-menu summary{display:flex;align-items:center;justify-content:flex-end;width:40px;height:40px;color:#999;cursor:pointer;list-style:none}
.header-menu summary::-webkit-details-marker{display:none}
.header-menu summary:hover,.header-menu[open] summary{color:#fff}
.header-menu nav{position:absolute;right:0;top:calc(100% + 8px);z-index:10;display:flex;flex-direction:column;min-width:140px;padding:6px;background:#111;border:1px solid #292929;border-radius:6px}
.header-menu:not([open]) nav{display:none}
.page-header nav a{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:3px;color:#999;text-decoration:none;font-size:12px;font-weight:400}
.page-header nav a[aria-current="page"]{color:#ccc}
.page-header nav a:hover{color:#fff;background:#1d1d1d}
.page-header a:focus-visible,.header-menu summary:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:3px}
.privacy-page{display:block;max-width:760px;min-height:calc(100svh - 64px);margin:auto;padding:36px 28px 56px;color:#c2c2c2;font-size:14px;font-weight:400;line-height:1.7}
.privacy-page p{font-weight:350}
.privacy-page a{color:#ddd;text-underline-offset:3px;text-decoration-color:#555}
.privacy-page a:hover{color:#fff}
.privacy-page h1{color:#f2f2f2;font-size:24px;line-height:1.3;margin:0 0 20px;font-weight:400}
.privacy-page [data-analytics-status]{font-size:12px;color:#aaa;margin:20px 0 8px}
.privacy-page button{font:inherit;font-size:12px;font-weight:400;background:transparent;color:#bbb;border:1px solid #555;border-radius:5px;padding:8px 12px;cursor:pointer}
.privacy-page button:hover{color:#fff;border-color:#777}
main{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:64px 28px}
.brands{display:flex;align-items:center;justify-content:space-between;gap:clamp(56px,8vw,112px);width:100%;max-width:704px}
.brand{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;text-decoration:none}
a.brand{width:144px;flex-direction:column;align-items:flex-start;text-align:left;border-radius:8px}
a.brand:focus-visible{outline:2px solid #fff;outline-offset:10px}
.brand img{display:block;width:100%;height:auto}
a.brand img{aspect-ratio:1;object-fit:cover;border-radius:23%;transition:transform 180ms ease,filter 180ms ease}
@media(hover:hover) and (pointer:fine){a.brand:hover img{transform:translateY(-3px);filter:brightness(1.06)}}
.app-name{margin-top:16px;font-size:18px;font-weight:500;line-height:22px}
.platform{margin-top:4px;color:#999;font-size:14px;line-height:18px}
.company{width:190px;margin-bottom:60px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.brands{flex-direction:column;gap:48px}.company{width:170px;margin-bottom:12px}a.brand{width:128px}}
@media(prefers-reduced-motion:reduce){a.brand img{transition:none}a.brand:hover img{transform:none}}

.home-page{min-height:calc(100svh - 64px)}

/* Keep the company wordmark distinct from the square app icons. */
a.brand.company{width:190px;flex-direction:row;align-items:center}
a.brand.company img{aspect-ratio:auto;object-fit:contain;border-radius:0}
.about-page{display:block;max-width:760px;min-height:calc(100svh - 64px);margin:auto;padding:36px 28px 56px;color:#c2c2c2;font-size:16px;font-weight:350;line-height:1.8}
.about-page h1{color:#f2f2f2;font-size:24px;font-weight:400;line-height:1.3;margin:0 0 24px}
.about-page p{margin:0 0 28px}
.about-page .about-ending{color:#f2f2f2;margin-bottom:0}
@media(max-width:760px){a.brand.company{width:170px}}