/* Flat parity extras */

html:has(.sp-login-dialog[open]),
    html:has(.sp-promo-dialog[open]),
    html:has(.sp-comment-dialog[open]),
    html.sp-scroll-lock {
        overflow: hidden;
        overscroll-behavior: none;
    }

.sp-public-footer {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

.sp-trust-badges__list {
        min-height: 5.5rem;
    }

.sp-trust-badge {
        box-sizing: border-box;
        display: inline-flex;
        width: 5.5rem;
        height: 5.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        background: var(--color-neutral);
    }

.sp-trust-badge__link {
        display: inline-flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        padding: 0.375rem;
    }

.sp-trust-badge__img,
    .sp-trust-badge img {
        display: block;
        width: 88px;
        height: 88px;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.sp-trust-badge.is-broken .sp-trust-badge__img,
    .sp-trust-badge.is-broken img {
        visibility: hidden;
    }

.sp-trust-badge--preview {
        pointer-events: none;
    }

.sp-has-bottom-nav .sp-public-footer {
        /* Keep content clear of the bar without opening a gap below the footer. */
        padding-bottom: 0.75rem;
    }

@media (min-width: 64rem) {
        .sp-bottom-nav {
            display: none;
        }

        .sp-has-bottom-nav {
            padding-bottom: 0;
        }

        .sp-has-bottom-nav .sp-public-footer {
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        .sp-has-bottom-nav .sp-dock {
            bottom: 0;
            padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        }
    }

.sp-blog-archive {
    display: grid;
    gap: 1.5rem;
    padding-block: 1.75rem 2.5rem;
}

.sp-blog-archive__intro {
    display: grid;
    gap: 1rem;
}

.sp-blog-archive__hero {
    display: grid;
    gap: 0.55rem;
    max-width: 40rem;
}

.sp-blog-archive__hero .sp-title {
    font-size: clamp(1.65rem, 2.2vw, 2.1rem);
    line-height: 1.3;
    margin: 0;
}

.sp-blog-archive__hero .sp-body {
    margin: 0;
    max-width: 38rem;
}

.sp-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.sp-chip {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    background: var(--color-surface);
    color: var(--color-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.sp-chip:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    color: var(--color-accent);
}

.sp-chip.is-active {
    border-color: transparent;
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
}

.sp-blog-archive__feed {
    display: grid;
    gap: 1.5rem;
}

.sp-blog-archive__rest {
    display: grid;
    gap: 0.85rem;
}

.sp-blog-archive__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
    .sp-blog-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .sp-blog-archive__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.15rem;
    }
}

.sp-blog-feature {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
}

@media (min-width: 64rem) {
    .sp-blog-feature {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: stretch;
    }
}

.sp-blog-feature__media,
.sp-blog-card__media {
    min-width: 0;
    background: var(--color-neutral);
}

.sp-blog-feature__media .sp-media,
.sp-blog-card__media .sp-media {
    width: 100%;
    border-radius: 0;
    aspect-ratio: 16 / 9;
}

.sp-blog-feature__media .sp-media-img,
.sp-blog-card__media .sp-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 63.99rem) {
    .sp-blog-feature__media .sp-media {
        max-height: 10rem;
        aspect-ratio: 2.2 / 1;
    }
}

@media (min-width: 64rem) {
    .sp-blog-feature__media,
    .sp-blog-feature__media .sp-media {
        height: 100%;
        min-height: 16rem;
        max-height: none;
        aspect-ratio: auto;
    }
}

.sp-blog-feature__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.1rem 1.15rem 1.25rem;
}

@media (min-width: 64rem) {
    .sp-blog-feature__body {
        justify-content: center;
        padding: 1.5rem 1.75rem;
    }
}

.sp-blog-feature__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.sp-blog-feature__title {
    margin: 0;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.sp-blog-feature__excerpt {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.sp-blog-feature__meta,
.sp-blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.sp-blog-feature__cta,
.sp-blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-accent);
}

.sp-blog-card__cta {
    margin-top: auto;
}

@media (min-width: 64rem) {
    .sp-blog-feature__cta {
        margin-top: auto;
    }
}

.sp-blog-feature__cta-icon,
.sp-blog-card__cta-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sp-blog-feature__cta-icon .sp-icon,
.sp-blog-card__cta-icon .sp-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.sp-blog-card {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
}

.sp-blog-card__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.95rem 1rem 1.05rem;
}

.sp-blog-card__body > .sp-badge,
.sp-blog-feature__body .sp-badge {
    align-self: flex-start;
    width: auto;
}

.sp-blog-card__meta {
    margin-top: auto;
    padding-top: 0.15rem;
}

.sp-blog-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.sp-blog-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
}

.sp-pagination {
    margin-top: 0.25rem;
}

.sp-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.sp-pagination .page-numbers {
    display: inline-flex;
    min-width: 2.25rem;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    background: var(--color-surface);
    color: var(--color-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.sp-pagination .page-numbers:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    color: var(--color-accent);
}

.sp-pagination .page-numbers.current {
    border-color: transparent;
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
}

.sp-pagination .page-numbers.dots {
    border: 0;
    background: transparent;
    min-width: auto;
    padding-inline: 0.25rem;
}

.sp-blog-archive__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.15rem 1.25rem;
}

@media (min-width: 48rem) {
    .sp-blog-archive__aside {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.35rem 1.5rem;
    }
}

/* Contact page */
.sp-contact-page {
    display: grid;
    gap: 1.75rem;
    padding-block: 1.75rem 2.5rem;
}

.sp-contact-hero {
    display: grid;
    gap: 1.25rem;
    align-items: stretch;
}

.sp-contact-hero__copy {
    display: grid;
    gap: 0.55rem;
    max-width: 40rem;
}

.sp-contact-hero__copy .sp-title {
    margin: 0;
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    line-height: 1.3;
}

.sp-contact-hero__copy .sp-body {
    margin: 0;
}

.sp-contact-hero__hours {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
    color: var(--color-secondary);
}

.sp-contact-hero__hours-icon {
    display: inline-flex;
    color: var(--color-accent);
}

.sp-contact-hero__hours-icon .sp-icon {
    width: 1rem;
    height: 1rem;
}

.sp-contact-hero__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-neutral);
    min-height: 12rem;
    box-shadow: var(--shadow-sm);
}

.sp-contact-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 12rem;
    max-height: 20rem;
    object-fit: cover;
    object-position: center;
}

.sp-contact-hero__badge {
    position: absolute;
    inset-inline-start: 0.85rem;
    bottom: 0.85rem;
    display: grid;
    gap: 0.15rem;
    max-width: calc(100% - 1.7rem);
    padding: 0.65rem 0.85rem;
    border: 1px solid color-mix(in srgb, #fff 35%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}

.sp-contact-hero__badge .sp-label,
.sp-contact-hero__badge .sp-caption {
    margin: 0;
}

@media (min-width: 64rem) {
    .sp-contact-hero {
        grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
        gap: 1.5rem;
        align-items: stretch;
    }

    .sp-contact-hero__media,
    .sp-contact-hero__img {
        min-height: 100%;
        max-height: none;
        height: 100%;
    }
}

.sp-contact-channels {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
    .sp-contact-channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .sp-contact-channels {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}

a.sp-contact-channel,
.sp-contact-channel {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / 4%));
    padding: 1rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

a.sp-contact-channel:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}

.sp-contact-channel__icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
}

.sp-contact-channel__icon .sp-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.sp-contact-channel__body {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.sp-contact-channel__body .sp-label {
    overflow-wrap: anywhere;
}

.sp-contact-layout {
    display: grid;
    gap: 1rem;
}

@media (min-width: 64rem) {
    .sp-contact-layout {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: start;
        gap: 1.15rem;
    }
}

.sp-contact-panel {
    display: grid;
    gap: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / 4%));
}

.sp-contact-panel .sp-heading {
    margin: 0;
}

.sp-contact-panel__note {
    margin: 0;
}

.sp-contact-routes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}

.sp-contact-routes li {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-neutral);
}

.sp-contact-routes strong {
    font-size: 0.9rem;
    color: var(--color-primary);
}

.sp-contact-routes span {
    font-size: 0.8125rem;
    color: var(--color-secondary);
}

.sp-contact-page__extra {
    max-width: 40rem;
}


.sp-price-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

.sp-price-block__badge {
        display: inline-flex;
        align-items: center;
        border-radius: var(--radius-sm);
        border: 1px solid color-mix(in srgb, var(--color-accent) 36%, var(--color-border));
        background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
        padding: 0.2rem 0.55rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--color-accent);
    }

.sp-price-block__row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem 0.65rem;
    }

.sp-price-block__kicker {
        width: 100%;
        margin: 0;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.4;
        color: var(--color-secondary);
    }

.sp-price-block__sale {
        margin: 0;
        font-size: 1.5rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 0;
        color: var(--color-primary);
    }
.sp-price-block--compact .sp-price-block__sale {
        font-size: 1.125rem;
    }
.sp-price-block--dock .sp-price-block__sale {
        font-size: 1.125rem;
    }
.sp-delivery {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--color-surface) 82%, transparent);
        padding-block: 0.4rem;
        padding-inline: 0.45rem 0.875rem;
}
.sp-delivery__icon {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: var(--radius-sm);
        background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
        color: var(--color-accent);
}
.sp-delivery__icon svg {
        width: 1rem;
        height: 1rem;
}
.sp-delivery__text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.3;
}
.sp-delivery__label {
        font-size: 0.6875rem;
        font-weight: 500;
        color: var(--color-secondary);
}
.sp-delivery__value {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-primary);
}
.sp-delivery__value strong {
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        color: var(--color-accent);
}
.sp-dock__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
}
.sp-dock__cta {
        flex-shrink: 0;
}
@media (min-width: 64rem) {
    .sp-dock {
        display: none;
    }
}
.sp-checkout-shell {
        padding-block: 2rem;
}
.sp-page-narrow {
        padding-block: 2rem;
        max-width: 48rem;
}
.sp-bank-card {
        container-type: inline-size;
        width: 100%;
        max-width: 26rem;
        margin-inline: auto;
}
.sp-bank-card__face {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 3cqi;
        aspect-ratio: 1.586 / 1;
        min-height: min-content;
        overflow: clip;
        border-radius: clamp(0.875rem, 5cqi, 1.25rem);
        padding: 6.5cqi 7cqi;
        color: #fff;
        background:
            radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / 0.16), transparent 55%),
            linear-gradient(
                135deg,
                var(--color-primary) 0%,
                color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)) 55%,
                var(--color-accent) 100%
            );
        box-shadow:
            0 22px 40px -22px color-mix(in srgb, var(--color-accent) 70%, transparent),
            0 8px 18px -10px rgb(23 19 21 / 0.45),
            inset 0 1px 0 rgb(255 255 255 / 0.14);
}
.sp-bank-card__top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3cqi;
}
.sp-bank-card__bank {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(0.8125rem, 4.4cqi, 1.0625rem);
        font-weight: 700;
        margin: 0;
}
.sp-bank-card__mark {
        opacity: 0.75;
}
.sp-bank-card__chip {
        position: relative;
        display: block;
        width: 13cqi;
        aspect-ratio: 1.3 / 1;
        border-radius: 1.6cqi;
        background: linear-gradient(135deg, #f1dfae 0%, #c9a464 48%, #e8d29b 100%);
}
.sp-bank-card__number {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3cqi;
        width: calc(100% + 4cqi);
        margin-inline: -2cqi;
        padding: 1.5cqi 2cqi;
        border: 0;
        border-radius: 2.4cqi;
        background: transparent;
        color: inherit;
        cursor: copy;
        text-align: left;
        font: inherit;
}
.sp-bank-card__number:hover {
        background: rgb(255 255 255 / 0.08);
}
.sp-bank-card__digits {
        min-width: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: clamp(0.9375rem, 5.2cqi, 1.625rem);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.04em;
        white-space: nowrap;
}
.sp-bank-card__copy {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: 0.35rem;
        border-radius: 9999px;
        padding: 0.3rem 0.65rem;
        background: rgb(255 255 255 / 0.16);
        font-size: 0.75rem;
        font-weight: 600;
}
.sp-bank-card__bottom {
        display: flex;
        flex-direction: column;
        gap: 0.5cqi;
        min-width: 0;
}
.sp-bank-card__caption {
        margin: 0;
        font-size: clamp(0.6875rem, 3.2cqi, 0.8125rem);
        opacity: 0.7;
}
.sp-bank-card__holder {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(0.875rem, 4.6cqi, 1.125rem);
        font-weight: 600;
}

.sp-price-block--sale .sp-price-block__sale {
        color: var(--color-accent);
    }

.sp-price-block__was {
        margin: 0;
        font-size: 0.8125rem;
        font-variant-numeric: tabular-nums;
        font-weight: 500;
        line-height: 1.4;
        color: color-mix(in srgb, var(--color-secondary) 78%, transparent);
        text-decoration: line-through;
        text-decoration-thickness: 1px;
        text-decoration-color: color-mix(in srgb, var(--color-secondary) 55%, transparent);
    }

.sp-price-block--compact {
        gap: 0.2rem;
    }

.sp-price-block--compact .sp-price-block__row {
        gap: 0.25rem 0.5rem;
    }

.sp-price-block--compact .sp-price-block__was {
        font-size: 0.75rem;
    }

.sp-price-block--dock {
        gap: 0.15rem;
    }

.sp-price-block--dock .sp-price-block__sale {
        white-space: nowrap;
    }

.sp-price-block__meta {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        white-space: nowrap;
    }

.sp-price-block--dock .sp-price-block__was {
        font-size: 0.75rem;
        line-height: 1.3;
    }

.sp-price-block--dock .sp-price-block__badge {
        flex-shrink: 0;
        padding: 0.05rem 0.35rem;
        font-size: 0.625rem;
        line-height: 1.4;
    }

.sp-login-dialog,
    .sp-login-dialog:modal {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border: 0;
        padding: 0;
        overflow: auto;
        overscroll-behavior: contain;
        color: var(--color-surface);
        background:
            radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 52%),
            var(--color-primary);
    }

.sp-login-dialog::backdrop {
        background: var(--color-primary);
    }

