* {
    margin: 0;
    box-sizing: inherit
}

html {
    --header-height: 3.5em;
    --focus-shadow-size: .1875em;
    --input-top-padding: .7em;
    --input-bottom-padding: .7em;
    --input-horizontal-padding: .8em;
    --button-vertical-padding: calc((var(--input-top-padding) + var(--input-bottom-padding)) / 2);
    --button-horizontal-padding: .8em;
    --form-field-border-radius: .375em;
    --form-field-line-height: 1.3;
    --section-gutter-size: 10em
}

@media (max-width: 1080px) {
    html {
        --section-gutter-size:6em
    }
}

html {
    --orange-rgb: 243,128,32;
    --light-blue-rgb: 79,140,200;
    --blue-rgb: 0,81,127;
    --purple-rgb: 65,54,128;
    --dark-purple-rgb: 34,30,104;
    --black-purple-rgb: 15,13,55
}

html[theme=dark] {
    --color-rgb: 250,250,250;
    --cloudflare-logo-wordmark-color: rgb(var(--color-rgb));
    --background-color-rgb: var(--black-purple-rgb);
    --nav-link-background-color-hover: hsla(0,0%,100%,.05);
    --nav-link-background-color-active: rgba(0,0,0,.12);
    --input-background-color: hsla(0,0%,100%,.06);
    --input-placeholder-color: rgba(var(--color-rgb),.4);
    --input-border-color: transparent;
    --input-border-color-focused: transparent;
    --mobile-content-section-shadow-color: rgba(0,0,0,.18);
    --dialog-background-color-rgb: 23,23,23;
    --subtitle-color: rgba(var(--color-rgb),.7);
    --focus-shadow-color: rgba(var(--orange-rgb),.5);
    --selection-background-color: #ff9e40;
    --selection-color: #fff
}

html[theme=dark],html[theme=light] {
    --accent-color-rgb: var(--purple-rgb)
}

html[theme=light] {
    --color-rgb: var(--dark-purple-rgb);
    --cloudflare-logo-wordmark-color: #414142;
    --background-color-rgb: 255,255,255;
    --nav-link-background-color-hover: rgba(var(--accent-color-rgb),.06);
    --nav-link-background-color-active: rgba(var(--accent-color-rgb),.1);
    --input-background-color: rgba(135,159,183,.15);
    --input-placeholder-color: rgba(94,120,146,.5);
    --input-border-color: rgba(66,89,111,.15);
    --input-border-color-focused: rgb(var(--accent-color-rgb));
    --mobile-content-section-shadow-color: rgba(0,0,0,.08);
    --dialog-background-color-rgb: var(--background-color-rgb);
    --subtitle-color: rgba(var(--color-rgb),.8);
    --focus-shadow-color: rgba(var(--accent-color-rgb),.5);
    --selection-background-color: rgb(var(--dark-purple-rgb));
    --selection-color: #fff
}

::selection {
    background: var(--selection-background-color);
    color: var(--selection-color)
}

html[theme=dark] {
    -webkit-font-smoothing: antialiased
}

html {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    box-sizing: border-box;
    font-size: 10px;
    line-height: 1.5;
    color: rgb(var(--color-rgb));
    background: rgb(var(--background-color-rgb))
}

.Surface {
    position: relative;
    overflow: hidden
}

body {
    font-size: 2.1em
}

@media (max-width: 1200px) {
    body {
        font-size:1.9em
    }
}

@media (max-height: 650px),(max-width:1080px) {
    body {
        font-size:1.8em
    }
}

@media (max-width: 920px) {
    body {
        font-size:1.7em
    }
}

@media (max-width: 768px) {
    body {
        font-size:1.6em
    }
}

.CopyLink {
    text-decoration: none;
    color: inherit;
    --underline-size: -0.16em;
    --box-shadow: 0 0 0 var(--focus-shadow-size) var(--focus-shadow-color),inset 0 var(--underline-size) rgba(var(--color-rgb),0.5);
    box-shadow: var(--box-shadow);
    transition: color .3s ease,box-shadow .3s ease
}

.CopyLink:hover {
    color: rgb(var(--accent-color-rgb))
}

.CopyLink-with-right-arrow,.CopyLink-with-right-arrow:hover {
    --underline-size: 0
}

.CopyLink-with-right-arrow {
    transition: color .3s ease
}

.CopyLink-with-right-arrow:after {
    content: "\00a0→"
}

.CopyLink.focus-visible {
    transition: box-shadow .3s ease
}

.CopyLink:focus {
    outline: none
}

.CopyLink:not(.focus-visible):focus,.CopyLink:not(:focus) {
    --focus-shadow-size: 0
}

.CopyLink--small {
    color: #221e68;
    font-size: .625em
}

