.pardot-handoff {
    --pardot-ink: #f7f4ff;
    --pardot-muted: #aba6bd;
    --pardot-line: rgba(201, 184, 255, .15);
    --pardot-line-strong: rgba(201, 184, 255, .3);
    --pardot-violet: #9d7cff;
    --pardot-violet-soft: rgba(157, 124, 255, .12);
    --pardot-cyan: #30d8d0;
    --pardot-cyan-soft: rgba(48, 216, 208, .1);
    --pardot-amber: #ffc36b;
    position: relative;
    overflow: hidden;
    padding: clamp(4.75rem, 8vw, 7.5rem) 0 clamp(4.5rem, 7vw, 6.75rem);
    color: var(--pardot-ink);
    background:
        radial-gradient(circle at 9% 25%, rgba(157, 124, 255, .19), transparent 28rem),
        radial-gradient(circle at 91% 53%, rgba(48, 216, 208, .13), transparent 31rem),
        linear-gradient(142deg, #090612 0%, #0d0917 48%, #050c11 100%);
}

.pardot-handoff::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 184, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 184, 255, .035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
    content: '';
}

.pardot-handoff__container {
    position: relative;
    z-index: 1;
    width: min(1320px, calc(100% - 2rem));
    margin: 0 auto;
}

.pardot-handoff__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, .72fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.pardot-handoff__kicker {
    margin: 0 0 .9rem;
    color: #bda9ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.pardot-handoff__heading h2 {
    max-width: 830px;
    margin: 0;
    color: var(--pardot-ink);
    font-size: clamp(2.35rem, 4.8vw, 4.9rem);
    font-weight: 650;
    letter-spacing: -.052em;
    line-height: .98;
}

.pardot-handoff__heading > p {
    max-width: 510px;
    margin: 0;
    color: var(--pardot-muted);
    font-size: clamp(1rem, 1.3vw, 1.14rem);
    line-height: 1.75;
}

.pardot-handoff__board {
    overflow: hidden;
    border: 1px solid var(--pardot-line-strong);
    border-radius: 28px;
    background: rgba(7, 5, 13, .94);
    box-shadow: 0 38px 110px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.pardot-handoff__bar {
    display: grid;
    grid-template-columns: minmax(215px, .7fr) minmax(480px, 1.45fr) auto;
    gap: 1.4rem;
    align-items: center;
    min-height: 96px;
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--pardot-line);
    background: linear-gradient(90deg, rgba(157, 124, 255, .08), rgba(48, 216, 208, .04));
}

.pardot-handoff__identity {
    display: flex;
    gap: .85rem;
    align-items: center;
    min-width: 0;
}

.pardot-handoff__identity small,
.pardot-handoff__identity strong,
.pardot-handoff__panel-title small,
.pardot-handoff__source small,
.pardot-handoff__gauge small,
.pardot-handoff__verdict small,
.pardot-handoff__lead small,
.pardot-handoff__lead strong,
.pardot-handoff__lead span,
.pardot-handoff__reconciled small,
.pardot-handoff__reconciled strong,
.pardot-handoff__reconciled span {
    display: block;
}

.pardot-handoff__identity small,
.pardot-handoff__panel-title small,
.pardot-handoff__source small,
.pardot-handoff__gauge small,
.pardot-handoff__verdict small,
.pardot-handoff__lead small,
.pardot-handoff__reconciled small {
    color: var(--pardot-muted);
    font-size: .61rem;
    font-weight: 780;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pardot-handoff__identity strong {
    margin-top: .2rem;
    color: var(--pardot-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .86rem;
    letter-spacing: .055em;
}

.pardot-handoff__mark {
    display: grid;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border: 1px solid rgba(189, 169, 255, .55);
    border-radius: 14px 14px 14px 4px;
    color: #f7f1ff;
    background: linear-gradient(135deg, rgba(157, 124, 255, .72), rgba(91, 66, 177, .58));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 9px 24px rgba(75, 48, 143, .28);
    font-size: 1rem;
    font-weight: 850;
}

.pardot-handoff__scope {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin: 0;
}

.pardot-handoff__scope div {
    min-width: 0;
    padding: .57rem .72rem;
    border: 1px solid var(--pardot-line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .024);
}

.pardot-handoff__scope dt {
    margin-bottom: .24rem;
    color: #7f7895;
    font-size: .54rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pardot-handoff__scope dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: #dcd4ee;
    font-size: .69rem;
    line-height: 1.35;
}

.pardot-handoff__status {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    padding: .6rem .82rem;
    border: 1px solid rgba(48, 216, 208, .3);
    border-radius: 999px;
    color: #c5fbf7;
    background: rgba(48, 216, 208, .075);
    font-size: .68rem;
    font-weight: 760;
    white-space: nowrap;
}

.pardot-handoff__status i,
.pardot-handoff__reconciled > i {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--pardot-cyan);
    box-shadow: 0 0 0 4px rgba(48, 216, 208, .1);
}

.pardot-handoff__workspace {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, .9fr) minmax(0, 1fr);
}

