.syn-rad {
    --syn-rad-hub-size: clamp(11.25rem, 34vw, 15rem);
    --syn-rad-node-size: clamp(7.5rem, 19vw, 10rem);
    --syn-rad-node-icon-size: var(--size-300);
    --syn-rad-node-label-size: clamp(0.68rem, 0.66rem + 0.12vw, 0.82rem);
    --syn-rad-ring-inset: clamp(var(--size-900), 14vw, var(--size-1000));
    --syn-rad-gap: calc(var(--spacing-300) + var(--spacing-050));
    --syn-rad-panel-radius: var(--border-radius-200);
    color: var(--color-headings);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--syn-rad-gap);
    padding: var(--spacing-200) 0 var(--spacing-400);
}

.syn-rad__canvas {
    position: relative;
    width: min(43.75rem, 100%);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.syn-rad__ring {
    position: absolute;
    inset: var(--syn-rad-ring-inset);
    border-radius: 50%;
    border: thin dashed var(--color-border-primary);
    opacity: 0.45;
    pointer-events: none;
}

.syn-rad__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--syn-rad-hub-size);
    height: var(--syn-rad-hub-size);
    border-radius: 50%;
    background: var(--color-surface-primary);
    border: thin solid var(--color-border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-200) + var(--spacing-050) + var(--spacing-025));
    box-sizing: border-box;
    pointer-events: none;
    transition: box-shadow .3s;
    z-index: 1;
}

.syn-rad__hub.is-lit {
    box-shadow: 0 0 var(--spacing-400) color-mix(in srgb, var(--color-primary-default) 30%, transparent);
}

/* Size comes from the .card__icon-xl class added in markup; this only covers non-Material icon fallbacks. */
.syn-rad__hub-icon .elementor-icon,
.syn-rad__hub-icon svg,
.syn-rad__hub-icon i {
    font-size: var(--size-600);
    color: var(--color-primary-default);
    line-height: 1;
    margin-bottom: var(--spacing-125);
}

.syn-rad__hub-title {
    color: var(--color-headings);
    line-height: 1.35;
}

.syn-rad__hub-sub {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--color-body);
    margin-top: var(--spacing-050);
}

.syn-rad__node {
    /* !important needed: Elementor's global ".elementor .btn" kit class forces position:static with higher specificity. */
    position: absolute !important;
    width: var(--syn-rad-node-size);
    height: var(--syn-rad-node-size);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-150) + var(--spacing-025));
    box-sizing: border-box;
    cursor: pointer;
    gap: var(--spacing-100);
    z-index: 1;
    transition: background .22s, border-color .22s, box-shadow .22s, transform .22s;
    transform-origin: 50% 50%;
    user-select: none;
}

.syn-rad__node.btn--secondary {
    background-color: var(--color-surface-primary);
    border: thin solid var(--color-border-default);
    color: var(--color-headings);
}

.syn-rad__node.btn--secondary .material-symbols-rounded,
.syn-rad__node.btn--secondary .elementor-icon,
.syn-rad__node.btn--secondary svg,
.syn-rad__node.btn--secondary i {
    color: var(--color-headings);
}

.syn-rad__node.btn--secondary:hover {
    transform: scale(1.07);
    z-index: 2;
}

.syn-rad__node.is-on {
    box-shadow: 0 0 var(--spacing-300) color-mix(in srgb, var(--color-primary-default) 40%, transparent);
    transform: scale(1.08);
    z-index: 2;
}

.syn-rad__node:focus-visible {
    outline: thin solid var(--color-primary-default);
    outline-offset: var(--spacing-050);
    box-shadow: 0 0 0 var(--spacing-100) color-mix(in srgb, var(--color-primary-default) 20%, transparent);
}

.syn-rad__node .material-symbols-rounded {
    line-height: 1;
    flex-shrink: 0;
}

.syn-rad__node .elementor-icon,
.syn-rad__node svg,
.syn-rad__node i {
    font-size: var(--syn-rad-node-icon-size);
    line-height: 1;
    flex-shrink: 0;
}

.syn-rad__node svg {
    width: var(--syn-rad-node-icon-size);
    height: var(--syn-rad-node-icon-size);
}

.syn-rad__node-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 100%;
}