.sp-login-dialog__stage {
        position: relative;
        display: flex;
        min-height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: calc(4rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

.sp-login-dialog__close {
        position: absolute;
        top: calc(0.75rem + env(safe-area-inset-top, 0px));
        inset-inline-end: 0.75rem;
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: rgb(255 255 255 / 0.72);
        cursor: pointer;
        transition: color 150ms ease, background-color 150ms ease;
    }

.sp-login-dialog__close:hover {
        background: rgb(255 255 255 / 0.08);
        color: #fff;
    }

.sp-login-dialog__close:active {
        background: rgb(255 255 255 / 0.12);
    }

.sp-login-dialog__close:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

.sp-login-dialog__brand {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        margin-bottom: 2rem;
        color: #fff;
        text-decoration: none;
    }

.sp-login-dialog__mark {
        display: inline-flex;
        width: 2.5rem;
        height: 2.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        background: var(--color-accent);
    }

.sp-login-dialog__brand-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1;
    }

.sp-login-dialog__name {
        font-size: 1.25rem;
        font-weight: 800;
        color: #fff;
    }

.sp-login-dialog__tagline {
        margin-top: 0.25rem;
        font-size: 0.625rem;
        font-weight: 500;
        color: rgb(255 255 255 / 0.42);
    }

.sp-login-dialog__mark--image {
        padding: 0.25rem;
        background: #fff;
    }

.sp-login-dialog__logo {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0.875rem;
        border-radius: var(--radius-md);
        background: #fff;
    }

.sp-login-dialog__logo img {
        display: block;
        width: auto;
        height: 2.25rem;
        max-width: 12rem;
        object-fit: contain;
    }

.sp-login-dialog .sp-feedback-host {
        position: absolute;
        z-index: 5;
        inset-inline: 0;
        top: calc(0.75rem + env(safe-area-inset-top, 0px));
        bottom: auto;
    }

.sp-login-dialog__card {
        width: 100%;
        max-width: 23.75rem;
        padding: 1.5rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        color: var(--color-on-surface);
        box-shadow: 0 18px 48px rgb(23 19 21 / 0.28);
    }

.sp-login-dialog__form,
    .sp-login-dialog__step {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

.sp-login-dialog__step[hidden] {
        display: none;
    }

.sp-login-dialog__intro {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

.sp-login-dialog__title {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.35;
        color: var(--color-primary);
    }

.sp-login-dialog__lead {
        margin: 0;
        font-size: 0.8125rem;
        line-height: 1.65;
        color: var(--color-secondary);
    }

.sp-login-dialog__mobile {
        display: inline-block;
        font-family: var(--font-mono);
        font-weight: 700;
        color: var(--color-primary);
        direction: ltr;
        unicode-bidi: isolate;
    }

.sp-login-dialog__field {
        height: 3rem;
        border-width: 1.5px;
        direction: ltr;
        text-align: right;
    }

.sp-login-dialog__divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--color-secondary);
        font-size: 0.75rem;
    }

.sp-login-dialog__divider::before,
    .sp-login-dialog__divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--color-border);
    }

.sp-login-dialog__google {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.625rem 1rem;
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-primary);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
    }

.sp-login-dialog__google:hover {
        border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
        background: var(--color-neutral);
    }

.sp-login-dialog__google:active {
        transform: translateY(1px);
        background: color-mix(in srgb, var(--color-neutral) 86%, var(--color-primary));
    }

.sp-login-dialog__google:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

.sp-login-dialog__card :is(button[type="submit"]):not(:disabled) {
        transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    }

.sp-login-dialog__card :is(button[type="submit"]):not(:disabled):hover {
        box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent) 24%, transparent);
    }

.sp-login-dialog__card :is(button[type="submit"]):not(:disabled):active {
        transform: translateY(1px);
    }

.sp-login-dialog__legal {
        margin: 0;
        text-align: center;
        font-size: 0.6875rem;
        line-height: 1.7;
        color: var(--color-secondary);
    }

.sp-login-dialog__legal a,
    .sp-login-dialog__legal span {
        color: var(--color-accent);
        font-weight: 600;
    }

.sp-login-dialog__legal a {
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

.sp-login-dialog__otp {
        display: flex;
        gap: 0.5rem;
        direction: ltr;
    }

.sp-login-dialog__otp-digit {
        flex: 1 1 0;
        min-width: 2.5rem;
        width: 100%;
        height: 3.25rem;
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-on-surface);
        font-family: var(--font-mono);
        font-size: 1.375rem;
        font-weight: 600;
        text-align: center;
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

.sp-login-dialog__otp-digit:hover {
        border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    }

.sp-login-dialog__otp-digit:focus {
        border-color: var(--color-accent);
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
    }

.sp-login-dialog__otp.is-invalid .sp-login-dialog__otp-digit {
        border-color: var(--color-error);
        background: color-mix(in srgb, var(--color-error) 4%, var(--color-surface));
    }

.sp-login-dialog__otp-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

.sp-login-dialog__text-btn {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-secondary);
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        transition: color 150ms ease;
    }

.sp-login-dialog__text-btn:hover:not(:disabled) {
        color: var(--color-accent);
    }

.sp-login-dialog__text-btn:disabled {
        cursor: default;
        opacity: 0.8;
        font-weight: 500;
    }

.sp-login-dialog__text-btn:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

.sp-login-dialog__back {
        margin-top: 1.25rem;
        min-height: 2.75rem;
        padding: 0;
        border: 0;
        background: none;
        color: rgb(255 255 255 / 0.38);
        font-size: 0.8125rem;
        cursor: pointer;
        transition: color 150ms ease;
    }

.sp-login-dialog__back:hover {
        color: rgb(255 255 255 / 0.72);
    }

.sp-login-dialog__back:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

.sp-home-problem__icon,
    .sp-home-pillar__icon,
    .sp-home-trust__mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        flex-shrink: 0;
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
        border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    }

.sp-home-trust__mark {
        background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
        border-color: color-mix(in srgb, var(--color-success) 22%, var(--color-border));
    }

.sp-home-wpcheck {
        --sp-wpcheck-security: #247a4d;
        --sp-wpcheck-perf: var(--color-accent);
        --sp-wpcheck-health: var(--color-primary);
        position: relative;
        overflow: hidden;
        display: grid;
        gap: 1.15rem;
        isolation: isolate;
        border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
        border-radius: var(--radius-lg);
        background:
            linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)), var(--color-surface) 52%);
        padding: 1.15rem;
        box-shadow:
            0 1px 0 color-mix(in srgb, var(--color-on-surface) 4%, transparent),
            0 18px 40px color-mix(in srgb, var(--color-accent) 8%, transparent);
    }

@media (min-width: 40rem) {
        .sp-home-wpcheck {
            gap: 1.75rem;
            padding: 1.75rem;
        }
    }

@media (min-width: 1024px) {
        .sp-home-wpcheck {
            grid-template-columns: minmax(0, 1.12fr) minmax(18rem, 0.88fr);
            align-items: stretch;
            gap: 2.25rem;
            padding: 2rem 2.15rem;
        }
    }

.sp-home-wpcheck__atmosphere {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

.sp-home-wpcheck__orb {
        position: absolute;
        border-radius: 999px;
        filter: blur(2px);
    }

.sp-home-wpcheck__orb--a {
        top: -18%;
        inset-inline-end: -8%;
        width: 14rem;
        height: 14rem;
        background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 68%);
    }

.sp-home-wpcheck__orb--b {
        bottom: -22%;
        inset-inline-start: -10%;
        width: 16rem;
        height: 16rem;
        background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 70%);
    }

.sp-home-wpcheck__grid {
        position: absolute;
        inset: 0;
        opacity: 0.35;
        background-image:
            linear-gradient(color-mix(in srgb, var(--color-accent) 10%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 10%, transparent) 1px, transparent 1px);
        background-size: 28px 28px;
        mask-image: radial-gradient(ellipse 70% 65% at 20% 30%, #000 10%, transparent 75%);
    }

.sp-home-wpcheck__copy,
.sp-home-wpcheck__panel {
        position: relative;
        z-index: 1;
        min-width: 0;
    }

.sp-home-wpcheck__copy {
        display: flex;
        max-width: 42rem;
        flex-direction: column;
        gap: 0.7rem;
    }

@media (min-width: 40rem) {
        .sp-home-wpcheck__copy {
            gap: 0.9rem;
        }
    }

.sp-home-wpcheck__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        color: var(--color-accent);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

.sp-home-wpcheck__eyebrow-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        background: var(--color-accent);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
        animation: sp-home-wpcheck-pulse 2.4s ease-in-out infinite;
    }

.sp-home-wpcheck__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

.sp-badge--success {
        background: color-mix(in srgb, var(--color-success, #247a4d) 12%, var(--color-surface));
        color: var(--color-success, #247a4d);
    }

.sp-home-wpcheck__title {
        margin: 0;
        line-height: 1.35;
        max-width: 18ch;
    }

@media (min-width: 40rem) {
        .sp-home-wpcheck__title {
            max-width: none;
            font-size: clamp(1.5rem, 2.4vw, 2rem);
        }
    }

.sp-home-wpcheck__lead {
        margin: 0;
        max-width: 38rem;
    }

.sp-home-wpcheck__metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

@media (min-width: 40rem) {
        .sp-home-wpcheck__metrics {
            gap: 0.65rem;
        }
    }

.sp-home-wpcheck__metric {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        padding: 0.55rem 0.35rem;
        text-align: center;
    }

@media (min-width: 40rem) {
        .sp-home-wpcheck__metric {
            flex-direction: row;
            align-items: center;
            text-align: start;
            padding: 0.8rem 0.9rem;
            gap: 0.75rem;
        }
    }

.sp-home-wpcheck__ring {
        position: relative;
        width: 3rem;
        height: 3rem;
        flex-shrink: 0;
    }

.sp-home-wpcheck__ring > svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

.sp-home-wpcheck__ring-track,
.sp-home-wpcheck__ring-value {
        fill: none;
        stroke-width: 3.5;
    }

.sp-home-wpcheck__ring-track {
        stroke: color-mix(in srgb, var(--color-border) 80%, transparent);
    }

.sp-home-wpcheck__ring-value {
        stroke: var(--sp-wpcheck-security);
        stroke-linecap: round;
        stroke-dasharray: 113.1;
        stroke-dashoffset: calc(113.1 - (113.1 * var(--sp-score, 0) / 100));
        transition: stroke-dashoffset 0.9s ease;
    }

.sp-home-wpcheck__metric--perf .sp-home-wpcheck__ring-value {
        stroke: var(--sp-wpcheck-perf);
    }

.sp-home-wpcheck__metric--health .sp-home-wpcheck__ring-value {
        stroke: var(--sp-wpcheck-health);
    }

.sp-home-wpcheck__ring-icon {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--color-primary);
    }

.sp-home-wpcheck__metric--security .sp-home-wpcheck__ring-icon {
        color: var(--sp-wpcheck-security);
    }

.sp-home-wpcheck__metric--perf .sp-home-wpcheck__ring-icon {
        color: var(--sp-wpcheck-perf);
    }

.sp-home-wpcheck__ring-icon .sp-icon {
        width: 0.95rem;
        height: 0.95rem;
    }

.sp-home-wpcheck__metric-copy {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }

.sp-home-wpcheck__metric-score {
        font-size: 1.05rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--color-primary);
        line-height: 1.1;
    }

.sp-home-wpcheck__metrics-note {
        margin: -0.15rem 0 0;
    }

.sp-home-wpcheck__callout {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
        padding: 0.85rem 1rem;
    }

.sp-home-wpcheck__callout p {
        margin: 0;
        color: var(--color-primary);
        font-size: 0.875rem;
        line-height: 1.65;
    }

.sp-home-wpcheck__callout-icon {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: var(--radius-sm);
        background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
        color: var(--color-accent);
    }

.sp-home-wpcheck__points {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--color-secondary);
        font-size: 0.875rem;
    }

.sp-home-wpcheck__points li {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
    }

.sp-home-wpcheck__point-icon {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 1.65rem;
        height: 1.65rem;
        margin-top: 0.05rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
        color: var(--color-accent);
        border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    }

.sp-home-wpcheck__point-icon .sp-icon {
        width: 0.85rem;
        height: 0.85rem;
    }

.sp-home-wpcheck__panel {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--color-neutral, #f7f4f2) 55%, var(--color-surface)), var(--color-surface) 42%);
        padding: 1.2rem;
        box-shadow:
            var(--shadow-sm, 0 1px 2px rgb(23 19 21 / 0.06)),
            0 0 0 1px color-mix(in srgb, var(--color-surface) 70%, transparent) inset;
    }

.sp-home-wpcheck__panel-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--color-border);
    }

.sp-home-wpcheck__panel-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
    }

.sp-home-wpcheck__panel-brand > div {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

.sp-home-wpcheck__panel-mark {
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
        color: var(--color-accent);
        border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
        flex-shrink: 0;
    }

.sp-home-wpcheck__panel-chip {
        display: inline-flex;
        align-items: center;
        border-radius: var(--radius-full, 999px);
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        padding: 0.25rem 0.65rem;
        color: var(--color-secondary);
        font-size: 0.75rem;
        font-weight: 600;
    }

.sp-home-wpcheck__steps {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

.sp-home-wpcheck__steps li {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--color-border);
    }

.sp-home-wpcheck__steps li:last-child {
        border-bottom: 0;
        padding-bottom: 0.15rem;
    }

.sp-home-wpcheck__step-icon {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 2.15rem;
        height: 2.15rem;
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        color: var(--color-accent);
    }

.sp-home-wpcheck__step-icon .sp-icon {
        width: 1rem;
        height: 1rem;
    }

.sp-home-wpcheck__step-body {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.45rem;
        row-gap: 0.1rem;
        min-width: 0;
        align-items: baseline;
    }

.sp-home-wpcheck__step-body .sp-caption {
        grid-column: 1 / -1;
    }

.sp-home-wpcheck__step-num {
        color: var(--color-accent);
        font-size: 0.6875rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
    }

.sp-home-wpcheck__form {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding-top: 0.2rem;
    }

.sp-home-wpcheck__field {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

.sp-home-wpcheck__input {
        position: relative;
    }

.sp-home-wpcheck__input-icon {
        position: absolute;
        inset-inline-start: 0.8rem;
        top: 50%;
        transform: translateY(-50%);
        display: grid;
        place-items: center;
        color: var(--color-secondary);
        pointer-events: none;
    }

.sp-home-wpcheck__input-icon .sp-icon {
        width: 1rem;
        height: 1rem;
    }

.sp-home-wpcheck__field .sp-input {
        margin-top: 0;
        min-height: 3rem;
        padding-inline-start: 2.5rem;
        border-radius: var(--radius-md);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

.sp-home-wpcheck__field .sp-input:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
    }

.sp-home-wpcheck__error {
        margin: 0;
        color: var(--color-error, #b42318);
    }

.sp-home-wpcheck__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
    }

.sp-home-wpcheck__submit-icon {
        display: inline-grid;
        place-items: center;
    }

.sp-home-wpcheck__submit-icon .sp-icon {
        width: 1.05rem;
        height: 1.05rem;
    }

.sp-home-wpcheck__trust {
        display: flex;
        align-items: flex-start;
        gap: 0.4rem;
        margin: 0;
    }

.sp-home-wpcheck__trust .sp-icon {
        width: 0.9rem;
        height: 0.9rem;
        margin-top: 0.15rem;
        flex-shrink: 0;
        color: var(--color-secondary);
    }

@keyframes sp-home-wpcheck-pulse {
        0%,
        100% {
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
            opacity: 1;
        }
        50% {
            box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent) 6%, transparent);
            opacity: 0.85;
        }
    }