html[class=dir-rtl] .CopyLink--small {
    direction: rtl
}

@media (max-width: 768px) {
    .CopyLink-with-margin--small {
        display:block;
        margin-top: 10px;
        margin-right: 0
    }
}

.Button {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: var(--form-field-line-height);
    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
    border-radius: var(--form-field-border-radius);
    text-decoration: none;
    transition: box-shadow .3s ease
}

.Button:focus {
    outline: none
}

.Button.focus-visible:focus {
    box-shadow: 0 0 0 var(--focus-shadow-size) var(--focus-shadow-color)
}

.Button.focus-visible:not(:focus) {
    --focus-shadow-size: 0
}

.Button-is-primary {
    background: rgb(var(--dark-purple-rgb));
    color: rgb(var(--background-color-rgb))
}

[theme=dark] .Button-is-primary {
    background: rgba(var(--purple-rgb),.35);
    color: #fff
}

.Button[disabled] {
    cursor: not-allowed;
    opacity: .5
}

.Button.Button-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10em
}

.Button.Button-with-icon .Button--icon {
    height: 2em;
    width: 2.5em;
    margin-bottom: .1em;
    margin-right: .3125em
}

.Button.Button-with-icon.Button-google-play-store .Button--text {
    font-size: 1em;
    margin-bottom: .0625em
}

.Button-google-play-store--text {
    font-size: .825em
}

.Button-windows-text {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: .0625em
}

html[is-ios] .Button-google-play-store {
    display: none
}

.Button--tc {
    text-align: center
}

.Button--windows-icon {
    margin-bottom: -.5em;
    height: 2em;
    width: 2.5em;
    margin-right: .3125em
}

.Button--smaller-icon {
    margin-bottom: -.5em;
    height: 1.5em;
    width: 2em
}

.LabelInputWrapper {
    position: relative
}

.LabelInputWrapper--label {
    position: absolute;
    line-height: 1;
    top: .25em;
    left: var(--input-horizontal-padding);
    pointer-events: none
}

.LabelInputWrapper--label-content {
    font-size: .6em;
    letter-spacing: .03em;
    font-weight: 500;
    height: .9em;
    text-transform: uppercase;
    line-height: 1
}

.Input {
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    background: var(--input-background-color);
    border: 0;
    line-height: var(--form-field-line-height);
    padding: var(--input-top-padding) var(--input-horizontal-padding) var(--input-bottom-padding);
    border-radius: var(--form-field-border-radius);
    width: 11em;
    max-width: 100%;
    box-shadow: 0 0 0 var(--focus-shadow-size) var(--focus-shadow-color),inset 0 0 0 1px var(--input-border-color-focused),inset 0 0 0 1px var(--input-border-color),inset 0 1px var(--input-border-color);
    transition: box-shadow .3s ease
}

@media (max-width: 768px) {
    .Input {
        width:13.7em
    }
}

.Input::placeholder {
    color: var(--input-placeholder-color)
}

.Input:focus {
    outline: none
}

.Input:not(:focus) {
    --focus-shadow-size: 0;
    --input-border-color-focused: transparent
}

.Header {
    position: absolute;
    z-index: 3;
    height: var(--header-height);
    width: 100%
}

@media (max-width: 768px) {
    .Header {
        position:relative
    }
}

.Nav {
    display: flex;
    height: 100%
}

.Nav--link {
    display: flex;
    align-items: center;
    padding: 0 1em;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .3s ease
}

@media (max-width: 768px) {
    .Nav--link:not(:first-child) {
        display:none
    }
}

.Nav--link:hover {
    background: var(--nav-link-background-color-hover)
}

.Nav--link-active,.Nav--link:active {
    background: var(--nav-link-background-color-active)
}

.Nav--link:focus {
    outline: none
}

.Nav--link.focus-visible:focus {
    box-shadow: 0 0 0 var(--focus-shadow-size) var(--focus-shadow-color)
}

.Nav--link.focus-visible:not(:focus) {
    --focus-shadow-size: 0
}

.Nav--link:first-child {
    margin-right: auto;
    border-bottom-right-radius: .3125em
}

.Nav--link:last-child {
    border-bottom-left-radius: .3125em
}

.Nav--link:not(:first-child):not(:last-child) {
    border-bottom-right-radius: .3125em;
    border-bottom-left-radius: .3125em
}

.SectionCopy {
    display: flex;
    width: 18em;
    max-width: 100%;
    text-align: left
}

html[class=dir-rtl] .SectionCopy {
    direction: rtl;
    text-align: unset
}

.SectionCopy.SectionCopy-is-right {
    justify-content: flex-end
}

@media (max-width: 768px) {
    .SectionCopy.SectionCopy-is-right {
        justify-content:flex-start
    }
}

