/* Relizon reusable product detail page. All selectors are scoped. */
.relizon-product-detail {
    --pd-blue: #165bfb;
    --pd-ink: #101828;
    --pd-muted: #667085;
    --pd-line: #e7edf6;
    --pd-soft: #f6f8fc;
    color: var(--pd-ink);
    overflow: hidden
}

.relizon-product-detail * {
    box-sizing: border-box
}

.relizon-product-detail .pd-container {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto
}

.relizon-product-detail a {
    text-decoration: none
}

.relizon-product-detail [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1)
}

.relizon-product-detail [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0)
}

.pd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 24px;
    padding-bottom: 18px;
    font-size: 12px;
    color: #929bad;
    flex-wrap: wrap
}

.pd-breadcrumb a {
    color: #657188;
    transition: color .2s
}

.pd-breadcrumb a:hover {
    color: var(--pd-blue)
}

.pd-breadcrumb [aria-current=page] {
    color: #27354c;
    font-weight: 700
}

.pd-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #f7f9ff;
    padding: 54px 0 70px
}

.pd-hero:before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: radial-gradient(circle at 79% 35%, rgba(22, 91, 251, .12), transparent 31%), linear-gradient(120deg, #f8faff, #f2f6ff 60%, #fff)
}

.pd-hero__glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none
}

.pd-hero__glow--one {
    width: 350px;
    height: 350px;
    right: -80px;
    top: -150px;
    background: rgba(22, 91, 251, .06)
}

.pd-hero__glow--two {
    width: 260px;
    height: 260px;
    left: -160px;
    bottom: -140px;
    background: rgba(135, 95, 255, .07)
}

.pd-hero--green {
    --pd-product: #16a36b;
    --pd-tint: #e4f8ee
}

.pd-hero--violet {
    --pd-product: #8055d9;
    --pd-tint: #f0eaff
}

.pd-hero--orange {
    --pd-product: #d98226;
    --pd-tint: #fff1e2
}

.pd-hero--pink {
    --pd-product: #d84d87;
    --pd-tint: #ffebf2
}

.pd-hero--teal {
    --pd-product: #168f91;
    --pd-tint: #e3f8f7
}

.pd-hero--blue {
    --pd-product: #165bfb;
    --pd-tint: #eaf0ff
}

.pd-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    min-height: 430px
}

.pd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1.6px;
    color: var(--pd-blue)
}

.pd-eyebrow i {
    width: 7px;
    height: 7px;
    background: #27bd83;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(39, 189, 131, .12)
}

.pd-hero h1 {
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2.3px;
    margin: 23px 0 19px;
    max-width: 590px
}

.pd-hero__summary {
    font-size: 16px;
    line-height: 1.85;
    color: #5f6b7f;
    max-width: 530px;
    margin: 0
}

.pd-hero__actions {
    display: flex;
    align-items: center;
    gap: 23px;
    flex-wrap: wrap;
    margin-top: 29px
}

.pd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    min-height: 49px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease
}

.pd-button:hover {
    transform: translateY(-3px)
}

.pd-button--primary {
    background: var(--pd-blue);
    color: #fff;
    box-shadow: 0 10px 23px rgba(22, 91, 251, .19)
}

.pd-button--primary:hover {
    background: #0648df;
    box-shadow: 0 13px 28px rgba(22, 91, 251, .25)
}

.pd-text-link,
.pd-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--pd-blue)
}

.pd-text-link:hover,
.pd-inline-link:hover {
    gap: 17px
}

.pd-hero__micro {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #7b8699;
    font-size: 12px;
    margin-top: 28px;
    line-height: 1.6
}

.pd-micro-check {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #e1f8ed;
    color: #159463;
    font-weight: 900;
    flex-shrink: 0
}

.pd-hero__visual {
    position: relative;
    min-height: 410px;
    display: grid;
    place-items: center
}

.pd-visual-ring {
    position: absolute;
    aspect-ratio: 1;
    border: 1px solid rgba(22, 91, 251, .15);
    border-radius: 50%;
    pointer-events: none
}

.pd-visual-ring--outer {
    width: 410px
}

.pd-visual-ring--inner {
    width: 320px;
    border-style: dashed;
    animation: pdRing 50s linear infinite
}

@keyframes pdRing {
    to {
        transform: rotate(360deg)
    }
}

.pd-product-window {
    position: relative;
    z-index: 1;
    width: min(100%, 410px);
    padding: 21px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #e0e7f4;
    border-radius: 21px;
    box-shadow: 0 28px 65px rgba(35, 65, 125, .15);
    transform: rotate(-1.5deg);
    backdrop-filter: blur(10px)
}

