/**
 * Deluxe catalog sales stories and safe interactive demos.
 */

.dp-product-sales-page,
.dp-product-demo-page {
    --dps-ink: #101426;
    --dps-muted: #61687c;
    --dps-line: rgba(33, 39, 65, .12);
    --dps-purple: #6f4bf2;
    --dps-purple-dark: #4b2ac8;
    --dps-mint: #68e4c3;
    --dps-blue: #55a7ff;
    --dps-soft: #f5f4fb;
    --dps-white: #fff;
    --dps-shadow: 0 30px 80px rgba(24, 20, 66, .13);
    --dps-radius-lg: clamp(1.35rem, 3vw, 2.25rem);
    --dps-radius: 1.15rem;
}

.dp-product-sales-page .dp-commerce-shell--product {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 8% 8%, rgba(111, 75, 242, .09), transparent 28rem),
        radial-gradient(circle at 94% 18%, rgba(85, 167, 255, .08), transparent 25rem),
        #fbfbfe;
}

.dp-product-sales-page .dp-commerce-shell--product::before {
    position: absolute;
    z-index: 0;
    top: 7rem;
    left: 50%;
    width: min(96vw, 95rem);
    height: 42rem;
    border: 1px solid rgba(111, 75, 242, .08);
    border-radius: 50%;
    content: "";
    transform: translateX(-50%) rotate(-5deg);
    pointer-events: none;
}

.dp-product-sales-page .dp-commerce-shell__inner,
.dp-product-sales-page .dp-commerce-main {
    position: relative;
    z-index: 1;
}

.dp-product-sales-page.single-product div.product {
    align-items: start;
    gap: clamp(1.1rem, 3vw, 2.5rem);
}

.dp-sales-hero {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
    min-height: clamp(31rem, 62vw, 44rem);
    margin: .25rem 0 clamp(1.25rem, 4vw, 3rem);
    padding: clamp(2rem, 6vw, 5.75rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--dps-radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(103, 227, 194, .2), transparent 23rem),
        radial-gradient(circle at 86% 16%, rgba(85, 167, 255, .2), transparent 24rem),
        linear-gradient(135deg, #11162c 0%, #171638 50%, #2d1d6c 100%);
    box-shadow: 0 32px 95px rgba(26, 20, 78, .22);
    isolation: isolate;
}

.dp-sales-hero::before,
.dp-sales-hero::after {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    content: "";
    pointer-events: none;
}

.dp-sales-hero::before {
    top: -13rem;
    right: -9rem;
    width: 32rem;
    height: 32rem;
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 0 0 4rem rgba(255, 255, 255, .025), 0 0 0 8rem rgba(255, 255, 255, .018);
}

.dp-sales-hero::after {
    right: 42%;
    bottom: -12rem;
    width: 24rem;
    height: 24rem;
    background: rgba(103, 227, 194, .07);
    filter: blur(2px);
}

.dp-sales-hero__copy,
.dp-sales-hero__signal {
    position: relative;
    z-index: 1;
}

.dp-sales-eyebrow,
.dp-sales-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    margin: 0 0 1.15rem;
    color: var(--dps-mint);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .115em;
    text-transform: uppercase;
}

.dp-sales-hero .product_title,
.dp-product-sales-page.single-product div.product .dp-sales-hero .product_title {
    max-width: 13ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.75rem, 7vw, 6.25rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .94;
    text-wrap: balance;
}

.dp-sales-lead {
    max-width: 44rem;
    margin: 1.55rem 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: clamp(1rem, 1.8vw, 1.22rem);
    line-height: 1.75;
}

.dp-sales-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

