.jobDetailPage {
    background: #fff
}

.jobDetailStage {
    position: relative;
    padding: 128px clamp(24px, 5vw, 80px) 108px;
    background:
        radial-gradient(circle at top, #ffffff 0%, #fbfdff 44%, #f7fbff 100%)
}

.jobDetailShell {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.jobBackLink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0759e6;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 24px
}

.jobBackLink:hover {
    text-decoration: underline
}

.jobDetailHeroCard,
.jobDetailState {
    border: 1.5px solid #0759e6;
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 65px #1c3e7010
}

.jobDetailHeroCard {
    padding: clamp(28px, 4vw, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center
}

.jobDetailHeroCopy h1,
.jobDetailState h1 {
    font: 700 clamp(38px, 5vw, 58px)/1.02 'Manrope';
    letter-spacing: -.05em;
    margin: 0
}

.jobDetailHeroTags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 18px
}

.jobDetailHeroTags span {
    background: #e7efff;
    color: #0759e6;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600
}

.jobDetailHeroCopy p,
.jobDetailState p {
    margin: 0;
    color: #445064;
    font-size: 18px;
    line-height: 1.65;
    max-width: 720px
}

.jobDetailHeroAction,
.jobSidebarButton {
    min-width: 220px;
    white-space: nowrap
}

.jobDetailGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 308px;
    gap: 42px;
    margin-top: 44px;
    align-items: start
}

.jobDetailContent {
    display: grid;
    gap: 30px
}

.jobContentSection h2 {
    font: 700 clamp(32px, 3vw, 42px)/1.08 'Manrope';
    letter-spacing: -.04em;
    margin: 0 0 16px
}

.jobContentSection p,
.jobContentSection li {
    color: #2c3340;
    font-size: 17px;
    line-height: 1.7
}

.jobContentSection p {
    margin: 0 0 14px
}

.jobContentSection ul {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 10px
}

.jobContentSection li::marker {
    color: #0759e6
}

.jobDetailSidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 110px
}

.jobSidebarCard {
    border: 1px solid #d9e4f6;
    border-radius: 24px;
    padding: 22px;
    background: linear-gradient(180deg, #fbfcff 0%, #f2f7ff 100%);
    box-shadow: 0 18px 55px #1c3e700d
}

.jobSidebarCard h2 {
    font: 700 18px 'Manrope';
    margin: 0
}

.jobOverviewList {
    margin-top: 18px;
    display: grid
}

.jobOverviewItem {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #dbe5f5
}

.jobOverviewItem:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.jobOverviewItem:first-child {
    padding-top: 0
}

.jobOverviewIcon,
.jobShareIcon,
.jobTalentCtaIcon {
    color: #0759e6
}

.jobOverviewIcon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center
}

.jobOverviewIcon svg,
.jobShareIcon svg,
.jobTalentCtaIcon svg {
    width: 100%;
    height: 100%;
    display: block
}

.jobOverviewLabel {
    color: #55657e;
    font-size: 14px
}

.jobOverviewItem strong {
    color: #101319;
    font-size: 15px;
    font-weight: 700;
    text-align: right
}

.jobSidebarButton {
    width: 100%
}

.jobShareList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px
}

.jobShareList a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d5e1f2;
    border-radius: 999px;
    background: #fff;
    padding: 11px 14px;
    font-size: 13px;
    color: #3a475b;
    transition: .2s
}

.jobShareList a:hover {
    transform: translateY(-1px);
    border-color: #0759e6;
    color: #0759e6
}

.jobShareIcon {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center
}

.jobTalentCta {
    margin-top: 56px
}

.jobTalentCtaCard {
    border: 1.5px solid #0759e6;
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    padding: 26px 28px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center
}

.jobTalentCtaIcon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    background: #eef4ff;
    display: grid;
    place-items: center;
    padding: 16px
}

.jobTalentCtaCopy h2 {
    font: 700 clamp(28px, 3vw, 38px)/1.08 'Manrope';
    letter-spacing: -.04em;
    margin: 0 0 6px
}