@media (prefers-reduced-motion: reduce) {
        .sp-home-wpcheck__eyebrow-dot {
            animation: none;
        }

        .sp-home-wpcheck__ring-value {
            transition: none;
        }
    }

.sp-home-final-cta {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background:
            radial-gradient(ellipse 80% 120% at 100% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 55%),
            var(--color-surface);
        padding: 1.25rem;
    }

@media (min-width: 40rem) {
        .sp-home-final-cta {
            padding: 1.5rem;
        }
    }

@media (min-width: 1024px) {
        .sp-home-final-cta {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            padding: 1.75rem 2rem;
        }
    }

.sp-home-final-cta__eyebrow {
        margin: 0 0 0.35rem;
        color: var(--color-accent);
        font-size: 0.8125rem;
        font-weight: 600;
    }

.sp-home-final-cta .inline-flex {
        width: 100%;
    }

@media (min-width: 40rem) {
        .sp-home-final-cta .inline-flex {
            width: auto;
        }
    }

.sp-promo-bar {
        --promo-bar-fg: #fff;
        --promo-bar-bg: var(--color-accent);
        --promo-badge-bg: rgb(255 255 255 / 0.16);
        --promo-badge-fg: #fff;
        --promo-badge-ring: rgb(255 255 255 / 0.28);
        --promo-cta-bg: #fff;
        --promo-cta-fg: var(--color-accent);
        --promo-focus: #fff;
        --promo-grid: rgb(255 255 255 / 0.07);
        --promo-shine: rgb(255 255 255 / 0.18);
        position: relative;
        color: var(--promo-bar-fg);
    }

.sp-promo-bar--sticky {
        position: sticky;
        top: 0;
        z-index: 51;
    }

.sp-promo-bar--accent {
        --promo-bar-bg:
            radial-gradient(120% 260% at 50% -80%, rgb(255 255 255 / 0.24), transparent 55%),
            linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 72%, #000), var(--color-accent) 48%, color-mix(in srgb, var(--color-accent) 82%, #ff6b88));
    }

.sp-promo-bar--dark {
        --promo-bar-bg:
            radial-gradient(55% 260% at 50% 130%, color-mix(in srgb, var(--color-accent) 62%, transparent), transparent 70%),
            var(--color-primary);
        --promo-badge-bg: var(--color-accent);
        --promo-badge-ring: rgb(255 255 255 / 0.2);
        --promo-cta-fg: var(--color-primary);
    }

.sp-promo-bar--light {
        --promo-bar-fg: var(--color-primary);
        --promo-bar-bg: linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)),
            color-mix(in srgb, var(--color-accent) 13%, var(--color-surface)),
            color-mix(in srgb, var(--color-accent) 6%, var(--color-surface))
        );
        --promo-badge-bg: color-mix(in srgb, var(--color-accent) 12%, transparent);
        --promo-badge-fg: var(--color-accent);
        --promo-badge-ring: color-mix(in srgb, var(--color-accent) 30%, transparent);
        --promo-cta-bg: var(--color-accent);
        --promo-cta-fg: #fff;
        --promo-focus: var(--color-accent);
        --promo-grid: color-mix(in srgb, var(--color-accent) 8%, transparent);
        --promo-shine: rgb(255 255 255 / 0.75);
    }

.sp-promo-bar__collapse {
        display: grid;
        grid-template-rows: 1fr;
        transition:
            grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 220ms ease;
    }

.sp-promo-bar.is-closing .sp-promo-bar__collapse {
        grid-template-rows: 0fr;
        opacity: 0;
    }

.sp-promo-bar__surface {
        position: relative;
        min-height: 0;
        overflow: hidden;
        isolation: isolate;
        background: var(--promo-bar-bg);
    }

.sp-promo-bar--light .sp-promo-bar__surface {
        box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    }

.sp-promo-bar__texture {
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(var(--promo-grid) 1px, transparent 1px),
            linear-gradient(90deg, var(--promo-grid) 1px, transparent 1px);
        background-size: 22px 22px;
        mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    }

.sp-promo-bar__shine {
        position: absolute;
        inset-block: 0;
        left: 0;
        z-index: -1;
        width: 35%;
        background: linear-gradient(100deg, transparent, var(--promo-shine), transparent);
        transform: translateX(-120%);
        animation: sp-promo-shine 7s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite;
    }

.sp-promo-bar__inner {
        display: flex;
        min-height: 2.75rem;
        align-items: center;
        gap: 0.5rem;
        padding-block: 0.25rem;
    }

.sp-promo-bar--preview .sp-promo-bar__inner {
        padding-inline: 1rem;
    }

.sp-promo-bar__content {
        display: flex;
        min-width: 0;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }

.sp-promo-bar__badge {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: 0.4rem;
        border-radius: 9999px;
        padding: 0.2rem 0.65rem;
        background: var(--promo-badge-bg);
        box-shadow: inset 0 0 0 1px var(--promo-badge-ring);
        color: var(--promo-badge-fg);
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1.5;
        white-space: nowrap;
    }

.sp-promo-bar__dot {
        position: relative;
        width: 0.4rem;
        height: 0.4rem;
        flex-shrink: 0;
        border-radius: 9999px;
        background: currentColor;
    }

.sp-promo-bar__dot::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: currentColor;
        animation: sp-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

.sp-promo-bar__text {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.6;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.sp-promo-bar__message--loop {
        display: none;
    }

.sp-promo-bar__text.is-marquee {
        flex: 1;
        text-overflow: clip;
        mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    }

.sp-promo-bar__text.is-marquee .sp-promo-bar__track {
        display: inline-flex;
        animation: sp-promo-marquee var(--promo-marquee-duration, 18s) linear 1.6s infinite;
    }

.sp-promo-bar__text.is-marquee .sp-promo-bar__message {
        display: inline-block;
        padding-inline-end: 2.5rem;
    }

.sp-promo-bar:is(:hover, :focus-within) .sp-promo-bar__text.is-marquee .sp-promo-bar__track,
    .sp-promo-bar__text.is-marquee:active .sp-promo-bar__track {
        animation-play-state: paused;
    }

.sp-promo-bar__cta {
        display: inline-flex;
        min-height: 1.875rem;
        flex-shrink: 0;
        align-items: center;
        gap: 0.35rem;
        border-radius: 9999px;
        padding-inline: 0.85rem 0.7rem;
        background: var(--promo-cta-bg);
        box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.5);
        color: var(--promo-cta-fg);
        font-size: 0.75rem;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        transition:
            transform 160ms ease,
            box-shadow 160ms ease;
    }

.sp-promo-bar__cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px -8px rgb(0 0 0 / 0.55);
    }

.sp-promo-bar__cta-icon {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transition: transform 160ms ease;
    }

.sp-promo-bar__cta-icon .sp-icon {
        display: block;
        width: 0.875rem;
        height: 0.875rem;
    }

.sp-promo-bar__cta:hover .sp-promo-bar__cta-icon {
        transform: translateX(-3px);
    }

.sp-promo-bar__close {
        display: inline-flex;
        width: 2.25rem;
        height: 2.25rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        margin-inline-end: -0.5rem;
        border: 0;
        border-radius: 9999px;
        background: transparent;
        color: inherit;
        opacity: 0.78;
        cursor: pointer;
        transition:
            opacity 150ms ease,
            background-color 150ms ease;
    }

.sp-promo-bar__close:hover {
        background: rgb(255 255 255 / 0.14);
        opacity: 1;
    }

.sp-promo-bar--light .sp-promo-bar__close:hover {
        background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    }

.sp-promo-bar__cta:focus-visible,
    .sp-promo-bar__close:focus-visible {
        outline: 2px solid var(--promo-focus);
        outline-offset: 2px;
    }

@media (max-width: 39.99rem) {
        .sp-promo-bar__inner {
            min-height: 2.5rem;
            gap: 0.25rem;
        }

        .sp-promo-bar__content {
            justify-content: flex-start;
            gap: 0.5rem;
        }

        /* Collapses to the pulsing dot only; the label stays in the accessibility tree. */
        .sp-promo-bar__badge {
            padding: 0.3rem;
            gap: 0;
            font-size: 0;
        }

        .sp-promo-bar__text {
            font-size: 0.75rem;
            line-height: 1.55;
        }

        .sp-promo-bar__cta {
            min-height: 1.75rem;
            padding-inline: 0.65rem 0.55rem;
            font-size: 0.7rem;
        }
    }

@media (prefers-reduced-motion: reduce) {
        .sp-promo-bar__shine,
        .sp-promo-bar__dot::before,
        .sp-promo-card__badge-dot::before,
        .sp-promo-bar__text.is-marquee .sp-promo-bar__message--loop {
            display: none;
        }

        .sp-promo-bar__text.is-marquee {
            text-overflow: ellipsis;
            mask-image: none;
        }

        .sp-promo-bar__text.is-marquee .sp-promo-bar__track {
            display: inline;
            animation: none;
        }

        .sp-promo-bar__text.is-marquee .sp-promo-bar__message {
            display: inline;
            padding-inline-end: 0;
        }

        .sp-promo-bar__collapse,
        .sp-promo-bar__cta,
        .sp-promo-bar__cta-icon,
        .sp-promo-card__close,
        .sp-promo-card__cta,
        .sp-promo-card__cta-icon,
        a.sp-promo-card__banner img {
            transition: none;
        }

        .sp-promo-dialog[open]::backdrop,
        .sp-promo-dialog[open] .sp-promo-card,
        .sp-promo-dialog.is-closing::backdrop,
        .sp-promo-dialog.is-closing .sp-promo-card {
            animation: none;
        }
    }

@keyframes sp-promo-shine {
    0%,
    55% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(320%);
    }
}

@keyframes sp-ping {
    75%,
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

@keyframes sp-promo-marquee {
    to {
        transform: translateX(50%);
    }
}

.sp-promo-bar a.sp-promo-bar__cta {
    color: var(--promo-cta-fg, #1c1917) !important;
}

/* Article single layout */
.sp-article-layout {
    display: grid;
    gap: 1.5rem;
}
.sp-article-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 64rem) {
    .sp-article-layout {
        grid-template-columns: minmax(0, 1fr) 16rem;
        align-items: start;
        gap: 2rem;
    }
}
.sp-article-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.sp-article-header__category {
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}
.sp-article-header__title {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.3;
}
.sp-article-header__lead {
    color: var(--color-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}
.sp-article-header__bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.375rem;
    min-height: 2.75rem;
    padding-block: 0;
    border-block: 1px solid var(--color-border);
}
.sp-article-header__bar > .sp-share.sp-share--compact {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.sp-article-header__bar > .sp-share.sp-share--compact > .sr-only,
.sp-article-header__bar > .sp-share.sp-share--compact > [data-copy-feedback] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.sp-share--compact .sp-share__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.sp-share--compact .sp-share__button {
    position: relative;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--color-secondary);
    line-height: 1;
}
.sp-share--compact .sp-share__button:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
}
.sp-share--compact .sp-share__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.sp-article-meta {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    align-self: center;
    gap: 0.5rem 1rem;
    min-width: 0;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sp-article-meta::-webkit-scrollbar {
    display: none;
}
.sp-article-meta__item {
    display: flex;
    align-items: center;
    margin: 0;
    flex: 0 0 auto;
    min-height: inherit;
}
.sp-article-meta__item dt {
    margin: 0;
}
.sp-article-meta__item dd {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-secondary);
    white-space: nowrap;
}
.sp-article-meta__reading-short {
    display: none;
}
@media (max-width: 39.98rem) {
    .sp-article-header__bar {
        gap: 0.35rem;
        margin-top: 0.125rem;
        min-height: 2.25rem;
    }
    .sp-article-meta {
        gap: 0.5rem;
        min-height: 2.25rem;
    }
    .sp-article-meta__icon {
        display: none;
    }
    .sp-article-meta__item dd {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    .sp-article-meta__reading-full {
        display: none;
    }
    .sp-article-meta__reading-short {
        display: inline;
    }
    .sp-share--compact .sp-share__button {
        width: 2.25rem;
        height: 2.25rem;
        min-height: 2.25rem;
    }
    .sp-share--compact .sp-share__button .sp-icon {
        width: 1.05rem;
        height: 1.05rem;
        display: block;
    }
}
.sp-article-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.sp-share {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sp-share__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-share__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.sp-share__button:hover {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}
.sp-share__button[data-copied] {
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
    color: var(--color-accent);
}
.sp-main--article {
    background: var(--color-neutral);
}
.sp-article-page {
    padding-block: 2rem;
}
.sp-article {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
@media (min-width: 48rem) {
    .sp-article {
        padding: 1.75rem;
    }
}
.sp-article__media {
    margin-bottom: 0;
}
.sp-article__body :is(h2, h3) {
    scroll-margin-top: calc(4rem + 1.5rem + var(--sp-promo-offset, 0px));
}
.sp-rich-content img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: var(--radius-md);
}
.sp-rich-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.sp-rich-content pre,
.sp-rich-content code {
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.sp-rich-content :not(pre) > code {
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--color-neutral) 80%, var(--color-accent) 8%);
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
}
.sp-rich-content pre {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary) 92%, #0b1220);
    color: #e8eef8;
    padding: 1rem 1.1rem;
    font-size: 0.875rem;
    line-height: 1.65;
}
.sp-rich-content pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}
.sp-code-block {
    overflow: hidden;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--color-primary) 70%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 92%, #0b1220);
}
.sp-code-block pre {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.sp-code-block .token.comment,
.sp-code-block .token.prolog,
.sp-code-block .token.doctype,
.sp-code-block .token.cdata {
    color: #8b9bb4;
}
.sp-code-block .token.punctuation {
    color: #c5d0e0;
}
.sp-code-block .token.keyword,
.sp-code-block .token.tag {
    color: #7dd3fc;
}
.sp-code-block .token.string,
.sp-code-block .token.attr-value {
    color: #86efac;
}
.sp-code-block .token.function,
.sp-code-block .token.class-name {
    color: #fcd34d;
}
.sp-code-block .token.number,
.sp-code-block .token.boolean {
    color: #f9a8d4;
}
.sp-code-block + .sp-code-block,
.sp-rich-content > .sp-code-block + *,
.sp-rich-content > * + .sp-code-block {
    margin-top: 1rem;
}
.sp-code-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
    background: color-mix(in srgb, #000 22%, transparent);
    padding: 0.45rem 0.7rem;
}
.sp-code-block__lang {
    color: color-mix(in srgb, #fff 72%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
.sp-code-block__lang.is-empty {
    min-height: 1em;
}
.sp-code-block__copy {
    min-height: 1.85rem;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, #fff 8%, transparent);
    padding-inline: 0.7rem;
    color: #f4f7fb;
    cursor: pointer;
    font-size: 0.75rem;
}
.sp-code-block__copy:hover {
    border-color: color-mix(in srgb, #fff 36%, transparent);
    background: color-mix(in srgb, #fff 14%, transparent);
}
.sp-code-block__copy.is-copied {
    border-color: color-mix(in srgb, var(--color-accent) 55%, #fff);
    background: color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.sp-code-block pre {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.sp-rich-content {
    max-width: 48rem;
    line-height: 1.85;
}
.sp-rich-content > * + * {
    margin-top: 1rem;
}
.sp-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sp-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sp-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.sp-chip.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    color: var(--color-accent);
}
.sp-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 700;
}
.sp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--color-secondary);
}
.sp-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.sp-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
}
.sp-media {
    overflow: hidden;
    background: var(--color-neutral);
}
.sp-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-skeleton-block,
.sp-skeleton-line {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-neutral), color-mix(in srgb, var(--color-border) 60%, var(--color-neutral)), var(--color-neutral));
    background-size: 200% 100%;
    animation: sp-skeleton-pulse 1.2s ease-in-out infinite;
}
.sp-skeleton-line {
    height: 0.75rem;
    margin-block: 0.35rem;
}
@keyframes sp-skeleton-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.sp-blog-card--skeleton {
    pointer-events: none;
}

/* Home problem icons */
.sp-home-problem__icon svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-accent);
}

