@charset "UTF-8";

:root {
    --color-mono-dark: #1c1c1c;
    --color-mono-mid: #707070;
    --color-mono-mid-light: #aaa;
    --color-mono-light: #fff;
    --color-mono-pale: #e1e1e1;
    --color-mono-pale-light: #f6f6f6;
    --color-mono-pale-xlight: #fafafa;
    --color-mono-pale-mid: #f1f1f1;
    --color-mono-pale-dark: #d8d8d8;
    --color-primary: #54436d;
    --color-primary-xxxlight: #f6f0ff;
    --color-primary-xxlight: #c3b1ed;
    --color-primary-xlight: #927acc;
    --color-primary-light: #61479e;
    --color-primary-dark: #362949;
    --color-primary-xdark: #1b0442;
    --color-primary-xxdark: #0d002b;
    --color-primary-vibrant: #8040e6;
    --color-primary-vibrant-light: #935aee;
    --color-primary-vibrant-dark: #61479e;
    --color-primary-brand: #5200bc;
    --color-secondary: #ffba00;
    --color-secondary-light: #ffd76b;
    --color-secondary-dark: #d59100;
    --color-state-error: #dc4c5f;
    --color-state-success: #5bae73;
    --color-state-alert: #ff8c00;
    --color-state-info: #3d9ed6;
    --color-brand-facebook: #4d70a8;
    --color-brand-google-plus: #e3411c;
    --color-brand-linkedin: #0074b3;
    --color-brand-pinterest: #cc3838;
    --color-brand-twitter: #00b8f0;
    --color-body-background: #fff;
    --color-body-text: #1c1c1c;
    --color-heading-text: #1c1c1c;
    --color-panel-background: #e1e1e1;
    --color-separator: #707070;
    --color-link-text: #8040e6;
    --color-link-text-hover: #61479e;
    --color-button-background: #54436d;
    --color-button-text: #fff;
    --color-button-background-hover: #61479e;
    --color-button-text-hover: #fff;
    --spacing-xxsmall: 0.3163271633rem;
    --spacing-xsmall: 0.5624296963rem;
    --spacing-small: 1rem;
    --spacing-base: 1.778rem;
    --spacing-large: 3.161284rem;
    --spacing-xlarge: 5.620762952rem;
    --spacing-xxlarge: 9.9937165287rem;
    --spacing-super: 17.768827988rem;
    --width-content: 70.5rem;
    --width-large: 60.5rem;
    --width-medium: 50.5rem;
    --width-small: 39rem;
    --width-xsmall: 29rem;
    --zindex-push: -1;
    --zindex-zeroed: 0;
    --zindex-base: 1;
    --zindex-pull: 2;
    --zindex-sticky: 50;
    --zindex-modal: 100;
    --zindex-force-top: 200;
    --font-size-base: 1rem;
    --font-size-buttons: 0.9rem;
    --font-size-subheading: 1.75rem;
    --font-size-super: 2.5rem;
    --font-size-mega: 3rem;
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-h4: 1rem;
    --font-size-h5: 0.9rem;
    --font-size-h6: 0.8rem;
    --font-size-small: 0.9rem;
    --font-size-xsmall: 0.8rem;
    --font-size-xxsmall: 0.7rem;
    --font-size-tiny: 0.6rem;
    --font-family-body: "Open Sans", sans-serif;
    --font-family-headings: "Open Sans", sans-serif;
    --font-family-buttons: "Open Sans", sans-serif;
    --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-accent: "PP Mondwest", serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-body: 400;
    --font-weight-headings: 700;
    --font-weight-buttons: 700;
    --font-line-height-body: 1.35;
    --font-line-height-headings: 1.125;
    --font-line-height-headings-accent: 1.05;
    --font-line-height-buttons: 1;
    --font-letter-spacing-body: 0;
    --font-letter-spacing-headings: 0;
    --font-letter-spacing-buttons: 0;
    --animation-duration-xshort: 150ms;
    --animation-duration-short: 300ms;
    --animation-duration-regular: 600ms;
    --animation-duration-long: 1200ms;
    --animation-easing-default: ease-out;
    --animation-easing-exaggerated: cubic-bezier(1, 0, 0, 1);
    --animation-easing-smooth: cubic-bezier(0.77, 0, 0.175, 1);
    --shadow-drop-small: 0 0.1rem 0.3rem -0.1rem rgba(0, 0, 0, 0.5);
    --shadow-drop: 0 0.2rem 0.5rem -0.2rem rgba(0, 0, 0, 0.5);
    --shadow-drop-large: 0 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.5);
    --shadow-drop-soft-small: 0 0.1rem 0.3rem -0.1rem rgba(0, 0, 0, 0.25);
    --shadow-drop-soft: 0 0.2rem 0.5rem -0.2rem rgba(0, 0, 0, 0.25);
    --shadow-drop-soft-large: 0 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.25);
    --shadow-drop-soft-xlarge: 0 0.4rem 1.5rem -0.4rem rgba(0, 0, 0, 0.25);
    --shadow-drop-text-small: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
    --shadow-drop-text: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
    --shadow-drop-text-large: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-radial-small: 0 0 0.3rem -0.1rem rgba(0, 0, 0, 0.25);
    --shadow-radial: 0 0 0.5rem -0.2rem rgba(0, 0, 0, 0.25);
    --shadow-radial-large: 0 0 1rem -0.25rem rgba(0, 0, 0, 0.25)
}

