/*
    0.  Globals
    1.  Typography
    2.  Forms
    3.  Lists
    4.  Components
        4.1. Buttons
        4.2. Cards
        4.3. Headers
        4.4. Structure
        4.5. Navigation
        4.6. Elements
        4.7. Modal
        4.8. Drawer
        4.9. Loaders
        4.10. Media
    5.  Animations
*/

/*===========================================
0.  Globals
===========================================*/

* {
    box-sizing:border-box;
}

* div, * form, * input, * section, * footer, * code  {
    margin:0;
    padding:0;
    width:100%;
    float: left;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

:root   {
    --spacer:10px;
    --padding:20px;
    --border-radius:10px;

    --brand-background:oklch(14.5% 0 0);
    --brand-pale-blue:#f2f7fd;
    --brand-blue:#005ae0;
    --brand-dark-blue:#0047ab;
    --brand-orange:#ff9f00;
    --brand-green:oklch(79.2% .209 151.711);
    --brand-purple:#912fe8;
    --brand-red:oklch(70.4% .191 22.216);

    --brand-text-colour:oklch(98.5% 0 0);

    --brand-border-colour:oklch(100% 0 0/.1);
}

::selection {
    background:var(--brand-dark-blue);
    color:#fff;
}

.flex   {
    display: flex;
    align-items: center;
}
.flex.center    {
    justify-content: center;
}
.flex.left  {
    justify-content: left;
}
.flex.right {
    justify-content: right;
}

.spacer {
    height:var(--spacer);
}

.hide   {
    display:none;
}

@media screen and (min-width:0) {
    .hide-on-mobile {
        display:none;
    }
    .hide-on-desktop    {
        display: block;
    }
}

@media screen and (min-width:768px) {
    .hide-on-mobile {
        display:block;
    }
    .hide-on-desktop    {
        display: none;
    }
}

.clickable  {
    cursor:pointer;
}

body    {
    background:var(--brand-background);
    color:var(--brand-text-colour);
    font-family: "Inconsolata", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size:12px;
    line-height:18px;
    margin:0;
    padding:0;
}

/*===========================================
1.  Typography
===========================================*/

p   {
    display: block;
    float: left;
    height: auto;
    width: 100%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    line-height:18px;
}

@media screen and (min-width:0) {
    h1, h2, h3, h4, h5, h6  {
        font-weight: 700;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    h1  {
        font-size:1.5em;
        line-height:1.2em;
    }

    h2  {
        font-size:1.4em;
        line-height:1.2em;
    }

    h3, h4  {
        font-size:1.4em;
        line-height:1.2em;
    }
}

@media screen and (min-width:768px) {
    h1  {
        font-size:2.5em;
        line-height:1.2em;
    }

    h2  {
        font-size:2.1em;
        line-height:1.2em;
    }

    h3, h4  {
        font-size:1.8em;
        line-height:1.2em;
    }
}

span.highlight, p.highlight  {
    font-weight:700;
    color:var(--brand-green);
}

/*===========================================
2.  Forms
===========================================*/

input[type="text" i]  {
    height:50px;
    display: block;
    border-radius:var(--border-radius);
    background:oklch(22.9% 0 0);
    color:var(--brand-text-colour);
    border:1px solid var(--brand-border-colour);
    border-radius:5px;
    padding: 0 20px;
}


/*===========================================
3.  Lists
===========================================*/

ul, ol  {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

/*===========================================
4.  Components
=============================================
4.1. Buttons
===========================================*/

.button  {
    height:40px;
    width:auto;
    padding:0 30px;
    background:black;
    color:white;
    border-radius: 5px;
    cursor:pointer;
    font-weight:800;
    text-decoration: none;
}
.button:hover   {
    background:#fff;
    color:#000;
}

.button.linear  {
    background:var(--brand-text-colour);
    border:1px solid var(--brand-text-colour);
    color:var(--brand-background);
}

.button img {
    height:25px;
    width:25px;
    margin:0 10px 0 0;
}

.button.open-url    {
    width:30px;
    height:30px;
    background: var(--brand-blue);
    border-radius:3px;
    border:1px solid var(--brand-pale-blue);
    padding:0;
}

.button.further-information {
    margin:10px 0 0 0;
    background:#fff;
    width:100%;
    height:25px;
    color:#000;
    border-radius:3px;
    font-size:0.9em;
    font-weight:800;
    padding:0;
}

/*===========================================
4.2. Cards
===========================================*/

.card   {
    border-radius:var(--border-radius);
    background:oklch(22.9% 0 0);
    border:1px solid var(--brand-border-colour);
}

.page.card  {
    margin:0 0 20px 0;
    transition:all 0.3s ease;
}
.page.card.open {
    border:1px solid #fff;
}

.page.card .address {
    padding:calc(var(--padding) / 2) var(--padding);
    border-radius:var(--border-radius) var(--border-radius) 0 0;
}
.page.card .address span {
    width:100%;
    display: block;
    font-size:0.9em;
}
.page.card .address a   {
    margin:0 0 0 10px;
    color:inherit;
}
.page.card .address span:first-child    {
    font-weight: 600;
    font-size:1em;
}

.page.card .preview {
    padding:var(--padding);
}

.score-bar   {
    width:100%;
    height:8px;
    background:var(--brand-border-colour);
    border-radius:5px;
}
.score-bar .inner    {
    height:8px;
    background: var(--brand-purple);
    border-radius:5px;
}

@media screen and (min-width:0) {
    .page.card .status  {
        width:100%;
    }
    .page.card .scrape-summary {
        margin:10px 0 0 0;
        width:100%;
    }
}

@media screen and (min-width:768px) {
    .page.card .status  {
        width:50%;
    }
    .page.card .scrape-summary {
        margin:0;
        width:50%;
    }
}
.page.card .scrape-summary span {
    border:1px solid var(--brand-purple);
    height: 35px;
    padding:0 20px;
    border-radius:5px;
    font-weight:700;
}

.page.card .details {
   
}

.page.card .details .table  {
   
}
.page.card .details .table .table-title {
    padding:calc(var(--padding) / 2) var(--padding);
    font-size:1.2em;
    font-weight:800;
    background:oklch(22.9% 0 0);
    border-top:1px solid var(--brand-border-colour);
    border-bottom: 1px solid var(--brand-border-colour);
    color: var(--brand-text-colour);
}
.page.card .details .table .table-title img {
    width:25px;
    height:25px;
    margin:0 10px 0 0;
}
.page.card .details .table .table-title span    {
    height:30px;
}

.page.card .result  {
    padding:0 var(--padding);
}


@media screen and (min-width:0) {
    .page.card .details .table .four-columns {
        width:100%;
    }
    .page.card .details .row    {
        padding:5px 0;
    }
}

@media screen and (min-width:768px) {
    .page.card .details .table .four-columns {
        width:33.333%;
    }
    .page.card .details .row:nth-child(2), .page.card .details .row:nth-child(5), .page.card .details .row:nth-child(8)   {
        padding:5px var(--padding);
    }
}

.page.card .details .row .row-title {
    font-weight: 500;
}

.stat   {
    /* border:1px solid var(--brand-pale-blue); */
    border-radius:5px;
    padding:10px;
    background:oklch(22.9% 0 0);
    border:1px solid var(--brand-border-colour);
}

.stat .spacer  {
    height:5px;
}

.stat div:first-child   {
    text-align:center;
    font-weight: 800;
    font-size: 1.1em;
}

.stat.h-tag {
    /* width:16.666%; */
}

.accordion  {

}

.status-icon    {
    width:15px;
    height:15px;
    margin:0 7px 0 0;
}
.status-icon img    {
    width:15px;
    height:15px;
}

p.blurb {
    padding:var(--padding) var(--padding) 0 var(--padding);
}

.error  {
    color:var(--brand-text-colour);
}
.error .button.further-information  {
    background:var(--brand-orange);
    color:var(--brand-background);
}
.ok .button.further-information  {
    border:1px solid var(--brand-pale-blue);
    color:#000;
}

.card.form  {
    padding:20px;
    max-width:600px;
}
.card.form img  {
    max-width:100px;
}
.card.form h1   {
    font-size:2em;
    margin:10px 0;
}
.card.form p    {
    font-size:1.1em;
    margin:0 0 20px 0;
}
.card.form input    {
    margin:0 0 10px 0;
}
.card.form .button  {
    width:100%;
    background: var(--brand-purple);
}

/*===========================================
4.3. Headers
===========================================*/

@media screen and (min-width:0)    {
    .cta   {
        padding:20px;
        margin:0;
        text-align: center;
    }
    .cta .inner {
        max-width:960px;
    }
    .cta .inner h1  {
        padding:0;
    }
    .cta .inner p   {
        margin:20px 0 15px 0;
        padding:0;
        font-size:1.1em;
        line-height:1.3em;
    }
    .cta .inner input  {
        width:100%;
        float: left;
        height:55px;
        margin:0 0 5px 0;
        font-size:1.1em;
    }
    .cta .inner .button {
        width:100%;
        float:left;
        height:45px;
        background: var(--brand-purple);
        color: #fff;
        font-weight:600;
        font-size:1.3em;
    }

    .cta .analyze-wrapper   {
        padding:0;
    }

    .cta .inner .welcome    {
        padding:30px 0 0 0;
    }
    .cta .inner .welcome .inner {
        max-width:600px;
    }
    .cta .inner .welcome .inner div    {
        width:50px;
    }
    .cta .inner .welcome img    {
        width:40px;
        height:40px;
        border-radius:20px;
        margin:0 0 20px 0;
    }
    .cta .inner .welcome p  {
        margin:0;
        font-size:0.9em;
        line-height:1.2em;
        font-style: italic;
        width:calc(100% - 50px);
        padding:0 0 0 10px;
        text-align:left;
        opacity:0.6;
    }
    .cta .inner .welcome a  {
        color:inherit;
    }
}

@media screen and (min-width:768px)    {
    .cta   {
        padding:50px;
    }
    .cta .inner h1  {
        padding:0 10%;
    }
    .cta .inner p   {
        margin:20px 0 30px 0;
        padding:0 20%;
        font-size:1.4em;
        line-height:1.3em;
    }
    .cta .inner input  {
        width:74%;
        float: left;
        height:55px;
        margin:0 1% 0 0;
        font-size:1.35em;
    }
    .cta .inner .button {
        width:25%;
        float:left;
        height:55px;
        background: var(--brand-purple);
        color: #fff;
        font-weight:600;
        font-size:1.3em;
    }
    .cta .inner .welcome img    {
        width:50px;
        height:50px;
        border-radius:25px;
        margin:0 0 20px 0;
    }
    .cta .inner .welcome p  {
        margin:0;
        font-size:1em;
        line-height:1.4em;
        font-style: italic;
        width:calc(100% - 80px);
        padding:0 0 0 20px;
        text-align:left;
        opacity:0.6;
    }
}

/*===========================================
4.4. Structure
===========================================*/

@media screen and (min-width:0)    {
    .output {
        padding:0 20px;
    }
    .output .output-inner  {
    }
}

@media screen and (min-width:1024px)    {
    .output {
        padding:0 50px;
    }
}

.output .image    {
    background:#ddd;
    width:25%;
    border-radius:10px;
    padding:10px;
}

.output .image p    {
}

.output .videos-flow    {
    margin:0 0 30px 0;
}

/*===========================================
4.5. Navigation
===========================================*/

@media screen and (min-width:0) {
    header  {
        height: 60px;
        padding: 20px 20px 0 20px;
    }
    header .logo    {
        width:50%;
    }
    header .logo img    {
        height:20px;
        width:auto;
    }

    header .menu, header .action    {
        display:none;
    }
}

@media screen and (min-width:768px) {
    header  {
        height: 100px;
        padding: 45px 50px 0 50px;
    }
    header .logo    {
        width:25%;
    }
    header .logo img    {
        height:25px;
        width:auto;
    }

    header .menu    {
        display:flex;
    }
    header .action    {
        display:flex;
    }
}

header ul   {
    height: 35px;
    padding: 6px 0 0 0;
}
header ul li    {
    list-style-type: none;
    display: inline;
    width:auto;
    padding:0 20px;
    font-size:1.2em;
}

header ul li a  {
    color:#fff;
    opacity:0.6;
    text-decoration: none;
    width:auto;
    font-weight:600;
}

header a.analyze    {
    border-bottom:2px solid var(--brand-purple);
    color:inherit;
    text-decoration: none;
    font-weight:600;
    font-size:1.2em;
    margin:5px 0 0 0;
}
header a.analyze img    {
    width:20px;
    height:20px;
    margin:0 5px 7px 0;
}

section.mobile-menu {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: var(--brand-background);
    padding:20px;
    z-index:99;
}
section.mobile-menu .close  {
    top: 0;
    left: initial;
    height: 40px;
    width: 40px;
    float: right;
    position: relative;
    transform: scale(0.7);
    right: 0;
}
section.mobile-menu ul  {
    list-style-type: none;
}
section.mobile-menu ul li   {
    margin:0 0 10px 0;
}
section.mobile-menu ul li a {
    color: var(--brand-text-colour);
    text-decoration: none;
    font-size:1.4em;
    font-weight:700;
}
section.mobile-menu .button {
    background: var(--brand-purple);
}

.mmb    {
    position: relative;
    top:0;
    left:initial;
    right:0;
    float:right;
    height:35px;
    width:35px;
}
.mmb div    {
    position: absolute;
    top:0;
    left:0;
    height: 2px;
    background: var(--brand-text-colour);
    width:35px;
    border-radius:3px;
}
.mmb div:first-child    {
    top:8px;
}
.mmb div:last-child  {
    top:15px;
}

/*===========================================
4.6. Elements
===========================================*/

@media screen and (min-width:0px)   {
    .cta .inner .features {
        margin: 50px 0 0 0;
    }

    .cta .inner .features .four-columns {
        padding: 30px;
        width:100%;
        margin:0 0 10px 0;
    }

    .cta .inner .features .four-columns p {
        padding: 0;
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
    }

    .cta .inner .features .four-columns p:last-child {
        font-size: 1em;
        line-height: 1.55em;
        font-weight: 400;
        margin: 10px 0 0 0;
    }

    .features .four-columns img {
        width:40px;
        height:40px;
        margin:0 0 15px 0;
    }
}

@media screen and (min-width:768px) {
    .cta .inner .features .four-columns {
        padding: 30px;
        width:32%;
    }
    .cta .inner .features .four-columns:nth-child(2)    {
        margin:0 2% 0 2%;
    }
}

article p, article h1, article h2, article h3, article h4, article h5, article h6  {
    margin:0 0 20px 0;
}

article p, article ul li   {
    font-size:1.2em;
    line-height:1.6em;
    margin:0 0 10px 0;
}

article .inner  {
    max-width:1280px;
}

.faqs .inner    {
    max-width:720px;
}

@media screen and (min-width:0) { 
    .faqs .inner .question  {
        border-bottom:1px solid var(--brand-border-colour);
        font-size:1em;
        font-weight:600;
        color:var(--brand-text-colour);
    }
    .faqs .inner .question .q p {
        width:calc(100% - 50px);
        padding:20px 30px;
        margin:0;
    }
    .faqs .inner .question .q div   {
        width:50px;
        height:50px;
        background:url('../img/icons/plus-icon.svg') no-repeat center center / 50px 50px;
    }

    .faqs .inner .question .answer p    {
        padding:0 30px;
        font-size:1em;
        font-weight:initial;
    }
}

@media screen and (min-width:768px) {
    .faqs .inner .question  {
        font-size:1.2em;
        font-weight:600;
    }
}

.summary {
    margin:20px 0;
    padding:0 0 20px 0;
    border-bottom:1px solid var(--brand-border-colour);
}
.summary div {
    width:33.333%;
}
.summary div span   {
    widtH:100%;
    display:block;
    float:left;
}
.summary div span:first-child   {
    font-size:3em;
    font-weight:700;
    margin:0 0 15px 0;
}
.summary .score {
    font-size: 3em;
    font-weight: 700;
    margin: 0 0 15px 0;
}

footer  {
    padding: 50px 20px;
}
footer .inner   {
    max-width:960px;
}

footer .logo img    {
    max-height:20px;
    margin: 0 0 20px 0;
}

footer ul   {
    margin:0 0 20px 0;
}
footer ul li    {
    list-style-type: none;
    margin:0 0 5px 0;
}
footer ul li a  {
    color:inherit;
    text-decoration:none;
}

@media screen and (min-width:0) {
    .panel  {
        padding:0 20px;
        max-width: 960px;
    }
}

@media screen and (min-width:768px) {
    .panel  {
        max-width: 960px;
    }
}

.prompts .button    {
    background:Var(--brand-purple);
}

.final-score    {
    width:100% !important;
}
.final-score div    {
    width:100%;
}
.final-score .score-bar {
    margin:0 0 5px 0;
}

.final-score .score-label    {
    font-weight: 700;
    padding: 2px 6px 3px 6px;
    width: auto;
    border-radius: 3px;
    margin: 6px 0 6px 0;
}
.final-score .score-label.very-poor {
    background:oklch(70.4% .191 22.216);
}
.final-score .score-label.poor {
    background:#ff9f00;
}
.final-score .score-label.good {
    background:oklch(79.2% .209 151.711);
}
.final-score .score-label.very-good {
    background:limegreen;
}

/*===========================================
4.7. Modal
===========================================*/

@media screen and (min-width:0) {
    .overlay    {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:var(--brand-background);
        overflow:auto;
        padding:0;
        z-index:99;
    }
    .overlay .output    {
        padding:0;
    }
}

@media screen and (min-width:768px) {
    .overlay    {
        padding:30px;
    }
    .overlay .output    {
        padding: 0 20px;
    }
}

.overlay .output-inner  {
    padding:20px;
    border-radius:20px;
}
.overlay .output-inner .web-address {
    border-bottom:1px solid var(--brand-border-colour);
}

.overlay.email  {
    z-index:100;
    background: rgba(0, 0, 0, 0.7);
}

.prompt {
    position: fixed;
    top: initial;
    bottom: 0;
    left: 0;
    height: auto;
    padding:30px 20px;
    z-index: 100;
    border-top: 1px solid var(--brand-border-colour);
    text-align:center;
    background: var(--brand-background);
    transform-origin: bottom center;
    transform: scale(1);
}
.prompt .inner  {
    max-width:960px;
}
.prompt .inner h1   {
    font-size:1.7em;
    margin:0 0 10px 0;
}
.prompt .inner p    {
    font-size:1.2em;
    line-height:1.6em;
    margin:0 0 20px 0;
}
.prompt .inner .button  {
    background:var(--brand-purple);
    font-weight:600;
    font-size:1.2em;
}

.prompt .inner .no-thanks   {
    margin:30px 0 0 0;
    width:auto;
}

.prompt.bulge {
    animation: bulgeShort 3s ease infinite forwards;
}

.alert  {
    position: fixed;
    top:initial;
    bottom:30px;
    left:initial;
    right:30px;
    width:auto;
    background:var(--brand-green);
    color:var(--brand-background);
    padding:10px 20px;
    border-radius:5px;
    font-weight:800;
    z-index:99;
}

/*===========================================
4.8. Drawer
===========================================*/

.drawer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.4);
    overflow:hidden;
    padding:30px;
    z-index:99;
}

.drawer .inner  {
    position: fixed;
    top:0;
    left:initial;
    right:0;
    width:100%;
    max-width:480px;
    height:100%;
    overflow:auto;
    padding:var(--padding);
    background:var(--brand-background);
    border-left:1px solid var(--brand-border-colour);
}

.drawer .inner .close   {
    position: absolute;
    top: 20px;
    left: initial;
    right: 30px;
    width: 20px;
    height: 20px;
}
.close div   {
    position: absolute;
    top:10px;
    width: 100%;
    height:2px;
    background:var(--brand-text-colour);
}
.close div:first-child   {
    transform: rotate(45deg);
}
.close div:last-child   {
    transform: rotate(-45deg);
}

.drawer .inner h1   {
    font-size:1.5em;
}

.drawer .inner ul   {
    margin:0 0 0 20px;
}

.drawer .inner .tab-buttons    {

}
.drawer .inner .tab-buttons div    {
    width:50%;
    height:40px;
    opacity:0.7;
    font-weight: 800;
    font-size:1.1em;
}
.drawer .inner .tab-buttons .active    {
    opacity:1;
    border-bottom:1px solid var(--brand-text-colour);
}

.drawer .inner .tabs    {
    padding:10px 0;
}
.drawer .inner .tabs .card   {
    padding:20px;
}
.drawer .inner .tabs .card .code-button {
    margin: 5px 0 0 0;
    border-radius: 10px;
    background: var(--brand-background);
    border: 1px solid var(--brand-border-colour);
    width: auto;
    padding: 5px 10px;
}
.drawer .inner .tabs .card .code-button img {
    width:15px;
    height: 15px;
    margin:0 10px 0 0;
}
.drawer .inner .tabs .card pre {
    background: #1e1e1e;
    color: var(--brand-orange);
    padding: 1em;
    border-radius: 0px;
    overflow-x: auto;
    font-family: monospace;
    white-space: pre;
    margin-block: 1em 1em;
    font-size: 0.9em;
    width:100%;
    float:left;
    background: var(--brand-background);
    border: 1px solid var(--brand-border-colour);
}

.drawer .inner .button  {
    width:100%;
}

/*===========================================
4.9. Loaders
===========================================*/

.audit-loader   {
    text-align: center;
}
.audit-loader .loader div   {
    width:30px;
    height:30px;
    border-radius:15px;
    background:var(--brand-purple);
    animation: bulge 3s ease infinite forwards;
    transform-origin: center center;
    transform:scale(1);
}
.audit-loader p {
    margin:10px 0 0 0;
}

/*===========================================
4.10. Media
===========================================*/

.featured-image   {
    width:100%;
    height:auto;
    border-radius:10px;
    border:2px solid var(--brand-purple);
}
.featured-image-no-border   {
    width:100%;
    height:auto;
    border-radius:10px;
}

/*===========================================
5. Animations
===========================================*/

@keyframes bulge    {
    0%      {transform: scale(1)}
    50%     {transform: scale(0.8)}
    100%    {transform: scale(1)}
}

@keyframes bulgeShort    {
    0%      {transform: scale(1)}
    50%     {transform: scale(1.05)}
    100%    {transform: scale(1)}
}