/* Footer contact / payment icons */
.sp-public-footer__brand-link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.5rem;
}
.sp-public-footer__contact-item,
.sp-public-footer__payment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sp-public-footer__contact-icon,
.sp-public-footer__payment-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}
.sp-public-footer__payment-chip {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.35rem 0.65rem;
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    min-height: 2.5rem;
}
.sp-public-footer__payment-logo {
    display: block;
    max-height: 1.75rem;
    width: auto;
    object-fit: contain;
}
.sp-public-footer__mid--trust {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 64rem) {
    .sp-public-footer__mid--trust {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}
.sp-trust-badges__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}
.sp-trust-badge__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    min-width: 3.5rem;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-neutral, var(--color-surface));
    text-decoration: none;
}
.sp-trust-badge__img {
    display: block;
    max-height: 3.25rem;
    width: auto;
    object-fit: contain;
}
.sp-public-footer__contact-item a {
    color: inherit;
    text-decoration: none;
}
.sp-public-footer__contact-item a:hover {
    color: var(--color-accent);
}
.sp-review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.75rem;
}
.sp-btn-row,
.inline-flex {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}
.sp-hero-cta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 28rem;
}
.sp-hero-cta-row > .sp-btn,
.sp-hero-cta-row > .cart,
.sp-hero-cta-row > form.cart {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    justify-content: center;
    text-align: center;
}
.sp-hero-cta-row > .cart,
.sp-hero-cta-row > form.cart {
    display: flex;
}
.sp-hero-cta-row > .cart .sp-btn,
.sp-hero-cta-row > form.cart .sp-btn,
.sp-hero-cta-row > .cart .single_add_to_cart_button,
.sp-hero-cta-row > form.cart .single_add_to_cart_button {
    width: 100%;
    min-height: 2.75rem;
}
.sp-service-hero__cta {
    margin-top: 0.75rem;
}
@media (max-width: 39.99rem) {
    .sp-hero-actions .sp-btn-row,
    .sp-hero-actions .inline-flex,
    .sp-hero-cta-row,
    .sp-about-hero__actions.sp-hero-cta-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        max-width: none;
        gap: 0.75rem;
        align-items: stretch;
    }
    .sp-hero-actions .sp-btn-row > .sp-btn,
    .sp-hero-actions .inline-flex > .sp-btn,
    .sp-hero-cta-row > .sp-btn,
    .sp-hero-cta-row > .cart,
    .sp-hero-cta-row > form.cart {
        width: 100%;
        min-height: 2.75rem;
    }
}

/* About / contact / specialists */
.sp-about-hero__grid {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}
@media (min-width: 64rem) {
    .sp-about-hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2.5rem;
    }
}
.sp-about-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}
.sp-about-hero__title {
    margin: 0;
    max-width: 18ch;
    line-height: 1.15;
}
.sp-about-hero__lead {
    margin: 0;
    max-width: 38rem;
}
.sp-about-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}
.sp-about-hero__proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-primary);
}
.sp-about-hero__proof-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}
.sp-about-hero__proof-icon .sp-icon {
    width: 0.95rem;
    height: 0.95rem;
}
.sp-about-hero__actions { margin-top: 0.35rem; }
.sp-about-pillars {
    display: grid;
    gap: 0.75rem;
}
@media (min-width: 40rem) {
    .sp-about-pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}
.sp-about-pillar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)), var(--color-surface) 58%);
    position: relative;
    overflow: hidden;
}
.sp-about-pillar__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
}
.sp-about-pillar__body .sp-card-title,
.sp-about-pillar__body .sp-body-sm {
    margin: 0;
}
.sp-about-pillar__icon {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
}
@media (max-width: 39.99rem) {
    .sp-about-pillars-section.sp-section-pad,
    .sp-about-hero.sp-section-pad {
        padding-block: 1.75rem;
    }
    .sp-about-pillar {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.85rem 0.95rem;
    }
    .sp-about-pillar .sp-card-title {
        font-size: 0.9375rem;
    }
    .sp-about-intro {
        gap: 1rem;
    }
    .sp-about-intro__block,
    .sp-about-story {
        padding: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
    }
    .sp-about-promise,
    .sp-about-philosophy__card,
    .sp-about-expertise {
        padding: 1rem;
    }
    .sp-about-visual__stage {
        aspect-ratio: 16 / 11;
        max-height: 14rem;
    }
    .sp-about-signal {
        width: min(94%, 15.5rem);
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
    }
}
.sp-about-visual { min-width: 0; }
.sp-about-visual__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)), var(--color-surface)),
        var(--color-surface);
    box-shadow: 0 18px 40px -28px rgb(23 19 21 / 0.35);
    aspect-ratio: 4 / 3;
}
.sp-about-visual__media {
    position: absolute;
    inset: 0;
}
.sp-about-visual__media .sp-media-img,
.sp-about-visual__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-about-visual__glow {
    position: absolute;
    inset: auto -10% -35% 35%;
    z-index: 1;
    height: 55%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 70%);
}
.sp-about-visual__gridline {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(to left, color-mix(in srgb, var(--color-surface) 35%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 28%, transparent) 1px, transparent 1px);
    background-size: 18% 22%;
}
.sp-about-signal {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    width: min(92%, 17.5rem);
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    box-shadow: 0 10px 24px -18px rgb(23 19 21 / 0.45);
    backdrop-filter: blur(10px);
}
.sp-about-signal--secure { top: 0.85rem; inset-inline-start: 0.85rem; }
.sp-about-signal--speed { bottom: 0.85rem; inset-inline-end: 0.85rem; }
.sp-about-signal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}
.sp-about-signal__meta { display: flex; min-width: 0; flex-direction: column; gap: 0.1rem; }
.sp-about-signal__label { font-size: 0.6875rem; font-weight: 700; color: var(--color-secondary); }
.sp-about-signal__value { font-size: 0.75rem; font-weight: 650; line-height: 1.35; color: var(--color-primary); }
.sp-about-signal__status { font-size: 0.6875rem; font-weight: 700; color: var(--color-success, #15803d); }
.sp-about-signal__bar {
    display: block;
    width: 2.4rem;
    height: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border) 70%, transparent);
}
.sp-about-signal__bar > span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 55%, #fff));
}
@media (prefers-reduced-motion: no-preference) {
    .sp-about-signal--secure { animation: sp-about-float 5.5s ease-in-out infinite; }
    .sp-about-signal--speed { animation: sp-about-float 6.2s ease-in-out infinite reverse; }
}
@keyframes sp-about-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.sp-about-promises {
    display: grid;
    gap: 1rem;
}
@media (min-width: 48rem) {
    .sp-about-promises { grid-template-columns: 1fr 1fr; }
}
.sp-about-promise {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.sp-about-promise__head { display: flex; align-items: center; gap: 0.65rem; }
.sp-about-promise__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}
.sp-about-promise__points {
    margin: 0;
    padding-inline-start: 1.1rem;
    color: var(--color-secondary);
    font-size: 0.8125rem;
    line-height: 1.7;
}
.sp-about-intro {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 48rem) {
    .sp-about-intro { grid-template-columns: 1fr 1fr; }
    .sp-about-story { grid-column: 1 / -1; }
}
.sp-about-philosophy,
.sp-about-expertise-grid {
    display: grid;
    gap: 1rem;
}
@media (min-width: 48rem) {
    .sp-about-philosophy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-about-expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sp-about-philosophy__card,
.sp-about-expertise {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.sp-about-expertise {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.85rem;
}
.sp-about-philosophy__icon,
.sp-about-expertise__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}
/* Contact hero/panel layout: see rules near top of this file (.sp-contact-page). */
@media (min-width: 40rem) {
    .sp-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
    .sp-contact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sp-specialist-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
    .sp-specialist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 64rem) {
    .sp-specialist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.15rem;
    }
}
.sp-specialist-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
@media (any-hover: hover) {
    .sp-specialist-card:hover {
        border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
        box-shadow: 0 12px 28px -20px rgb(23 19 21 / 0.28);
        transform: translateY(-2px);
    }
}
.sp-specialist-card__media {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 14rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 70% at 20% 10%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 55%),
        linear-gradient(165deg, color-mix(in srgb, var(--color-neutral) 80%, #fff), var(--color-neutral));
}
.sp-specialist-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.sp-specialist-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: color-mix(in srgb, var(--color-accent) 70%, var(--color-primary));
}
.sp-specialist-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.9rem 1rem 1rem;
}
.sp-specialist-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.35;
    color: var(--color-primary);
}
.sp-specialist-card__role {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-accent);
}
.sp-specialist-card__bio {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-secondary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.sp-specialist-card__focus {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.1rem 0 0;
    padding: 0;
    list-style: none;
}
.sp-specialist-card__focus li {
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: var(--color-neutral);
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-primary);
}
.sp-specialist-card__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: auto 0 0;
    padding: 0.45rem 0 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}
.sp-specialist-card__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: var(--color-neutral);
    color: var(--color-primary);
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.sp-specialist-card__social .sp-icon {
    width: 1rem;
    height: 1rem;
}
.sp-specialist-card__social:hover,
.sp-specialist-card__social:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
    outline: none;
}
.sp-contact-cards {
    display: grid;
    gap: 1rem;
}
@media (min-width: 40rem) {
    .sp-contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.sp-contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
}
.sp-contact-card__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
}

/* Classic checkout + C2C */
.woocommerce-checkout .sp-shop {
    max-width: none;
    width: 100%;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.sp-checkout-shell {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-block: 1.5rem 2.5rem;
}

.sp-checkout-form,
form.checkout.sp-checkout-form {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 64rem) {
    .sp-checkout-form,
    form.checkout.sp-checkout-form {
        grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
        align-items: start;
    }

    .sp-checkout-form__review {
        position: sticky;
        top: calc(var(--sp-promo-offset, 0px) + 1rem);
    }
}

.sp-checkout-form__customer,
.sp-checkout-form__review {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.woocommerce-billing-fields h3,
#order_review_heading {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: grid;
    gap: 0.85rem;
}

.woocommerce-checkout .form-row {
    margin: 0;
    padding: 0;
    width: 100%;
}

.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-selection {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font: inherit;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-neutral);
    padding: 0.85rem 1rem;
}

.sp-checkout-coupon {
    margin: 0 0 1rem;
}

.sp-checkout-coupon__card {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.sp-checkout-coupon__title {
    margin: 0;
}

.sp-checkout-coupon__hint {
    margin: 0;
}

.checkout_coupon.woocommerce-form-coupon,
.sp-checkout-coupon__form.checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.checkout_coupon .form-row-first,
.checkout_coupon .form-row-last,
.sp-checkout-coupon__form .form-row-first,
.sp-checkout-coupon__form .form-row-last {
    flex: 1 1 10rem;
    margin: 0;
}

.sp-checkout-coupon__form .form-row-last {
    flex: 0 0 auto;
}

.sp-checkout-coupon__form .sp-btn {
    min-height: 2.75rem;
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
}

.woocommerce-checkout-review-order-table tfoot th {
    font-weight: 700;
}

.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

#order_review,
.woocommerce-checkout-payment {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1rem;
}

/* Shop catalog toolbar */
.woocommerce-result-count {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.85rem;
}

.woocommerce-ordering {
    margin: 0;
}

.woocommerce-ordering select {
    min-height: 2.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font: inherit;
    color: var(--color-primary);
}

.woocommerce .woocommerce-products-header + .woocommerce-notices-wrapper,
.woocommerce-shop .sp-shop > .woocommerce-result-count,
.woocommerce-shop .sp-shop > .woocommerce-ordering {
    margin-bottom: 0.75rem;
}

.sp-shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.wc_payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}
.wc_payment_method {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    background: var(--color-neutral);
}
.wc_payment_method > label {
    font-weight: 700;
}
.payment_box {
    margin-top: 0.75rem;
    display: none;
}
.wc_payment_method > input[type="radio"]:checked + label + .payment_box,
.wc_payment_method > input[type="radio"]:checked ~ .payment_box,
.wc_payment_method.payment_method_selected > .payment_box {
    display: block;
}
#place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    width: 100%;
    margin-top: 0.75rem;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-surface);
    font-weight: 700;
    cursor: pointer;
}
.sp-thankyou {
    display: grid;
    gap: 1.25rem;
}

.sp-thankyou__layout {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.sp-thankyou__main,
.sp-thankyou__aside {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

@media (min-width: 64rem) {
    .sp-thankyou__layout {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
        gap: 1.5rem;
    }

    .sp-thankyou__aside {
        position: sticky;
        top: calc(4.5rem + var(--sp-promo-offset, 0px));
    }
}

.sp-thankyou__banner {
    display: grid;
    gap: 0.45rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 55%),
        var(--color-surface);
}

.sp-thankyou__banner--error {
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-danger, #b91c1c) 12%, transparent), transparent 55%),
        var(--color-surface);
}

.sp-thankyou__banner .sp-heading {
    margin: 0;
}

.sp-thankyou__summary {
    display: grid;
    gap: 0.65rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.sp-thankyou__summary > .sp-label {
    margin: 0;
}

.sp-thankyou__summary-list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.sp-thankyou__summary-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 0.75rem;
    min-width: 0;
}

.sp-thankyou__summary-list dt {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.75rem;
}

.sp-thankyou__summary-list dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 650;
    text-align: start;
    overflow-wrap: anywhere;
    max-width: 14rem;
}