a {
    color: #8040e6;
    cursor: pointer;
    text-decoration: none;
    transition: color 300ms ease-out
}

a:focus, a:hover {
    color: #61479e
}



.template-home-v3-earn__calculator__terms {
    font-size: var(--font-size-tiny);
    text-align: center
}

.earnings-calculator {
    background-color: var(--color-mono-pale-light);
    border: 1px solid var(--color-mono-pale);
    border-radius: var(--spacing-xsmall);
    display: grid
}

.earnings-calculator__heading {
    padding: var(--spacing-base) var(--spacing-base) var(--spacing-small)
}

.earnings-calculator__config {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small) var(--spacing-base);
    padding: 0 var(--spacing-base)
}

.earnings-calculator__config__item {
    display: grid;
    flex: 1 0 auto;
    gap: var(--spacing-xxsmall)
}

.earnings-calculator__config__item__label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium)
}

.earnings-calculator__stage {
    overflow: hidden;
    position: relative
}

.earnings-calculator__stage__graph {
    height: auto;
    overflow: visible;
    position: relative;
    width: 100%
}

.earnings-calculator__stage__graph__static {
    fill: var(--color-mono-pale)
}

.earnings-calculator__stage__graph__dynamic {
    fill: var(--color-primary-xlight)
}

.earnings-calculator__output {
    font-size: var(--font-size-small);
    left: var(--spacing-base);
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: calc(100% - var(--spacing-base) * 2)
}

.earnings-calculator__output__figure {
    --font-size-scale-modifier: 1;
    --font-size-base: var(--font-size-h2);
    font-size: calc(var(--font-size-base) * var(--font-size-scale, 1) * var(--font-size-scale-modifier));
    font-weight: var(--font-weight-bold)
}

@media screen and (min-width: 371px) {
    .earnings-calculator__output__figure {
        --font-size-scale-modifier: .9;
        --font-size-base: var(--font-size-h1)
    }
}

@media screen and (min-width: 641px) {
    .earnings-calculator__output__figure {
        --font-size-scale-modifier: 1.25;
        --font-size-base: var(--font-size-super)
    }
}

@media screen and (min-width: 1025px) {
    .earnings-calculator__output__figure {
        --font-size-scale-modifier: 1.5
    }
}

@media screen and (min-width: 1201px) {
    .earnings-calculator__output__figure {
        --font-size-base: var(--font-size-mega)
    }
}

.earnings-calculator__labels {
    display: flex;
    font-size: var(--font-size-tiny);
    gap: var(--spacing-xsmall);
    justify-content: space-between;
    padding: var(--spacing-xsmall) var(--spacing-base) var(--spacing-small);
    text-align: center
}

@media screen and (min-width: 641px) {
    .earnings-calculator__labels {
        font-size: var(--font-size-xsmall)
    }
}

.earnings-calculator__labels__label {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0
}