/* Standalone HR Solo pages use the viewport as their canvas, not a card inside
   the public site's centered content shell. Keep the useful inner controls. */
.solo-hub {
    position: relative;
    isolation: isolate;
}

.solo-hub::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: min(900px, 100vh);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 5, 4, .75), rgba(8, 8, 7, .67) 48%, #080807 100%),
        url('/images/solo-hr-office-hero.png') center 42% / cover no-repeat;
}

.solo-hub-hero {
    z-index: 1;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.solo-hub-hero::before {
    display: none;
}

.solo-hub-plans {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.solo-portfolio-page::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: min(850px, 110vh);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 5, 4, .69), rgba(8, 8, 7, .75) 44%, #080807 100%),
        url('/images/solo-hr-office-hero.png') center 42% / cover no-repeat;
}

.solo-portfolio-page.solo-portfolio-light::before {
    background: linear-gradient(180deg, rgba(250, 248, 243, .76), rgba(248, 246, 240, .82) 46%, #f7f4ee 100%),
        url('/images/solo-hr-office-hero-light.jpg') center 42% / cover no-repeat;
}

.solo-portfolio-page .solo-portfolio-hero {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.solo-portfolio-hero::after {
    display: none;
}

.solo-portfolio-page :is(.solo-portfolio-workspaces, .solo-billing-desk, .solo-team-console) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
}

/* The old registration offset was relative to the padded public shell. */
.solo-enroll {
    width: 100%;
    margin: 0;
}

@media (max-width: 720px) {
    .solo-hub::after,
    .solo-portfolio-page::before {
        height: min(1000px, 120vh);
    }

    .solo-portfolio-page .solo-portfolio-hero {
        padding-inline: 12px;
    }
}

/* Show every plan on phones. A sideways carousel hid most of the choices. */
@media (max-width: 760px) {
    .solo-hub-links > a.solo-hub-plans-link {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 11px;
        border: 1px solid rgba(233, 190, 108, .18);
        border-radius: 999px;
        color: #e9c372;
    }

    .solo-hub-hero {
        padding: 34px 8px 24px;
    }

    .solo-hub-plan-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }

    .solo-hub-plans article {
        min-width: 0;
        scroll-snap-align: none;
    }

    .solo-hub-plans article:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .solo-hub-links .solo-hub-public {
        display: none;
    }

    .solo-hub-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .solo-hub-plans article,
    .solo-hub-plans article:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .solo-hub-plans article {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px 12px;
        padding: 15px 17px;
    }

    .solo-hub-plans article > div {
        min-width: 0;
    }

    .solo-hub-plans article > strong {
        font-size: 1.35rem;
        text-align: right;
        white-space: nowrap;
    }

    .solo-hub-plans article small,
    .solo-hub-plans article > strong span {
        font-size: .7rem;
    }

    .solo-hub-plans article > p {
        grid-column: 1 / -1;
        font-size: .74rem;
    }

    .solo-hub-plans header p {
        font-size: .78rem;
        line-height: 1.55;
    }
}

@media (max-width: 400px) {
    .solo-hub-links .solo-hub-demo {
        padding-inline: 10px;
    }
}