.SectionCopy--title {
    font-size: 1.75em;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: .5em
}

.SectionCopy--description p:not(:last-child) {
    margin-bottom: .5em
}

.SectionCopy.SectionCopy-is-centered {
    display: block;
    width: 26em;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.SectionCopy.SectionCopy-is-centered .SectionCopy--description,.SectionCopy.SectionCopy-is-centered .SectionCopy--title {
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 768px) {
    .SectionCopy,.SectionCopy.SectionCopy-is-centered {
        width:23em;
        text-align: left
    }

    html[class=dir-rtl] .SectionCopy,html[class=dir-rtl] .SectionCopy.SectionCopy-is-centered {
        text-align: unset
    }

    .SectionCopy.SectionCopy-is-centered .SectionCopy--description,.SectionCopy.SectionCopy-is-centered .SectionCopy--title {
        margin-left: 0;
        margin-right: auto
    }
}

html[class=dir-rtl] .SectionCopy .share-buttons {
    direction: ltr
}

html[class=dir-rtl] .family-page .SectionCopy .SectionCopy--description {
    margin-right: unset
}

img,svg {
    display: block;
    height: 100%;
    width: 100%
}

button,input,select,textarea {
    font: inherit
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 400
}

.DeviceMockup {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 14em;
    height: 28em
}

.DeviceMockup.desktop {
    height: 24em;
    width: 22em
}

@media (max-width: 1080px) {
    .DeviceMockup {
        font-size:.9em
    }
}

.DeviceMockup--backdrop {
    position: absolute;
    pointer-events: none
}

.DeviceMockup--backdrop-blob1 {
    top: -136%;
    left: -70%;
    height: 421%;
    width: 616%
}

.DeviceMockup--backdrop-blob2 {
    top: -242%;
    right: -70%;
    height: 580%;
    width: 730%
}

.DeviceMockup--backdrop-blob3 {
    top: -300%;
    left: -30%;
    height: 550%;
    width: 500%
}

@media (max-width: 1080px) {
    .DeviceMockup--backdrop-blob1 {
        left:-50%
    }

    .DeviceMockup--backdrop-blob2 {
        right: -50%
    }
}

@media (max-width: 768px) {
    .DeviceMockup--monitor {
        width:100%
    }

    .DeviceMockup--backdrop-blob1 {
        top: -101%;
        left: -42%;
        height: 331%;
        width: 446%
    }

    .DeviceMockup--backdrop-blob2 {
        top: -142%;
        right: -36%;
        height: 420%;
        width: 540%
    }

    .DeviceMockup--backdrop-blob3 {
        top: -109%;
        left: -22%;
        height: 367%;
        width: 360%
    }

    .DeviceMockup--backdrop-blob3-desktop-only-blog {
        fill: transparent
    }
}

.DeviceMockup--device {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 2.5em .375em;
    background: #fff;
    border-radius: 1.75em;
    --box-shadow: inset 0 .25em .5em .0625em #fff,inset 0 -.3em 1em rgba(var(--black-purple-rgb),.15),0 .125em .375em rgba(var(--black-purple-rgb),.05),0 .5em 1em rgba(var(--black-purple-rgb),.1);
    box-shadow: var(--box-shadow)
}

.DeviceMockup.desktop .DeviceMockup--device {
    background: transparent;
    box-shadow: none
}

.DeviceMockup--device-monitor {
    padding-top: 1em;
    padding-bottom: 1em;
    height: auto!important
}

@media (max-width: 768px) {
    .DeviceMockup--device {
        height:120%;
        width: 110%;
        margin-top: -10%;
        margin-left: -5%
    }
}

@media (max-width: 576px) {
    .DeviceMockup--device {
        height:100%;
        width: 100%;
        margin-top: 0;
        margin-left: 0
    }
}

.DeviceMockup--device-display {
    position: relative;
    height: 100%;
    width: 100%;
    --box-shadow: inset 0 0 0 .0625em rgba(var(--black-purple-rgb),.1);
    box-shadow: var(--box-shadow);
    border-radius: .25em;
    background: rgba(var(--black-purple-rgb),.2)
}

.DeviceMockup.desktop .DeviceMockup--device-display {
    background: none;
    box-shadow: none;
    border: none
}

@media (max-width: 1080px) {
    .DeviceMockup--device-display {
        --box-shadow:inset 0 0 0 1px rgba(var(--black-purple-rgb),.1);
        box-shadow: var(--box-shadow)
    }
}

.DeviceMockup--device-display img {
  filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.25));
  border-radius: 16px;
}

.DeviceMockup--device-display-mockup-1 {
    background-image: url(/media/mockup-1.png);
    background-size: 100% 100%
}