.sp-thankyou__summary-list .sp-ltr,
.sp-thankyou__summary .woocommerce-Price-amount,
.sp-thankyou__summary .amount {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Jalali datepicker: above sticky chrome; avoid parent overflow clipping on mobile. */
.jdp-container,
.jalali-datepicker,
[class*="jdp-"] {
    z-index: 10050 !important;
}

.sp-c2c-panel,
.sp-c2c-stage,
.sp-c2c-form,
.sp-thankyou,
.sp-thankyou__main {
    overflow: visible;
}

.sp-c2c-field [data-jdp] {
    cursor: pointer;
    caret-color: transparent;
}

.sp-thankyou-coupon {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.sp-thankyou-coupon > .sp-label {
    margin: 0;
}

.sp-thankyou-coupon__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: stretch;
}

.sp-thankyou-coupon__applied {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.sp-thankyou-coupon__applied li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.sp-thankyou__account-link {
    margin: 0.35rem 0 0;
}

.sp-checkout-gate {
    display: grid;
    gap: 0.65rem;
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 55%),
        var(--color-surface);
    box-shadow: var(--shadow-sm);
    max-width: 32rem;
}

.sp-checkout-gate .sp-heading {
    margin: 0;
}

.sp-tracking-token {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)) 0%,
            var(--color-neutral, var(--color-surface)) 100%
        );
    padding: 0.875rem;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.sp-tracking-token[data-copied] {
    border-color: color-mix(in srgb, var(--color-success, #15803d) 45%, var(--color-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent),
        0 0 0 1px color-mix(in srgb, var(--color-success, #15803d) 18%, transparent);
}

.sp-tracking-token__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sp-tracking-token__label {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sp-tracking-token__row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
}

.sp-tracking-token__preview {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.5rem);
    background: var(--color-surface);
    padding: 0.65rem 0.75rem;
    color: var(--color-on-surface, var(--color-primary));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-tracking-token__copy {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 4.75rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm, 0.5rem);
    background: var(--color-accent);
    padding: 0 0.85rem;
    color: var(--color-surface);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.sp-tracking-token__copy:hover {
    opacity: 0.92;
}

.sp-tracking-token__copy:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-accent) 70%, #000);
    outline-offset: 2px;
}

.sp-tracking-token__copy[data-copied],
.sp-tracking-token[data-copied] .sp-tracking-token__copy {
    border-color: var(--color-success, #15803d);
    background: var(--color-success, #15803d);
}

.sp-tracking-token__hint {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.75rem;
    line-height: 1.55;
}

.sp-tracking-token__feedback {
    margin: 0;
    color: var(--color-success, #15803d);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.sp-tracking-token__feedback:empty {
    display: none;
}

.sp-tracking-token__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding-top: 0.15rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-border) 88%, transparent);
}

.sp-tracking-token__actions a {
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-underline-offset: 0.15em;
}

.sp-tracking-token__actions a:hover {
    text-decoration: underline;
}

.sp-tracking-token__code {
    margin: 0;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.sp-c2c-panel,
.sp-c2c-dest {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.25rem;
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 55%),
        var(--color-surface);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: hidden;
}

@media (min-width: 40rem) {
    .sp-c2c-panel,
    .sp-c2c-dest {
        padding: 1.25rem;
    }
}

.sp-c2c-panel__head .sp-heading {
    margin: 0.15rem 0 0;
    font-size: clamp(1.05rem, 3.5vw, 1.25rem);
}

.sp-c2c-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-c2c-steps--two {
    position: relative;
}

.sp-c2c-steps__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 90%, var(--color-border));
    color: var(--color-secondary);
    font-size: clamp(0.75rem, 2.8vw, 0.875rem);
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

.sp-c2c-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border) 55%, transparent);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.sp-c2c-steps__item.is-current,
.sp-c2c-steps__item.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
}