.jobTalentCtaCopy p {
    margin: 0;
    color: #55657e;
    font-size: 16px;
    line-height: 1.6
}

.jobTalentCtaAction {
    min-width: 220px
}

.jobDetailState {
    padding: clamp(28px, 4vw, 40px);
    display: grid;
    gap: 18px
}

.jobDetailStateAction {
    justify-self: flex-start
}

body.jobApplicationModalOpen {
    overflow: hidden
}

#jobApplicationModalRoot {
    position: relative;
    z-index: 40
}

.jobApplicationModalOverlay {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(245, 248, 255, .72)
}

.jobApplicationModal {
    width: min(100%, 760px);
    max-height: min(92vh, 920px);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    border: 1.5px solid #7fa9ff;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 36px 95px #18386b24
}

.jobApplicationModalBody {
    padding: clamp(28px, 4vw, 40px)
}

.jobApplicationCloseButton {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 48px;
    height: 48px;
    border: 1px solid #d7e4f7;
    border-radius: 50%;
    background: #fff;
    color: #101319;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 10px 24px #15356510
}

.jobApplicationCloseButton:hover {
    color: #0759e6;
    border-color: #afc9fb
}

.jobApplicationCloseButton svg {
    width: 18px;
    height: 18px;
    display: block
}

.jobApplicationHeader h2 {
    margin: 0;
    max-width: calc(100% - 72px);
    font: 700 clamp(34px, 4vw, 48px)/1.02 'Manrope';
    letter-spacing: -.05em
}

.jobApplicationHeader p {
    margin: 16px 0 0;
    max-width: 500px;
    color: #5a6880;
    font-size: 17px;
    line-height: 1.65
}

.jobApplicationForm {
    margin-top: 28px;
    display: grid;
    gap: 18px
}

.jobApplicationGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

.jobApplicationField {
    display: grid;
    gap: 8px;
    min-width: 0
}

.jobApplicationField--fullWidth {
    grid-column: 1 / -1
}

.jobApplicationLabel {
    font-size: 14px;
    font-weight: 700;
    color: #1c2430
}

.jobApplicationField input:not([type="checkbox"]):not([type="file"]),
.jobApplicationUploadCard {
    border: 1px solid #d5e1f2;
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s
}

.jobApplicationField input:not([type="checkbox"]):not([type="file"]) {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    color: #101319
}

.jobApplicationField input:not([type="checkbox"]):not([type="file"])::placeholder {
    color: #93a0b3
}

.jobApplicationField input:not([type="checkbox"]):not([type="file"]):focus,
.jobApplicationUploadCard:focus-within {
    outline: none;
    border-color: #80aaff;
    box-shadow: 0 0 0 4px #0759e614
}

.jobApplicationField.is-invalid input:not([type="checkbox"]):not([type="file"]),
.jobApplicationField.is-invalid .jobApplicationUploadCard,
.jobApplicationConsent.is-invalid {
    border-color: #dc5a5a;
    box-shadow: 0 0 0 4px #dc5a5a12
}

.jobApplicationFieldError {
    min-height: 18px;
    color: #c53f3f;
    font-size: 13px;
    line-height: 1.4
}

.jobApplicationUploadCard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-style: dashed;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%)
}

.jobApplicationUploadIcon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: #eef4ff;
    color: #0759e6;
    display: grid;
    place-items: center;
    padding: 14px
}

.jobApplicationUploadIcon svg {
    width: 100%;
    height: 100%;
    display: block
}

.jobApplicationUploadCopy {
    display: grid;
    gap: 6px;
    min-width: 0
}

.jobApplicationUploadCopy strong {
    font: 700 15px 'Manrope'
}

.jobApplicationUploadCopy span {
    color: #66758c;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word
}

.jobApplicationUploadButton {
    cursor: pointer;
    white-space: nowrap
}

.jobApplicationFileInput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.jobApplicationConsent {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 2px 0;
    border: 1px solid transparent;
    border-radius: 14px
}