.pd-window-top {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf1f7;
    padding-bottom: 17px
}

.pd-window-brand {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #165bfb, #7d5cff);
    color: #fff;
    font-weight: 900;
    font-size: 19px
}

.pd-window-top strong,
.pd-window-top small {
    display: block
}

.pd-window-top strong {
    font-size: 11px
}

.pd-window-top small {
    font-size: 10px;
    color: #929bad;
    margin-top: 4px
}

.pd-window-dots {
    margin-left: auto;
    color: #98a2b3;
    letter-spacing: 2px
}

.pd-window-body {
    padding-top: 20px
}

.pd-window-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.pd-window-heading small,
.pd-window-heading strong {
    display: block
}

.pd-window-heading small {
    font-size: 10px;
    letter-spacing: 1px;
    color: #8c96a8
}

.pd-window-heading strong {
    font-size: 16px;
    margin-top: 5px
}

.pd-window-status {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #e8faf1;
    color: #17875c;
    border-radius: 20px;
    padding: 6px 8px;
    font-size: 10px;
    white-space: nowrap
}

.pd-window-status i {
    width: 5px;
    height: 5px;
    background: #20b879;
    border-radius: 50%
}

.pd-window-feature {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 19px;
    padding: 14px;
    background: #f8faff;
    border: 1px solid #edf1f8;
    border-radius: 13px
}

.pd-window-feature__icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--pd-tint, #eaf0ff);
    color: var(--pd-product, var(--pd-blue));
    border-radius: 11px;
    font-size: 19px
}

.pd-window-feature strong,
.pd-window-feature small {
    display: block
}

.pd-window-feature strong {
    font-size: 11px
}

.pd-window-feature small {
    font-size: 10px;
    color: #8490a3;
    line-height: 1.6;
    margin-top: 4px
}

.pd-window-progress {
    padding: 17px 1px 15px
}

.pd-window-progress>div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    color: #8490a3
}

.pd-window-progress strong {
    font-size: 10px;
    color: #38465c
}

.pd-progress-track {
    height: 5px;
    background: #eaf0ff;
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden
}

.pd-progress-track span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #165bfb, #8b79ff)
}

.pd-window-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 1px;
    border-top: 1px solid #edf1f7;
    font-size: 10px;
    color: #758095
}

.pd-window-row span {
    display: flex;
    align-items: center;
    gap: 7px
}

.pd-window-row i {
    width: 6px;
    height: 6px;
    background: #25b980;
    border-radius: 50%
}

.pd-window-row b {
    font-size: 10px;
    color: #3c4a60
}

.pd-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border: 1px solid #e8edf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .1);
    animation: pdFloat 5s ease-in-out infinite
}

.pd-float--top {
    top: 42px;
    left: -2px
}

.pd-float--bottom {
    bottom: 31px;
    right: -4px;
    animation-delay: -2.5s
}

.pd-float>span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: var(--pd-tint, #eaf0ff);
    color: var(--pd-product, var(--pd-blue));
    font-weight: 900
}

.pd-float strong,
.pd-float small {
    display: block
}

.pd-float strong {
    font-size: 10px
}

.pd-float small {
    font-size: 10px;
    color: #8c96a8;
    margin-top: 4px
}

@keyframes pdFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

.pd-section {
    padding: 88px 0
}

.pd-overview__grid {
    display: grid;
    grid-template-columns: .9fr 1fr;
    gap: 90px;
    align-items: start
}

.pd-overview h2,
.pd-section-heading h2,
.pd-benefits h2,
.pd-faq h2 {
    font-size: clamp(32px, 3.6vw, 45px);
    line-height: 1.16;
    letter-spacing: -1.7px;
    margin: 16px 0 0
}

.pd-overview h2 span,
.pd-section-heading h2 span,
.pd-benefits h2 span,
.pd-faq h2 span {
    color: var(--pd-blue)
}

.pd-overview__grid>div:last-child p {
    font-size: 16px;
    line-height: 1.9;
    color: #5f6b7f;
    margin: 0 0 14px
}

.pd-overview__grid .pd-muted {
    font-size: 12px;
    color: #8a94a6
}

.pd-inline-link {
    margin-top: 8px;
    transition: gap .2s
}

.pd-capabilities {
    background: #f7f9fd
}

.pd-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 31px
}

.pd-section-heading>p {
    max-width: 420px;
    margin: 0;
    color: #6d788b;
    font-size: 16px;
    line-height: 1.85
}

.pd-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px
}

