@charset "utf-8";

/* BLACK */

nav,
#main,
body.paused figure#device-demo:after,
button#pdt_submit,
button#pdt2_submit,
#media body,
#media header,
#excerpt body,
#excerpt header,
#excerpt a#readmore:hover,
#excerpt footer,
#survey *,
#update header,
#update footer,
#update-oct footer,
#update-oct button#pdt_submit,
#update-oct button#pdt2_submit,
#dev-preview div#container-submit input
{
    color: rgba(0,0,0,1);
    color: color(display-p3 0 0 0 / 1);
}

#dev-preview nav.main
{
    background-color: rgba(0,0,0,1);
    background-color: color(display-p3 0 0 0 / 1);
}

hr,
#excerpt #main a:hover
{
    border-bottom-color: rgba(0,0,0,1);
    border-bottom-color: color(display-p3 0 0 0 / 1);
}

nav,
#update header
#update-oct header
{
    border-color: rgba(0,0,0,.2);
    border-color: color(display-p3 0 0 0 / 0.2);
}

/* ---------- */


/* WHITE */

body,
body:after,
section#conclusion,
a#jumper,
#update h1,
#update-oct h1,
#dev-preview nav,
#dashboard button#pdt_submit,
#dashboard button#pdt2_submit,
#update-oct form#pdt_form,
#update-oct form#pdt2_form,
#announcement p
{
    color: rgba(255,255,255,1) !important;
    color: color(display-p3 1 1 1 / 1) !important;
}

body.paused figure#device-demo:after,
button#pdt_submit:active,
button#pdt2_submit:active,
html#media,
#media body,
#media header,
#media #main,
#media footer,
#excerpt body,
#excerpt #main
{
    background-color: rgba(255,255,255,1);
    background-color: color(display-p3 1 1 1 / 1);
}

form#pdt_form,
form#pdt2_form,
#announcement p
{
    border-color: rgba(255,255,255,1); 
    border-color: color(display-p3 1 1 1 / 1); 
}

#teaser footer
{
    color: rgba(255,255,255,0.65);
    color: color(display-p3 1 1 1 / 0.65);
}

/* ---------- */



/* LIGHTGRAY */

#main img#hero,
#ar img.ar
{
    border-color: rgba(200,200,200,1);
    border-color: color(display-p3 0.78 0.78 0.78 / 1);
}

::placeholder
{
    color: rgba(200,200,200,1);
    color: color(display-p3 0.78 0.78 0.78 / 1);
}

/* ---------- */



/* GRAY */

body#teaser,
header,
button#pdt_submit[disabled],
button#pdt2_submit[disabled],
#excerpt footer,
#update header
{
    background-color: rgba(121,127,132,1);
    background-color: color(display-p3 0.48 0.50 0.52 / 1);
}

h1#logotype:before,
h1#logotype:after,
#media footer,
#media body
{
    color: rgba(121,127,132,1);
    color: color(display-p3 0.48 0.50 0.52 / 1);
}

/* ---------- */



/* YELLOW */

header,
#excerpt a#readmore,
#dev-preview h1,
#dev-preview #terms legend,
#dev-preview input:focus,
#dev-preview select:focus,
#dev-preview button:focus,
#dev-preview #terms p
{
    color: rgba(255,205,63,1);
    color: color(display-p3 1 0.80 0.25 / 1);
}

nav.main,
#pitch,
button#pdt_submit,
button#pdt2_submit,
#excerpt header,
#survey body,
#update body,
#update #main,
#update footer,
#update-oct body,
#update-oct #main,
#update-oct button#pdt_submit,
#update-oct button#pdt2_submit,
#update-oct footer,
#dashboard
{
    background-color: rgba(255,205,63,1);
    background-color: color(display-p3 1 0.80 0.25 / 1);
}