.jobApplicationConsent input {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    accent-color: #0759e6
}

.jobApplicationConsent span {
    color: #283344;
    font-size: 15px;
    line-height: 1.6
}

.jobApplicationConsentError {
    margin-top: -8px
}

.jobApplicationFooter {
    display: grid;
    gap: 16px;
    align-items: center
}

.jobApplicationStatus {
    min-height: 22px;
    color: #516076;
    font-size: 14px;
    line-height: 1.5
}

.jobApplicationStatus.is-success {
    color: #11724f
}

.jobApplicationStatus.is-error {
    color: #c53f3f
}

.jobApplicationActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px
}

.jobApplicationCancelButton {
    border: 0;
    background: transparent;
    color: #0759e6;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer
}

.jobApplicationCancelButton:hover {
    text-decoration: underline
}

.jobApplicationSubmitButton {
    min-width: 210px
}

.jobApplicationSubmitButton:disabled {
    cursor: not-allowed;
    opacity: .6
}

.detailShape {
    position: absolute
}

.detailShape--diamondLeft {
    width: 150px;
    height: 132px;
    left: 2%;
    top: 170px
}

.detailShape--circleLeft {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    left: 13%;
    top: 370px;
    transform: none
}

.detailShape--circleLeft:after {
    display: none
}

.detailShape--diamondRight {
    width: 162px;
    height: 148px;
    right: -18px;
    top: 164px
}

.detailShape--dotRight {
    width: 48px;
    height: 48px;
    right: 17%;
    top: 130px;
    background: #dce8fb;
    transform: none;
    border-radius: 50%
}

.detailShape--dotRight:after {
    display: none
}

@media(max-width:1080px) {
    .jobDetailGrid {
        grid-template-columns: 1fr
    }

    .jobDetailSidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .jobSidebarButton {
        min-height: 100%;
        align-self: stretch
    }
}

@media(max-width:860px) {
    .jobDetailStage {
        padding-top: 114px
    }

    .jobDetailHeroCard,
    .jobTalentCtaCard {
        grid-template-columns: 1fr
    }

    .jobDetailHeroAction,
    .jobTalentCtaAction {
        width: 100%;
        min-width: 0
    }

    .jobDetailSidebar {
        grid-template-columns: 1fr
    }

    .detailShape {
        opacity: .3
    }

    .jobApplicationGrid {
        grid-template-columns: 1fr
    }

    .jobApplicationUploadCard {
        grid-template-columns: auto minmax(0, 1fr)
    }

    .jobApplicationUploadButton {
        grid-column: 1 / -1;
        justify-self: start
    }
}

@media(max-width:620px) {
    .jobDetailStage {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 90px
    }

    .jobDetailHeroCopy p,
    .jobContentSection p,
    .jobContentSection li,
    .jobTalentCtaCopy p,
    .jobDetailState p {
        font-size: 16px
    }

    .jobTalentCtaCard {
        padding: 22px
    }

    .jobDetailHeroCard,
    .jobDetailState {
        padding: 24px
    }

    .jobApplicationModalOverlay {
        padding: 14px
    }

    .jobApplicationModalBody {
        padding: 22px
    }

    .jobApplicationHeader h2 {
        max-width: calc(100% - 56px)
    }

    .jobApplicationHeader p,
    .jobApplicationConsent span {
        font-size: 14px
    }

    .jobApplicationUploadCard {
        padding: 16px;
        gap: 14px
    }

    .jobApplicationFooter,
    .jobApplicationActions {
        gap: 12px
    }

    .jobApplicationActions {
        flex-direction: column-reverse;
        align-items: stretch
    }

    .jobApplicationSubmitButton {
        width: 100%;
        min-width: 0
    }

    .jobApplicationCancelButton {
        justify-self: center
    }

    .detailShape--diamondLeft {
        left: -46px
    }

    .detailShape--circleLeft,
    .detailShape--dotRight {
        display: none
    }

    .detailShape--diamondRight {
        right: -72px
    }
}