/* -- Formatting -- */
.side-by-side, .stacked {display: flex}
.stacked {flex-direction: column}
.relative {position: relative}
.capitals {text-transform: uppercase}

.bold, h1, h2, h3, h4, h5, h6 {font-weight: 800}
.normal {font-weight: normal}
.thin {font-weight: 100}

.text-left {text-align: left}
.text-center {text-align: center}
.text-right {text-align: right}

.align-center {align-items: center}
.justify-center {justify-content: center}

.margin-left {margin-left: 0; margin-right: auto}
.margin-center {margin-left: auto; margin-right: auto}
.margin-right {margin-left: auto; margin-right: 0}

.width {width: 100%}
.fit-content {width: fit-content}
.max {flex: 1 0 auto}

.no-overflow {
    overflow: hidden;
}

.side-pad, .side-pad-wide {
    width: 100%;
    max-width: var(--max-w);
    padding: 0 var(--side-pad)
}

.side-pad-wide {max-width: var(--max-w-2)}

/* -- Sizing -- */
.g1 {gap: var(--size-1)}
.g2 {gap: var(--size-2)}
.g3 {gap: var(--size-3)}
.g4 {gap: var(--size-4)}
.g5 {gap: var(--size-5)}
.g6 {gap: var(--size-6)}

.pt1 {padding-top:    var(--size-1)}
.pb1 {padding-bottom: var(--size-1)}
.pt2 {padding-top:    var(--size-2)}
.pb2 {padding-bottom: var(--size-2)}
.pt3 {padding-top:    var(--size-3)}
.pb3 {padding-bottom: var(--size-3)}
.pt4 {padding-top:    var(--size-4)}
.pb4 {padding-bottom: var(--size-4)}
.pt5 {padding-top:    var(--size-5)}
.pb5 {padding-bottom: var(--size-5)}
.pt6 {padding-top:    var(--size-6)}
.pb6 {padding-bottom: var(--size-6)}

.mt1 {margin-top:    var(--size-1)}
.mb1 {margin-bottom: var(--size-1)}
.mt2 {margin-top:    var(--size-2)}
.mb2 {margin-bottom: var(--size-2)}
.mt3 {margin-top:    var(--size-3)}
.mb3 {margin-bottom: var(--size-3)}
.mt4 {margin-top:    var(--size-4)}
.mb4 {margin-bottom: var(--size-4)}
.mt5 {margin-top:    var(--size-5)}
.mb5 {margin-bottom: var(--size-5)}
.mt6 {margin-top:    var(--size-5)}
.mb6 {margin-bottom: var(--size-5)}

/* -- Colors -- */
.bg:not(.text)   {background-color: var(--bg)}
.bg-2:not(.text) {background-color: var(--bg-2)}
.bg-3:not(.text) {background-color: var(--bg-3)}
.fg:not(.text)   {background-color: var(--fg)}
.fg-2:not(.text) {background-color: var(--fg-2)}
.fg-3:not(.text) {background-color: var(--fg-3)}
.bg-txt-2 {background-color: var(--txt-2)}

.text   {color: var(--txt)}
.text.invert {color: var(--txt-inv)}

.text.bg   {color: var(--bg)}
.text.bg-2 {color: var(--bg-2)}
.text.bg-3 {color: var(--bg-3)}
.text.fg   {color: var(--fg)}
.text.fg-2 {color: var(--fg-2)}
.text.fg-3 {color: var(--fg-3)}

.txt {color: var(--txt)}
.txt-2 {color: var(--txt-2)}
.txt-3 {color: var(--txt-3)}

.brand-font   {font-family: var(--brand-font)}
.display-font {font-family: var(--display-font)}
.text-font    {font-family: var(--text-font)}

/* -- Responsive -- */
@media screen and (max-width: 1100px) {
    :root {
        --side-pad: 30px;
        --max-w: 750px
    }

    .how-it-works {
        padding: 0 25px;
    }

    .sub {
        display: none;
    }
    .dub {
        display: flex;
    }
}

@media screen and (max-width: 950px) {
    .hiw-main {
        padding: 50px;
        padding-bottom: 75px;
    }
}


@media screen and (max-width: 850px) {
    .how-it-works {
        padding: 0 10px;
    }

    .foot-white {
        width: 200px;
    }

    .brand-grid {
        grid-template-columns: repeat(2, 250px);
        place-items: center;
        gap: 40px;
    }

    .brand-old {
        width: 100px;
        height: 100px;
    }

    .brand-new {
        width: 150px;
        height: 150px;
    }
}

@media screen and (max-width: 800px) {
    .stackme1 {
        flex-direction: column-reverse;
    }

    .globe-box {
        display: none;
    }
}


@media screen and (max-width: 770px) {
    :root {
        --side-pad: 30px;
        --h1: 40px;
    }
    .hiw-card {
        flex-direction: column;
    }

    .cozy-svg {
        width: 45%;
        flex: 0 0 auto;
    }

    .plans {
        flex-direction: column;
    }
    .huge {
        font-size: 50px;
    }

    .nav-content {
        padding: 0 20px;
    }

    .carousel2 {
        height: 70px;
    }
    .carousel2-item {
        font-size: 70px;
    }
}