.dp-sales-button,
.woocommerce .dp-sales-button,
.dp-demo-shell .dp-sales-button {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: .8rem 1.2rem;
    border: 1px solid transparent;
    border-radius: .85rem;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.dp-sales-button:hover,
.dp-sales-button:focus-visible {
    transform: translateY(-2px);
}

.dp-sales-button--primary,
.woocommerce .dp-sales-button--primary {
    color: #14132a;
    background: var(--dps-mint);
    box-shadow: 0 14px 32px rgba(104, 228, 195, .2);
}

.dp-sales-button--primary:hover,
.dp-sales-button--primary:focus-visible,
.woocommerce .dp-sales-button--primary:hover,
.woocommerce .dp-sales-button--primary:focus-visible {
    color: #14132a;
    background: #8cebd2;
    box-shadow: 0 18px 38px rgba(104, 228, 195, .28);
}

.dp-sales-button--demo,
.woocommerce .dp-sales-button--demo {
    color: #fff;
    border-color: rgba(255, 255, 255, .23);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
}

.dp-sales-button--demo:hover,
.dp-sales-button--demo:focus-visible,
.woocommerce .dp-sales-button--demo:hover,
.woocommerce .dp-sales-button--demo:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .14);
}

.dp-sales-button--light,
.woocommerce .dp-sales-button--light {
    color: #18142f;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 13, 33, .14);
}

.dp-sales-button--light:hover,
.dp-sales-button--light:focus-visible,
.woocommerce .dp-sales-button--light:hover,
.woocommerce .dp-sales-button--light:focus-visible {
    color: #18142f;
    background: #f2efff;
}

.dp-sales-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.1rem;
    margin: 1.35rem 0 0;
    padding: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .7rem;
    list-style: none;
}

.dp-sales-trust li {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

.dp-sales-trust li::before {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: var(--dps-mint);
    box-shadow: 0 0 0 .2rem rgba(104, 228, 195, .11);
    content: "";
}

.dp-sales-hero__signal {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.35rem;
    background: rgba(9, 12, 29, .66);
    box-shadow: 0 38px 75px rgba(3, 4, 15, .34);
    transform: rotate(1.8deg);
    backdrop-filter: blur(24px);
}

.dp-sales-signal__top,
.dp-sales-signal__footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    color: rgba(255, 255, 255, .58);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .62rem;
    letter-spacing: .035em;
}

.dp-sales-signal__top {
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.dp-sales-signal__top span:first-child {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
}

.dp-sales-signal__top i {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--dps-mint);
    box-shadow: 0 0 0 .25rem rgba(104, 228, 195, .1);
}

.dp-sales-signal__body {
    display: grid;
    gap: .25rem;
    padding: .7rem;
}

.dp-sales-signal__row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    min-height: 4.3rem;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .85rem;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .045);
    font-size: .78rem;
    line-height: 1.45;
}