.sp-c2c-steps__item.is-current .sp-c2c-steps__num,
.sp-c2c-steps__item.is-active .sp-c2c-steps__num {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.sp-c2c-steps__item.is-done:not(.is-current) {
    border-color: color-mix(in srgb, var(--color-success, #15803d) 35%, var(--color-border));
    color: var(--color-success, #15803d);
}

.sp-c2c-steps__item.is-done:not(.is-current) .sp-c2c-steps__num {
    background: color-mix(in srgb, var(--color-success, #15803d) 16%, transparent);
}

.sp-c2c-stage {
    display: grid;
    gap: 0.95rem;
    min-width: 0;
}

.sp-c2c-stage[hidden] {
    display: none !important;
}

.sp-c2c-stage__lead {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.sp-c2c-pay-block {
    display: grid;
    gap: 0.75rem;
}

.sp-c2c-deadline {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-warning, #b45309) 8%, var(--color-surface));
}

.sp-c2c-deadline__time {
    margin: 0;
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sp-c2c-instructions {
    margin: 0;
}

.sp-c2c-form {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.15rem;
    min-width: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.sp-c2c-form__section {
    display: grid;
    gap: 0.75rem;
}

.sp-c2c-form__section-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

.sp-c2c-form__grid {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 40rem) {
    .sp-c2c-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 1rem;
    }
}

.sp-c2c-field {
    margin: 0;
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.sp-c2c-form__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
}

.sp-c2c-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.sp-c2c-form__actions .sp-btn--primary {
    flex: 1 1 100%;
}

.sp-c2c-upload {
    min-width: 0;
}

.sp-c2c-upload__drop {
    position: relative;
    display: grid;
    gap: 0.65rem;
    min-height: 8.5rem;
    padding: 1rem;
    border: 1.5px dashed color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sp-c2c-upload.is-dragging .sp-c2c-upload__drop,
.sp-c2c-upload__drop:hover {
    border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

.sp-c2c-upload.has-file .sp-c2c-upload__drop {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-success, #15803d) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-success, #15803d) 6%, var(--color-surface));
}

.sp-c2c-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sp-c2c-upload.has-file .sp-c2c-upload__input {
    pointer-events: none;
}

.sp-c2c-upload__idle,
.sp-c2c-upload__preview {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
    pointer-events: none;
}

.sp-c2c-upload__preview {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    text-align: start;
    gap: 0.75rem;
    width: 100%;
    pointer-events: auto;
}

.sp-c2c-upload__preview[hidden],
.sp-c2c-upload__idle[hidden] {
    display: none !important;
}

.sp-c2c-upload__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.sp-c2c-upload__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
}

.sp-c2c-upload__hint {
    font-size: 0.75rem;
    color: var(--color-secondary);
    line-height: 1.45;
    max-width: 22rem;
}

.sp-c2c-upload__thumb {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--radius-sm, 0.5rem);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.sp-c2c-upload__file {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.sp-c2c-upload__file-name {
    font-size: 0.8125rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-c2c-upload__file-meta {
    font-size: 0.75rem;
    color: var(--color-secondary);
}

.sp-c2c-upload__clear {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.sp-c2c-review {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    text-align: center;
}

.sp-c2c-review__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    font-size: 1.25rem;
    font-weight: 700;
}

.sp-c2c-review__title {
    margin: 0;
    font-size: 1.05rem;
}

.sp-c2c-panel .sp-bank-card {
    max-width: min(100%, 26rem);
}

.sp-c2c-panel .sp-bank-card__face {
    aspect-ratio: auto;
    min-height: 10.5rem;
}

.sp-c2c-panel .sp-bank-card__digits {
    font-size: clamp(0.75rem, 3.6vw, 1.15rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    direction: ltr;
    unicode-bidi: isolate;
    line-height: 1.35;
    overflow-x: auto;
    max-width: 100%;
}

.sp-c2c-panel .sp-bank-card__number {
    width: 100%;
    margin-inline: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
}

.sp-c2c-panel .sp-bank-card__copy {
    margin-inline-start: auto;
}

.sp-c2c-panel .sp-btn {
    width: 100%;
}

@media (min-width: 40rem) {
    .sp-c2c-panel .sp-btn {
        width: auto;
    }

    .sp-c2c-form__actions .sp-btn--primary {
        flex: 0 1 auto;
    }
}

.sp-thankyou {
    min-width: 0;
}

.sp-thankyou__banner,
.sp-thankyou__summary {
    min-width: 0;
}

.sp-thankyou__banner {
    overflow-wrap: anywhere;
}

@media (max-width: 39.99rem) {
    .sp-thankyou__summary-list dd {
        max-width: 11rem;
    }

    .sp-checkout-shell {
        padding-inline: 0.85rem;
        padding-block: 1rem 2rem;
    }
}

.sp-c2c-dest dl {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}
.sp-c2c-dest dt {
    font-size: 0.75rem;
    color: var(--color-secondary);
}
.sp-c2c-dest dd {
    margin: 0;
    font-weight: 700;
}

/* Logout dialog */
.sp-logout-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(22rem, calc(100vw - 2rem));
}
.sp-logout-dialog::backdrop {
    background: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.sp-logout-dialog__panel {
    padding: 1.25rem;
}
.sp-logout-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

body.sp-account-app .sp-side-link.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    color: var(--color-accent);
}
body.sp-account-app .sp-side-link {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: inherit;
    font: inherit;
}

/* Testimonials / review slider (Laravel home parity) */
.sp-testimonials-bleed {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%),
        var(--color-neutral);
}
.sp-review-slider {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.sp-review-slider__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.sp-review-slider__status {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.sp-review-slider__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.sp-review-slider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-accent));
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
}
.sp-review-slider__btn:hover {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    color: var(--color-accent);
}
.sp-review-slider__viewport {
    position: relative;
    min-width: 0;
}
.sp-review-slider__track {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sp-review-slider__track::-webkit-scrollbar { display: none; }
.sp-review-slider__slide {
    flex: 0 0 min(92%, 22.5rem);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.sp-review-slider__slide:not(.is-active) { opacity: 0.72; }
@media (min-width: 40rem) {
    .sp-review-slider__slide { flex-basis: min(78%, 26rem); }
}
@media (min-width: 64rem) {
    .sp-review-slider__track {
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
        gap: 1.1rem;
    }
    .sp-review-slider__slide {
        flex-basis: calc((100% - 1.1rem) / 2);
        opacity: 1;
    }
    .sp-review-slider__slide:not(.is-active) { opacity: 1; }
}
.sp-review-slider__dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}
.sp-review-slider__dot {
    width: 0.5rem;
    height: 0.5rem;
    border: 0;
    border-radius: 9999px;
    background: var(--color-border);
    cursor: pointer;
}
.sp-review-slider__dot.is-active { background: var(--color-accent); width: 1.25rem; }
.sp-testimonial { margin: 0; height: 100%; }
.sp-testimonial-card {
    display: flex;
    height: 100%;
    min-height: 14rem;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.sp-testimonial-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sp-testimonial-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
}
.sp-testimonial-card__quote {
    margin: 0;
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-primary);
}
.sp-testimonial-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: auto;
}
.sp-testimonial-card__avatar {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    color: var(--color-accent);
    font-weight: 700;
    overflow: hidden;
}
.sp-testimonial-card__avatar--logo {
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 0.15rem;
}
.sp-testimonial-card__avatar--logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sp-testimonial-card__verified {
    margin-inline-start: auto;
    font-size: 0.7rem;
    color: var(--color-secondary);
}
.sp-woo-auth__grid {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 48rem) {
    .sp-woo-auth__grid { grid-template-columns: 1fr 1fr; }
}
.sp-woo-auth__panel { display: flex; flex-direction: column; gap: 0.75rem; }
.sp-woo-auth .sp-input,
.sp-woo-auth input.input-text {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font: inherit;
}

/* Fullscreen My Account OTP — same look as .sp-login-dialog */
body.sp-woo-auth-screen {
    overflow: hidden;
}
body.sp-woo-auth-screen :is(
    .sp-public-header,
    .sp-site-footer,
    .sp-bottom-nav,
    .sp-promo-bar,
    .sp-skip-link
) {
    display: none !important;
}
body.sp-woo-auth-screen .sp-main--account,
body.sp-woo-auth-screen .sp-main--shop,
body.sp-woo-auth-screen .sp-shop--account,
body.sp-woo-auth-screen .woocommerce {
    margin: 0;
    padding: 0;
    max-width: none;
    min-height: 0;
    background: transparent;
}
.sp-woo-auth--screen {
    position: fixed;
    inset: 0;
    z-index: 90;
    width: 100%;
    height: 100dvh;
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--color-surface);
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 52%),
        var(--color-primary);
}
.sp-woo-auth__stage {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(4rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.sp-woo-auth--screen .sp-woo-auth__panel {
    width: 100%;
    max-width: 23.75rem;
    gap: 0;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-on-surface);
    box-shadow: 0 18px 48px rgb(23 19 21 / 0.28);
}
.sp-woo-auth--screen .sp-login-dialog__form,
.sp-woo-auth--screen .sp-login-dialog__step {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sp-woo-auth--screen .sp-login-dialog__step[hidden] {
    display: none;
}
.sp-woo-auth--screen .sp-login-dialog__field {
    width: 100%;
    height: 3rem;
    border-width: 1.5px;
    direction: ltr;
    text-align: right;
}
.sp-woo-auth--screen .sp-woo-auth__panel :is(button[type="submit"]):not(:disabled) {
    transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.sp-woo-auth--screen .sp-woo-auth__panel :is(button[type="submit"]):not(:disabled):hover {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.sp-woo-auth--screen .sp-woo-auth__panel :is(button[type="submit"]):not(:disabled):active {
    transform: translateY(1px);
}
.sp-woo-auth--screen .woocommerce-notices-wrapper {
    position: absolute;
    z-index: 5;
    inset-inline: 1rem;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    width: auto;
}
.sp-woo-auth--screen .sp-feedback-host,
body.sp-woo-auth-screen .sp-feedback-host {
    position: fixed;
    z-index: 120;
    inset-inline: 0;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    bottom: auto;
    pointer-events: none;
}
.sp-woo-auth--screen .sp-feedback-host__stack,
body.sp-woo-auth-screen .sp-feedback-host__stack {
    pointer-events: auto;
}

/* Blog single TOC / sticky sidebar / comments */
.sp-article-meta__icon {
    display: inline-flex;
    color: var(--color-secondary);
}
.sp-article-toc__list a[aria-current] {
    border-inline-start-color: var(--color-accent);
    color: var(--color-primary);
    font-weight: 600;
}
.sp-article-toc {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1rem;
}
.sp-article-toc--inline { margin-bottom: 1.25rem; }
.sp-article-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}
.sp-article-toc__summary::-webkit-details-marker { display: none; }
.sp-article-toc__list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    display: grid;
    gap: 0.35rem;
}
.sp-article-toc__list a {
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}
.sp-article-toc__list a::before {
    counter-increment: toc;
    content: counter(toc);
    color: var(--color-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.25rem;
}
@media (min-width: 64rem) {
    .sp-blog-sidebar {
        position: sticky;
        top: 5.5rem;
        align-self: start;
    }
    .sp-article-toc--inline { display: none; }
}
@media (max-width: 63.99rem) {
    .sp-article-toc--sidebar { display: none; }
}
.sp-comments {
    display: grid;
    gap: 1.25rem;
}

.sp-comments__list,
.sp-comments__list .children {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

/* Nested replies sit under the parent card — need clear separation. */
.sp-comments__list .children {
    margin-top: 0.85rem;
    margin-inline-start: 0.35rem;
    padding-top: 0.85rem;
    padding-inline-start: 0.9rem;
    border-inline-start: 2px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
    gap: 0.9rem;
}

@media (min-width: 40rem) {
    .sp-comments__list .children {
        margin-inline-start: 0.75rem;
        padding-inline-start: 1.1rem;
    }
}

.sp-comments__list > .sp-comment + .sp-comment {
    margin-top: 0.15rem;
}

.sp-comment__reply {
    margin: 0.65rem 0 0;
}

.sp-comment__reply a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.sp-comment__card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: 0.95rem 1.05rem;
}

.sp-comment--staff .sp-comment__card {
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.sp-comments__list .children > .sp-comment--staff .sp-comment__card {
    padding: 0.9rem 1rem;
}

.sp-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin-bottom: 0.45rem;
}

.sp-comment__author {
    font-weight: 700;
}

.sp-comment__body {
    margin: 0;
    color: var(--color-secondary);
}

.sp-comment__body p {
    margin: 0 0 0.5rem;
}

.sp-comment__body p:last-child {
    margin-bottom: 0;
}

.sp-comment-staff-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.sp-comments__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1rem;
}

.sp-comments__header .sp-heading {
    margin: 0 0 0.25rem;
}

.sp-comments__empty {
    display: grid;
    gap: 0.85rem;
    justify-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-neutral) 70%, var(--color-surface));
}
.sp-comments__empty-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
}
.sp-comments__empty .sp-heading {
    margin: 0;
    font-size: 1.05rem;
}
.sp-comments__empty .sp-body-sm {
    margin: 0;
    max-width: 28rem;
}
.sp-blog-sidebar__related {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sp-blog-sidebar__related-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-blog-sidebar__related-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
}
.sp-blog-sidebar__related-link:hover {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}
.sp-blog-sidebar__related-link .sp-label {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}
.sp-blog-sidebar__related-link .sp-caption {
    margin: 0;
}

.sp-comment__reply-btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.sp-comment__reply-btn:hover {
    text-decoration: underline;
}

.sp-comment-compose {
    display: grid;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 55%),
        var(--color-surface);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.25rem;
}

@media (min-width: 40rem) {
    .sp-comment-compose {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 1.1rem;
        padding: 1.25rem 1.4rem;
    }
}

.sp-comment-compose__visual {
    display: none;
}

@media (min-width: 40rem) {
    .sp-comment-compose__visual {
        display: inline-flex;
    }
}

.sp-comment-compose__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
}

.sp-comment-compose__icon .sp-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.sp-comment-compose__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.sp-comment-compose__copy .sp-label,
.sp-comment-compose__copy .sp-body-sm {
    margin: 0;
}

.sp-comment-compose .sp-btn {
    justify-self: start;
}

.sp-comment-dialog,
.sp-comment-dialog:modal {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--color-primary);
    background: transparent;
}

.sp-comment-dialog::backdrop {
    background: rgb(23 19 21 / 0.55);
    backdrop-filter: blur(6px);
}

.sp-comment-dialog__stage {
    position: relative;
    display: flex;
    min-height: 100%;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 40rem) {
    .sp-comment-dialog__stage {
        align-items: center;
        padding: 1.5rem;
    }
}

.sp-comment-dialog__close {
    position: absolute;
    top: calc(0.65rem + env(safe-area-inset-top, 0px));
    inset-inline-end: 0.75rem;
    z-index: 2;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

@media (min-width: 40rem) {
    .sp-comment-dialog__close {
        top: 1.25rem;
        inset-inline-end: 1.25rem;
        background: rgb(255 255 255 / 0.16);
    }
}

.sp-comment-dialog__close:hover {
    background: rgb(255 255 255 / 0.24);
}

.sp-comment-dialog__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.sp-comment-dialog__card {
    width: min(100%, 28rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg, 0 18px 40px rgb(0 0 0 / 18%));
    padding: 1.25rem 1.2rem 1.35rem;
}

@media (min-width: 40rem) {
    .sp-comment-dialog__card {
        border-radius: var(--radius-lg);
        padding: 1.5rem 1.45rem 1.55rem;
    }
}

.sp-comment-dialog__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.sp-comment-dialog__mark {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
}

.sp-comment-dialog__mark .sp-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.sp-comment-dialog__title {
    margin: 0.1rem 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.sp-comment-dialog__form {
    display: grid;
    gap: 0.85rem;
}

.sp-comment-dialog__field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.sp-comment-dialog__field .sp-input,
.sp-comment-dialog__field textarea.sp-input {
    width: 100%;
    min-height: 2.75rem;
}

.sp-comment-dialog__field textarea.sp-input {
    min-height: 8rem;
    resize: vertical;
}

.sp-comment-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.sp-comment-dialog [data-sp-comment-cancel-reply][hidden] {
    display: none !important;
}

.sp-comment-dialog__submit {
    min-height: 2.75rem;
}

.sp-comment-dialog .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-secondary);
}

.sp-comment-dialog .comment-form-cookies-consent input {
    margin-top: 0.2rem;
}

.sp-comment-dialog .logged-in-as,
.sp-comment-dialog .comment-notes {
    display: none;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Case study performance evidence */
.sp-psi {
    --sp-psi-good: var(--color-success, #15803d);
    --sp-psi-average: var(--color-warning, #b45309);
    --sp-psi-poor: var(--color-error, #b42318);
    --sp-psi-none: var(--color-border);
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.sp-psi__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
.sp-psi__eyebrow {
    margin: 0;
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 700;
}
.sp-psi__title {
    margin: 0.25rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
}
.sp-psi__meta {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8125rem;
}
.sp-psi__meta dt {
    color: var(--color-secondary);
}
.sp-psi__meta dd {
    margin: 0;
    font-weight: 600;
}
.sp-psi__devices {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 48rem) {
    .sp-psi__devices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.sp-psi__device {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    animation: sp-psi-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sp-psi__device-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}
.sp-psi__scores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}
.sp-psi__score {
    --sp-psi-tone: var(--sp-psi-none);
    --sp-psi-score: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
}
.sp-psi__score[data-tone='good'] { --sp-psi-tone: var(--sp-psi-good); }
.sp-psi__score[data-tone='average'] { --sp-psi-tone: var(--sp-psi-average); }
.sp-psi__score[data-tone='poor'] { --sp-psi-tone: var(--sp-psi-poor); }
.sp-psi__score-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    --sp-psi-fill: var(--sp-psi-score);
    background: conic-gradient(var(--sp-psi-tone) calc(var(--sp-psi-fill) * 1%), color-mix(in srgb, var(--color-border) 70%, transparent) 0);
    animation: sp-psi-fill 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sp-psi__score-value {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 9999px;
    background: var(--color-surface);
    font-weight: 800;
}
.sp-psi__score-label {
    position: absolute;
    inset-block-end: -1.35rem;
    font-size: 0.75rem;
    color: var(--color-secondary);
}
.sp-psi__scores:has(.sp-psi__score-label) {
    margin-bottom: 1.25rem;
}
.sp-psi__arrow {
    color: var(--color-secondary);
}
.sp-psi__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--sp-psi-good);
    animation: sp-psi-pop 420ms 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sp-psi__delta--down {
    color: var(--sp-psi-poor);
}
.sp-psi__metrics {
    display: grid;
    gap: 0.35rem;
}
.sp-psi__metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}
.sp-psi__metric--secondary {
    opacity: 0.85;
}
.sp-psi__disclaimer {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.8125rem;
    line-height: 1.6;
}
.sp-shop-archive {
    padding-block: 2rem;
}
.sp-product-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    text-align: start;
}
@media (min-width: 40rem) {
    .sp-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 64rem) {
    .sp-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@property --sp-psi-fill {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
@keyframes sp-psi-fill {
    from { --sp-psi-fill: 0; }
    to { --sp-psi-fill: var(--sp-psi-score); }
}
@keyframes sp-psi-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes sp-psi-pop {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: none; }
}

/* Case study — security evidence */
.sp-case-security {
    margin-block: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.75rem);
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, var(--color-border));
}
.sp-case-security__eyebrow {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.8125rem;
}
.sp-case-security__title {
    margin: 0.25rem 0 0.5rem;
    font-size: 1.25rem;
}
.sp-case-security__scores {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.sp-case-security__score {
    padding: 0.85rem;
    border-radius: var(--radius-sm, 0.5rem);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
}
.sp-case-security__score-label {
    margin: 0 0 0.5rem;
    font-weight: 600;
}
.sp-case-security__score-values {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.sp-case-security__before {
    color: var(--color-secondary);
}
.sp-case-security__after {
    font-weight: 700;
}
.sp-case-security__arrow {
    color: var(--color-secondary);
}
.sp-case-security__delta {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--color-success, #15803d);
    font-size: 0.875rem;
}
.sp-case-security__delta.is-down {
    color: var(--color-error, #b42318);
}
.sp-case-security__findings {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}
@media (min-width: 48rem) {
    .sp-case-security__findings {
        grid-template-columns: 1fr 1fr;
    }
}
.sp-case-security__list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}
.sp-case-security__list li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
}
.sp-case-security__sev {
    flex: 0 0 auto;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--color-border) 70%, transparent);
}
.sp-case-security__list li[data-sev='critical'] .sp-case-security__sev {
    background: color-mix(in srgb, var(--color-error, #b42318) 18%, transparent);
    color: var(--color-error, #b42318);
}
.sp-case-security__list li[data-sev='warning'] .sp-case-security__sev {
    background: color-mix(in srgb, var(--color-warning, #b45309) 18%, transparent);
    color: var(--color-warning, #b45309);
}
.sp-case-security__disclaimer {
    margin: 1rem 0 0;
    color: var(--color-secondary);
    font-size: 0.8125rem;
}

/* Case study — highlights evidence */
.sp-case-highlights {
    margin-block: 1.5rem;
}
.sp-case-highlights__header {
    margin-bottom: 1rem;
}
.sp-case-highlights__grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.sp-case-highlights__item {
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.5rem);
    background: var(--color-surface, #fff);
}
.sp-case-highlights__label {
    margin: 0 0 0.5rem;
    font-weight: 600;
}
.sp-case-highlights__values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}
.sp-case-highlights__before {
    color: var(--color-secondary);
}
.sp-case-highlights__after {
    font-weight: 700;
}
.sp-case-highlights__arrow {
    color: var(--color-secondary);
}
.sp-case-highlights__disclaimer {
    margin: 1rem 0 0;
    color: var(--color-secondary);
    font-size: 0.8125rem;
}

/* Promo entry popup */
    /* Promo entry popup — components/promo/popup.blade.php + popup-card.blade.php,
       resources/js/promo-popup.js. Centered card on desktop, bottom sheet on phones. */
    .sp-promo-dialog,
    .sp-promo-dialog:modal {
        width: min(100% - 2rem, 26.5rem);
        max-width: none;
        max-height: calc(100dvh - 2rem);
        margin: auto;
        border: 0;
        padding: 0;
        overflow: visible;
        background: transparent;
        color: var(--color-on-surface);
    }

    .sp-promo-dialog--image_only,
    .sp-promo-dialog--image_only:modal {
        width: min(100% - 2rem, 24rem, (100dvh - 3rem) * 0.8);
    }

    .sp-promo-dialog::backdrop {
        background: rgb(23 19 21 / 0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .sp-promo-dialog[open]::backdrop {
        animation: sp-promo-fade-in 280ms ease both;
    }

    .sp-promo-dialog[open] .sp-promo-card {
        animation: sp-promo-card-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .sp-promo-dialog.is-closing::backdrop {
        animation: sp-promo-fade-out 200ms ease both;
    }

    .sp-promo-dialog.is-closing .sp-promo-card {
        animation: sp-promo-card-out 200ms ease both;
    }

    .sp-promo-card {
        position: relative;
        max-height: calc(100dvh - 2rem);
        overflow: hidden auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        isolation: isolate;
        border-radius: 1.25rem;
        background: var(--color-surface);
        box-shadow:
            0 32px 80px -24px rgb(23 19 21 / 0.6),
            0 0 0 1px rgb(255 255 255 / 0.06);
    }

    .sp-promo-card--preview {
        max-height: none;
        box-shadow:
            0 24px 48px -20px rgb(23 19 21 / 0.55),
            0 0 0 1px rgb(255 255 255 / 0.08);
    }

    .sp-promo-card__close {
        position: absolute;
        top: 0.75rem;
        inset-inline-end: 0.75rem;
        z-index: 3;
        display: inline-flex;
        width: 2.5rem;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 9999px;
        background: rgb(23 19 21 / 0.42);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #fff;
        cursor: pointer;
        transition:
            background-color 150ms ease,
            transform 200ms ease;
    }

    .sp-promo-card__close:hover {
        background: rgb(23 19 21 / 0.7);
        transform: rotate(90deg);
    }

    .sp-promo-card__media,
    .sp-promo-card__banner {
        position: relative;
        display: block;
        overflow: hidden;
        background: var(--color-neutral);
    }

    .sp-promo-card__media img,
    .sp-promo-card__banner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    a.sp-promo-card__banner img {
        transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    a.sp-promo-card__banner:hover img {
        transform: scale(1.03);
    }

    .sp-promo-card__banner:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: -3px;
    }

    .sp-promo-card__media-shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgb(23 19 21 / 0.28), transparent 32%, transparent 58%, rgb(23 19 21 / 0.42));
        pointer-events: none;
    }

    .sp-promo-card__placeholder {
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: repeating-linear-gradient(45deg, var(--color-neutral) 0 10px, var(--color-surface) 10px 20px);
        color: var(--color-secondary);
        font-size: 0.8rem;
        font-weight: 600;
    }

    .sp-promo-card__badge {
        position: absolute;
        bottom: 0.875rem;
        inset-inline-start: 0.875rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border-radius: 9999px;
        padding: 0.3rem 0.75rem;
        background: var(--color-accent);
        box-shadow:
            0 10px 22px -8px color-mix(in srgb, var(--color-accent) 80%, transparent),
            inset 0 0 0 1px rgb(255 255 255 / 0.22);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1.5;
    }

    .sp-promo-card__badge-dot {
        position: relative;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 9999px;
        background: #fff;
    }

    .sp-promo-card__badge-dot::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: #fff;
        animation: sp-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    .sp-promo-card__hero {
        position: relative;
        display: grid;
        height: 9.5rem;
        place-items: center;
        overflow: hidden;
        background:
            radial-gradient(ellipse at 50% 125%, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent 66%),
            var(--color-primary);
        color: #fff;
    }

    .sp-promo-card__hero-grid {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
        background-size: 22px 22px;
        mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
    }

    .sp-promo-card__hero-ring {
        position: absolute;
        width: 8.5rem;
        height: 8.5rem;
        border: 1px solid rgb(255 255 255 / 0.12);
        border-radius: 9999px;
        box-shadow:
            0 0 0 1.5rem rgb(255 255 255 / 0.035),
            0 0 0 3rem rgb(255 255 255 / 0.02);
    }

    .sp-promo-card__hero-mark {
        position: relative;
        display: grid;
        width: 3.75rem;
        height: 3.75rem;
        place-items: center;
        border-radius: 1rem;
        background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 80%, #fff), var(--color-accent));
        box-shadow:
            0 16px 34px -10px color-mix(in srgb, var(--color-accent) 85%, transparent),
            inset 0 1px 0 rgb(255 255 255 / 0.3);
        transform: rotate(-8deg);
    }

    .sp-promo-card__body {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 1.35rem 1.5rem 1.5rem;
    }

    .sp-promo-card__title {
        margin: 0;
        color: var(--color-primary);
        font-size: 1.25rem;
        font-weight: 800;
        line-height: 1.5;
        letter-spacing: -0.01em;
    }

    .sp-promo-card__text {
        margin: 0;
        color: var(--color-secondary);
        font-size: 0.9rem;
        line-height: 1.85;
    }

    .sp-promo-card__actions {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-top: 0.5rem;
    }

    .sp-promo-card__cta {
        display: inline-flex;
        min-height: 3rem;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: var(--radius-md);
        padding-inline: 1.25rem;
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 86%, #fff), var(--color-accent) 55%, color-mix(in srgb, var(--color-accent) 82%, #000));
        box-shadow:
            0 14px 28px -12px color-mix(in srgb, var(--color-accent) 80%, transparent),
            inset 0 1px 0 rgb(255 255 255 / 0.22);
        color: #fff;
        font-size: 0.95rem;
        font-weight: 800;
        text-decoration: none;
        transition:
            transform 160ms ease,
            box-shadow 160ms ease;
    }

    .sp-promo-card__cta:hover {
        transform: translateY(-1px);
        box-shadow:
            0 18px 32px -12px color-mix(in srgb, var(--color-accent) 85%, transparent),
            inset 0 1px 0 rgb(255 255 255 / 0.22);
    }

    .sp-promo-card__cta-icon {
        transition: transform 160ms ease;
    }

    .sp-promo-card__cta:hover .sp-promo-card__cta-icon {
        transform: translateX(-3px);
    }

    .sp-promo-card__later {
        min-height: 2.75rem;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-secondary);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition:
            color 150ms ease,
            background-color 150ms ease;
    }

    .sp-promo-card__later:hover {
        background: var(--color-neutral);
        color: var(--color-primary);
    }

    .sp-promo-card__close:focus-visible,
    .sp-promo-card__cta:focus-visible,
    .sp-promo-card__later:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    @media (max-width: 39.99rem) {
        .sp-promo-dialog:not(.sp-promo-dialog--image_only),
        .sp-promo-dialog:not(.sp-promo-dialog--image_only):modal {
            width: 100%;
            max-height: 92dvh;
            margin: auto 0 0;
        }

        .sp-promo-dialog:not(.sp-promo-dialog--image_only) .sp-promo-card {
            max-height: 92dvh;
            border-radius: 1.5rem 1.5rem 0 0;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        .sp-promo-dialog:not(.sp-promo-dialog--image_only) .sp-promo-card::before {
            content: '';
            position: absolute;
            top: 0.5rem;
            left: 50%;
            z-index: 3;
            width: 2.5rem;
            height: 0.3rem;
            border-radius: 9999px;
            background: rgb(255 255 255 / 0.75);
            transform: translateX(-50%);
        }

        .sp-promo-dialog[open]:not(.sp-promo-dialog--image_only) .sp-promo-card {
            animation-name: sp-promo-sheet-in;
        }

        .sp-promo-dialog.is-closing:not(.sp-promo-dialog--image_only) .sp-promo-card {
            animation-name: sp-promo-sheet-out;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .sp-promo-bar__shine,
        .sp-promo-bar__dot::before,
        .sp-promo-card__badge-dot::before,
        .sp-promo-bar__text.is-marquee .sp-promo-bar__message--loop {
            display: none;
        }

        .sp-promo-bar__text.is-marquee {
            text-overflow: ellipsis;
            mask-image: none;
        }

        .sp-promo-bar__text.is-marquee .sp-promo-bar__track {
            display: inline;
            animation: none;
        }

        .sp-promo-bar__text.is-marquee .sp-promo-bar__message {
            display: inline;
            padding-inline-end: 0;
        }

        .sp-promo-bar__collapse,
        .sp-promo-bar__cta,
        .sp-promo-bar__cta-icon,
        .sp-promo-card__close,
        .sp-promo-card__cta,
        .sp-promo-card__cta-icon,
        a.sp-promo-card__banner img {
            transition: none;
        }

        .sp-promo-dialog[open]::backdrop,
        .sp-promo-dialog[open] .sp-promo-card,
        .sp-promo-dialog.is-closing::backdrop,
        .sp-promo-dialog.is-closing .sp-promo-card {
            animation: none;
        }
    }
@keyframes sp-promo-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes sp-promo-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes sp-promo-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
}

@keyframes sp-promo-card-out {
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

@keyframes sp-promo-sheet-in {
    from {
        transform: translateY(100%);
    }
}

@keyframes sp-promo-sheet-out {
    to {
        transform: translateY(100%);
    }
}


/* Service show layout + aside (flat, non-nested) */
.sp-service-show {
    display: grid;
    gap: 2rem;
}

@media (min-width: 64rem) {
    .sp-service-show {
        grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 0.85fr);
        align-items: start;
        gap: 2rem;
    }
}

.sp-service-show__main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
}

.sp-service-aside-wrap {
    display: none;
}

@media (min-width: 64rem) {
    .sp-service-aside-wrap {
        display: block;
    }
}

.sp-service-aside {
    position: sticky;
    top: calc(3.5rem + 1rem + var(--sp-promo-offset, 0px));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 55%),
        var(--color-surface);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 6%));
}

.sp-service-aside__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.sp-service-aside__head > .sp-badge {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    white-space: normal;
}

.sp-service-aside__divider {
    height: 1px;
    background: var(--color-border);
}

.sp-service-aside__price {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-service-aside__facts {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-service-aside__facts li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-secondary);
}

.sp-service-aside__facts li > .sp-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--color-accent);
    width: 0.9rem;
    height: 0.9rem;
}

.sp-service-aside__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.sp-service-aside__trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    background: var(--color-neutral);
    color: var(--color-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.sp-service-aside__trust .sp-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.sp-service-aside__outcome {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-neutral);
}

.sp-service-aside__outcome-label {
    margin: 0;
    font-size: 0.7rem;
    color: var(--color-secondary);
}

.sp-service-aside__outcome-value {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.sp-service-aside__outcome-value--after {
    color: var(--color-accent);
}

.sp-service-aside__arrow {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
}

.sp-service-aside__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-service-aside__actions .cart,
.sp-service-aside__actions form.cart {
    width: 100%;
}

.sp-service-aside__actions .single_add_to_cart_button,
.sp-service-aside__actions .sp-btn {
    width: 100%;
    justify-content: center;
}

.sp-service-aside__note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-secondary);
}

.sp-service-hero__signal-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
}

