/* PreVPS Road map. All rules are scoped to the shortcode wrapper. */
/*
 * Hostiko's desktop header row uses .bbhd-overlay (position: absolute), so its
 * parent otherwise contributes no height and the first card slides underneath
 * the menu. The body class is added only when this shortcode is on the page.
 */
body.pv-roadmap-page #bb-header-container-default.bb-header-container {
    min-height: 82px;
}

body.pv-roadmap-page #content.site-content {
    position: relative;
    clear: both;
}

.pv-ui.pv-roadmap {
    --pv-purple: #796bf9;
    --pv-purple-action: #6355e8;
    --pv-purple-dark: #5346d8;
    --pv-pink: #fd5481;
    --pv-ink: #4f4b6c;
    --pv-muted: #59647b;
    --pv-surface: #fff;
    --pv-border: #e6e2fa;
    --pv-soft: #f7f6ff;
    --pv-focus: rgba(121, 107, 249, .28);
    --pv-radius: 18px;
    --pv-shadow: 0 16px 42px rgba(57, 48, 126, .1);
    width: min(1180px, calc(100% - 32px));
    margin: 42px auto 64px;
    color: var(--pv-ink);
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.pv-roadmap,
.pv-roadmap * {
    box-sizing: border-box;
}

.pv-roadmap .pv-ui-card {
    position: relative;
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    box-shadow: var(--pv-shadow);
}

.pv-roadmap .pv-ui-card--accent {
    border-top: 4px solid var(--pv-purple);
}

.pv-roadmap h2,
.pv-roadmap h3,
.pv-roadmap p,
.pv-roadmap ul {
    margin-top: 0;
}

.pv-roadmap h2,
.pv-roadmap h3 {
    color: var(--pv-ink);
    font-family: inherit;
    font-weight: 700;
}

.pv-roadmap h2 {
    margin-bottom: 14px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.pv-roadmap h3 {
    margin-bottom: 9px;
    font-size: 20px;
    line-height: 1.35;
}

.pv-roadmap p {
    color: var(--pv-muted);
}

.pv-roadmap a {
    text-decoration: none;
}

.pv-roadmap-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--pv-purple-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.pv-roadmap-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 46px;
    min-height: 470px;
    padding: clamp(34px, 6vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 18%, rgba(253, 84, 129, .12), transparent 26%),
        linear-gradient(125deg, #fff 42%, #f4f2ff 100%);
}

.pv-roadmap-hero::after {
    position: absolute;
    right: -110px;
    bottom: -160px;
    width: 390px;
    height: 390px;
    background: rgba(121, 107, 249, .07);
    border-radius: 50%;
    content: "";
}

.pv-roadmap-hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
}

.pv-roadmap-hero-copy > p {
    max-width: 720px;
    margin-bottom: 28px;
    font-size: 18px;
    line-height: 1.75;
}

.pv-roadmap-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.pv-roadmap .pv-ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pv-roadmap .pv-ui-button--primary,
.pv-roadmap .pv-ui-button--primary:link,
.pv-roadmap .pv-ui-button--primary:visited {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background: linear-gradient(135deg, var(--pv-purple-action), var(--pv-purple));
    box-shadow: 0 10px 24px rgba(99, 85, 232, .24);
}

.pv-roadmap .pv-ui-button--primary:hover,
.pv-roadmap .pv-ui-button--primary:focus,
.pv-roadmap .pv-ui-button--primary:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background: var(--pv-purple-dark);
    transform: translateY(-1px);
}

.pv-roadmap .pv-ui-button--outline,
.pv-roadmap .pv-ui-button--outline:link,
.pv-roadmap .pv-ui-button--outline:visited {
    color: var(--pv-purple-dark) !important;
    -webkit-text-fill-color: var(--pv-purple-dark);
    background: rgba(255, 255, 255, .86);
    border-color: #d8d3fb;
}

.pv-roadmap .pv-ui-button--outline:hover,
.pv-roadmap .pv-ui-button--outline:focus,
.pv-roadmap .pv-ui-button--outline:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background: var(--pv-purple-action);
    border-color: var(--pv-purple-action);
}

.pv-roadmap .pv-ui-button:focus-visible {
    outline: 3px solid var(--pv-focus);
    outline-offset: 3px;
}

.pv-roadmap-hero-visual {
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: center;
    width: min(100%, 330px);
    aspect-ratio: 1;
}