.dp-sales-signal__number {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .6rem;
    color: var(--dps-mint);
    background: rgba(104, 228, 195, .1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .65rem;
}

.dp-sales-signal__row strong {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    color: #0c1c1b;
    background: var(--dps-mint);
    font-size: .65rem;
}

.dp-sales-signal__footer {
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.dp-product-sales-page.single-product div.product .woocommerce-product-gallery,
.dp-product-sales-page.single-product div.product .summary {
    position: relative;
    z-index: 2;
}

.dp-product-sales-page.single-product div.product .woocommerce-product-gallery {
    padding: clamp(.75rem, 2vw, 1.1rem);
    border: 1px solid var(--dps-line);
    border-radius: var(--dps-radius-lg);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 24px 62px rgba(27, 24, 70, .1);
    backdrop-filter: blur(18px);
}

.dp-product-sales-page.single-product div.product .woocommerce-product-gallery__wrapper,
.dp-product-sales-page.single-product div.product .woocommerce-product-gallery__image img {
    border-radius: calc(var(--dps-radius-lg) - .65rem);
}

.dp-product-sales-page.single-product div.product .summary {
    top: 1rem;
    border-color: rgba(111, 75, 242, .14);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 26px 68px rgba(27, 24, 70, .12);
    backdrop-filter: blur(18px);
}

.dp-sales-anchor {
    position: absolute;
    top: -7rem;
}

.dp-sales-summary-demo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    margin: 1rem 0;
    padding: .8rem;
    border: 1px solid rgba(111, 75, 242, .16);
    border-radius: .85rem;
    background: linear-gradient(135deg, rgba(111, 75, 242, .07), rgba(85, 167, 255, .06));
}

.dp-sales-summary-demo__icon {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border-radius: .7rem;
    color: #fff;
    background: var(--dps-purple);
    font-size: .9rem;
}

.dp-sales-summary-demo span:nth-child(2) {
    display: grid;
    gap: .15rem;
}

.dp-sales-summary-demo strong {
    color: var(--dps-ink);
    font-size: .72rem;
}

.dp-sales-summary-demo small {
    color: var(--dps-muted);
    font-size: .63rem;
    line-height: 1.35;
}

.dp-sales-summary-demo a {
    color: var(--dps-purple-dark);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

body.dp-product-sales-page.single-product div.product .reset_variations {
    color: var(--dps-ink) !important;
    font-weight: 700;
    transition: none;
}

body.dp-product-sales-page.single-product div.product .reset_variations[style*="visibility: visible"] {
    opacity: 1 !important;
}

.dp-sales-story {
    display: grid;
    grid-column: 1 / -1;
    gap: clamp(4rem, 9vw, 8rem);
    width: 100%;
    margin-top: clamp(4rem, 8vw, 7rem);
}

.dp-sales-section {
    width: 100%;
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s ease;
}

.dp-sales-story.is-enhanced .dp-sales-section {
    opacity: 1;
    transform: translateY(1.5rem);
}

.dp-sales-story.is-visible .dp-sales-section,
.dp-sales-section.is-visible {
    opacity: 1;
    transform: none;
}

.dp-sales-section__header {
    max-width: 48rem;
    margin-bottom: 2rem;
}

.dp-sales-section__header .dp-sales-kicker,
.dp-sales-workflow .dp-sales-kicker,
.dp-demo-next .dp-sales-kicker {
    color: var(--dps-purple);
}

.dp-sales-section h2,
.dp-sales-workflow h2,
.dp-sales-demo-spotlight h2,
.dp-demo-next h2 {
    margin: 0;
    color: var(--dps-ink);
    font-size: clamp(2.15rem, 5vw, 4.5rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    text-wrap: balance;
}

.dp-sales-section__header > p:last-child,
.dp-sales-workflow__copy > p,
.dp-sales-demo-spotlight p,
.dp-demo-next p {
    margin: 1rem 0 0;
    color: var(--dps-muted);
    font-size: .95rem;
    line-height: 1.8;
}

.dp-sales-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dp-sales-card {
    position: relative;
    min-height: 17rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--dps-line);
    border-radius: var(--dps-radius);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 20px 45px rgba(26, 23, 65, .075);
}

.dp-sales-card::after {
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: rgba(111, 75, 242, .055);
    content: "";
}

.dp-sales-card__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin-bottom: 2.4rem;
    border-radius: .9rem;
    color: var(--dps-purple-dark);
    background: linear-gradient(135deg, rgba(111, 75, 242, .14), rgba(85, 167, 255, .12));
    font-size: 1.1rem;
}

.dp-sales-card h3 {
    margin: 0;
    color: var(--dps-ink);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.3;
}

.dp-sales-card p {
    margin: .75rem 0 0;
    color: var(--dps-muted);
    font-size: .8rem;
    line-height: 1.75;
}

.dp-sales-workflow {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.dp-sales-workflow__visual {
    position: relative;
    padding: clamp(.75rem, 2vw, 1.15rem);
    border: 1px solid var(--dps-line);
    border-radius: var(--dps-radius-lg);
    background: #fff;
    box-shadow: var(--dps-shadow);
    transform: rotate(-1.25deg);
}

.dp-sales-workflow__visual::before {
    position: absolute;
    z-index: -1;
    inset: 10% -5% -7% 8%;
    border-radius: var(--dps-radius-lg);
    background: linear-gradient(135deg, rgba(111, 75, 242, .18), rgba(104, 228, 195, .17));
    content: "";
}

.dp-sales-workflow__visual img {
    display: block;
    width: 100%;
    border-radius: calc(var(--dps-radius-lg) - .6rem);
}

.dp-sales-workflow__badge {
    position: absolute;
    right: 1.4rem;
    bottom: 1.4rem;
    padding: .6rem .8rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: .7rem;
    color: #fff;
    background: rgba(16, 20, 38, .82);
    box-shadow: 0 12px 30px rgba(12, 14, 31, .24);
    font-size: .68rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.dp-sales-steps {
    display: grid;
    gap: .7rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.dp-sales-steps li {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    padding: .8rem 0;
    border-bottom: 1px solid var(--dps-line);
}

.dp-sales-steps span {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--dps-purple-dark);
    background: rgba(111, 75, 242, .09);
    font-size: .7rem;
    font-weight: 800;
}

.dp-sales-steps strong {
    color: var(--dps-ink);
    font-size: .85rem;
    line-height: 1.45;
}

.dp-sales-text-link {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin-top: 1.5rem;
    color: var(--dps-purple-dark);
    font-size: .82rem;
    font-weight: 800;
}

.dp-sales-demo-spotlight {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: 30rem;
    padding: clamp(2rem, 6vw, 5.5rem);
    overflow: hidden;
    border-radius: var(--dps-radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(104, 228, 195, .18), transparent 22rem),
        linear-gradient(135deg, #211353, #4726a4 58%, #244779);
    box-shadow: var(--dps-shadow);
}

.dp-sales-demo-spotlight .dp-sales-kicker {
    color: var(--dps-mint);
}

.dp-sales-demo-spotlight h2,
.dp-sales-demo-spotlight p {
    color: #fff;
}

.dp-sales-demo-spotlight p {
    max-width: 42rem;
    color: rgba(255, 255, 255, .74);
}

.dp-sales-demo-spotlight .dp-sales-button {
    margin-top: 1.5rem;
}

.dp-sales-demo-window {
    position: relative;
    padding: 3.25rem 1rem 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 1.25rem;
    background: rgba(8, 10, 28, .55);
    box-shadow: 0 35px 75px rgba(7, 7, 25, .3);
    transform: rotate(2deg);
    backdrop-filter: blur(18px);
}

.dp-sales-demo-window > span {
    position: absolute;
    top: 1.2rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #ff7184;
}

.dp-sales-demo-window > span:first-child { left: 1.2rem; }
.dp-sales-demo-window > span:nth-child(2) { left: 2.15rem; background: #ffd066; }
.dp-sales-demo-window > span:nth-child(3) { left: 3.1rem; background: var(--dps-mint); }

.dp-sales-demo-window div {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    min-height: 4.8rem;
    margin-top: .6rem;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .055);
}

.dp-sales-demo-window i {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .65rem;
    background: linear-gradient(135deg, var(--dps-purple), var(--dps-blue));
}

.dp-sales-demo-window div:last-child i {
    background: linear-gradient(135deg, #2fb692, var(--dps-mint));
}

.dp-sales-demo-window b {
    color: rgba(255, 255, 255, .82);
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.45;
}

.dp-sales-confidence {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--dps-line);
    border-radius: var(--dps-radius);
    background: var(--dps-line);
    box-shadow: 0 18px 40px rgba(26, 23, 65, .06);
}

.dp-sales-confidence div {
    display: grid;
    gap: .4rem;
    min-height: 9.5rem;
    align-content: center;
    padding: 1.25rem;
    background: #fff;
}

.dp-sales-confidence strong {
    color: var(--dps-ink);
    font-size: .82rem;
}

.dp-sales-confidence span {
    color: var(--dps-muted);
    font-size: .7rem;
    line-height: 1.55;
}

.dp-sales-faq {
    display: grid;
    grid-template-columns: minmax(240px, .65fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.dp-sales-faq__list {
    display: grid;
    gap: .7rem;
}

.dp-sales-faq details {
    border: 1px solid var(--dps-line);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(27, 24, 70, .045);
}

.dp-sales-faq summary {
    position: relative;
    padding: 1.1rem 3rem 1.1rem 1.15rem;
    color: var(--dps-ink);
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.dp-sales-faq summary::-webkit-details-marker { display: none; }

.dp-sales-faq summary::after {
    position: absolute;
    top: 50%;
    right: 1.15rem;
    content: "+";
    transform: translateY(-50%);
    color: var(--dps-purple);
    font-size: 1.2rem;
}

.dp-sales-faq details[open] summary::after { content: "−"; }

.dp-sales-faq details p {
    margin: 0;
    padding: 0 1.15rem 1.15rem;
    color: var(--dps-muted);
    font-size: .78rem;
    line-height: 1.75;
}

.dp-product-sales-page .woocommerce div.product .woocommerce-tabs {
    margin-top: clamp(5rem, 10vw, 9rem);
}

/* Demo route. */
.dp-product-demo-page {
    background:
        radial-gradient(circle at 12% 5%, rgba(111, 75, 242, .1), transparent 30rem),
        linear-gradient(#fbfbfe, #f5f4fb);
}

.dp-demo-shell {
    width: min(100% - 2rem, 88rem);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 5rem) 0 4rem;
}

.dp-demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.dp-demo-back {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    margin-bottom: 1.5rem;
    color: var(--dps-purple-dark);
    font-size: .75rem;
    font-weight: 800;
}

.dp-demo-badge {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: .42rem .7rem;
    border: 1px solid rgba(111, 75, 242, .15);
    border-radius: 999px;
    color: var(--dps-purple-dark);
    background: rgba(111, 75, 242, .06);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dp-demo-badge span {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #30b790;
    box-shadow: 0 0 0 .24rem rgba(48, 183, 144, .1);
}

.dp-demo-hero h1 {
    max-width: 14ch;
    margin: 0;
    color: var(--dps-ink);
    font-size: clamp(2.6rem, 7vw, 6rem);
    letter-spacing: -.055em;
    line-height: .95;
    text-wrap: balance;
}

.dp-demo-hero__copy > p:not(.dp-demo-badge) {
    max-width: 50rem;
    margin: 1.25rem 0 0;
    color: var(--dps-muted);
    font-size: clamp(.95rem, 1.6vw, 1.08rem);
    line-height: 1.75;
}

.dp-demo-safety {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}

.dp-demo-safety li {
    padding: .42rem .65rem;
    border: 1px solid var(--dps-line);
    border-radius: .65rem;
    color: var(--dps-muted);
    background: rgba(255, 255, 255, .7);
    font-size: .72rem;
    font-weight: 700;
}

.dp-demo-hero__art {
    position: relative;
    margin: 0;
    padding: .8rem;
    border: 1px solid var(--dps-line);
    border-radius: var(--dps-radius-lg);
    background: #fff;
    box-shadow: var(--dps-shadow);
    transform: rotate(2deg);
}

.dp-demo-hero__art img {
    display: block;
    width: 100%;
    border-radius: calc(var(--dps-radius-lg) - .55rem);
}

.dp-demo-hero__art figcaption {
    position: absolute;
    right: 1.4rem;
    bottom: 1.4rem;
    padding: .55rem .7rem;
    border-radius: .65rem;
    color: #fff;
    background: rgba(16, 20, 38, .84);
    font-size: .72rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.dp-demo-app {
    overflow: hidden;
    border: 1px solid rgba(33, 39, 65, .14);
    border-radius: var(--dps-radius-lg);
    background: #fff;
    box-shadow: 0 36px 90px rgba(26, 20, 78, .16);
}

.dp-demo-app__bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: 3.4rem;
    padding: .7rem 1rem;
    color: rgba(255, 255, 255, .72);
    background: #13172b;
    font-size: .74rem;
    font-weight: 700;
}

.dp-demo-app__bar > div {
    display: flex;
    gap: .8rem;
    align-items: center;
}

.dp-demo-app__lights {
    display: flex;
    gap: .32rem;
}

.dp-demo-app__lights i {
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: #ff7184;
}

.dp-demo-app__lights i:nth-child(2) { background: #ffd066; }
.dp-demo-app__lights i:nth-child(3) { background: var(--dps-mint); }

.dp-demo-reset {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .45rem .6rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .55rem;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .06);
    font: inherit;
    cursor: pointer;
}

.dp-demo-reset:hover,
.dp-demo-reset:focus-visible { background: rgba(255, 255, 255, .12); }

.dp-demo-app__grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
}

.dp-demo-controls,
.dp-demo-output {
    min-width: 0;
    padding: clamp(1.3rem, 4vw, 3rem);
}

.dp-demo-controls {
    border-right: 1px solid var(--dps-line);
    background: #fbfbfd;
}

.dp-demo-output {
    background:
        radial-gradient(circle at 92% 8%, rgba(111, 75, 242, .08), transparent 18rem),
        #fff;
}

.dp-demo-panel-heading {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.dp-demo-panel-heading > span {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--dps-purple-dark);
    background: rgba(111, 75, 242, .09);
    font-size: .65rem;
    font-weight: 800;
}

.dp-demo-panel-heading p {
    margin: 0 0 .15rem;
    color: var(--dps-purple);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dp-demo-panel-heading h2 {
    margin: 0;
    color: var(--dps-ink);
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    line-height: 1.25;
}

.dp-demo-field {
    display: grid;
    gap: .45rem;
    margin-bottom: 1.1rem;
    color: var(--dps-ink);
    font-size: .76rem;
    font-weight: 800;
}

.dp-demo-field > span {
    display: flex;
    justify-content: space-between;
}

.dp-demo-field input[type="text"],
.dp-demo-field select {
    width: 100%;
    min-height: 3rem;
    padding: .65rem .75rem;
    border: 1px solid rgba(33, 39, 65, .5);
    border-radius: .7rem;
    color: var(--dps-ink);
    background: #fff;
    font: inherit;
    font-weight: 600;
}

.dp-demo-field input[type="range"] {
    width: 100%;
    accent-color: var(--dps-purple);
}

.dp-demo-field small {
    color: var(--dps-muted);
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.5;
}

.dp-demo-field output {
    color: var(--dps-purple-dark);
}

.dp-demo-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    margin: 1.25rem 0;
    padding: .8rem;
    border: 1px solid var(--dps-line);
    border-radius: .75rem;
    color: var(--dps-ink);
    background: #fff;
    cursor: pointer;
}

.dp-demo-check input {
    width: 1rem;
    height: 1rem;
    margin-top: .1rem;
    accent-color: var(--dps-purple);
}

.dp-demo-check span {
    display: grid;
    gap: .15rem;
}

.dp-demo-check strong { font-size: .76rem; }
.dp-demo-check small { color: var(--dps-muted); font-size: .7rem; line-height: 1.4; }

.dp-demo-run {
    display: flex;
    gap: .7rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.2rem;
    margin-top: .8rem;
    padding: .75rem 1rem;
    border: 0;
    border-radius: .8rem;
    color: #fff;
    background: linear-gradient(135deg, var(--dps-purple), var(--dps-purple-dark));
    box-shadow: 0 14px 28px rgba(111, 75, 242, .22);
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
}

.dp-demo-run:hover,
.dp-demo-run:focus-visible { background: linear-gradient(135deg, #805ff5, #5732d3); }
.dp-demo-run:disabled { opacity: .65; cursor: wait; }

.dp-demo-status {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--dps-line);
    border-radius: .85rem;
    background: #fbfbfd;
}

.dp-demo-status__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: .8rem;
    color: var(--dps-purple-dark);
    background: rgba(111, 75, 242, .09);
    font-size: 1.1rem;
}

.dp-demo-status > div:last-child {
    display: grid;
    gap: .2rem;
}

.dp-demo-status span {
    color: var(--dps-purple);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dp-demo-status strong {
    color: var(--dps-ink);
    font-size: .8rem;
    line-height: 1.45;
}

.dp-demo-status[data-state="working"] .dp-demo-status__icon { animation: dps-spin 1.1s linear infinite; }
.dp-demo-status[data-state="done"] .dp-demo-status__icon { color: #10694f; background: rgba(48, 183, 144, .11); }

.dp-demo-progress {
    height: .32rem;
    margin: .8rem 0 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(111, 75, 242, .08);
}

.dp-demo-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--dps-purple), var(--dps-mint));
    transition: width .3s ease;
}

.dp-demo-result {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(48, 183, 144, .2);
    border-radius: .85rem;
    background: linear-gradient(135deg, rgba(48, 183, 144, .08), rgba(104, 228, 195, .05));
}

.dp-demo-result__label {
    margin: 0 0 .35rem;
    color: #14765a;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dp-demo-result h3 {
    margin: 0;
    color: var(--dps-ink);
    font-size: .88rem;
}

.dp-demo-result p:last-child {
    margin: .45rem 0 0;
    color: var(--dps-muted);
    font-size: .75rem;
    line-height: 1.65;
}

.dp-demo-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: 1rem 0;
}

.dp-demo-metrics div {
    display: grid;
    gap: .35rem;
    min-height: 5rem;
    align-content: center;
    padding: .7rem;
    border: 1px solid var(--dps-line);
    border-radius: .75rem;
    background: #fff;
}

.dp-demo-metrics span {
    color: var(--dps-muted);
    font-size: .7rem;
    line-height: 1.3;
}

.dp-demo-metrics strong {
    color: var(--dps-ink);
    font-size: 1rem;
}

.dp-demo-log {
    display: grid;
    gap: .45rem;
    max-height: 11rem;
    padding: .8rem;
    overflow: auto;
    border-radius: .75rem;
    color: rgba(255, 255, 255, .7);
    background: #14182c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .7rem;
}

.dp-demo-log p {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: .4rem;
    margin: 0;
    line-height: 1.5;
}

.dp-demo-log p[data-state="done"] span { color: var(--dps-mint); }

.dp-demo-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin-top: clamp(2rem, 6vw, 5rem);
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid var(--dps-line);
    border-radius: var(--dps-radius-lg);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 20px 50px rgba(26, 23, 65, .08);
}

.dp-demo-next h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.dp-demo-next p { max-width: 44rem; }

.dp-demo-disclaimer {
    max-width: 58rem;
    margin: 1.5rem auto 0;
    color: var(--dps-muted);
    font-size: .72rem;
    line-height: 1.65;
    text-align: center;
}

@keyframes dps-spin { to { transform: rotate(1turn); } }

.dp-product-sales-page :where(.dp-sales-button, .dp-sales-summary-demo a, .dp-sales-text-link, .dp-sales-faq summary):focus-visible,
.dp-product-demo-page :where(a, button, input, select, summary, [tabindex]):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--dps-purple-dark);
}

@media (max-width: 980px) {
    .dp-sales-hero,
    .dp-sales-workflow,
    .dp-sales-demo-spotlight,
    .dp-sales-faq,
    .dp-demo-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .dp-sales-hero {
        min-height: 0;
    }

    .dp-sales-hero .product_title,
    .dp-product-sales-page.single-product div.product .dp-sales-hero .product_title {
        max-width: 16ch;
    }

    .dp-sales-hero__signal {
        width: min(100%, 38rem);
        transform: none;
    }

    .dp-sales-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dp-sales-confidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dp-demo-hero__art { width: min(100%, 32rem); }
}

@media (max-width: 760px) {
    .dp-sales-hero {
        gap: 2.25rem;
        padding: 1.5rem;
        border-radius: 1.25rem;
    }

    .dp-sales-hero .product_title,
    .dp-product-sales-page.single-product div.product .dp-sales-hero .product_title {
        font-size: clamp(2.55rem, 13vw, 4.4rem);
    }

    .dp-sales-actions,
    .dp-sales-actions .button { width: 100%; }

    .dp-sales-trust { display: grid; }
    .dp-sales-card-grid { grid-template-columns: minmax(0, 1fr); }
    .dp-sales-card { min-height: 0; }
    .dp-sales-card__icon { margin-bottom: 1.35rem; }
    .dp-sales-demo-spotlight { padding: 1.5rem; border-radius: 1.25rem; }
    .dp-sales-confidence { grid-template-columns: minmax(0, 1fr); }

    .dp-sales-summary-demo {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dp-sales-summary-demo a {
        grid-column: 2;
        justify-self: start;
    }

    .dp-demo-shell { width: min(100% - 1.2rem, 88rem); padding-top: 1.25rem; }
    .dp-demo-hero__art { width: 88%; }
    .dp-demo-app { border-radius: 1rem; }
    .dp-demo-app__grid { grid-template-columns: minmax(0, 1fr); }
    .dp-demo-controls { border-right: 0; border-bottom: 1px solid var(--dps-line); }
    .dp-demo-metrics { grid-template-columns: minmax(0, 1fr); }
    .dp-demo-metrics div { min-height: 4rem; }
    .dp-demo-next { grid-template-columns: minmax(0, 1fr); }
    .dp-demo-next .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dp-sales-section,
    .dp-sales-button,
    .dp-demo-progress span,
    .dp-demo-status[data-state="working"] .dp-demo-status__icon {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
        transform: none !important;
    }
}