.sp-service-hero__signal-icon .sp-icon {
    width: 1rem;
    height: 1rem;
}

.sp-service-include-grid {
    display: grid;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .sp-service-include-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sp-service-include {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 100%;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / 4%));
}

.sp-service-include .sp-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--color-success, #079455);
}

.sp-service-panel {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.sp-service-access-note {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.75rem;
}

.sp-outcome-compare__after {
    color: var(--color-accent);
    font-weight: 700;
}

.sp-process-steps--rail {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 48rem) {
    .sp-process-steps--rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .sp-process-steps--rail {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.sp-service-related {
    background: var(--color-surface);
    padding-block: 2.5rem;
    border-block: 1px solid var(--color-border);
}

.sp-service-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sp-service-related__head .sp-heading {
    margin: 0 0 0.35rem;
}

.sp-service-related__grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

@media (min-width: 40rem) {
    .sp-service-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sp-access-panel,
.sp-delivery-panel,
.sp-delivery-bundle {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.sp-access-panel {
    scroll-margin-top: 5.5rem;
}

.sp-access-panel.is-flash {
    box-shadow: 0 0 0 3px color-mix(in srgb, #079455 28%, transparent);
}

.sp-access-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.15rem;
}

.sp-access-panel__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.sp-access-panel__lead {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-secondary);
}

.sp-access-panel__callout,
.sp-access-panel__locked {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 0.65rem);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-neutral) 45%, var(--color-surface));
}

.sp-access-panel__callout p,
.sp-access-panel__locked p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-secondary);
}

.sp-access-form,
.sp-access-form__field,
.sp-access-form__fields {
    display: grid;
    gap: 0.35rem;
}

.sp-access-form {
    gap: 0.95rem;
}

.sp-access-form__fields {
    gap: 0.85rem;
}

.sp-access-form__field .sp-input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-access-form__field .sp-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.sp-access-form__field textarea.sp-input {
    min-height: 5.5rem;
    resize: vertical;
}

/* Password fields are LTR; pin the eye to the physical right so it never
   sits on top of typed characters in an RTL page. */
.sp-access-form__secret {
    position: relative;
    display: block;
    direction: ltr;
    width: 100%;
}

.sp-access-form__secret .sp-input {
    width: 100%;
    padding-right: 2.85rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

.sp-access-form__eye {
    position: absolute;
    top: 50%;
    right: 0.15rem;
    left: auto;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    line-height: 0;
    z-index: 1;
}

.sp-access-form__eye-icon {
    display: block;
    pointer-events: none;
}

.sp-access-form__eye .sp-access-form__eye-icon--hide {
    display: none;
}

.sp-access-form__eye[aria-pressed="true"] .sp-access-form__eye-icon--show {
    display: none;
}

.sp-access-form__eye[aria-pressed="true"] .sp-access-form__eye-icon--hide {
    display: block;
}

.sp-access-form__eye:hover,
.sp-access-form__eye:focus-visible {
    color: var(--color-primary);
}

.sp-access-form__eye:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.sp-access-accordions {
    display: grid;
    gap: 0.65rem;
}

.sp-access-accordion {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.65rem);
    background: color-mix(in srgb, var(--color-neutral) 35%, var(--color-surface));
    overflow: clip;
}

.sp-access-accordion--required {
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
}

.sp-access-accordion__summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.15rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.sp-access-accordion__summary::-webkit-details-marker,
.sp-access-accordion__summary::marker {
    display: none;
    content: "";
}

.sp-access-accordion__copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.sp-access-accordion__title {
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.sp-access-accordion__hint {
    font-size: 0.8rem;
    color: var(--color-secondary);
    line-height: 1.35;
}

.sp-access-accordion__chevron {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    margin-inline-start: 0.15rem;
    display: inline-grid;
    place-items: center;
    color: var(--color-secondary);
    transition: transform 0.18s ease;
}

.sp-access-accordion__chevron-icon {
    display: block;
}

.sp-access-accordion[open] > .sp-access-accordion__summary .sp-access-accordion__chevron {
    transform: rotate(180deg);
}

.sp-access-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 1rem;
    padding-inline-end: 0.75rem;
    padding-inline-start: 2.35rem;
    cursor: pointer;
}

[dir="rtl"] .sp-access-form__select {
    background-position: left 0.75rem center;
}

.sp-access-accordion__body {
    display: grid;
    gap: 0.75rem;
    padding: 0 0.95rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.sp-access-accordion__note {
    margin: 0.75rem 0 0;
}

.sp-badge--accent {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
    color: var(--color-primary);
}

.sp-access-form__footer,
.sp-wp-check-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.sp-access-form__footer .sp-btn,
.sp-wp-check-actions .sp-btn {
    min-height: 2.85rem;
}

.sp-wp-check-actions > .sp-btn--primary {
    flex: 1 1 12rem;
}

.sp-wp-check-actions > .sp-btn--ghost {
    flex: 0 1 auto;
    min-width: 7.5rem;
}

@media (max-width: 39.99rem) {
    .sp-wp-check-actions,
    .sp-access-form__footer {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
    }

    .sp-wp-check-actions > .sp-btn,
    .sp-wp-check-actions > .sp-btn--primary,
    .sp-wp-check-actions > .sp-btn--ghost,
    .sp-access-form__footer .sp-btn {
        width: 100%;
        min-width: 0;
        flex: none;
        justify-content: center;
        text-align: center;
    }
}

.sp-access-panel__update {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
}

.sp-access-panel__update > summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}

.sp-delivery-bundle {
    gap: 1.15rem;
}

.sp-delivery-bundle__head {
    display: grid;
    gap: 0.2rem;
}

.sp-stat-card {
    display: grid;
    gap: 0.2rem;
    justify-items: center;
    text-align: center;
    padding: 0.85rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.65rem);
    background: color-mix(in srgb, var(--color-neutral) 45%, var(--color-surface));
}

