.digest-sq-6  { width: 1.5rem;  height: 1.5rem;  flex-shrink: 0; }
.digest-sq-10 { width: 2.5rem;  height: 2.5rem;  flex-shrink: 0; }

.diagonal-zigzag-split__portrait {
    width: 8rem;
    height: 8rem;
}

.diagonal-zigzag-split__portrait--tilt-left {
    transform: rotate(-5deg);
}

.diagonal-zigzag-split__portrait--tilt-right {
    transform: rotate(5deg);
}

.diagonal-zigzag-split__portrait:hover {
    transform: rotate(0);
}

.diagonal-zigzag-split__beacon {
    width: 2rem;
    height: 2rem;
    bottom: -0.25rem;
    right: -0.25rem;
}

.diagonal-zigzag-split__beacon-dot {
    width: 0.75rem;
    height: 0.75rem;
}

.diagonal-zigzag-split__frame {
    width: 4rem;
    height: 4rem;
}

.diagonal-zigzag-split__frame--tl {
    top: 0;
    left: 0;
}

.diagonal-zigzag-split__frame--br {
    bottom: 0;
    right: 0;
}

.diagonal-zigzag-split__frame--rotate-45 {
    transform: rotate(45deg);
}

.diagonal-zigzag-split__frame--rotate-minus-45 {
    transform: rotate(-45deg);
}

.diagonal-zigzag-split__wash {
    width: 8rem;
}

.diagonal-zigzag-split__corner {
    width: 5rem;
    height: 5rem;
}

.diagonal-zigzag-split__min-shrink {
    min-width: 0;
}

@media (min-width: 768px) {
    .diagonal-zigzag-split__band--reverse {
        flex-direction: row-reverse;
    }

    .diagonal-zigzag-split__portrait {
        width: 10rem;
        height: 10rem;
    }
}

.orbit-column-badge {
    width: 2.5rem;
    height: 2.5rem;
}

.orbit-column-panel {
    height: 700px;
}

.orbit-column-cloud-top {
    width: 24rem;
    height: 24rem;
}

.orbit-column-cloud-bottom {
    width: 20rem;
    height: 20rem;
}

.orbit-column-ring-main {
    width: 24rem;
    height: 24rem;
    animation-duration: 20s;
}

.orbit-column-ring-side {
    width: 20rem;
    height: 20rem;
    animation-duration: 30s;
    animation-direction: reverse;
}

.orbit-column-ring-tail {
    width: 22rem;
    height: 22rem;
    animation-duration: 25s;
}

.orbit-column-ring-main,
.orbit-column-ring-side,
.orbit-column-ring-tail {
    animation-name: orbit-column__spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes orbit-column__spin {
    to { transform: rotate(360deg); }
}

/* integrations — unified hover (layout; shadow + lift; respect reduced motion) */
.integrations-card-hover {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.integrations-card-hover:hover {
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
    transform: translateY(-2px) scale(1.03);
}

.integrations-card-hover--shadow-only {
    transition: box-shadow 0.35s ease;
}

.integrations-card-hover--shadow-only:hover {
    transform: none;
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .integrations-card-hover:hover {
        transform: none;
    }
}

/* Primary tile: wpg-preview --tw-primary-* | --bs-primary-scale-*; inherited --bs-primary hex */
.integrations__icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    --_ie-from: rgb(var(--tw-primary-500, var(--bs-primary-scale-500, 99 102 241)) / 1);
    --_ie-to: rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1);
    background-color: var(--bs-primary, rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1));
    background-image: linear-gradient(to bottom right, var(--_ie-from), var(--_ie-to));
}
.integrations__icon-tile i {
    color: inherit;
}
.integrations__icon-tile svg,
.integrations__icon-tile :is(path, circle, rect, polygon) {
    fill: currentColor;
}

/* Softer card hover shadow (avoids muddy stack with shadow-lg / BS cards) */
.integrations-card-hover:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}
.integrations-card-hover--shadow-only:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}

/* Mosaic layout */
.integrations__mosaic-row {
    min-height: 320px;
}

.integrations__mosaic-desc {
    font-size: 0.875rem;
}

/* Mosaic tile sizing, layout and hover behaviour (no colors) */
.integrations-mosaic-overlay__tile {
    min-width: 0;
}

.integrations-mosaic-overlay__tile > img {
    transition: transform 0.7s ease;
}

.integrations-mosaic-overlay__tile--tall {
    min-height: 320px;
}

.integrations-mosaic-overlay__tile--short {
    min-height: 240px;
}

@media (min-width: 768px) {
    .integrations-mosaic-overlay__tile--wide {
        flex: 0 0 auto;
        width: 66.6667%;
    }
    .integrations-mosaic-overlay__tile--narrow {
        flex: 0 0 auto;
        width: 33.3333%;
    }
    .integrations-mosaic-overlay__tile--half {
        flex: 0 0 auto;
        width: 50%;
    }
}

.integrations-mosaic-overlay__icon {
    width: 2.5rem;
    height: 2.5rem;
}

.integrations-mosaic-overlay__category {
    letter-spacing: 0.05em;
}

.integrations-mosaic-overlay__desc {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    font-size: 0.875rem;
}

.integrations-mosaic-overlay__tile:hover > img {
    transform: scale(1.1);
}

.integrations-mosaic-overlay__tile:hover .integrations-mosaic-overlay__desc {
    max-height: 6rem;
}

@media (prefers-reduced-motion: reduce) {
    .integrations-mosaic-overlay__tile > img,
    .integrations-mosaic-overlay__desc {
        transition: none;
    }
    .integrations-mosaic-overlay__tile:hover > img {
        transform: none;
    }
}

/* Hover: overlay layers moved out of the sem directive (framework-independent; img + desc handled above) */
.integrations-mosaic-overlay__base,
.integrations-mosaic-overlay__tint { transition: opacity 0.3s ease; }
.integrations-mosaic-overlay__tile:hover .integrations-mosaic-overlay__base { opacity: 0.9; }
.integrations-mosaic-overlay__tile:hover .integrations-mosaic-overlay__tint { opacity: 1; }