.DeviceMockup--device-display-mockup-2 {
    background-image: url(/media/mockup-2.png);
    background-size: 100% 100%
}

.DeviceMockup--device-display-mockup-3 {
    background-image: url(/media/mockup-3.png);
    background-size: 100% 100%
}

.DeviceMockup--device-display-mockup-3-share-button {
    position: absolute;
    display: block;
    left: 22.6%;
    right: 22.2%;
    height: 7.4%;
    bottom: 13.4%;
    background: hsla(0,0%,100%,.2);
    border-radius: 999em;
    text-decoration: none;
    color: transparent;
    font-size: .66em;
    text-align: center;
    line-height: 2.6;
    letter-spacing: -.03em;
    font-family: Gotham,sans-serif;
    font-weight: 500;
    text-indent: -.04em;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
    -webkit-user-select: none;
    user-select: none
}

.DeviceMockup--device-display-mockup-3-share-button:hover {
    opacity: 1
}

.DeviceMockup--device-display-mockup-3-share-button:hover:active {
    background: rgba(0,0,0,.2)
}

.OneDotLogoAnimated {
    width: 9em;
    max-width: 100%
}

.OneDotLogoAnimated.OneDotLogoAnimated-is-centered {
    margin-left: -2.5em
}

.OneDotLogoAnimated.OneDotLogoAnimated-is-large {
    width: 18em
}

.OneDotLogoAnimated.OneDotLogoAnimated-is-large.OneDotLogoAnimated-is-centered {
    margin-left: -1.25em
}

@media (max-width: 768px) {
    .OneDotLogoAnimated.OneDotLogoAnimated-is-large.OneDotLogoAnimated-is-centered {
        margin-left:-1em
    }
}

.OneDotLogoAnimated--aspect-ratio-container {
    position: relative;
    padding-bottom: calc(var(--aspect-ratio) * 100%)
}

.OneDotLogoAnimated--canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.OneDotLogoAnimated--subtext {
    font-size: 1.2em;
    margin-top: 1em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5em
}

html[class=dir-rtl] .OneDotLogoAnimated--subtext {
    letter-spacing: unset
}

.CloudflareLogo {
    color: var(--cloudflare-logo-wordmark-color);
    display: block;
    height: 1.84em;
    width: 5.3em
}

.HeroSection {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 35em;
    width: 100%;
    padding-left: 2em;
    padding-right: 2em
}

.HeroSectionFollowup {
    padding-top: 2em
}

.HeroSectionFollowup>img {
    margin: 0 auto;
    max-width: 75%
}

.HeroSection--content {
    display: block;
    text-align: center;
    width: 34em;
    padding-bottom: 3.5em;
    max-width: 100%
}

.HeroSection--logo {
    display: flex;
    justify-content: center;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto
}

.HeroSection--title-wrapper {
    margin: 1.333em auto
}

html[class=dir-rtl] .HeroSection--title-wrapper {
    direction: rtl
}

.HeroSection--title {
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.333em auto
}

.HeroSection--subtitle {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3;
    margin: -1em auto 1.333em
}

.HeroSection--actions {
    font-size: 1.125em;
    display: flex;
    align-items: top;
    justify-content: center;
    margin-bottom: 1em
}

@media (max-width: 525px) {
    .HeroSection--actions {
        flex-wrap:wrap
    }
}

.HeroSection--download-actions .Button {
    margin: auto
}

.HeroSection--scroll-indicator {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 3em;
    height: 2em;
    bottom: 2em;
    pointer-events: none
}

@media (max-width: 768px) {
    .HeroSection {
        min-height:auto;
        height: auto;
        padding-top: 10vh;
        padding-bottom: 10vh
    }

    .HeroSectionFollowup>img {
        max-width: 100%
    }

    .HeroSection--content {
        padding-bottom: 0
    }

    .HeroSection--title {
        font-size: 2em
    }

    .HeroSection--actions {
        font-size: 1em
    }

    .HeroSection--scroll-indicator {
        display: none
    }
}

@media (max-width: 375px) {
    .HeroSection--title {
        margin-top:1em;
        margin-bottom: 1em
    }
}

html[class=dir-rtl] .family-page .HeroSection--content {
    direction: rtl
}

html[lang=ru-RU] .HeroSection--title {
    font-size: 2em
}

.AppOverviewSection--column {
    padding: 2em 2em 20em
}

