:root {
    --c-main-10: hsl(220, 52%, 12%);
    --c-main-20: hsl(220, 52%, 22%);
    --c-main-30: hsl(220, 52%, 32%);
    --c-main-40: hsl(220, 52%, 40%);
    --c-main-50: hsl(220, 52%, 46%);
    --c-main-60: hsl(220, 52%, 58%);
    --c-main-70: hsl(220, 52%, 70%);
    --c-main-80: hsl(220, 52%, 80%);
    --c-main-90: hsl(220, 52%, 90%);
    --c-main-10x: hsla(220, 52%, 12%, 0.4);
    --c-main-20x: hsla(220, 52%, 22%, 0.4);
    --c-main-30x: hsla(220, 52%, 32%, 0.4);
    --c-main-40x: hsla(220, 52%, 40%, 0.4);
    --c-main-50x: hsla(220, 52%, 46%, 0.4);
    --c-main-60x: hsla(220, 52%, 58%, 0.4);
    --c-main-70x: hsla(220, 52%, 70%, 0.4);
    --c-main-80x: hsla(220, 52%, 80%, 0.4);
    --c-main-90x: hsla(220, 52%, 90%, 0.4);
    --c-bw-10: hsl(220, 10%, 10%);
    --c-bw-20: hsl(220, 10%, 20%);
    --c-bw-30: hsl(220, 10%, 30%);
    --c-bw-40: hsl(220, 10%, 40%);
    --c-bw-50: hsl(220, 10%, 50%);
    --c-bw-60: hsl(220, 10%, 60%);
    --c-bw-70: hsl(220, 10%, 70%);
    --c-bw-80: hsl(220, 10%, 80%);
    --c-bw-85: hsl(220, 10%, 85%);
    --c-bw-90: hsl(220, 10%, 90%);
    --c-bw-95: hsl(220, 10%, 95%);
    --c-bw-10x: hsla(220, 10%, 10%, 0.4);
    --c-bw-20x: hsla(220, 10%, 20%, 0.4);
    --c-bw-30x: hsla(220, 10%, 30%, 0.4);
    --c-bw-40x: hsla(220, 10%, 40%, 0.4);
    --c-bw-50x: hsla(220, 10%, 50%, 0.4);
    --c-bw-60x: hsla(220, 10%, 60%, 0.4);
    --c-bw-70x: hsla(220, 10%, 70%, 0.4);
    --c-bw-80x: hsla(220, 10%, 80%, 0.4);
    --c-bw-85x: hsla(220, 10%, 85%, 0.4);
    --c-bw-90x: hsla(220, 10%, 90%, 0.4);
    --c-bw-95x: hsla(220, 10%, 95%, 0.4);

    
    /* typography */
    --font-size-main: 16px;
    --font-size-small: 13px;
    --font-weight-main: 400;
    --line-height-main: 1.5rem;
    --font-family-main: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --font-h1: bold calc(1.33 * 1.33 * 1.33 * var(--font-size-main))/112% var(--font-family-main);
    --font-h2: bold calc(1.33 * 1.33 * var(--font-size-main))/120% var(--font-family-main);
    --font-h3: bold calc(1.33 * var(--font-size-main))/133% var(--font-family-main);

    /*  body */
    --c-body-bg: var(--c-bw-90);
    --c-selection-bg: var(--c-bw-80x);
    --c-accent-bg: var(--c-main-90);
    --c-accent: var(--c-main-50);
    
    /* text */
    --c-text: var(--c-bw-20);
    --c-texc-light: var(--c-bw-50);
    --c-text-invert: var(--c-bw-90);
    --c-text-danger: hsl(12, 60%, 50%);
    --c-text-success: hsl(160, 50%, 35%);
    --c-link: var(--c-text);
    --c-link-hover: var(--c-main-50);
    --c-link-underline: var(--c-main-50x);
    --c-link-underline-hover: var(--c-main-50);

    /* decorations */
    --c-hr: var(--c-bw-60x);

    /* card */
    --c-card-bg: #fff;
    --c-dark-bg: var(--c-text);
    --c-toolbar-bg: hsl(20, 2%, 95%);
    --c-card-border: hsla(20, 2%, 75%, 0.4);

    /* button */
    --c-button-bg: #fff;
    --c-button-bg-hover: #fff;
    --c-button-border: var(--c-bw-80);
    --c-button-border-hover: var(--c-main-60);
    --c-button-border-active: var(--c-main-50);
    --c-button-primary-bg: var(--c-main-40);
    --c-button-primary-bg-hover: var(--c-main-50);

    /* table */
    --c-table-bg: #fff;
    --c-table-head-bg: hsla(20, 2%, 80%, 0.4);
    --c-table-border: var(--c-card-border);

    /* input */
    --c-input-bg: #fff;
    --c-input-border: hsl(20, 2%, 80%);
    --c-input-border-focus: hsl(25, 67%, 70%);
    --c-input-readonly-bg: var(--c-table-head-bg);

    /* shadows */
    --c-shadow: hsla(24, 2%, 24%, 0.04);
    --c-shadow-focus: hsla(24, 70%, 50%, 0.2);
    --shadow-1:
        0 1px 1px var(--c-shadow),
        0 2px 2px var(--c-shadow),
        0 4px 4px var(--c-shadow);
    --shadow-2:
        0 1px 1px var(--c-shadow),
        0 2px 2px var(--c-shadow),
        0 4px 4px var(--c-shadow),
        0 8px 8px var(--c-shadow);
    --shadow-3:
        0 1px 1px var(--c-shadow),
        0 2px 2px var(--c-shadow),
        0 4px 4px var(--c-shadow),
        0 8px 8px var(--c-shadow),
        0 16px 16px var(--c-shadow);
    --shadow-inset-1:
        inset 0 1px 1px var(--c-shadow),
        inset 0 2px 2px var(--c-shadow);
    --shadow-focus:
        0 0 1px var(--c-shadow-focus),
        0 0 3px var(--c-shadow-focus),
        0 0 6px var(--c-shadow-focus),
        0 0 12px var(--c-shadow-focus);

    /* misc */
    --radius-input: 4px;
    --radius-button: 4px;
    --radius-card: 8px;
    --c-overlay: hsla(36, 6%, 70%, 0.8);
    --c-progress: hsl(170, 42%, 40%);
}