@media screen and (max-width: 700px) {
    .svg-side-by-side {
        flex-direction: column;
    }
    .svg-side-by-side-inv {
        flex-direction: column-reverse;
    }

    .hero-cover {
        flex-direction: column;
    }

    #van-svg {
        margin: auto;
        width: 70%;
        padding-bottom: 70px;
    }

    .cozy-svg {
        width: 57%;
        flex: 0 0 auto;
    }

    .cozy h2 {
        text-align: center;
    }

    .foot-white {
        width: 10px;
    }

    .huge {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
    }

    .foot {
        flex-direction: column;
        gap: 20px
    }

    .pricing-row {
        flex-direction: column;
        padding: 20px 20px;
        gap: 10px;
    }
    .pricing .pricing-row div {
        padding: 0px;
        border-right: none;
    }

    .raw {
        display: none;
    }

    .websites-row {
        flex-direction: column;
        padding: 20px 20px;
        gap: 5px;
    }

    .websites-row > div {
        border: none !important;
        padding: 0;
    }
}

@media screen and (max-width: 600px) {
    .text-center, .cozy h2, .cozy p {
        text-align: left;
    }

    .cozy-svg {
        width: 65%;
        flex: 0 0 auto;
    }

    .how-it-works {
        padding: 0 5px;
    }
    .hiw-main {
        padding: 30px;
        padding-bottom: 50px;
        gap: 50px
    }
    .hiw-card {
        border-radius: 40px;
    }
    .hiw-txt {
        padding: 50px 20px;
    }

    .foot-white {
        width: 0px;
    }

    .huge {
        font-size: 40px;
    }

    .review {
        flex-direction: column;
    }
    .review-bottom {
        flex-direction: column;
        gap: 5px;
        padding: 10px;
    }
    .review-details {
        padding: 0;
    }
    .review-stars {
        margin: 0 auto;
    }

    .stackme3 {
        flex-direction: column;
        gap: 30px
    }

    .brand-grid {
        grid-template-columns: repeat(2, 180px);
        place-items: center;
        gap: 20px;
    }

    .brand-old {
        width: 70px;
        height: 70px;
    }

    .brand-new {
        width: 110px;
        height: 110px;
    }

    .boxy {
        padding: 30px 20px;
    }

    .hideme1 {
        display: none;
    }

    .stackme4 {
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 500px) {
    :root {
        --side-pad: 10px
    }

    .hero.small .hero-cover-text {
        font-size: 60px;
    }

    .hiw-main {
        padding: 15px;
        gap: 20px;
        border-radius: 50px;
        padding-bottom: 25px;
    }
    .hiw-card {
        border-radius: 35px;
    }

    .hiw-button {
        margin: 10px auto;
    }

    .cozy-svg {
        width: 75%;
        flex: 0 0 auto;
    }

    .huge {
        width: 100%;
        padding: 0 20px;
        max-width: none;
    }

    .hiw-txt {
        padding: 50px 15px;
    }

    .stackme2 {
        flex-direction: column;
        gap: 15px;
    }

    .blob {
        padding: 40px 30px;
    }

    .centerme1 {
        text-align: center;
    }
}

@media screen and (max-width: 400px) {
    .plan-bottom {
        padding: 30px 15px;
    }

    .brand-grid {
        grid-template-columns: 1fr 1fr;
        place-items: center;
        gap: 40px 20px;
    }

    .brand-item {
        border-radius: 10px;
        border-bottom-right-radius: 30px;
    }

    .brand-old {
        width: 100px;
        height: 100px;
        border-radius: 0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .brand-new {
        width: 130px;
        height: 130px;
    }

    .brand-old::before {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(0deg, #0006 0%, transparent 100%);
    }

    .brand-item {
        flex-direction: column;
    }
}

@media screen and (max-width: 370px) {
    .boxy-link {
        font-size: 16px;
        line-break: anywhere;
        width: 100%;
        display: block;
    }
    .boxy-link a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: block
    }
}

@media screen and (max-width: 350px) {
    .plan-bottom {
        padding: 30px 5px;
    }
    .hero-cover .hero-text {
        height: 100px;
    }

    #title-text {
        padding: 5px 0;
    }
    .nav-content {
        gap: 0;
    }

    .collapse-item-hold {
        grid-template-rows: 130px 0fr;
    }

    .blob {
        padding: 50px 20px;
    }
}

@media screen and (max-width: 300px) {
    .review-details {
        display: none;
    }

    .hero-cover .hero-logo {
        flex: 0 0 150px;
    }

    .hero-cover .hero-text {
        height: 80px;
    }

    .hero.small .hero-cover-text {
        font-size: 50px;
    }

    .collapse-icon {
        display: none;
    }
}

@media screen and (max-width: 290px) {
    .huge {
        font-size: 30px;
        padding: 0 10px;
    }
}