.AppOverviewSection--column,.AppOverviewSection-beta-column {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.AppOverviewSection-beta-column {
    padding: 2em
}

.AppOverviewSection--content {
    position: relative;
    z-index: 2;
    max-width: 100%
}

.AppOverviewSection--device-mockup {
    position: relative;
    z-index: 1;
    margin-left: var(--section-gutter-size)
}

@media (max-width: 768px) {
    .AppOverviewSection--column,.AppOverviewSection-beta-column {
        flex-direction:column;
        padding-bottom: 17em;
        overflow: hidden
    }

    .AppOverviewSection--device-mockup {
        margin-left: 0
    }
}

.PerformanceSection--column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em 2em 12em;
    width: 100%
}

.PerformanceSection--content {
    margin-bottom: 2em;
    max-width: 100%
}

.PerformanceSection--figure {
    width: 20em;
    max-width: 100%;
    overflow: hidden
}

.PerformanceSection--figure:not([is-animation-started]) {
    opacity: 0
}

.PerformanceSection--figure-item {
    position: relative;
    --transition-delay-stagger: .3s
}

.PerformanceSection--figure-item:first-child {
    --index: 0
}

.PerformanceSection--figure-item:nth-child(2) {
    --index: 1
}

.PerformanceSection--figure-item:nth-child(3) {
    --index: 2
}

.PerformanceSection--figure-item:nth-child(4) {
    --index: 3
}

.PerformanceSection--figure-item:not(:last-child) {
    margin-bottom: 1em
}

.PerformanceSection--figure-item-bar {
    background: rgba(var(--color-rgb),.2);
    border-radius: .5em;
    height: 1em;
    width: 1em;
    opacity: 0;
    --transition-delay: calc(var(--index) * var(--transition-delay-stagger));
    transition: opacity .5s var(--transition-delay) ease,width .5s var(--transition-delay) ease
}

.PerformanceSection--figure-item-one-dot .PerformanceSection--figure-item-bar {
    background: linear-gradient(90deg,#eeac43,#f15874)
}

.PerformanceSection--figure-item-time {
    position: absolute;
    top: 0;
    left: calc(1em + (var(--bar-width) * 80%));
    line-height: 1.4;
    white-space: nowrap;
    font-size: .8em;
    transform: translate3d(-1em,0,0);
    opacity: 0;
    --transition-delay: calc((var(--index) * var(--transition-delay-stagger)) + .5s);
    transition: opacity .5s var(--transition-delay) ease,transform .5s var(--transition-delay) ease
}

.PerformanceSection--figure-item-label {
    font-weight: 500;
    padding-left: .25em;
    opacity: 0;
    --transition-delay: calc((var(--index) * var(--transition-delay-stagger)) + .25s);
    transition: opacity .5s var(--transition-delay) ease
}

.PerformanceSection--figure[is-animation-started] .PerformanceSection--figure-item-bar {
    opacity: 1;
    width: calc(var(--bar-width) * 80%)
}

.PerformanceSection--figure[is-animation-started] .PerformanceSection--figure-item-time {
    opacity: 1;
    transform: translateZ(0)
}

.PerformanceSection--figure[is-animation-started] .PerformanceSection--figure-item-label {
    opacity: 1
}

.PerformanceSection--familiy-disclaimer {
    margin-top: 2em
}

@media (max-width: 768px) {
    .PerformanceSection {
        margin-top:-4em
    }

    .PerformanceSection--figure {
        width: 23em
    }

    .PerformanceSection--column {
        padding: 2em 2em 4em
    }
}

.PrivacySection {
    margin-top: -3em
}

.PrivacySection--column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 2em 26em;
    width: 100%
}

.PrivacySection--column-less-pad {
    padding: 2em 2em 12em
}

.PrivacySection--device-mockup {
    position: relative;
    z-index: 1;
    margin-right: var(--section-gutter-size)
}

.PrivacySection--content {
    position: relative;
    z-index: 2;
    max-width: 100%
}

@media (max-width: 768px) {
    .PrivacySection {
        margin-top:0
    }

    .PrivacySection--column {
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 10em
    }

    .PrivacySection--content {
        order: 1
    }

    .PrivacySection--device-mockup {
        order: 2;
        margin-right: 0
    }
}

.WarpSection--column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 2em 16em;
    width: 100%
}

.WarpSection--content {
    position: relative;
    max-width: 100%;
    z-index: 2
}

.WarpSection--device-mockup {
    position: relative;
    z-index: 1;
    margin-left: calc(var(--section-gutter-size) / 2)
}

@media (max-width: 768px) {
    .WarpSection {
        margin-top:-9em
    }

    .WarpSection--column {
        flex-direction: column;
        padding-top: 6em;
        padding-bottom: 24em;
        overflow: hidden
    }

    .WarpSection--device-mockup {
        margin-left: 0
    }
}

.FooterSection--column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 2em 36em;
    width: 100%
}

.FooterSection--content {
    position: relative;
    z-index: 2;
    width: 40em;
    max-width: 100%;
    margin-bottom: 2em
}