.pardot-handoff__workspace > section {
    min-width: 0;
    padding: clamp(1.3rem, 2.3vw, 2rem);
}

.pardot-handoff__workspace > section + section {
    border-left: 1px solid var(--pardot-line);
}

.pardot-handoff__trail {
    background: linear-gradient(155deg, rgba(157, 124, 255, .06), transparent 64%);
}

.pardot-handoff__decision {
    background: linear-gradient(155deg, rgba(255, 195, 107, .045), transparent 64%);
}

.pardot-handoff__salesforce {
    background: linear-gradient(155deg, rgba(48, 216, 208, .05), transparent 64%);
}

.pardot-handoff__panel-title {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1.3rem;
}

.pardot-handoff__panel-title > span {
    display: grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--pardot-line-strong);
    border-radius: 9px;
    color: #c3b0ff;
    background: rgba(157, 124, 255, .08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .68rem;
}

.pardot-handoff__panel-title h3 {
    margin: .18rem 0 0;
    color: var(--pardot-ink);
    font-size: 1rem;
    font-weight: 680;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.pardot-handoff__trail ol {
    position: relative;
    display: grid;
    gap: .18rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pardot-handoff__trail ol::before {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: .31rem;
    width: 1px;
    background: linear-gradient(var(--pardot-violet), var(--pardot-cyan));
    opacity: .5;
    content: '';
}

.pardot-handoff__trail li {
    position: relative;
    display: grid;
    grid-template-columns: .68rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .62rem 0;
}

.pardot-handoff__trail li i {
    z-index: 1;
    width: .65rem;
    height: .65rem;
    margin-top: .27rem;
    border: 2px solid #0b0713;
    border-radius: 50%;
    background: var(--pardot-violet);
    box-shadow: 0 0 0 3px rgba(157, 124, 255, .14);
}

.pardot-handoff__trail li:nth-child(4) i {
    background: var(--pardot-cyan);
    box-shadow: 0 0 0 3px rgba(48, 216, 208, .13);
}

.pardot-handoff__trail time {
    display: block;
    margin-bottom: .16rem;
    color: #7f7895;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .6rem;
}

.pardot-handoff__trail strong,
.pardot-handoff__trail small {
    display: block;
}

.pardot-handoff__trail strong {
    color: #eee8fa;
    font-size: .75rem;
    font-weight: 680;
}

.pardot-handoff__trail small {
    margin-top: .16rem;
    color: #8f899f;
    font-size: .64rem;
    line-height: 1.45;
}

.pardot-handoff__source {
    margin-top: .85rem;
    padding: .78rem .88rem;
    border: 1px solid var(--pardot-line);
    border-radius: 12px;
    background: rgba(2, 3, 8, .54);
}

.pardot-handoff__source code,
.pardot-handoff__verdict code {
    display: block;
    overflow-wrap: anywhere;
    margin-top: .25rem;
    color: #d8d0ea;
    font-size: .66rem;
}

.pardot-handoff__gauge {
    position: relative;
    display: grid;
    width: 9.8rem;
    height: 9.8rem;
    margin: .2rem auto 1.15rem;
    place-content: center;
    border: 1px solid rgba(255, 195, 107, .25);
    border-radius: 50%;
    text-align: center;
    background:
        radial-gradient(circle at center, #0c0914 0 54%, transparent 55%),
        conic-gradient(var(--pardot-amber) 0 82%, rgba(255, 195, 107, .08) 82% 100%);
    box-shadow: inset 0 0 0 8px #0a0711, 0 16px 38px rgba(0, 0, 0, .24);
}

.pardot-handoff__gauge div {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.pardot-handoff__gauge strong {
    color: #fff6e6;
    font-size: 2.05rem;
    font-weight: 720;
    letter-spacing: -.05em;
}

.pardot-handoff__gauge span {
    margin-left: .15rem;
    color: #928796;
    font-size: .72rem;
}

.pardot-handoff__gauge small {
    max-width: 6rem;
    margin: .16rem auto 0;
    color: #b8a890;
    line-height: 1.35;
}

.pardot-handoff__decision ul {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pardot-handoff__decision li {
    display: flex;
    gap: .8rem;
    align-items: center;
    justify-content: space-between;
    padding: .57rem .65rem;
    border: 1px solid rgba(201, 184, 255, .1);
    border-radius: 9px;
    background: rgba(255, 255, 255, .018);
}

.pardot-handoff__decision li span {
    color: #827b90;
    font-size: .64rem;
}

.pardot-handoff__decision li strong {
    color: #dcd5e8;
    font-size: .65rem;
    font-weight: 690;
    text-align: right;
}

.pardot-handoff__verdict {
    margin-top: .85rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(48, 216, 208, .26);
    border-radius: 12px;
    background: linear-gradient(115deg, rgba(48, 216, 208, .1), rgba(157, 124, 255, .05));
}

.pardot-handoff__verdict strong {
    display: block;
    margin-top: .22rem;
    color: #bdfbf4;
    font-size: .9rem;
    letter-spacing: .1em;
}

.pardot-handoff__lead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .78rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid rgba(48, 216, 208, .22);
    border-radius: 14px;
    background: rgba(48, 216, 208, .055);
}

.pardot-handoff__lead-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: #e9fffd;
    background: linear-gradient(135deg, rgba(48, 216, 208, .72), rgba(57, 115, 151, .72));
    font-size: .76rem;
    font-weight: 850;
}

.pardot-handoff__lead strong {
    margin-top: .18rem;
    color: #edfffd;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .8rem;
}

.pardot-handoff__lead span {
    margin-top: .17rem;
    color: #8da5a6;
    font-size: .64rem;
}

.pardot-handoff__lead b {
    padding: .32rem .48rem;
    border-radius: 999px;
    color: #bff9f3;
    background: rgba(48, 216, 208, .1);
    font-size: .61rem;
}

.pardot-handoff__facts {
    margin: 1rem 0 0;
}

.pardot-handoff__facts div {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .68rem 0;
    border-bottom: 1px solid rgba(201, 184, 255, .1);
}

.pardot-handoff__facts dt {
    color: #7f7890;
    font-size: .65rem;
}

.pardot-handoff__facts dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: #d8d2e3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .66rem;
    font-weight: 650;
    text-align: right;
}

.pardot-handoff__reconciled {
    display: flex;
    gap: .72rem;
    align-items: center;
    margin-top: 1rem;
    padding: .82rem .9rem;
    border: 1px solid rgba(48, 216, 208, .22);
    border-radius: 12px;
    background: rgba(48, 216, 208, .065);
}

.pardot-handoff__reconciled strong {
    margin-top: .18rem;
    color: #d7fffb;
    font-size: .74rem;
}

.pardot-handoff__reconciled span {
    margin-top: .17rem;
    color: #8fa7a8;
    font-size: .62rem;
}

.pardot-handoff__holds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    padding: 1rem 1.35rem 1.35rem;
    border-top: 1px solid var(--pardot-line);
    background: rgba(2, 3, 8, .38);
}

.pardot-handoff__holds article {
    position: relative;
    overflow: hidden;
    padding: .82rem .9rem .82rem 1rem;
    border: 1px solid rgba(255, 195, 107, .16);
    border-radius: 12px;
    background: rgba(255, 195, 107, .035);
}

.pardot-handoff__holds article::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--pardot-amber);
    content: '';
}

