.app-nav .workbench-link {
    display: flex;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 12px;
    background: #e3ebd5;
}

.character-nora {
    --skin: #bc805e;
}

.character-theo {
    --skin: #e4b58b;
}

.character-nora .face,
.character-theo .face,
.character-nora .face:before,
.character-nora .face:after,
.character-theo .face:before,
.character-theo .face:after,
.character-nora .shirt:after,
.character-theo .shirt:after {
    background: var(--skin);
}

.character-nora:before {
    content: '';
    position: absolute;
    left: 27px;
    top: 20px;
    width: 116px;
    height: 145px;
    border-radius: 55px 55px 24px 24px;
    background: #45352f;
}

.character-nora .hair {
    background: #45352f;
    left: 27px;
    top: 17px;
    width: 116px;
    height: 95px;
    transform: none;
    border-radius: 55px 55px 15px 15px;
    clip-path: polygon(0 0,100% 0,100% 100%,88% 100%,80% 43%,53% 29%,32% 58%,15% 66%,12% 100%,0 100%);
}

.character-nora .shirt {
    background: #797297;
}

.character-theo .hair {
    background: #694a36;
    top: 19px;
    height: 66px;
    transform: rotate(4deg);
    border-radius: 40% 50% 20% 30%;
    clip-path: polygon(0 0,100% 0,100% 96%,88% 100%,81% 57%,56% 70%,29% 50%,15% 64%,11% 100%,0 90%);
}

.character-theo .shirt {
    background: #527d92;
}

.character-theo .glasses {
    position: absolute;
    top: 34px;
    left: 15px;
    width: 55px;
    height: 12px;
    border-top: 2px solid #34483d;
    z-index: 4;
}

.character-theo .glasses:before,
.character-theo .glasses:after {
    content: '';
    position: absolute;
    top: -7px;
    width: 24px;
    height: 23px;
    border: 2px solid #34483d;
    border-radius: 50%;
}

.character-theo .glasses:before {
    left: 0;
}

.character-theo .glasses:after {
    right: 0;
}

/* Keep Theo's eyes clearly separated inside the two individual lenses. */
.character-theo .eyes {
    top: 43px;
    left: 20px;
    width: 45px;
    height: 8px;
    font-size: 0;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.character-theo .eyes::before,
.character-theo .eyes::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #293427;
}

@media (max-width: 560px) {
    .landing-hero > p {
        line-height: 1.9;
        margin-top: 20px;
    }
}