.pv-roadmap-orbit {
    position: absolute;
    border: 1px solid rgba(121, 107, 249, .24);
    border-radius: 50%;
}

.pv-roadmap-orbit--one {
    inset: 16%;
}

.pv-roadmap-orbit--two {
    inset: 2%;
    border-style: dashed;
}

.pv-roadmap-core,
.pv-roadmap-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pv-purple-dark);
    background: #fff;
    border: 1px solid var(--pv-border);
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(57, 48, 126, .14);
}

.pv-roadmap-core {
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    color: #fff;
    background: linear-gradient(145deg, var(--pv-purple-action), var(--pv-pink));
    border: 0;
    border-radius: 28px;
    transform: translate(-50%, -50%) rotate(-6deg);
}

.pv-roadmap-core svg {
    width: 46px;
    height: 46px;
    transform: rotate(6deg);
}

.pv-roadmap-node {
    width: 64px;
    height: 64px;
}

.pv-roadmap-node svg {
    width: 30px;
    height: 30px;
}

.pv-roadmap-node--cloud {
    top: 5%;
    left: 46%;
}

.pv-roadmap-node--server {
    right: 3%;
    bottom: 20%;
}

.pv-roadmap-node--gpu {
    bottom: 9%;
    left: 6%;
}

.pv-roadmap-section {
    margin-top: 72px;
}

.pv-roadmap-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 28px;
}

.pv-roadmap-section-heading h2 {
    margin-bottom: 0;
    font-size: clamp(26px, 3vw, 38px);
}

.pv-roadmap-section-heading > p {
    max-width: 500px;
    margin-bottom: 2px;
    text-align: right;
}

.pv-roadmap-solution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.pv-roadmap-solution {
    min-height: 240px;
    padding: 26px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pv-roadmap-solution:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(57, 48, 126, .14);
}

.pv-roadmap .pv-ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    color: var(--pv-purple-dark);
    background: #f1efff;
    border-radius: 15px;
}

.pv-roadmap .pv-ui-icon svg {
    width: 27px;
    height: 27px;
}

.pv-roadmap-solution:nth-child(2) .pv-ui-icon {
    color: #0b8165;
    background: #e8faf5;
}

.pv-roadmap-solution:nth-child(3) .pv-ui-icon {
    color: #bf2854;
    background: #fff0f4;
}

.pv-roadmap-solution:nth-child(4) .pv-ui-icon {
    color: #a25c00;
    background: #fff5df;
}

.pv-roadmap-solution p {
    margin-bottom: 0;
    font-size: 14px;
}

.pv-roadmap-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pv-roadmap-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.pv-roadmap-status--available {
    color: #147250;
    background: #e9f8f1;
}

.pv-roadmap-status--progress {
    color: #5346d8;
    background: #efedff;
}

.pv-roadmap-status--planned {
    color: #2465a8;
    background: #eaf4ff;
}

.pv-roadmap-status--exploring {
    color: #9a5a00;
    background: #fff3d9;
}

.pv-roadmap-timeline {
    position: relative;
    display: grid;
    gap: 22px;
}

.pv-roadmap-timeline::before {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 33px;
    width: 2px;
    background: linear-gradient(var(--pv-purple), #b9b1fb 70%, #eadab7);
    content: "";
}

.pv-roadmap-phase {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 24px;
    padding: 30px 34px 30px 0;
    overflow: hidden;
}

.pv-roadmap-phase::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: var(--pv-purple);
    content: "";
}

.pv-roadmap-phase[data-status="available"]::after {
    background: #2db786;
}

.pv-roadmap-phase[data-status="planned"]::after {
    background: #62aaf3;
}

.pv-roadmap-phase[data-status="exploring"]::after {
    background: #efb44e;
}

.pv-roadmap-phase-marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pv-roadmap-phase-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--pv-purple-action);
    border: 6px solid #f1efff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 0 0 1px #d8d3fb;
}

.pv-roadmap-phase[data-status="available"] .pv-roadmap-phase-marker span {
    background: #269d75;
    border-color: #e9f8f1;
}

.pv-roadmap-phase[data-status="planned"] .pv-roadmap-phase-marker span {
    background: #3d89d5;
    border-color: #eaf4ff;
}

.pv-roadmap-phase[data-status="exploring"] .pv-roadmap-phase-marker span {
    background: #c77c12;
    border-color: #fff3d9;
}