.pardot-handoff__holds span,
.pardot-handoff__holds strong,
.pardot-handoff__holds small {
    display: block;
}

.pardot-handoff__holds span {
    color: #b49a76;
    font-size: .55rem;
    font-weight: 780;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pardot-handoff__holds strong {
    margin-top: .24rem;
    color: #f0e8db;
    font-size: .72rem;
}

.pardot-handoff__holds small {
    margin-top: .18rem;
    color: #968d87;
    font-size: .62rem;
    line-height: 1.45;
}

.pardot-handoff__first-lot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin-top: 1rem;
    padding: clamp(1.3rem, 3vw, 2.1rem);
    border: 1px solid var(--pardot-line-strong);
    border-radius: 22px;
    background: linear-gradient(110deg, rgba(157, 124, 255, .09), rgba(48, 216, 208, .055));
}

.pardot-handoff__first-lot h3 {
    max-width: 760px;
    margin: 0;
    color: var(--pardot-ink);
    font-size: clamp(1.4rem, 2.5vw, 2.05rem);
    letter-spacing: -.035em;
    line-height: 1.12;
}

.pardot-handoff__first-lot p:last-child {
    max-width: 800px;
    margin: .75rem 0 0;
    color: var(--pardot-muted);
    font-size: .92rem;
    line-height: 1.65;
}