.pd-capability-card {
    position: relative;
    overflow: hidden;
    min-height: 235px;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    padding: 23px 19px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.pd-capability-card:hover {
    transform: translateY(-5px);
    border-color: #cbd9ff;
    box-shadow: 0 16px 35px rgba(25, 56, 115, .08)
}

.pd-capability-number {
    font-size: 12px;
    font-weight: 850;
    color: #a4adbc;
    letter-spacing: 1px
}

.pd-capability-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--pd-tint, #eaf0ff);
    color: var(--pd-product, var(--pd-blue));
    font-size: 17px;
    margin: 22px 0 17px
}

.pd-capability-card h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 9px;
    letter-spacing: -.2px
}

.pd-capability-card p {
    font-size: 12px;
    line-height: 1.8;
    color: #7b8698;
    margin: 0
}

.pd-card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--pd-blue);
    transition: width .3s
}

.pd-capability-card:hover .pd-card-line {
    width: 100%
}

.pd-benefits__grid {
    display: grid;
    grid-template-columns: .85fr 1fr;
    gap: 95px;
    align-items: center
}

.pd-benefits__intro>p,
.pd-faq__grid>div:first-child>p {
    font-size: 16px;
    line-height: 1.85;
    color: #6d788b;
    margin: 18px 0 23px
}

.pd-benefits__list {
    border-top: 1px solid #e8edf5
}

.pd-benefit-item {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 21px 0;
    border-bottom: 1px solid #e8edf5
}

.pd-benefit-item>span {
    font-size: 12px;
    font-weight: 850;
    color: var(--pd-blue)
}

.pd-benefit-item strong {
    font-size: 16px;
    flex: 1
}

.pd-benefit-item i {
    font-style: normal;
    color: #8e9aae;
    font-size: 17px;
    transition: transform .2s
}

.pd-benefit-item:hover i {
    transform: translate(3px, -3px);
    color: var(--pd-blue)
}

.pd-benefit-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f5f8ff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 17px
}

.pd-benefit-note span {
    color: var(--pd-blue)
}

.pd-benefit-note p {
    font-size: 12px;
    line-height: 1.8;
    color: #657188;
    margin: 0
}

.pd-usecases {
    background: #f7f9fd
}

.pd-usecase-list {
    border-top: 1px solid #e3e9f3
}

.pd-usecase {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    align-items: center;
    gap: 18px;
    padding: 21px 5px;
    border-bottom: 1px solid #e3e9f3;
    transition: padding .2s
}

.pd-usecase:hover {
    padding-left: 12px;
    padding-right: 12px
}

.pd-usecase__number {
    font-size: 12px;
    font-weight: 850;
    color: var(--pd-blue)
}

.pd-usecase p {
    margin: 0;
    font-size: 16px;
    color: #344054;
    line-height: 1.65
}

.pd-usecase__arrow {
    justify-self: end;
    color: #98a2b3;
    transition: color .2s, transform .2s
}

.pd-usecase:hover .pd-usecase__arrow {
    color: var(--pd-blue);
    transform: translate(3px, -3px)
}

.pd-faq__grid {
    display: grid;
    grid-template-columns: .75fr 1.1fr;
    gap: 95px;
    align-items: start
}

.pd-faq__items {
    border-top: 1px solid #e7edf5
}

.pd-faq-item {
    border-bottom: 1px solid #e7edf5
}

.pd-faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5
}

.pd-faq-item summary::-webkit-details-marker {
    display: none
}

.pd-faq-item summary span {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f4ff
}

.pd-faq-item summary span:before,
.pd-faq-item summary span:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 11px;
    width: 10px;
    height: 2px;
    background: var(--pd-blue);
    border-radius: 2px
}

.pd-faq-item summary span:after {
    transform: rotate(90deg);
    transition: transform .2s
}

.pd-faq-item[open] summary span:after {
    transform: rotate(0)
}

.pd-faq-answer {
    padding: 0 34px 18px 0
}

.pd-faq-answer p {
    font-size: 12px;
    line-height: 1.85;
    color: #707b8e;
    margin: 0
}

.pd-final-cta {
    padding: 0 0 92px
}

.pd-final-cta__inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr .48fr;
    align-items: center;
    gap: 45px;
    min-height: 315px;
    padding: 48px 55px;
    border-radius: 24px;
    background: linear-gradient(120deg, #1048d9, #165bfb 63%, #4777ff);
    color: #fff
}

.pd-final-cta__orb {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    right: 8%;
    top: -260px
}

.pd-eyebrow--light {
    color: #d0deff
}

.pd-final-cta h2 {
    font-size: clamp(30px, 3.8vw, 43px);
    line-height: 1.15;
    letter-spacing: -1.4px;
    margin: 17px 0
}