.FooterSection--icon {
    height: 8em;
    width: 8em;
    margin: -8em auto 4rem
}

.FooterSection--content-section-copy-wrapper {
    margin-bottom: 1em
}

.FooterSection--actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em
}

.FooterSection--actions>a:not(:last-child) {
    margin-right: 1em
}

.FooterSection--backdrop-blob4 {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: -24em;
    width: 144em;
    left: -500em;
    right: -504em;
    margin-left: auto;
    margin-right: auto
}

.FooterSection .share-buttons {
    max-width: 10em;
    margin: 2em auto
}

section[data-section=footer] {
    opacity: .5;
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding: 2rem 0
}

section[data-section=footer] .content {
    font-size: .95em;
    text-align: center
}

section[data-section=footer] .content .footer-logo {
    font-family: Helvetica;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -.03em
}

section[data-section=footer] .content a {
    color: inherit
}

@media (max-width: 768px) {
    .FooterSection {
        margin-top:-6em
    }

    .FooterSection--icon {
        margin-top: 0
    }

    .FooterSection--p {
        font-size: 12px;
        letter-spacing: -.15px;
        text-decoration-line: underline;
        line-height: 140%
    }

    .FooterSection--column {
        overflow: hidden;
        padding-bottom: 90em
    }

    .FooterSection--backdrop-blob4 {
        top: 33em;
        width: 75em;
        left: -504em;
        right: -500em
    }

    .FooterSection--actions>a:not(:last-child) {
        margin-right: 1em;
        margin-bottom: 1em
    }
}

@media (max-width: 375px) {
    .FooterSection--column {
        overflow:hidden;
        padding-bottom: 60em
    }

    .FooterSection--actions>a:not(:last-child) {
        margin-right: 0;
        margin-bottom: 1em
    }

    .FooterSection--backdrop-blob4 {
        top: 33em;
        width: 50em;
        left: -501em;
        right: -502em
    }
}

.FooterSection--content-mobile {
    display: none
}

@media (max-width: 768px) {
    .FooterSection--content-desktop {
        display:none
    }

    .FooterSection--actions,.FooterSection--content-mobile {
        display: block
    }
}

.EasterEggSection {
    display: block;
    background: rgb(var(--black-purple-rgb))
}

.EasterEggSection--column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25vh 2em 45vh;
    width: 100%
}

.EasterEggSection--content {
    width: 40vw;
    max-width: 20em;
    z-index: 1
}

@media (max-width: 768px) {
    .EasterEggSection--column {
        margin-top:-25em
    }
}

.InstallSection--column {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em 2em 36em;
    width: 100%
}

.InstallSection--content {
    position: relative;
    z-index: 2;
    width: 40em;
    max-width: 100%;
    margin-bottom: 2em
}

.InstallSection--icon {
    height: 8em;
    width: 8em;
    margin: -8em auto 4rem
}

.InstallSection--content-section-copy-wrapper {
    margin-bottom: 1em
}

.InstallSection--actions {
    display: flex;
    align-items: center;
    justify-content: center
}

.InstallSection--actions>a:not(:last-child) {
    margin-right: 1em
}

.InstallSection--backdrop-blob4 {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: -24em;
    width: 144em;
    left: -500em;
    right: -504em;
    margin-left: auto;
    margin-right: auto
}

.InstallSection--panels {
    display: flex;
    justify-content: space-between;
    margin: 0 -2em
}

.InstallSection--panel {
    flex: 1;
    padding: 2em;
    border-radius: 2em;
    margin: 2em;
    border: 1px solid;
    background: var(--nav-link-background-color-hover)
}

html[class=dir-rtl] .InstallSection--panel {
    direction: rtl
}

.InstallSection--panel-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 1em;
    min-height: 3em
}

html[class=dir-rtl] .install-instructions,html[class=dir-rtl] .InstallSection--panel-title {
    text-align: unset
}

.InstallSection--panel-description {
    line-height: 2em;
    margin-bottom: 1em
}

.install-instructions {
    margin-top: 2em;
    text-align: center
}

@media (max-width: 768px) {
    .InstallSection {
        margin-top:-6em
    }

    .InstallSection--icon {
        margin-top: 0
    }

    .InstallSection--column {
        overflow: hidden;
        padding-bottom: 90em
    }

    .InstallSection--backdrop-blob4 {
        top: 10em;
        width: 75em;
        left: -504em;
        right: -500em
    }

    .InstallSection--panels {
        flex-direction: column
    }
}

@media (max-width: 375px) {
    .InstallSection--column {
        overflow:hidden;
        padding-bottom: 60em
    }

    .InstallSection--backdrop-blob4 {
        top: 22em;
        width: 50em;
        left: -501em;
        right: -502em
    }
}