.pardot-handoff__cta {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: .75rem 1.1rem;
    border: 0;
    border-radius: 10px;
    color: #07070d;
    background: linear-gradient(110deg, #bca6ff, #61e5dc);
    box-shadow: 0 14px 34px rgba(79, 66, 140, .28);
    font-size: .78rem;
    font-weight: 780;
    white-space: nowrap;
}

.pardot-handoff__cta:hover,
.pardot-handoff__cta:focus-visible {
    color: #07070d;
    transform: translateY(-1px);
}

.pardot-handoff__boundaries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.pardot-handoff__boundaries a {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--pardot-line);
    border-radius: 14px;
    color: var(--pardot-ink);
    background: rgba(255, 255, 255, .024);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.pardot-handoff__boundaries a:hover,
.pardot-handoff__boundaries a:focus-visible {
    border-color: rgba(48, 216, 208, .35);
    color: var(--pardot-ink);
    background: rgba(48, 216, 208, .055);
    transform: translateY(-2px);
}

.pardot-handoff__boundaries span,
.pardot-handoff__boundaries strong,
.pardot-handoff__boundaries small {
    display: block;
}

.pardot-handoff__boundaries span {
    color: #8b819f;
    font-size: .57rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pardot-handoff__boundaries strong {
    margin-top: .3rem;
    color: #eee8fa;
    font-size: .77rem;
}

.pardot-handoff__boundaries small {
    margin-top: .3rem;
    color: #8e8799;
    font-size: .63rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .pardot-handoff__bar {
        grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr);
    }

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

    .pardot-handoff__workspace {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pardot-handoff__workspace > section:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid var(--pardot-line);
        border-left: 0;
    }

    .pardot-handoff__boundaries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .pardot-handoff {
        padding: 4rem 0;
    }

    .pardot-handoff__heading,
    .pardot-handoff__first-lot {
        grid-template-columns: 1fr;
    }

    .pardot-handoff__heading {
        gap: 1.35rem;
    }

    .pardot-handoff__heading h2 {
        font-size: clamp(2.15rem, 12vw, 3.45rem);
    }

    .pardot-handoff__bar,
    .pardot-handoff__workspace,
    .pardot-handoff__holds,
    .pardot-handoff__boundaries {
        grid-template-columns: 1fr;
    }

    .pardot-handoff__scope {
        grid-template-columns: 1fr;
    }

    .pardot-handoff__status {
        grid-column: auto;
    }

    .pardot-handoff__workspace > section + section,
    .pardot-handoff__workspace > section:nth-child(3) {
        grid-column: auto;
        border-top: 1px solid var(--pardot-line);
        border-left: 0;
    }

    .pardot-handoff__first-lot {
        gap: 1.25rem;
    }

    .pardot-handoff__cta {
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 430px) {
    .pardot-handoff__container {
        width: min(100% - 1.15rem, 1320px);
    }

    .pardot-handoff__board,
    .pardot-handoff__first-lot {
        border-radius: 18px;
    }

    .pardot-handoff__bar,
    .pardot-handoff__workspace > section,
    .pardot-handoff__holds {
        padding-right: 1rem;
        padding-left: 1rem;
    }

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

    .pardot-handoff__lead b {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pardot-handoff__cta,
    .pardot-handoff__boundaries a {
        transition: none;
    }
}
