:root {
        --j-gold: #ffc44d;
        --j-gray: rgba(255, 255, 255, 0.08);
        --j-dark-gray: #171819;
}
body {
        background:  #101211;
        color:       white;
        font-family: sans-serif;
}
b {
        color: white;
        opacity: 1;
}
.wrap {
        margin: auto;
        width:  90rem;
}
.header {
        display:         flex;
        flex-direction:  row;
        align-items:     center;
        justify-content: center;
        height:          4.5rem;
        font-size:       0.93rem;
}
.icon-btn {
        height:        100%;
        margin-right:  4rem;
        border-radius: 8px;
        cursor:        pointer;
        transition:    0.3s ease-in-out transform;
}
.icon-btn:hover {
        transform: scale(1.05);
}
.text-btn {
        margin:     0.125rem;
        padding:    0.875rem;
        cursor:     pointer;
        transition: 0.3s ease-in-out color;
}
.text-btn:hover {
        color: var(--j-gold);
}
.gold-grad {
        background: -webkit-linear-gradient(-45deg, #fff, #fff, #fff, #ffc44d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}
.gold-grad2 {
        background: -webkit-linear-gradient(-45deg, #fff, #fff, #ffc44d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}
h1 {
        font-size:     4.5rem;
        margin-top:    0rem;
        margin-bottom: 2.5rem;
        width:         fit-content;
}
h2 {
        font-size:     2.7rem;
        margin-top:    0rem;
        margin-bottom: 2.5rem;
        width:         fit-content;
}
h3 {
        letter-spacing: 0.05rem;
        width:          fit-content;
}
h2 .small {
        font-size: 1rem;
}
.content {
        font-size:     1.6rem;
        margin-bottom: 2rem;
        line-height:   2.4rem;
        color:         rgba(255,255,255,0.72);
}
.push-left  { margin-left:  auto; }
.push-right { margin-right: auto; }
.gray-btn {
        background:    var(--j-gray);
        padding:       0.5625rem 1.25rem;
        border-radius: 0.3rem;
        margin-right:  0.7rem;
}
.gray-btn2 {
        background:    var(--j-gray);
        padding:       1rem 1.75rem;
        border-radius: 0.3rem;
        margin-right:  0.7rem;
}
.gold-btn {
        background:    var(--j-gold);
        color:         black;
        padding:       0.5625rem 1rem;
        border-radius: 0.5rem;
}
.gold-btn2 {
        background:    var(--j-gold);
        color:         black;
        padding:       1rem 1.75rem;
        border-radius: 0.5rem;
        margin-right:  0.7rem;
}
.gray-btn3 {
        background:    var(--j-gray);
        padding:       1rem 1.75rem;
        border-radius: 0.3rem;
        margin:        auto auto 0 auto;
        width:         100%;
        box-sizing:    border-box;
        text-align:    center;
}
.gold-btn3 {
        background:    var(--j-gold);
        color:         black;
        padding:       1rem 1.75rem;
        border-radius: 0.5rem;
        margin:        auto auto 0 auto;
        width:         100%;
        box-sizing:    border-box;
        text-align:    center;
}
.tier .download-btn {
        margin:        auto auto 0 auto;
        width: 100%;
}
.gray-btn, .gray-btn2, .gray-btn3,
.gold-btn, .gold-btn2, .gold-btn3 {
        cursor:     pointer;
        transition: 0.3s ease-in-out transform;
}
.gray-btn:hover, .gray-btn2:hover, .gray-btn3:hover,
.gold-btn:hover, .gold-btn2:hover, .gold-btn3:hover {
        transform: scale(1.05);
}
.download-btn {
        text-decoration: none;
        color: unset;
}
.row {
        display:         flex;
        flex-direction:  row;
        align-items:     flex-start;
        justify-content: space-between;
}
.col {
        display:         flex;
        flex-direction:  column;
        align-items:     flex-start;
        justify-content: flex-start;
}
.left-block {
        width:           45%;
        display:         flex;
        flex-direction:  column;
        align-items:     flex-start;
        justify-content: flex-start;
        padding-right:   2rem;
        box-sizing:      border-box;
}
.right-block {
        width: 55%;
}
.right-block > video {
        width:         100%;
        border-radius: 1rem;
}
.side-image {
        height: 7rem;
        margin: 0 auto 0 4rem;
}
.side-image2 {
        height: 11rem;
        margin: 1.2rem auto 0 3rem;
}
.side-image3 {
        height: 7rem;
        margin-right: auto;
}
.gold-text {
        color:          var(--j-gold);
        font-size:      1rem;
        margin-bottom:  1rem;
        letter-spacing: 0.05rem;
}
.tier {
        display:         flex;
        flex-direction:  column;
        align-items:     flex-start;
        justify-content: flex-start;
        padding:         2.5rem;
        background:      var(--j-dark-gray);
        width:           24rem;
        height:          27rem;
        border-radius:   1rem;
}
.feature {
        margin:          0.6rem 0;
        display:         flex;
        flex-direction:  row;
        align-items:     center;
        justify-content: center;
        gap:             0.5rem;
}
.feature-description div .content {
        margin-top: 1rem;
}
.x-mark {
        height: 1rem;
        margin: 0 0.2rem;
}
.bold {
        font-weight: 600;
}
#about .content {
        max-width:           42rem;
        display:         flex;
        flex-direction:  column;
        align-items:     flex-start;
        justify-content: flex-start;
        gap:             1rem;
}
#about .content b {
        color: white;
}
.team {
        background: var(--j-gray);
        max-width: 42rem;
        height: 27rem;
        border-radius: 1rem;
        padding: 2rem 3rem;
}
.avatars {
        gap: 3rem;
        margin: 0 auto;
}
.avatar {
        align-items:  center;
        gap:          1rem;
        cursor:       pointer;
}
.avatar img {
        width:        7rem;
        border-radius: 100%;
        transition:    0.3s ease-in-out border-color;
        border:        1px solid;
        border-color:  #ffc44d00;
}
.avatar img:hover {
        border-color: #ffc44dff;
}
.avatar .subtitle {
        text-align:  center;
        line-height: 1.4rem;
}
.bio-noel, .bio-karl, .bio-manny, .bio-ethan {
        line-height: 2rem;
        font-size: 1.2rem;
}
.note {
        text-align: center;
        margin-top: 1rem;
        letter-spacing: 0.04rem;
        width: 100%;
}
.spacer1 { height: 20rem; }
.spacer2 { height: 10rem; }
.spacer3 { height: 6rem; }
.ipad-only { display: none; }
.hide { display: none; }

/* desktop */
@media (min-width: 1487px) {
        .mobile-only { display: none; }
        .ipad-only { display: none; }
        .no-desktop { display: none; }
        .desktop-only .price-list {
                display: flex;
                gap: 0.8rem;
        }
}

/* ipad */
@media (max-width:1486px) {
        .mobile-only { display: none; }
        .no-ipad { display: none; }
        .ipad-only { display: revert; }
        .no-desktop { display: revert; }
        .desktop-only { display: none; }
        .price-list {
                display: flex;
                gap: 1rem;
        }
        .wrap {
                width: 46rem;
        }
        h1 {
                font-size: 3.3rem;
        }
        h2 {
                font-size: 2.8rem;
        }
        .tier {
                width: 100%;
                box-sizing: border-box;
                height: unset;
        }
        .tier .row {
                gap: 0.8rem;
                align-items: center;
        }
        .feature {
                font-size: 1.4rem;
        }
        .content {
                font-size: 1rem;
                margin-bottom: 1rem;
                line-height: 1.7rem;
        }
        .tier .download-btn {
                margin-top: 1rem;
                font-size: 1.4rem;
        }
        .no-mobile .price-list { display: flex; }
        .spacer1 { height: 15rem; }
        .spacer2 { height: 5rem; }
        .spacer3 { height: 4rem; }
}

/* mobile */
@media (max-width: 792px) {
        .no-mobile { display: none; }
        .mobile-only { display: revert; }
        .ipad-only { display: none; }
        body {
                margin: 0;
        }
        .wrap {
                padding: 0rem 1rem;
                box-sizing: border-box;
                width: unset;
        }
        .header-mobile {
                display: flex;
                flex-direction: row;
                align-items:     center;
                justify-content: center;
                padding-top: 1rem;
                height: 6rem;
        }
        .header-mobile img.icon-btn {
                margin: unset;
        }
        .first-row-mobile > video {
                width: 100%;
                border-radius: 0.3rem;
        }
        h1 {
                font-size: 2.4rem;
                margin-bottom: 0.5rem;
        }
        h2 {
                font-size: 1.6rem;
                margin-bottom: 0.8rem;
        }
        h2 .small { font-size: 0.8rem; }
        h3 {
                font-size: 0.8rem;
                margin: 0;
        }
        .content {
                font-size: 1.2rem;
                line-height: 2rem;
                margin-bottom: 0.7rem;
        }
        .gray-btn, .gray-btn2, .gray-btn3,
        .gold-btn, .gold-btn2, .gold-btn3 {
                font-size: 1rem;
                border-radius: 0.6rem;
                padding: 0.7rem 1.2rem;
        }
        .gold-text {
                font-size: 1rem;
                margin-bottom: 0.7rem;
        }
        .side-image, .side-image2, .side-image3 {
                height: 3rem;
                margin-left: 1rem;
        }
        .side-image2 { height: 5rem; }
        .team {
                width: 100%;
                height: unset;
                padding: 1rem;
                box-sizing: border-box;
        }
        .avatars {
                gap: 1rem;
        }
        .avatar img {
                width: 3rem;
        }
        .avatar .subtitle {
                line-height: 0.9rem;
                font-size: 0.7rem;
        }
        .bio-noel, .bio-karl, .bio-manny, .bio-ethan {
                line-height: 1.5rem;
                font-size: 1rem;
                margin-top: 1rem;
        }
        #about .content {
                width: unset;
        }
        .tier {
                box-sizing: border-box;
                width: 100%;
                height: unset;
                gap: 0.3rem;
                padding: 0.8rem;
                border-radius: 0.9rem;
        }
        .feature {
                font-size: 0.7rem;
        }
        .feature img {
                height: 1.3rem;
                margin-right: 0.3rem;
        }
        .feature img.x-mark {
                height: 1rem;
        }
        .tier .download-btn {
                font-size: 0.85rem;
                margin-top: unset;
        }
        .mobile-only.price-list { display: flex; }
        .no-mobile .pricelist { display: none; }
        .spacer1 { height: 5rem; }
        .spacer2 { height: 3rem; }
        .spacer3 { height: 2rem; }
}