.pv-roadmap-phase-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pv-roadmap-step {
    color: var(--pv-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pv-roadmap-phase-content > p {
    max-width: 820px;
    margin-bottom: 20px;
}

.pv-roadmap-phase ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.pv-roadmap-phase li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--pv-ink);
    font-size: 14px;
}

.pv-roadmap-phase li > span {
    display: inline-flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--pv-purple-dark);
    background: #f1efff;
    border-radius: 50%;
}

.pv-roadmap-phase li svg {
    width: 13px;
    height: 13px;
}

.pv-roadmap-principles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr);
    align-items: center;
    gap: 46px;
    margin-top: 72px;
    padding: clamp(30px, 5vw, 52px);
    background: linear-gradient(125deg, #fff, #f7f6ff);
}

.pv-roadmap-principles h2 {
    margin-bottom: 10px;
    font-size: clamp(26px, 3vw, 38px);
}

.pv-roadmap-principles p {
    max-width: 620px;
    margin-bottom: 0;
}

.pv-roadmap-principle-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-roadmap-principle-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 14px;
    color: var(--pv-ink);
    background: #fff;
    border: 1px solid var(--pv-border);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
}

.pv-roadmap-principle-list svg {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    color: var(--pv-purple-dark);
}

.pv-roadmap-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    margin-top: 28px;
    padding: clamp(30px, 5vw, 50px);
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 20%, rgba(253, 84, 129, .12), transparent 30%),
        linear-gradient(120deg, #f8f7ff, #fff);
}

.pv-roadmap-cta h2 {
    margin-bottom: 9px;
    font-size: clamp(25px, 3vw, 36px);
}

.pv-roadmap-cta p {
    max-width: 760px;
    margin-bottom: 0;
}

.pv-roadmap-cta .pv-roadmap-actions {
    flex: 0 0 auto;
}

.pv-roadmap-note {
    max-width: 900px;
    margin: 24px auto 0;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

@media (max-width: 980px) {
    .pv-roadmap-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pv-roadmap-hero-visual {
        width: 270px;
    }

    .pv-roadmap-solution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pv-roadmap-principles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body.pv-roadmap-page #bb-header-container-default.bb-header-container {
        min-height: 64px;
    }

    .pv-ui.pv-roadmap {
        width: min(100% - 22px, 1180px);
        margin-top: 24px;
    }

    .pv-roadmap-hero {
        gap: 28px;
        padding: 30px 24px;
    }

    .pv-roadmap-hero-copy > p {
        font-size: 16px;
    }

    .pv-roadmap-section {
        margin-top: 50px;
    }

    .pv-roadmap-section-heading {
        display: block;
    }

    .pv-roadmap-section-heading > p {
        margin-top: 14px;
        text-align: left;
    }

    .pv-roadmap-legend {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .pv-roadmap-phase {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        padding: 24px 22px 24px 0;
    }

    .pv-roadmap-timeline::before {
        left: 25px;
    }

    .pv-roadmap-phase-marker span {
        width: 34px;
        height: 34px;
    }

    .pv-roadmap-phase ul {
        grid-template-columns: 1fr;
    }

    .pv-roadmap-cta {
        display: block;
    }

    .pv-roadmap-cta .pv-roadmap-actions {
        margin-top: 22px;
    }
}

@media (max-width: 520px) {
    .pv-roadmap h2 {
        font-size: 29px;
    }

    .pv-roadmap-solution-grid,
    .pv-roadmap-principle-list {
        grid-template-columns: 1fr;
    }

    .pv-roadmap-solution {
        min-height: 0;
    }

    .pv-roadmap-actions,
    .pv-roadmap .pv-ui-button {
        width: 100%;
    }

    .pv-roadmap-hero-visual {
        width: 220px;
    }

    .pv-roadmap-phase {
        grid-template-columns: 42px minmax(0, 1fr);
        padding-right: 16px;
    }

    .pv-roadmap-timeline::before {
        left: 20px;
    }

    .pv-roadmap-phase-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-roadmap .pv-ui-button,
    .pv-roadmap-solution {
        transition: none;
    }
}

@media print {
    .pv-ui.pv-roadmap {
        width: 100%;
        margin: 0;
    }

    .pv-roadmap .pv-ui-card {
        box-shadow: none;
        break-inside: avoid;
    }

    .pv-roadmap-actions {
        display: none;
    }
}