body{margin:0;background:#FFFFFF}
a{color:#0B0B0C}a:hover{color:#3A3A3A}
.nav-link{transition:color .2s}.nav-link:hover,.nav-link:focus-visible{color:#FEF900 !important}
h1,h2,h3,p{text-wrap:pretty}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
@media (min-width: 1000px){.flip > :first-child{order:2}}
.hero-box-in{opacity:0;animation:hero-box-fade 1s ease-out 1.2s forwards}
@keyframes hero-box-fade{from{opacity:0}to{opacity:1}}
.hero-reveal > *{opacity:0;animation:hero-in 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero-reveal > :nth-child(1){animation-delay:2.2s}
.hero-reveal > :nth-child(2){animation-delay:2.35s}
.hero-reveal > :nth-child(3){animation-delay:2.5s}
.hero-reveal > :nth-child(4){animation-delay:2.65s}
.hero-reveal > :nth-child(5){animation-delay:2.8s}
@keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.hero-reveal > *,.hero-box-in{opacity:1;animation:none}}
/* Scroll reveal: same rise-and-fade as the hero text, played when the element scrolls into view */
.sr{opacity:0}
.sr.sr-in{animation:hero-in 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
/* App images: a slower plain fade that starts after their box has risen in */
.sr.sr-img.sr-in{animation:hero-box-fade 1.4s ease-out .5s forwards}
/* Highlighter pen: the white highlight is painted over with the accent, left to right, after the title rises in */
.hl{background-size:0% 100%}
.sr-in .hl{animation:hl-sweep .9s cubic-bezier(.6,0,.3,1) 1.15s forwards}
@keyframes hl-sweep{from{background-size:0% 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion: reduce){.hl{background-size:100% 100%}.sr-in .hl{animation:none}}
@media (prefers-reduced-motion: reduce){.sr{opacity:1}.sr.sr-in,.sr.sr-img.sr-in{animation:none}}
.kw-track{animation:kw-scroll 200s linear infinite}
@keyframes kw-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.kw-track{animation:none}}
.logo-track{animation:kw-scroll 90s linear infinite}
@media (prefers-reduced-motion: reduce){.logo-track{animation:none}}
.apps-hatch{background-color:#F3F4F6}
.apps-hatch > section{position:relative}
.app-box{}
.btn{box-sizing:border-box;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-yellow:hover,.btn-yellow:focus-visible{background:#FEF900 !important;color:#0B0B0C !important}
.btn-light:hover,.btn-light:focus-visible{background:#0B0B0C !important;color:#FFFFFF !important;border-color:#0B0B0C !important}
.btn-ink:hover,.btn-ink:focus-visible{background:#FFFFFF !important;color:#0B0B0C !important}
.btn-accent:hover,.btn-accent:focus-visible{background:#FEF900 !important;color:#0B0B0C !important}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}
.cta-row-right{animation:cta-right 270s linear infinite}
.cta-row-left{animation:cta-left 270s linear infinite}
@keyframes cta-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes cta-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.cta-row-right,.cta-row-left{animation:none}}
@property --hc{syntax:'<color>';inherits:false;initial-value:#FFFFFF}
.ah-hatch{background-image:repeating-linear-gradient(135deg,var(--hc) 0 2px,transparent 2px 10.4px)}
/* Pricing page: no loading animations: everything shows straight away */
.hero-box-in,.hero-reveal > *,.sr,.sr.sr-in,.sr.sr-img.sr-in{opacity:1 !important;animation:none !important}
.hl,.sr-in .hl{background-size:100% 100% !important;animation:none !important}
.tab-link{transition:color .2s}.tab-link:hover{color:#3A3A3A}
[hidden]{display:none !important}