.InstallSection--content-mobile {
    display: none
}

@media (max-width: 768px) {
    .InstallSection--content-desktop {
        display:none
    }

    .InstallSection--content-mobile {
        display: block
    }
}

.GetNotifiedSection--form-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%
}

.GetNotifiedSection--form {
    display: flex;
    margin-top: 2em;
    justify-content: center
}

@media (max-width: 375px) {
    .GetNotifiedSection--form {
        flex-direction:column
    }

    .GetNotifiedSection--form .Button {
        margin-top: .5em
    }
}

.GetNotifiedSection--form-header {
    text-align: center;
    margin-bottom: 2em
}

.GetNotifiedSection--form-title {
    font-size: 3.25em;
    line-height: 1;
    margin-bottom: .5em;
    font-weight: 700
}

.GetNotifiedSection--form-subtitle {
    font-size: 1.333em
}

.GetNotifiedSection--form-details {
    margin-bottom: 2em;
    display: inline-block;
    text-align: left;
    width: 100%
}

.GetNotifiedSection--form-cta {
    font-size: 1.333em;
    text-align: center
}

.privacy-subtext {
    margin-top: 2rem;
    font-size: 14px
}

@media (min-width: 768px) {
    .BetaSect {
        display:flex;
        width: 18em;
        max-width: 100%;
        text-align: left
    }

    .BetaSect.BetaSect-is-right {
        justify-content: flex-end
    }

    @media (max-width: 768px) {
        .BetaSect.BetaSect-is-right {
            justify-content:flex-start
        }
    }

    .BetaSect--title {
        font-size: 1.75em;
        line-height: 1.2;
        font-weight: 700;
        margin-bottom: .5em
    }

    .BetaSect--req {
        margin-right: 2em;
        display: flex;
        width: 100%
    }

    .BetaSect--left {
        margin-left: 4em;
        display: flex
    }

    .BetaSect--os-title {
        font-size: 1.1em;
        line-height: 1.2;
        font-weight: 700;
        margin-left: 2em;
        margin-right: -1em
    }

    .BetaSect--row {
        align-items: right;
        justify-content: center;
        margin-bottom: 1em
    }

    .BetaSect--border {
        border: 2.5px solid #222868;
        width: 116%
    }

    .BetaSect--downloadfor {
        font-size: 12px;
        line-height: 150%
    }

    .BetaSect-download-instructions {
        font-size: 12px;
        line-height: 140%;
        letter-spacing: -.15px;
        text-decoration-line: underline;
        margin-top: 1em;
        color: #222868
    }

    .BetaSect--button-group {
        display: block;
        margin-left: 4em
    }

    .BetaSect--reqs {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        letter-spacing: -.15px
    }

    .BetaSection--content {
        position: relative;
        z-index: 2;
        width: 40em;
        max-width: 100%;
        margin-bottom: 2em
    }

    .BetaSection--column {
        float: right;
        width: 33%
    }

    .BetaSect--description p:not(:last-child) {
        margin-bottom: .5em
    }

    .BetaSect.BetaSect-is-centered {
        display: block;
        width: 36em;
        text-align: center
    }

    .BetaSect.BetaSect-is-centered,.BetaSect.BetaSect-is-centered .BetaSect--description,.BetaSect.BetaSect-is-centered .BetaSect--title {
        margin-left: auto;
        margin-right: auto
    }

    .BetaSection-mobile {
        display: none
    }
}

@media (max-width: 768px) {
    .BetaSection--content {
        display:none
    }

    .BetaSection-mobile {
        margin: 2em 0;
        width: 100%
    }

    .BetaSection-mobile,.BetaSection-row {
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .BetaSection-mobile-title {
        font-weight: 700;
        font-size: 20px;
        line-height: 150%;
        padding-bottom: 2em;
        padding-top: 2em
    }

    .BetaSection-mobile-content {
        border-top: 2.5px solid #222868;
        border-bottom: 2.5px solid #222868;
        padding: 1.5em 0;
        display: flex;
        justify-content: space-between
    }

    .BetaSection-download-instructions {
        font-size: 12px;
        line-height: 140%;
        letter-spacing: -.15px;
        text-decoration-line: underline;
        margin: 2em 0;
        color: #222868
    }

    .BetaSection-span {
        font-size: 14px;
        line-height: 140%;
        letter-spacing: -.15px;
        padding: 0 1em
    }
}

@media (max-width: 768px) {
    .BetaSect,.BetaSect.BetaSect-is-centered {
        width:23em;
        text-align: left
    }

    .BetaSect.BetaSect-is-centered .BetaSect--title .BetaSect.BetaSect-is-centered .BetaSect--description {
        margin-left: 0;
        margin-right: auto
    }

    .BetaSect--os-title {
        margin-top: 2em;
        width: 100%
    }

    .BetaSection--column {
        width: 100%
    }

    .BetaSect--button-group {
        margin-right: 3em;
        margin-bottom: 1em
    }

    .BetaSect--border {
        border: 2.5px solid #222868;
        width: 100%
    }

    .BetaSect--req {
        margin-right: 2em;
        display: flex
    }

    .BetaSect--reqs {
        display: flex
    }

    .BetaSect-footer {
        margin-top: -40em
    }
}

.DevicesSection--column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 2em 25em;
    width: 100%
}