.pd-final-cta__content>p {
    max-width: 540px;
    color: #e2eaff;
    font-size: 12px;
    line-height: 1.9;
    margin: 0 0 22px
}

.pd-button--white {
    background: #fff;
    color: #165bfb;
    box-shadow: 0 10px 25px rgba(8, 35, 111, .2)
}

.pd-button--white:hover {
    background: #f4f7ff
}

.pd-final-cta__side {
    justify-self: end;
    display: grid;
    gap: 12px;
    min-width: 205px;
    padding: 22px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 17px;
    backdrop-filter: blur(8px);
    font-size: 12px;
    color: #edf2ff
}

.pd-cta-bubble {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #165bfb;
    border-radius: 13px;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 5px
}

.pd-not-found {
    padding: 100px 0 130px;
    background: #f7f9ff
}

.pd-not-found h1 {
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -1.8px;
    margin: 20px 0
}

.pd-not-found p {
    color: #657188;
    line-height: 1.8;
    max-width: 550px;
    margin-bottom: 26px
}

@media(max-width:1000px) {
    .pd-hero__grid {
        gap: 25px
    }

    .pd-hero__visual {
        transform: scale(.92);
        transform-origin: center right
    }

    .pd-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .pd-overview__grid,
    .pd-benefits__grid,
    .pd-faq__grid {
        gap: 50px
    }

    .pd-final-cta__inner {
        padding: 42px
    }
}

@media(max-width:740px) {
    .relizon-product-detail .pd-container {
        width: min(100% - 34px, 560px)
    }

    .pd-breadcrumb {
        padding-top: 17px;
        padding-bottom: 14px
    }

    .pd-hero {
        padding: 35px 0 50px
    }

    .pd-hero__grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .pd-hero h1 {
        font-size: clamp(39px, 10vw, 55px);
        letter-spacing: -1.6px;
        margin-top: 20px
    }

    .pd-hero__summary {
        font-size: 14px
    }

    .pd-hero__micro {
        align-items: flex-start
    }

    .pd-hero__visual {
        min-height: 365px;
        transform: none;
        margin-top: 18px
    }

    .pd-product-window {
        width: min(100%, 400px);
        padding: 16px
    }

    .pd-visual-ring--outer {
        width: 330px
    }

    .pd-visual-ring--inner {
        width: 270px
    }

    .pd-float--top {
        left: -2px;
        top: 24px
    }

    .pd-float--bottom {
        right: -3px;
        bottom: 14px
    }

    .pd-section {
        padding: 63px 0
    }

    .pd-overview__grid,
    .pd-benefits__grid,
    .pd-faq__grid {
        grid-template-columns: 1fr;
        gap: 23px
    }

    .pd-overview h2,
    .pd-section-heading h2,
    .pd-benefits h2,
    .pd-faq h2 {
        font-size: 35px
    }

    .pd-section-heading {
        display: block;
        margin-bottom: 24px
    }

    .pd-section-heading>p {
        margin-top: 14px
    }

    .pd-capability-grid {
        grid-template-columns: 1fr
    }

    .pd-capability-card {
        min-height: 0;
        padding: 20px
    }

    .pd-capability-mark {
        margin: 16px 0 12px
    }

    .pd-usecase {
        grid-template-columns: 43px 1fr 20px;
        gap: 12px;
        padding: 17px 0
    }

    .pd-usecase p {
        font-size: 12px
    }

    .pd-faq__grid>div:first-child>p {
        margin: 14px 0
    }

    .pd-final-cta {
        padding-bottom: 62px
    }

    .pd-final-cta__inner {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 25px
    }

    .pd-final-cta h2 {
        font-size: 34px
    }

    .pd-final-cta__side {
        justify-self: stretch;
        min-width: 0;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 16px
    }

    .pd-cta-bubble {
        grid-column: 1/-1
    }

    .pd-final-cta__side span:last-child {
        grid-column: 1/-1
    }
}

@media(max-width:390px) {
    .pd-hero__visual {
        min-height: 335px
    }

    .pd-product-window {
        padding: 13px
    }

    .pd-window-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .pd-window-feature {
        padding: 10px
    }

    .pd-float {
        padding: 8px
    }

    .pd-float strong {
        font-size: 9px
    }

    .pd-hero__actions {
        gap: 14px
    }

    .pd-button {
        padding: 0 14px;
        font-size: 11px
    }

    .pd-final-cta__side {
        grid-template-columns: 1fr
    }
}

@media(prefers-reduced-motion:reduce) {
    .relizon-product-detail * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }

    .relizon-product-detail [data-reveal] {
        opacity: 1;
        transform: none
    }
}