.sp-stat-card__value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.sp-delivery-bundle > .sp-psi-report,
.sp-delivery-bundle > .sp-security-report,
.sp-delivery-bundle > .sp-highlights-report,
.sp-delivery-bundle > .sp-delivery-panel {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.sp-delivery-bundle > * + * {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.sp-delivery-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-psi-report,
.sp-security-report,
.sp-highlights-report {
    display: grid;
    gap: 0.85rem;
}

.sp-psi-compare,
.sp-delivery-scores {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.sp-psi-phase-list,
.sp-delivery-findings,
.sp-delivery-highlights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.sp-delivery-findings {
    padding-inline-start: 0;
}

.sp-severity {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    background: var(--color-neutral);
    color: var(--color-secondary);
}

.sp-severity--critical {
    background: color-mix(in srgb, #b42318 14%, var(--color-surface));
    color: #b42318;
}

.sp-severity--warning {
    background: color-mix(in srgb, #b54708 14%, var(--color-surface));
    color: #b54708;
}

.sp-severity--medium {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    color: var(--color-primary);
}

.sp-severity--low {
    background: color-mix(in srgb, #027a48 12%, var(--color-surface));
    color: #027a48;
}

.sp-service-final {
    padding-bottom: 2.5rem;
    padding-top: 2rem;
}

.sp-service-final .sp-body {
    margin-top: 0.5rem;
}

.sp-service-panel--info {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 50%),
        var(--color-surface);
}

.sp-wpcheck-fit {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.15rem 1.2rem;
}

.sp-wpcheck-fit--no {
    border-color: color-mix(in srgb, var(--color-secondary) 22%, var(--color-border));
    background: color-mix(in srgb, var(--color-neutral) 55%, var(--color-surface));
}

.sp-wpcheck-fit__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-wpcheck-fit__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
}

.sp-wpcheck-fit ul {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-wpcheck-fit li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

.sp-outcome-compare {
    display: grid;
    gap: 0.75rem;
    padding: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

@media (min-width: 40rem) {
    .sp-outcome-compare {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
}

.sp-outcome-compare__arrow {
    text-align: center;
    font-weight: 700;
    color: var(--color-accent);
}

.sp-home-final-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sp-home-final-cta__actions .cart,
.sp-home-final-cta__actions form.cart {
    width: 100%;
}

.woocommerce-EditAccountForm .woocommerce-form-row--wide:has(#password_current),
.woocommerce-EditAccountForm fieldset {
    display: none !important;
}

.sp-stat {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-primary);
}

.sp-badge--info {
    background: color-mix(in srgb, var(--color-info, #2563eb) 10%, var(--color-surface));
    color: var(--color-info, #2563eb);
}

.sp-home-pillars {
    display: grid;
    gap: 0.75rem;
}
@media (min-width: 40rem) {
    .sp-home-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}
@media (min-width: 64rem) {
    .sp-home-pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.sp-home-pillar {
    text-decoration: none;
    color: inherit;
}
@media (min-width: 40rem) {
    .sp-home-pillar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .sp-home-pillar > .sp-home-pillar__icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--radius-md);
        border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
        background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    }
}
.sp-home-pillar__glow {
    position: absolute;
    inset: auto -20% -45% 35%;
    height: 70%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 70%);
    opacity: 0.85;
}
.sp-home-pillar__desc {
    margin: 0;
}
.sp-home-pillar__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-accent);
}
.sp-home-pillar--security {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)), var(--color-surface) 62%);
}

.sp-home-pillar--performance {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--color-warning, #f59e0b) 14%, var(--color-surface)), var(--color-surface) 62%);
}

.sp-home-pillar--development {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface) 62%);
}

@media (max-width: 39.99rem) {
    .sp-home-pillars {
        gap: 0.55rem;
    }
    .sp-home-pillar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon head"
            "desc desc"
            "cta cta";
        gap: 0.35rem 0.75rem;
        padding: 0.85rem 0.95rem;
        align-items: center;
    }
    .sp-home-pillar__glow {
        display: none;
    }
    .sp-home-pillar__head {
        grid-area: head;
        gap: 0;
        display: block;
    }
    .sp-home-pillar__head .sp-title {
        margin: 0;
        font-size: 1rem;
    }
    .sp-home-pillar > .sp-home-pillar__icon {
        grid-area: icon;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--radius-md);
        border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
        background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    }
    .sp-home-pillar__desc {
        grid-area: desc;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.8125rem;
        line-height: 1.55;
    }
    .sp-home-pillar__cta {
        grid-area: cta;
        margin-top: 0.15rem;
        font-size: 0.75rem;
    }
}

.sp-service-audience__grid {
    display: grid;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 40rem) {
    .sp-service-audience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.sp-service-audience__chip {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-border));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)), var(--color-surface) 70%);
}
.sp-service-audience__icon {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success, #15803d) 12%, var(--color-surface));
    color: var(--color-success, #15803d);
}
.sp-service-audience__icon .sp-icon {
    width: 0.95rem;
    height: 0.95rem;
}
.sp-service-deliverables {
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / 4%));
}
.sp-service-deliverables__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.sp-service-deliverables__mark {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
}
.sp-service-deliverables__head .sp-heading {
    margin: 0;
}
.sp-service-deliverables__head .sp-helper {
    margin: 0.25rem 0 0;
}
.sp-service-deliverables__list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
@media (min-width: 40rem) {
    .sp-service-deliverables__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.sp-service-deliverables__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-neutral, #f7f4f1) 65%, var(--color-surface));
}
.sp-service-deliverables__index {
    display: inline-flex;
    width: 1.65rem;
    height: 1.65rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sp-case-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sp-case-card__chips > .sp-badge {
    align-self: flex-start;
}

.sp-case-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.sp-case-card__problem {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
}

.sp-case-card__proof {
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    font-size: 0.8125rem;
    line-height: 1.45;
}

.sp-case-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    color: var(--color-accent);
}

.sp-case-card__cta-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sp-case-card__cta-icon .sp-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.sp-case-single {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sp-case-single__hero {
    display: grid;
    align-items: start;
    gap: 1.5rem;
}

@media (min-width: 64rem) {
    .sp-case-single__hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

.sp-case-single__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.sp-case-single__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-case-single__meta {
    display: grid;
    gap: 1rem;
}

@media (min-width: 40rem) {
    .sp-case-single__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sp-case-single__meta-item {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: 1rem;
}

.sp-case-single__meta-item dd {
    margin: 0.35rem 0 0;
}

.sp-case-single__panels {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 64rem) {
    .sp-case-single__panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-case-single__panel--wide {
        grid-column: 1 / -1;
    }
}

.sp-case-single__panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.25rem;
}

.sp-process {
    --sp-process-progress: 0.2;
    display: grid;
    gap: 0.75rem;
}

.sp-process__copy {
    min-width: 0;
}

.sp-process__step {
    position: relative;
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1rem 1rem 1.25rem;
    opacity: 0.48;
    transition: opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.sp-process__step.is-active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
    box-shadow: var(--shadow-sm);
}

.sp-process__index {
    display: inline-block;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    transform: scale(0.92);
    transform-origin: center;
    transition: color 220ms ease, transform 220ms ease;
}

.sp-process__step.is-active .sp-process__index {
    color: var(--color-accent);
    transform: scale(1.08);
}

.sp-process__meter {
    position: absolute;
    inset-inline: 1rem;
    bottom: 0.55rem;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right center;
    background: var(--color-accent);
    transition: transform 480ms ease;
}

.sp-process__step.is-active .sp-process__meter {
    transform: scaleX(1);
}

@media (any-hover: hover) {
    .sp-process__step:hover,
    .sp-process__step:focus-within {
        opacity: 1;
    }
}

@media (max-width: 47.99rem) {
    .sp-process.sp-step-rail {
        display: flex;
        gap: 0.75rem;
        margin-inline: -1rem;
        padding-inline: 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .sp-process.sp-step-rail::-webkit-scrollbar {
        display: none;
    }

    .sp-process.sp-step-rail > * {
        flex: 0 0 min(86%, 19.5rem);
        min-width: 0;
        min-height: 5.5rem;
        scroll-snap-align: start;
        scroll-margin-inline: 1rem;
    }
}

@media (min-width: 48rem) {
    .sp-process.sp-step-rail {
        display: grid;
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .sp-process--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-process--cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .sp-process--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sp-process--cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-process__step,
    .sp-process__index,
    .sp-process__meter {
        transition: none;
    }
}

.sp-error-page {
    position: relative;
    overflow: clip;
    isolation: isolate;
    padding-block: clamp(1.75rem, 5vw, 4.5rem);
    background:
        radial-gradient(ellipse 70% 55% at 82% 28%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 62%),
        radial-gradient(ellipse 50% 40% at 12% 78%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-neutral) 70%, #fff) 0%, var(--color-neutral) 100%);
}

.sp-error-page__inner {
    position: relative;
    z-index: 1;
}

.sp-error-page__layout {
    display: grid;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 3.5rem);
}

.sp-error-page__copy {
    display: flex;
    max-width: 34rem;
    flex-direction: column;
    align-items: flex-start;
}

.sp-error-page__visual {
    display: grid;
    place-items: center;
    min-height: 0;
}

@media (min-width: 64rem) {
    .sp-error-page__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 3rem;
    }

    .sp-error-page__visual {
        min-height: 18rem;
    }
}

.sp-error-page__code {
    margin-top: 0.75rem;
    font-size: clamp(3rem, 10vw, 6.75rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: var(--color-accent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent) 92%, #fff) 0%,
        var(--color-primary) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sp-error-page__title {
    margin-top: 0.5rem;
    color: var(--color-primary);
}

.sp-error-page__lead {
    margin-top: 0.85rem;
    max-width: 32rem;
}

.sp-error-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.35rem;
}

.sp-error-page__orbit {
    --sp-orbit-x: 0;
    --sp-orbit-y: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 16.5rem);
    aspect-ratio: 1;
    translate:
        calc(var(--sp-orbit-x) * 1px)
        calc(var(--sp-orbit-y) * 1px);
    transition: translate 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 40rem) {
    .sp-error-page__orbit {
        width: min(100%, 20rem);
    }
}

@media (min-width: 64rem) {
    .sp-error-page__orbit {
        width: min(100%, 26rem);
    }
}

.sp-error-page__track {
    position: absolute;
    inset: 8%;
    pointer-events: none;
}

.sp-error-page__track--mid {
    inset: 16%;
}

.sp-error-page__track--inner {
    inset: 26%;
}

.sp-error-page__ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.sp-error-page__track--mid .sp-error-page__ring {
    border-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.sp-error-page__track--inner .sp-error-page__ring {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
}

.sp-error-page__sweep {
    position: absolute;
    inset: 14%;
    z-index: 0;
    border-radius: 9999px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--color-accent) 32%, transparent) 38deg,
        transparent 72deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1.5px));
    opacity: 0.85;
    pointer-events: none;
}

.sp-error-page__spark {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
    translate: -50% -50%;
}

.sp-error-page__spark--b {
    top: 50%;
    left: 100%;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.sp-error-page__spark--c {
    top: 100%;
    left: 50%;
    width: 0.45rem;
    height: 0.45rem;
}

.sp-error-page__art {
    position: relative;
    z-index: 1;
    width: min(92%, 24rem);
    height: auto;
    filter: drop-shadow(0 18px 28px color-mix(in srgb, var(--color-primary) 12%, transparent));
}

@media (prefers-reduced-motion: no-preference) {
    .sp-error-page__copy {
        animation: sp-error-rise 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .sp-error-page__visual {
        animation: sp-error-rise 780ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .sp-error-page__art {
        animation: sp-error-float 5.6s ease-in-out infinite;
    }

    .sp-error-page__track--outer {
        animation: sp-error-spin 32s linear infinite;
    }

    .sp-error-page__track--mid {
        animation: sp-error-spin 22s linear infinite reverse;
    }

    .sp-error-page__track--inner {
        animation: sp-error-spin 14s linear infinite;
    }

    .sp-error-page__sweep {
        animation: sp-error-spin 4.8s linear infinite;
    }

    .sp-error-page__spark {
        animation: sp-error-pulse 2.6s ease-in-out infinite;
    }

    .sp-error-page__spark--b {
        animation-delay: 0.45s;
    }

    .sp-error-page__spark--c {
        animation-delay: 0.9s;
    }

    .sp-error-page__chip {
        animation: sp-error-bob 5.8s ease-in-out infinite;
        transform-origin: center;
        transform-box: fill-box;
    }

    .sp-error-page__chip-dot {
        animation: sp-error-pulse 2.2s ease-in-out infinite;
        transform-origin: center;
        transform-box: fill-box;
    }

    .sp-error-page__ground {
        animation: sp-error-glow 5.6s ease-in-out infinite;
        transform-origin: center;
        transform-box: fill-box;
    }
}

@keyframes sp-error-rise {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sp-error-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.55rem);
    }
}

@keyframes sp-error-bob {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, -4px);
    }
}

@keyframes sp-error-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sp-error-pulse {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes sp-error-glow {
    0%,
    100% {
        opacity: 0.7;
        transform: scaleX(1);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-error-page__copy,
    .sp-error-page__visual,
    .sp-error-page__art,
    .sp-error-page__track,
    .sp-error-page__sweep,
    .sp-error-page__spark,
    .sp-error-page__chip,
    .sp-error-page__chip-dot,
    .sp-error-page__ground {
        animation: none !important;
    }
}

.sp-login-dialog [data-otp-error] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Public order track */
.sp-track-page {
    display: grid;
    gap: 1.25rem;
    max-width: 36rem;
    margin-inline: auto;
    padding-block: 2rem 3rem;
}

.sp-track-hero {
    display: grid;
    gap: 0.4rem;
}

.sp-track-hero .sp-title {
    margin: 0;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
}

.sp-track-form {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / 4%));
}

.sp-track-field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.sp-track-field .sp-input {
    width: 100%;
}

.sp-track-field__error {
    color: var(--color-error, #b42318);
    font-weight: 600;
}

.sp-track-result {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
}

.sp-track-result__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
}

.sp-track-result__service {
    text-align: end;
}

.sp-track-timeline {
    display: grid;
    gap: 1rem;
}

.sp-track-timeline__status {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.sp-track-timeline__copy {
    min-width: 0;
}

.sp-track-timeline__headline {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
}

.sp-track-timeline__progress {
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--color-neutral, color-mix(in srgb, var(--color-border) 40%, var(--color-surface)));
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-secondary);
}

.sp-track-rail {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .sp-track-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (min-width: 56rem) {
    .sp-track-rail {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sp-track-rail__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.sp-track-rail__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.sp-track-rail__dot {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.sp-track-rail__label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-secondary);
    padding-top: 0.2rem;
}

.sp-track-rail__item[data-timeline-state='done'] .sp-track-rail__dot {
    border-color: transparent;
    background: var(--color-success, #15803d);
    color: var(--color-surface);
}

.sp-track-rail__item[data-timeline-state='done'] .sp-track-rail__label {
    color: var(--color-primary);
}

.sp-track-rail__item[data-timeline-state='active'] .sp-track-rail__dot {
    border-color: transparent;
    background: var(--color-accent);
    color: var(--color-surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.sp-track-rail__item[data-timeline-state='active'] .sp-track-rail__label {
    color: var(--color-primary);
    font-weight: 700;
}