.DevicesSection--content {
    position: relative;
    max-width: 100%;
    z-index: 2
}

.DevicesSection--device-mockup {
    position: relative;
    z-index: 1;
    margin-left: calc(var(--section-gutter-size) / 2)
}

@media (max-width: 768px) {
    .DevicesSection {
        margin-top:-9em
    }

    .DevicesSection--column {
        flex-direction: column;
        padding-top: 6em;
        padding-bottom: 20em;
        overflow: hidden
    }

    .DevicesSection--device-mockup {
        margin-left: 0
    }
}

.grid-container {
    margin-left: -1em;
    display: flex;
    flex-direction: row
}

.grid-item {
    padding-left: 1em
}

.grid-container.grid-gutter-3 .grid-item {
    padding-top: 1em
}

.grid-container.grid-gutter-3 {
    margin-top: -1em
}

.share-buttons {
    font-size: 2.2rem;
    justify-content: space-between
}

.share-button,.share-buttons {
    display: flex;
    align-items: center
}

.share-button {
    border-radius: 50%;
    background-color: var(--input-border-color-focused);
    color: #000;
    height: 2.5em;
    width: 2.5em;
    flex: 0 0 auto;
    justify-content: center;
    padding: .5em
}

.share-button:hover {
    background-color: var(--selection-background-color)
}

.share-button:not(:last-child) {
    margin-right: 1em
}

.share-button path {
    fill: #fff
}

.light-on-dark {
    color: #fff;
    text-shadow: 0 0 6px rgba(0,0,0,.66)
}

.svg-inline--fa {
    fill: #fff
}

.svg-inline--fa,[theme=light] .svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em
}

[theme=light] .svg-inline--fa {
    fill: currentColor
}

[theme=light] .svg-inline--fa.fa-w-10 {
    width: .625em
}

.button,[role=button] {
    cursor: pointer
}

.inline-button {
    display: inline-block;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit
}

[theme=dark] .language-selector .dropdown {
    background-color: hsla(0,0%,100%,.12);
    color: #fff
}

[theme=light] .language-selector .dropdown {
    background-color: #fff;
    color: #221e68
}

header:after {
    content: unset!important
}

.Header {
    top: 0
}

.Header .language-selector {
    padding: .5em;
    border-radius: 14em;
    font-size: .8em;
    user-select: none;
    display: flex
}

.Header .language-selector:focus {
    outline: none
}

.Header .language-selector.dropdown-open .dropdown {
    display: flex;
    position: absolute;
    right: 20px;
    top: 50px;
    z-index: 1
}

.Header .language-selector.dropdown-open .selector-label {
    opacity: 1
}

@media mobileMaxWidthQuery {
    .Header .language-selector {
        font-size: 1em;
        top: 12px;
        right: 12px
    }
}

.Header .language-selector .selector-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: .8;
    transition: opacity .2s
}

.Header .language-selector .selector-label:hover {
    opacity: 1
}

@media mobileMaxWidthQuery {
    .Header .language-selector .selector-label {
        font-size: 2rem
    }
}

.Header .language-selector .selector-label .fa-caret-down,.Header .language-selector .selector-label .fa-globe {
    margin-right: .5em
}

.Header .language-selector .selector-label .chosen-language {
    margin-right: .5em;
    word-break: keep-all
}

.Header .language-selector .dropdown {
    margin-top: .5em;
    flex-flow: column;
    text-align: left;
    padding: .2em .8em;
    display: none;
    min-width: 155px;
    float: right;
    border-radius: 3px;
    box-shadow: 0 3px 4px #ccc;
    transition: all .4s ease 0s
}

.Header .language-selector .dropdown .language {
    color: inherit;
    text-decoration: none;
    line-height: 1.7
}

.Header .language-selector .dropdown .language:hover {
    text-decoration: underline
}

@media mobileMaxWidthQuery {
    .Header .language-selector .dropdown {
        background: rgba(0,0,0,.9);
        font-size: 2rem;
        padding: .2em .8em
    }

    .Header .language-selector .dropdown .language {
        line-height: 2
    }
}