/* header */
header {
    position: sticky;
    top: 0;
    padding: 1rem 0;
    background: #fff;
    box-shadow: var(--shadow-1);
    z-index: 101;
}

header h1 {
    display: inline-block;
    overflow: hidden;
    text-indent: -9999px;
    width: 132px;
    height: 28px;
    margin: 0;
    background: url('../images/logo.svg') no-repeat center center;
    background-size: 132px 28px;
}

header nav {
    display: flex;
    font-weight: 500;
}

.subnav {
    box-shadow: var(--shadow-1);
    background: var(--c-bw-95);
    font-size: 0.875rem;
    /* margin-bottom: 2rem; */
}

footer {
    background: var(--c-bw-40);
    padding: 2rem;
    text-align: center;
}

footer, footer * {
    color: var(--c-bw-95) !important;
    font-size: 0.9rem;
}

footer a._ {
    text-decoration-color: var(--c-bw-95x);
}

footer a._:hover {
    color: var(--c-bw-95);
    text-decoration-color: var(--c-bw-95)
}

.hero {
    min-height: 48vmin;
    background-color: #A0ACCF;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 48vmin 0 0 0;
    box-shadow: var(--shadow-inset-1);
}

.hero h1 {
    font-size: 2.4rem;
    letter-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 699px) {
    .hero h1 {
        font-size: 5vw;
    }
}

.hero .backdrop {
    background: hsla(225, 33%, 33%, 0.7);
    backdrop-filter: blur(2px);
    padding: 1rem 2.4rem;
}

.hero .backdrop * {
    color: #fff;
    margin: 0 auto;
    /* text-transform: uppercase; */
}

.hero.supplier-portal {
    background-image: url('/images/hero-supplier.png')
}

.hero.franchise-portal {
    background-image: url('/images/hero-franchise.png')
}

.hero.edi-portal {
    background-image: url('/images/hero-edi-portal.png')
}

.hero.endoxa-flow {
    background-image: url('/images/hero-flow.png')
}

.hero.product-listing {
    background-image: url('/images/hero-listing.png')
}

.hero.product-publishing {
    background-image: url('/images/hero-publishing.jpg?5')
}

img.logo {
    width: 128px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

img.logo.xl {
    width: 256px;
}

/* mobile menu */

#mobile-menu-box {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--c-main-60x);
    z-index: 102;
    overflow: hidden;
}

body.mobile-menu-open {
    position: fixed;
    overflow-y: hidden;
}

body.mobile-menu-open #mobile-menu-box {
    display: block;
    opacity: 1;
}

#mobile-menu {
    position: fixed;
    box-shadow: var(--shadow-2);
    top: 0.5rem;
    right: 0.5rem;
    background: #fff;
    min-width: 12rem;
    max-width: calc(100% - 1rem);
    border-radius: var(--radius-2);
    z-index: 103;
    overflow-y: auto;
    padding: 0.5rem;
}

#mobile-menu a {
    z-index: 104;
}

#home-hero {
    text-align: center;
    padding: 3rem 0;
    background: var(--c-bw-90) url('/images/squared-bg-1.jpg') no-repeat center top;
    background-size: 2560px 540px;
    min-height: 540px;
}

#home-hero h1 {
    font-weight: bold;
    font-size: 3.33rem;
    line-height: 3.33rem;
    letter-spacing: -1px;
    word-break: normal;
}

@media only screen and (max-width:680px) {
    #home-hero h1 {
        font-size: 8vw;
        line-height: 8vw;
    }
}

.moonwhite-bg {
    background: var(--c-bw-95);
    border-bottom: 1px solid var(--c-bw-80);
    padding: 4rem 0;
}

.squared-bg-2 {
    background: url('/images/squared-bg-2.jpg') no-repeat center top;
    background-size: 1280px 224px;
    padding: 6rem 0 3rem 0;
}

.squared-bg-3 {
    /* background: var(--c-bw-80); */
    background: var(--c-bw-80) url('/images/squared-bg-3.jpg') no-repeat center top;
    background-size: 1280px 224px;
    padding: 4rem 0;
}

.cool-stat {
    background-repeat: no-repeat;
    background-size: 240px 180px;
    background-position: center bottom;
    padding: 24px 24px 100px 24px;
}

.cool-stat h1 {
    font-weight: normal;
    line-height: 3rem;
    font-size: 3rem;
    letter-spacing: -0.12rem;
    margin: 0;
}

.cool-stat-1 {
    background-image: url('/images/cool-stat-1.png');
}

.cool-stat-2 {
    background-image: url('/images/cool-stat-2.png');
}

.cool-stat-3 {
    background-image: url('/images/cool-stat-3.png');
}