.syn-rad__nlabel {
    display: block;
    min-width: 0;
    font-size: var(--syn-rad-node-label-size);
    color: inherit;
    line-height: 1.25;
    text-align: center;
    opacity: .9;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.syn-rad__panel {
    width: 100%;
    max-width: 37.5rem;
    min-height: var(--size-1100, 5.5rem);
    padding: calc(var(--spacing-200) + var(--spacing-050) + var(--spacing-025)) var(--spacing-500);
    border: thin solid var(--color-border-default);
    border-radius: var(--syn-rad-panel-radius);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.syn-rad__panel[hidden] {
    display: none;
}

.syn-rad__p-hint {
    color: var(--color-body);
    margin: 0;
    font-style: italic;
}

.syn-rad__p-body {
    display: none;
    width: 100%;
    text-align: center;
}

.syn-rad__p-body.is-vis {
    display: block;
    animation: syn-fadein .25s ease;
}

@keyframes syn-fadein {
    from {
        opacity: 0;
        transform: translateY(.3125rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.syn-rad__p-head {
    margin-bottom: var(--spacing-125);
}

.syn-rad__p-icon {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* Size comes from the .card__icon class added in markup; this only covers non-Material icon fallbacks. */
.syn-rad__p-icon .elementor-icon,
.syn-rad__p-icon svg,
.syn-rad__p-icon i {
    font-size: var(--size-300);
    color: var(--color-primary-default);
    line-height: 1;
    flex-shrink: 0;
}

.syn-rad__p-icon svg {
    width: var(--size-300);
    height: var(--size-300);
}

.syn-rad__p-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-125);
    margin: 0;
    color: var(--color-headings);
}

.syn-rad__p-desc,
.syn-rad__ac-desc {
    line-height: 1.65;
    color: var(--color-body);
    margin: 0;
}

.syn-rad__accordion {
    display: none;
    flex-direction: column;
    gap: var(--spacing-050);
    width: 100%;
}

.syn-rad__ac-item {
    border: none;
    border-bottom: thin solid var(--color-border-default);
    background: transparent;
    overflow: hidden;
    transition: border-color .2s;
}

.syn-rad__ac-item.is-open {
    border-bottom-color: var(--color-border-primary);
    background: transparent;
}

.syn-rad__ac-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-150);
    padding: var(--spacing-150) var(--spacing-200);
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-headings);
    text-align: left;
    font-family: inherit;
}

.syn-rad__ac-btn:focus-visible {
    outline: thin solid var(--color-primary-default);
    outline-offset: calc(var(--spacing-025) * -1);
}

.syn-rad__ac-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* Size comes from the .card__icon class added in markup; this only covers non-Material icon fallbacks. */
.syn-rad__ac-ico .elementor-icon,
.syn-rad__ac-ico svg,
.syn-rad__ac-ico i {
    font-size: var(--size-300);
    color: var(--color-primary-default);
    line-height: 1;
}

.syn-rad__ac-ico svg {
    width: var(--size-300);
    height: var(--size-300);
}

.syn-rad__ac-txt {
    flex: 1;
    min-width: 0;
}

.syn-rad__ac-name {
    color: var(--color-headings);
    line-height: 1.2;
}

.syn-rad__ac-chevron {
    font-size: var(--size-400);
    color: var(--color-body);
    transition: transform .2s, color .2s;
    flex-shrink: 0;
}

.syn-rad__ac-item.is-open .syn-rad__ac-chevron {
    transform: rotate(180deg);
    color: var(--color-primary-default);
}

.syn-rad__ac-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease, padding .3s;
}

.syn-rad__ac-item.is-open .syn-rad__ac-body {
    max-height: 62.5rem;
    padding: 0 var(--spacing-200) var(--spacing-200) var(--spacing-800);
}

.syn-rad__ac-desc {
    text-wrap: wrap;
    overflow-wrap: normal;
    word-break: normal;
}

@media (prefers-reduced-motion: reduce) {
    .syn-rad__node,
    .syn-rad__ac-chevron,
    .syn-rad__ac-body,
    .syn-rad__p-body {
        transition: none;
        animation: none;
    }
}

@media (max-width: 48rem) {
    .syn-rad__p-head {
        margin-bottom: var(--spacing-200);
    }

    .syn-rad__p-name {
        justify-content: flex-start;
    }

    .syn-rad__canvas {
        display: none;
    }

    .syn-rad__accordion {
        display: flex;
        order: 1;
    }

    .syn-rad__panel {
        order: 2;
    }

    .syn-rad__ac-item.is-open .syn-rad__ac-body {
        display: none;
    }

    .syn-rad__ac-item.is-open .syn-rad__ac-body {
        max-height: none;
        padding: 0 0 var(--spacing-200) var(--spacing-600);
    }
}