input:focus,
button:focus,
#dev-preview input:focus,
#dev-preview button:focus,
#dev-preview select:focus,
#dev-preview #credit-card.StripeElement--focus,
#excerpt #main a
{
    border-color: rgba(255,205,63,1) !important;
    border-color: color(display-p3 1 0.80 0.25 / 1) !important;
}

/* ---------- */



/* DARK YELLOW */

p.alert,
#media h2
{
    color: rgba(241,174,50,1);
    color: color(display-p3 0.95 0.68 0.17 / 1);
}

a.download:hover,
#update-oct button#pdt_submit,
#update-oct button#pdt2_submit,
#faq article:target
{
    border-bottom-color: rgba(241,174,50,1);
    border-bottom-color: color(display-p3 0.95 0.68 0.17 / 1);
}


/* DARKER SATURATED YELLOW */
    
div.wrapper div#container-submit input
{
    background-color: rgba(245,181,40,1) !important;
    background-color: color(display-p3 0.96 0.71 0.16 / 1) !important;
}

/* ---------- */



/* LIGHT PURPLE */

#dev-preview #terms p a
{
    color: rgb(147, 83, 255);
    color: color(display-p3 0.58 0.33 1 / 1);
}

/* ---------- */


/* PURPLE */

#update-oct #checklist h3:before,
.bright-purple
{
    color: rgba(120,0,255,1);
    color: color(display-p3 0.47 0 1 / 1);
}

footer,
section#conclusion,
a#jumper,
nav.main a.callout,
#dev-preview #terms input:checked,
#dev-preview section#order,
#dev-preview nav.bottom,
#update-oct header,
#update-oct form#pdt_form,
#update-oct form#pdt2_form,
#announcement
{
    background-color: rgba(120,0,255,1);
    background-color: color(display-p3 0.47 0 1 / 1);
}

button,
#dev-preview #terms input:checked
{
    border-color: rgba(120,0,255,1);
    border-color: color(display-p3 0.47 0 1 / 1);
}

/* ---------- */


/* DEEP PURPLE */

#dashboard #main a
{
    color: rgba(75,3,161,1);
    color: color(display-p3 0.29 0.01 0.63 / 1);
}

#dev-preview #order-form,
#dev-preview nav.bottom,
#dashboard button#pdt_submit,
#dashboard button#pdt2_submit
{
    background-color: rgba(75,3,161,1);
    background-color: color(display-p3 0.29 0.01 0.63 / 1);
}

/* ---------- */

/* RED */


body:after
{
    background-color: rgba(255,0,0,0.85);
    background-color: color(display-p3 1 0 0 / 0.85);
}

div.error input
{
    border-color: rgba(255,0,0,0.85) !important;
    border-color: color(display-p3 1 0 0 / 0.85) !important;
}

div.error label
{
    color: rgba(255,0,0,0.85) !important;
    color: color(display-p3 1 0 0 / 0.85) !important;
}


/* ---------- */


/* GRADIENTS AND SHADOWS */

a#jumper
{
    box-shadow: 0 1rem 3rem rgba(120,0,255,0.25);
    box-shadow: 0 1rem 3rem color(display-p3 0.47 0 1 / 0.25);
}

body.paused figure#device-demo:after
{
    box-shadow: 0 1rem 3rem rgba(0,0,0,.5);
    box-shadow: 0 1rem 3rem color(display-p3 0 0 0 / 0.5);
}

#teaser header
{
    background-image: radial-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25), rgba(121,127,132,1));
    background-image: radial-gradient(color(display-p3 1 1 1 / 0.25), color(display-p3 1 1 1 / 0.25), color(display-p3 0.48 0.50 0.52 / 1));
}

#excerpt footer
{
    background-image: url("../images/edge/waves.png"), radial-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65), rgba(121,127,132,1));
    background-image: url("../images/edge/waves.png"), radial-gradient(color(display-p3 1 1 1 / 0.65), color(display-p3 1 1 1 / 0.65), color(display-p3 0.48 0.50 0.52 / 1));
}

/* ---------- */