SIMME HOMEPAGE — SYMSOUL COVERFLOW MODULE V11
   Shortcode: [symsoul_coverflow]

   PRODUCTION HARDENING ONLY:
   - existing visual design intentionally preserved
   - interaction hot paths reduced
   - reflection decode priority lowered
   - wheel deltas normalised across browser engines
   - CSS fallbacks added for decorative features
   - existing site / AI compatibility CSS remains untouched
   ========================================================= */

/* =========================================================
   SIMME / SYMSOUL HOMEPAGE COVERFLOW V11 — PRODUCTION HARDENED
   Shortcode: [symsoul_coverflow]

   Performance / compatibility pass only:
   - no intended visual redesign
   - cross-browser fallbacks for reflections / 3D / aspect ratio
   - touch and horizontal-gesture containment
   - reduced unnecessary paint work on smaller devices
   ========================================================= */

.sscf,
.sscf *,
.sscf *::before,
.sscf *::after {
    box-sizing: border-box;
}

.sscf {
    --sscf-card-width: clamp(190px, 16vw, 250px);
    --sscf-step: clamp(128px, 13.2vw, 202px);
    --sscf-radius: clamp(22px, 2.2vw, 32px);
    --sscf-ease: cubic-bezier(.2, .72, .18, 1);
    --sscf-current-accent: #ff8a00;
    --sscf-current-accent-rgb: 255,138,0;

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    color: #f6f8fb;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sscf__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sscf button,
.sscf a,
.sscf img {
    -webkit-tap-highlight-color: transparent;
}

.sscf__surface {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 610px;
    overflow: hidden;
    padding: clamp(18px, 2.4vw, 34px) clamp(8px, 2vw, 28px) 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* No overhead spotlight: the cards, reflections and their own accent glows
 * provide the depth while the module remains visually part of the black page. */
.sscf__surface::before {
    content: none;
}

.sscf__surface::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

/* Subtle floor plane that supports the per-card reflections. */
.sscf__surface::after {
    z-index: 0;
    left: 4%;
    right: 4%;
    bottom: 72px;
    height: 28%;
    opacity: .34;
    background:
        linear-gradient(180deg, rgba(84, 145, 200, .07), transparent 40%),
        repeating-linear-gradient(90deg, rgba(145, 183, 219, .05) 0 1px, transparent 1px 74px);
    transform: perspective(380px) rotateX(67deg);
    transform-origin: 50% 100%;
    filter: blur(.2px);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.sscf__ambient {
    position: absolute;
    z-index: 0;
    top: 18%;
    width: 28%;
    height: 54%;
    border-radius: 50%;
    opacity: .07;
    filter: blur(70px);
    pointer-events: none;
}

.sscf__ambient--left {
    left: -12%;
    background: #00aeff;
}

.sscf__ambient--right {
    right: -12%;
    background: #659fe0;
}

.sscf__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: clamp(520px, 42vw, 590px);
    margin: 0 auto;
    perspective: 1500px;
    perspective-origin: 50% 48%;
    transform-style: preserve-3d;
    --sscf-drag-x: 0px;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.sscf__stage.is-dragging {
    cursor: grabbing;
}

.sscf__stage.is-dragging .sscf__card,
.sscf__stage.is-dragging .sscf__card:hover,
.sscf__stage.is-dragging .sscf__card:focus,
.sscf__stage.is-dragging .sscf__card:active {
    cursor: grabbing !important;
    transition-duration: .22s !important;
}

.sscf__card,
.sscf__card:hover,
.sscf__card:focus,
.sscf__card:active,
.sscf__card:visited {
    --sscf-x: 0px;
    --sscf-z: 0px;
    --sscf-rotate: 0deg;
    --sscf-scale: 1;
    --sscf-opacity: 1;

    position: absolute !important;
    z-index: 2;
    left: 50% !important;
    top: 43% !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    width: var(--sscf-card-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 11px 10px !important;
    overflow: visible !important;
    color: #f7f9fc !important;
    text-decoration: none !important;
    text-align: center !important;
    background:
        linear-gradient(180deg, rgba(23, 34, 46, .94), rgba(5, 10, 16, .965)) !important;
    background-color: #070d14 !important;
    border: 1px solid rgba(var(--sscf-accent-rgb), .38) !important;
    border-radius: 22px !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 -1px 0 rgba(var(--sscf-accent-rgb), .09),
        0 18px 38px rgba(0, 0, 0, .38),
        0 0 18px rgba(var(--sscf-accent-rgb), .08) !important;
    opacity: var(--sscf-opacity);
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transform:
        translate3d(calc(-50% + var(--sscf-x) + var(--sscf-drag-x, 0px)), -50%, var(--sscf-z))
        rotateY(var(--sscf-rotate))
        scale(var(--sscf-scale)) !important;
    transform-origin: 50% 52%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
        transform .62s var(--sscf-ease),
        opacity .42s ease,
        border-color .34s ease,
        box-shadow .38s ease,
        filter .34s ease !important;
}

.sscf__card::before,
.sscf__card::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.sscf__card::before {
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(var(--sscf-accent-rgb), .15), transparent 28%);
    opacity: .42;
}

.sscf__card::after {
    z-index: -2;
    left: 18%;
    right: 18%;
    bottom: -13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(var(--sscf-accent-rgb), .28);
    filter: blur(12px);
    opacity: .24;
    transform: scaleX(.82);
    transition: opacity .4s ease, transform .5s var(--sscf-ease);
}

.sscf__card.is-active {
    z-index: 20;
    border-color: rgba(var(--sscf-accent-rgb), .92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 0 42px rgba(var(--sscf-accent-rgb), .08),
        0 24px 50px rgba(0, 0, 0, .46),
        0 0 24px rgba(var(--sscf-accent-rgb), .54),
        0 0 76px rgba(var(--sscf-accent-rgb), .30) !important;
}

.sscf__card.is-active::after {
    opacity: .72;
    transform: scaleX(1.14);
}

.sscf__card.is-active:hover {
    filter: brightness(1.045);
}

.sscf__card:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 5px !important;
    box-shadow:
        0 0 0 3px rgba(var(--sscf-accent-rgb), .48),
        0 24px 50px rgba(0, 0, 0, .46),
        0 0 34px rgba(var(--sscf-accent-rgb), .25) !important;
}

.sscf__card[data-pos="0"] {
    --sscf-x: 0px;
    --sscf-z: 94px;
    --sscf-rotate: 0deg;
    --sscf-scale: 1.08;
    --sscf-opacity: 1;
}

.sscf__card[data-pos="-1"] {
    --sscf-x: calc(var(--sscf-step) * -1);
    --sscf-z: 24px;
    --sscf-rotate: 19deg;
    --sscf-scale: .94;
    --sscf-opacity: .96;
    z-index: 15;
}

.sscf__card[data-pos="1"] {
    --sscf-x: var(--sscf-step);
    --sscf-z: 24px;
    --sscf-rotate: -19deg;
    --sscf-scale: .94;
    --sscf-opacity: .96;
    z-index: 15;
}

.sscf__card[data-pos="-2"] {
    --sscf-x: calc(var(--sscf-step) * -2);
    --sscf-z: -58px;
    --sscf-rotate: 30deg;
    --sscf-scale: .84;
    --sscf-opacity: .82;
    z-index: 8;
}

.sscf__card[data-pos="2"] {
    --sscf-x: calc(var(--sscf-step) * 2);
    --sscf-z: -58px;
    --sscf-rotate: -30deg;
    --sscf-scale: .84;
    --sscf-opacity: .82;
    z-index: 8;
}

.sscf__card[data-pos="-3"],
.sscf__card[data-pos="3"] {
    --sscf-z: -126px;
    --sscf-scale: .76;
    --sscf-opacity: .62;
    z-index: 3;
}

.sscf__card[data-pos="-3"] {
    --sscf-x: calc(var(--sscf-step) * -2.88);
    --sscf-rotate: 38deg;
}

.sscf__card[data-pos="3"] {
    --sscf-x: calc(var(--sscf-step) * 2.88);
    --sscf-rotate: -38deg;
}

.sscf__card-top {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: center;
    min-height: 66px;
    padding: 2px 4px 10px;
}

.sscf__card-title {
    display: block;
    margin: 0;
    color: var(--sscf-accent);
    font-size: clamp(20px, 1.72vw, 28px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.025em;
    text-shadow: 0 0 14px rgba(var(--sscf-accent-rgb), .24);
}

.sscf__card-subtitle {
    display: block;
    margin-top: 8px;
    color: rgba(var(--sscf-accent-rgb), .92);
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: .025em;
}

.sscf__media {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 600 / 746;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(207, 224, 240, .14);
    border-radius: 16px;
    background: #e9e9e9;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 8px 20px rgba(0, 0, 0, .28);
}

.sscf__media::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, .09), transparent 18%, transparent 76%, rgba(var(--sscf-accent-rgb), .07));
}

.sscf__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: translateZ(0);
    user-select: none;
    image-rendering: auto;
    -webkit-user-drag: none;
}

.sscf__card-foot {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    min-height: 43px;
    padding-top: 8px;
}

.sscf__open-cue {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--sscf-accent);
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,.11), transparent 34%),
        rgba(5, 11, 18, .9);
    border: 1px solid rgba(var(--sscf-accent-rgb), .66);
    border-radius: 50%;
    box-shadow:
        inset 0 0 11px rgba(var(--sscf-accent-rgb), .06),
        0 0 10px rgba(var(--sscf-accent-rgb), .18);
    opacity: .72;
    transform: scale(.88);
    transition: opacity .3s ease, transform .38s var(--sscf-ease), box-shadow .3s ease;
}

.sscf__open-cue svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sscf__card.is-active .sscf__open-cue {
    opacity: 1;
    transform: scale(1);
    box-shadow:
        inset 0 0 13px rgba(var(--sscf-accent-rgb), .08),
        0 0 14px rgba(var(--sscf-accent-rgb), .32);
}

.sscf__card--no-link.is-active .sscf__open-cue {
    opacity: .38;
}

.sscf__card-reflection {
    position: absolute;
    z-index: 1;
    left: 0;
    top: calc(100% + 4px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    height: 100%;
    padding: 13px 11px 10px;
    overflow: hidden;
    color: #f7f9fc;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(23, 34, 46, .88), rgba(5, 10, 16, .94));
    border: 1px solid rgba(var(--sscf-accent-rgb), .30);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 18px rgba(var(--sscf-accent-rgb), .07);
    opacity: .22;
    pointer-events: none;
    transform: scaleY(-1) scaleX(.988);
    transform-origin: 50% 50%;
    filter: blur(.45px) brightness(.82) saturate(.9);
    mask-image: linear-gradient(
        to bottom,
        transparent 52%,
        rgba(0,0,0,.08) 66%,
        rgba(0,0,0,.28) 82%,
        rgba(0,0,0,.62) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 52%,
        rgba(0,0,0,.08) 66%,
        rgba(0,0,0,.28) 82%,
        rgba(0,0,0,.62) 100%
    );
    transition:
        opacity .38s ease,
        filter .38s ease,
        transform .48s var(--sscf-ease);
}

.sscf__reflection-top {
    display: grid;
    align-content: center;
    min-height: 66px;
    padding: 2px 4px 10px;
}

.sscf__reflection-title {
    display: block;
    color: var(--sscf-accent);
    font-size: clamp(20px, 1.72vw, 28px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.025em;
}

.sscf__reflection-subtitle {
    display: block;
    margin-top: 8px;
    color: rgba(var(--sscf-accent-rgb), .88);
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: .025em;
}

.sscf__reflection-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 600 / 746;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(207,224,240,.10);
    border-radius: 16px;
    background: #dfe3e7;
}

.sscf__reflection-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: .90;
}

.sscf__reflection-foot {
    display: grid;
    place-items: center;
    min-height: 43px;
    padding-top: 8px;
}

.sscf__reflection-cue {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--sscf-accent);
    background: rgba(5,11,18,.82);
    border: 1px solid rgba(var(--sscf-accent-rgb), .50);
    border-radius: 50%;
}

.sscf__reflection-cue svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sscf__card[data-pos="0"] .sscf__card-reflection {
    opacity: .56;
    filter: blur(.35px) brightness(.9) saturate(.96);
    transform: scaleY(-1) scaleX(1.015);
}

.sscf__card[data-pos="-1"] .sscf__card-reflection,
.sscf__card[data-pos="1"] .sscf__card-reflection {
    opacity: .32;
}

.sscf__card[data-pos="-2"] .sscf__card-reflection,
.sscf__card[data-pos="2"] .sscf__card-reflection {
    opacity: .18;
}

.sscf__card[data-pos="-3"] .sscf__card-reflection,
.sscf__card[data-pos="3"] .sscf__card-reflection {
    opacity: .07;
}

.sscf__nav,
.sscf__nav:hover,
.sscf__nav:focus,
.sscf__nav:active {
    position: absolute !important;
    z-index: 40;
    top: 48% !important;
    display: grid !important;
    place-items: center;
    width: 48px !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #dcecff !important;
    background: rgba(4, 11, 19, .78) !important;
    border: 1px solid rgba(177, 211, 243, .42) !important;
    border-radius: 50% !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 6px 20px rgba(0,0,0,.32),
        0 0 12px rgba(74, 163, 241, .08) !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    transform: translateY(-50%);
    transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}

.sscf__nav--prev {
    left: clamp(10px, 2.2vw, 32px) !important;
}

.sscf__nav--next {
    right: clamp(10px, 2.2vw, 32px) !important;
}

.sscf__nav svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sscf__nav:hover,
.sscf__nav:focus-visible {
    color: #fff !important;
    background: rgba(8, 22, 35, .96) !important;
    border-color: rgba(152, 211, 255, .78) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 7px 22px rgba(0,0,0,.36),
        0 0 18px rgba(68, 164, 244, .2) !important;
}

.sscf__nav:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
}

.sscf__nav:active {
    transform: translateY(-50%) scale(.93) !important;
}

.sscf__controls {
    position: relative;
    z-index: 45;
    display: grid;
    justify-items: center;
    margin-top: -14px;
}

.sscf__dots {
    display: flex;
    position: relative;
    z-index: 46;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px 5px;
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.sscf__dot,
.sscf__dot:hover,
.sscf__dot:focus,
.sscf__dot:active {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(232, 239, 246, .68) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    outline: 0 !important;
    opacity: .55;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transform: scale(1);
    transition: transform .25s ease, opacity .25s ease, background .25s ease, box-shadow .25s ease !important;
}

.sscf__dot.is-active {
    background: var(--sscf-current-accent) !important;
    opacity: 1;
    transform: scale(1.28);
    box-shadow: 0 0 0 3px rgba(var(--sscf-current-accent-rgb), .18), 0 0 12px rgba(var(--sscf-current-accent-rgb), .42) !important;
}

.sscf__dot:hover,
.sscf__dot:focus-visible {
    opacity: 1;
    transform: scale(1.18);
}

.sscf__dot:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
}

.sscf__hint {
    margin: 2px 0 0 !important;
    color: rgba(214, 225, 236, .64) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
}

.sscf__hint-touch {
    display: none;
}

/* =========================================================
   LAPTOP / TABLET LANDSCAPE
   ========================================================= */


/* =========================================================
   COMING-SOON SLIDE-UP PANEL
   Used only by centred cards that do not yet have a live URL.
   ========================================================= */

.sscf__coming-soon {
    --sscf-coming-accent: #5fb7ff;
    --sscf-coming-accent-rgb: 95,183,255;

    position: absolute;
    z-index: 80;
    left: 50%;
    bottom: 18px;
    width: min(640px, calc(100% - 56px));
    min-height: 138px;
    padding: 20px 62px 20px 24px;
    overflow: hidden;
    color: #f5f9fd;
    background: linear-gradient(180deg, rgba(22, 31, 42, .97), rgba(5, 10, 16, .985));
    border: 1px solid rgba(var(--sscf-coming-accent-rgb), .48);
    border-radius: 19px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(var(--sscf-coming-accent-rgb), .12),
        0 18px 44px rgba(0,0,0,.55),
        0 0 24px rgba(var(--sscf-coming-accent-rgb), .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 48px, 0) scale(.93) rotateX(-8deg);
    transform-origin: 50% 100%;
    transition:
        opacity .3s ease,
        visibility 0s linear .48s,
        transform .52s cubic-bezier(.16,.82,.22,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.sscf__coming-soon::before,
.sscf__coming-soon::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.sscf__coming-soon::before {
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--sscf-coming-accent-rgb), .42) 12%, var(--sscf-coming-accent) 50%, rgba(var(--sscf-coming-accent-rgb), .42) 88%, transparent);
    box-shadow: 0 0 14px rgba(var(--sscf-coming-accent-rgb), .42);
}

.sscf__coming-soon::after {
    right: -50px;
    bottom: -76px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--sscf-coming-accent-rgb), .17), transparent 68%);
    filter: blur(8px);
}

.sscf__coming-soon.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1) rotateX(0deg);
    transition-delay: 0s;
}

.sscf__coming-soon-beam {
    position: absolute;
    z-index: 0;
    top: -52px;
    left: 50%;
    width: 72%;
    height: 92px;
    opacity: .52;
    background: radial-gradient(ellipse at 50% 100%, rgba(var(--sscf-coming-accent-rgb), .34), rgba(var(--sscf-coming-accent-rgb), .10) 42%, transparent 72%);
    filter: blur(13px);
    transform: translateX(-50%);
    pointer-events: none;
}

.sscf__coming-soon-kicker,
.sscf__coming-soon-title,
.sscf__coming-soon-copy,
.sscf__coming-soon-progress,
.sscf__coming-soon-close {
    position: relative;
    z-index: 2;
}

.sscf__coming-soon-kicker {
    display: block;
    margin: 0 0 7px;
    color: var(--sscf-coming-accent);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(var(--sscf-coming-accent-rgb), .32);
}

.sscf__coming-soon-title {
    display: block;
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.sscf__coming-soon-copy {
    max-width: 470px;
    margin: 8px 0 0 !important;
    color: rgba(229, 238, 246, .78) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.sscf__coming-soon-progress {
    display: flex;
    align-items: flex-end;
    width: 94px;
    height: 14px;
    margin-top: 13px;
    gap: 5px;
}

.sscf__coming-soon-progress span {
    display: block;
    flex: 1 1 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(var(--sscf-coming-accent-rgb), .32);
    box-shadow: 0 0 7px rgba(var(--sscf-coming-accent-rgb), .13);
    transform-origin: 50% 100%;
}

.sscf__coming-soon.is-open .sscf__coming-soon-progress span {
    animation: sscf-coming-pulse 1.25s ease-in-out infinite;
}

.sscf__coming-soon-progress span:nth-child(2) { animation-delay: .12s !important; }
.sscf__coming-soon-progress span:nth-child(3) { animation-delay: .24s !important; }
.sscf__coming-soon-progress span:nth-child(4) { animation-delay: .36s !important; }
.sscf__coming-soon-progress span:nth-child(5) { animation-delay: .48s !important; }

.sscf__coming-soon-close,
.sscf__coming-soon-close:hover,
.sscf__coming-soon-close:focus,
.sscf__coming-soon-close:active {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: grid !important;
    place-items: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(239, 247, 255, .82) !important;
    background: rgba(2, 7, 12, .58) !important;
    border: 1px solid rgba(var(--sscf-coming-accent-rgb), .32) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
    outline: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.sscf__coming-soon-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.sscf__coming-soon-close:hover,
.sscf__coming-soon-close:focus-visible {
    color: #fff !important;
    border-color: rgba(var(--sscf-coming-accent-rgb), .72) !important;
    box-shadow: 0 0 13px rgba(var(--sscf-coming-accent-rgb), .20) !important;
    transform: scale(1.07);
}

.sscf__coming-soon-close:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
}

@keyframes sscf-coming-pulse {
    0%, 100% { height: 3px; opacity: .35; }
    50% {
        height: 12px;
        opacity: 1;
        background: var(--sscf-coming-accent);
        box-shadow: 0 0 9px rgba(var(--sscf-coming-accent-rgb), .42);
    }
}

@media (max-width: 1180px) {
    .sscf {
        --sscf-card-width: clamp(178px, 19vw, 224px);
        --sscf-step: clamp(120px, 15.5vw, 178px);
    }

    .sscf__surface {
        min-height: 570px;
    }

    .sscf__stage {
        height: 510px;
    }

    .sscf__card[data-pos="-3"],
    .sscf__card[data-pos="3"] {
        --sscf-opacity: .42;
    }
}

/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 860px) {
    .sscf {
        --sscf-card-width: clamp(185px, 27vw, 226px);
        --sscf-step: clamp(118px, 22vw, 166px);
    }

    .sscf__surface {
        min-height: 575px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .sscf__stage {
        height: 520px;
    }

    .sscf__card[data-pos="-3"],
    .sscf__card[data-pos="3"] {
        opacity: 0;
        pointer-events: none;
    }

    .sscf__nav {
        width: 44px !important;
        height: 44px !important;
    }
}

/* =========================================================
   PHONE / PORTRAIT TABLET
   Active card is fully front-facing; adjacent choices deliberately peek in.
   ========================================================= */

@media (max-width: 640px) {
    .sscf {
        --sscf-card-width: min(72vw, 280px);
        --sscf-step: min(68vw, 260px);
        --sscf-radius: 20px;
    }

    .sscf__surface {
        min-height: 0;
        padding: 24px 0 20px;
        overflow: hidden;
        border-radius: 0;
    }

    .sscf__surface::after {
        bottom: 82px;
        height: 20%;
        opacity: .22;
    }

    .sscf__ambient {
        display: none;
    }

    .sscf__stage {
        height: clamp(570px, 138vw, 610px);
        perspective: 1180px;
        perspective-origin: 50% 42%;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 42% !important;
        padding: 10px 9px 8px !important;
        border-radius: 19px !important;
    }

    .sscf__card[data-pos="0"] {
        --sscf-z: 68px;
        --sscf-scale: 1;
    }

    .sscf__card[data-pos="-1"] {
        --sscf-x: calc(var(--sscf-step) * -1);
        --sscf-z: -18px;
        --sscf-rotate: 23deg;
        --sscf-scale: .82;
        --sscf-opacity: .68;
    }

    .sscf__card[data-pos="1"] {
        --sscf-x: var(--sscf-step);
        --sscf-z: -18px;
        --sscf-rotate: -23deg;
        --sscf-scale: .82;
        --sscf-opacity: .68;
    }

    .sscf__card[data-pos="-2"],
    .sscf__card[data-pos="2"],
    .sscf__card[data-pos="-3"],
    .sscf__card[data-pos="3"] {
        --sscf-opacity: 0;
        pointer-events: none;
    }

    .sscf__card-top,
    .sscf__reflection-top {
        min-height: 58px;
        padding: 1px 3px 7px;
    }

    .sscf__card-title,
    .sscf__reflection-title {
        font-size: clamp(21px, 6.8vw, 27px);
    }

    .sscf__card-subtitle,
    .sscf__reflection-subtitle {
        margin-top: 6px;
        font-size: clamp(8px, 2.7vw, 10px);
    }

    .sscf__media,
    .sscf__reflection-media {
        border-radius: 14px;
    }

    .sscf__card-foot,
    .sscf__reflection-foot {
        min-height: 36px;
        padding-top: 5px;
    }

    .sscf__open-cue,
    .sscf__reflection-cue {
        width: 31px;
        height: 31px;
    }

    .sscf__card-reflection {
        top: calc(100% + 5px);
        padding: 10px 9px 8px;
        border-radius: 19px;
        opacity: .12;
        mask-image: linear-gradient(
            to bottom,
            transparent 57%,
            rgba(0,0,0,.07) 70%,
            rgba(0,0,0,.24) 84%,
            rgba(0,0,0,.56) 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 57%,
            rgba(0,0,0,.07) 70%,
            rgba(0,0,0,.24) 84%,
            rgba(0,0,0,.56) 100%
        );
    }

    .sscf__card[data-pos="0"] .sscf__card-reflection {
        opacity: .46;
        filter: blur(.4px) brightness(.88) saturate(.94);
    }

    .sscf__card[data-pos="-1"] .sscf__card-reflection,
    .sscf__card[data-pos="1"] .sscf__card-reflection {
        opacity: .24;
    }

    .sscf__nav,
    .sscf__nav:hover,
    .sscf__nav:focus,
    .sscf__nav:active {
        top: 41% !important;
        bottom: auto !important;
        width: 42px !important;
        height: 42px !important;
        transform: translateY(-50%);
    }

    .sscf__nav--prev {
        left: 10px !important;
    }

    .sscf__nav--next {
        right: 10px !important;
    }

    .sscf__nav:active {
        transform: translateY(-50%) scale(.93) !important;
    }

    .sscf__controls {
        margin-top: -10px;
        padding-bottom: 2px;
    }

    .sscf__dots {
        gap: 9px;
    }

    .sscf__hint {
        margin-top: 3px !important;
    }

    .sscf__hint-desktop {
        display: none;
    }

    .sscf__hint-touch {
        display: inline;
    }

    .sscf__coming-soon {
        bottom: 12px;
        width: calc(100% - 22px);
        min-height: 0;
        padding: 17px 52px 16px 17px;
        border-radius: 16px;
    }

    .sscf__coming-soon-title {
        font-size: 22px;
    }

    .sscf__coming-soon-copy {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .sscf__coming-soon-close,
    .sscf__coming-soon-close:hover,
    .sscf__coming-soon-close:focus,
    .sscf__coming-soon-close:active {
        top: 10px !important;
        right: 10px !important;
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
    }
}

@media (max-width: 380px) {
    .sscf {
        --sscf-card-width: min(73vw, 268px);
        --sscf-step: min(69vw, 246px);
    }

    .sscf__surface {
        padding-top: 20px;
    }

    .sscf__stage {
        height: 560px;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 41% !important;
    }

    .sscf__card-top,
    .sscf__reflection-top {
        min-height: 54px;
    }

    .sscf__card-title,
    .sscf__reflection-title {
        font-size: clamp(20px, 6.7vw, 25px);
    }

    .sscf__card-foot,
    .sscf__reflection-foot {
        min-height: 34px;
        padding-top: 4px;
    }

    .sscf__open-cue,
    .sscf__reflection-cue {
        width: 29px;
        height: 29px;
    }
}

/* =========================================================
   FEATURE FALLBACKS
   Keep the component usable and tidy if a browser lacks one of the
   decorative capabilities. Modern Chrome/Edge/Firefox/Safari use the
   full design; these rules are only safety nets.
   ========================================================= */

@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .sscf__card-reflection {
        display: none !important;
    }

    .sscf__controls {
        margin-top: 6px;
    }
}

@supports not (aspect-ratio: 1 / 1) {
    .sscf__media,
    .sscf__reflection-media {
        height: calc(var(--sscf-card-width) * 1.243333);
    }
}

/* =========================================================
   INPUT MODES / ACCESSIBILITY
   ========================================================= */

@media (hover: none), (pointer: coarse) {
    .sscf__card.is-active:hover {
        filter: none;
    }

    .sscf__hint-desktop {
        display: none;
    }

    .sscf__hint-touch {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sscf *,
    .sscf *::before,
    .sscf *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .sscf__card {
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
}

/* Conservative fallback for engines without 3D transform preservation. */
@supports not (transform-style: preserve-3d) {
    .sscf__stage {
        perspective: none;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        transform:
            translate3d(calc(-50% + var(--sscf-x) + var(--sscf-drag-x, 0px)), -50%, 0)
            scale(var(--sscf-scale)) !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V7
   Shortcode: [simme_ai_compatibility]

   ISOLATION RULE:
   - Appended after the existing site CSS and existing SymSoul coverflow CSS.
   - Every rule remains scoped to .saic / .saic-* only.
   - Existing Simme, Themify, Lord Dancer, Gallery, EP and coverflow CSS above
     is preserved unchanged.
   - This V7 removes the residual glow behind the logo panels so each
     logo sits cleanly on pure black with no coloured bloom inside or
     directly behind the panel.
   ========================================================= */

/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V6
   Shortcode: [simme_ai_compatibility]

   ISOLATION RULE:
   - Every selector is scoped to .saic / .saic-* only.
   - No body, html, Themify row/module or unrelated Simme rules.
   - Low-profile open runway with no arrow controls or helper text; drag, swipe, wheel and keyboard navigation remain available.
   ========================================================= */

.saic,
.saic *,
.saic *::before,
.saic *::after {
    box-sizing: border-box;
}

.saic {
    --saic-blue: #18baff;
    --saic-blue-rgb: 24,186,255;
    --saic-gap: clamp(46px, 4.9vw, 82px);
    --saic-rail-height: clamp(96px, 7.8vw, 116px);

    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 auto;
    color: #eef7ff;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.saic__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.saic button,
.saic img {
    -webkit-tap-highlight-color: transparent;
}

.saic__intro {
    position: relative;
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto clamp(7px, .7vw, 11px);
    text-align: center;
}

.saic__title {
    margin: 0 !important;
    color: #dcecff !important;
    font-size: clamp(25px, 2.35vw, 38px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    text-transform: uppercase;
    text-wrap: balance;
}

.saic__title span {
    color: #dcecff;
}

.saic__title strong {
    color: #24bfff;
    font-weight: 700;
    text-shadow: 0 0 22px rgba(36, 191, 255, .12);
}

.saic__subtitle {
    width: min(760px, 100%);
    margin: 9px auto 0 !important;
    color: rgba(203, 222, 241, .78) !important;
    font-size: clamp(13px, 1.05vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    letter-spacing: .003em !important;
    text-wrap: balance;
}

.saic__brand-divider {
    display: grid;
    grid-template-columns: minmax(28px, 1fr) 5px auto 5px minmax(28px, 1fr);
    align-items: center;
    width: min(1040px, 96%);
    margin: clamp(10px, 1vw, 15px) auto 0;
    column-gap: 12px;
}

.saic__brand-line {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 173, 247, .72));
    box-shadow: 0 0 7px rgba(26, 173, 247, .16);
}

.saic__brand-line--right {
    background: linear-gradient(90deg, rgba(26, 173, 247, .72), transparent);
}

.saic__brand-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #21bfff;
    box-shadow: 0 0 8px rgba(33, 191, 255, .7);
}

.saic__brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(54px, 4.5vw, 68px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 44%, rgba(17, 91, 142, .17), rgba(0, 0, 0, .10) 68%, transparent 70%);
    border: 1px solid rgba(44, 192, 255, .58);
    box-shadow:
        inset 0 0 16px rgba(42, 184, 245, .08),
        0 0 16px rgba(20, 162, 232, .13);
}

.saic__brand-mark img {
    display: block !important;
    width: 72% !important;
    height: 72% !important;
    max-width: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 5px rgba(52, 193, 255, .16));
}

.saic__rail {
    position: relative;
    isolation: isolate;
    width: min(1680px, calc(100% - clamp(8px, 1.2vw, 24px)));
    height: var(--saic-rail-height);
    margin: 0 auto;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(16, 104, 162, .055), transparent 31%),
        linear-gradient(180deg, rgba(2, 6, 10, .42), rgba(0, 0, 0, 0));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


.saic__centre-glow {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: clamp(250px, 23vw, 380px);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(50, 183, 255, .12) 0%, rgba(21, 106, 164, .05) 42%, transparent 74%);
    filter: blur(14px);
    opacity: .9;
    transform: translateX(-50%);
    pointer-events: none;
}

.saic__viewport {
    position: absolute;
    z-index: 3;
    inset: 0 clamp(8px, 1.2vw, 18px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    cursor: grab;
    outline: 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.saic__viewport::-webkit-scrollbar {
    display: none;
}

.saic.is-dragging .saic__viewport {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.saic__viewport:focus-visible {
    outline: 2px solid rgba(139, 218, 255, .85);
    outline-offset: -4px;
    border-radius: 999px;
}

.saic__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    height: 100%;
}

.saic__set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
    padding-right: var(--saic-gap);
    gap: var(--saic-gap);
}

.saic__item,
.saic__item:hover,
.saic__item:focus,
.saic__item:active {
    position: relative;
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(194px, 14.6vw, 266px) !important;
    height: calc(var(--saic-rail-height) - 14px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    opacity: .74;
    filter: brightness(.84) saturate(.88);
    transform: translateZ(0) scale(.955);
    transform-origin: 50% 50%;
    transition:
        opacity .35s ease,
        filter .38s ease,
        transform .44s cubic-bezier(.18,.72,.2,1) !important;
}

.saic__item::before {
    display: none;
    content: none;
}

.saic__item::after {
    position: absolute;
    top: 50%;
    right: calc((var(--saic-gap) / -2) - 2px);
    width: 4px;
    height: 4px;
    content: "";
    border-radius: 50%;
    background: rgba(var(--saic-blue-rgb), .66);
    box-shadow: 0 0 8px rgba(var(--saic-blue-rgb), .42);
    transform: translateY(-50%);
    pointer-events: none;
}

.saic__logo-shell {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 14px);
    padding: 5px 8px;
    overflow: hidden;
    background: #000 !important;
    border: 1px solid rgba(122, 160, 190, .12) !important;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(255,255,255,.02),
        0 0 0 1px rgba(0,0,0,.48);
    isolation: isolate;
}

.saic__item img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 244px) !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.saic__item.is-near {
    opacity: .88;
    filter: brightness(.96) saturate(.95);
    transform: translateZ(0) scale(.99);
}

.saic__item.is-active {
    z-index: 4;
    opacity: 1;
    filter: brightness(1.06) saturate(1.01);
    transform: translateZ(0) scale(1.028);
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.saic__item.is-active::before {
    opacity: 0;
    transform: none;
}

.saic__item.is-active img {
    filter: none;
}

.saic__item:hover,
.saic__item:focus-visible {
    opacity: 1;
    filter: brightness(1.08) saturate(1.02);
}

.saic__item:focus-visible {
    border-color: transparent !important;
    outline: 2px solid rgba(228, 248, 255, .78) !important;
    outline-offset: 3px !important;
}










@media (max-width: 900px) {
    .saic {
        --saic-gap: clamp(34px, 5vw, 56px);
        --saic-rail-height: 100px;
    }

    .saic__rail {
        width: calc(100% - 18px);
    }

    .saic__item,
    .saic__item:hover,
    .saic__item:focus,
    .saic__item:active {
        width: clamp(176px, 23vw, 232px) !important;
    }

    .saic__logo-shell {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 14px);
    padding: 5px 8px;
    overflow: hidden;
    background: #000 !important;
    border: 1px solid rgba(122, 160, 190, .12) !important;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(255,255,255,.02),
        0 0 0 1px rgba(0,0,0,.48);
    isolation: isolate;
}

.saic__item img {
        max-width: 220px !important;
        max-height: 56px !important;
    }
}

@media (max-width: 640px) {
    .saic {
        --saic-gap: 28px;
        --saic-rail-height: 84px;
    }

    .saic__intro {
        width: calc(100% - 22px);
        margin-bottom: 6px;
    }

    .saic__title {
        font-size: clamp(21px, 6.6vw, 29px) !important;
    }

    .saic__subtitle {
        width: min(440px, 100%);
        margin-top: 7px !important;
        font-size: 12.5px !important;
        line-height: 1.38 !important;
    }

    .saic__brand-divider {
        grid-template-columns: minmax(18px, 1fr) 4px auto 4px minmax(18px, 1fr);
        width: 96%;
        margin-top: 9px;
        column-gap: 8px;
    }

    .saic__brand-mark {
        width: 48px;
    }

    .saic__rail {
        width: calc(100% - 4px);
        border-radius: 0;
    }

    .saic__viewport {
        left: 4px;
        right: 4px;
        mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }

    .saic__item,
    .saic__item:hover,
    .saic__item:focus,
    .saic__item:active {
        width: clamp(164px, 48vw, 196px) !important;
        height: 70px !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .saic__logo-shell {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 14px);
    padding: 5px 8px;
    overflow: hidden;
    background: #000 !important;
    border: 1px solid rgba(122, 160, 190, .12) !important;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(255,255,255,.02),
        0 0 0 1px rgba(0,0,0,.48);
    isolation: isolate;
}

.saic__item img {
        max-width: 188px !important;
        max-height: 50px !important;
    }

    .saic__item.is-active {
        transform: translateZ(0) scale(1.02);
    }

    .saic__centre-glow {
        width: 220px;
    }

    .saic__rail::before,
    .saic__rail::after {
        display: none;
    }
}


@media (prefers-reduced-motion: reduce) {
    .saic *,
    .saic *::before,
    .saic *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V8 OVERRIDE
   Clean intro treatment: no mascot-divider row, calmer mixed-case
   heading, and typography aligned more closely with the homepage feel.
   ========================================================= */

.saic__intro {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto clamp(14px, 1.2vw, 20px);
}

.saic__title {
    color: #e6f1ff !important;
    font-size: clamp(29px, 2.65vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
}

.saic__title span {
    color: inherit !important;
}

.saic__title strong {
    color: #8dd7ff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 18px rgba(36, 191, 255, .10) !important;
}

.saic__subtitle {
    margin: 12px auto 0 !important;
    color: rgba(203, 222, 241, .82) !important;
    font-size: clamp(14px, 1.06vw, 17px) !important;
    line-height: 1.48 !important;
    letter-spacing: .002em !important;
}

.saic__brand-divider {
    display: none !important;
}

@media (max-width: 640px) {
    .saic__intro {
        width: calc(100% - 18px);
        margin-bottom: 10px;
    }

    .saic__title {
        font-size: clamp(24px, 7.6vw, 33px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.04em !important;
    }

    .saic__subtitle {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .saic__intro {
        width: calc(100% - 12px);
        margin-bottom: 12px;
    }

    .saic__title {
        font-size: clamp(22px, 8.6vw, 29px) !important;
    }
}

/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V5
   Shortcode: [simme_comparison_rail]

   V5 UPDATES
   - Topic buttons always above comparison panels.
   - All topic buttons visible at once on all devices.
   - Supplied ON/OFF topic icons used.
   - Supplied VS asset used and kept between the panels.
   - Active topic shows a small down-arrow indicator.
   ========================================================= */

.sscr,
.sscr *,
.sscr *::before,
.sscr *::after {
    box-sizing: border-box;
}

.sscr {
    --sscr-panel: rgba(3, 8, 16, .96);
    --sscr-panel-2: rgba(4, 10, 19, .94);
    --sscr-text: #dbe7ff;
    --sscr-muted: #96a9c8;
    --sscr-blue: #37b7ff;
    --sscr-blue-rgb: 55, 183, 255;
    --sscr-green: #7CFF3D;
    --sscr-green-rgb: 124, 255, 61;
    --sscr-red: #ff4337;
    --sscr-red-rgb: 255, 67, 55;
    position: relative;
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: clamp(18px, 2.2vw, 30px);
    color: var(--sscr-text);
    background:
        radial-gradient(circle at top center, rgba(var(--sscr-blue-rgb), .05), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)),
        transparent;
    font-family: inherit;
}

.sscr__intro {
    max-width: 900px;
    margin: 0 auto clamp(18px, 2vw, 24px);
    text-align: center;
}

.sscr__headline {
    margin: 0;
    color: #e1edfa;
    font-size: clamp(2rem, 4vw, 3.55rem);
    font-weight: 800;
    line-height: .98;
}

.sscr__summary {
    max-width: 860px;
    margin: 14px auto 0;
    color: #b5c9eb;
    font-size: clamp(1rem, 1.4vw, 1.28rem);
    line-height: 1.5;
}

.sscr__shell {
    display: block;
}

.sscr__rail,
.sscr__stage,
.sscr__principles {
    border: 1px solid rgba(104, 154, 205, .14);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(17, 28, 49, .30), rgba(5, 11, 21, .90)),
        var(--sscr-panel-2);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(0, 0, 0, .28),
        0 16px 48px rgba(0, 0, 0, .28);
}

.sscr__rail {
    margin-bottom: clamp(14px, 1.8vw, 20px);
    padding: 16px 16px 18px;
}

.sscr__rail-label {
    margin: 0 0 12px;
    color: #92a9cb;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sscr__rail-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, .9vw, 14px);
}

.sscr__topic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 88px;
    padding: 10px 8px 12px;
    border: 1px solid rgba(92, 129, 169, .20);
    border-radius: 18px;
    background: rgba(4, 9, 17, .72);
    color: #d8e5fb;
    text-align: center;
    font: inherit;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .28s ease, background .22s ease;
}

.sscr__topic:hover,
.sscr__topic:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(var(--sscr-blue-rgb), .34);
    box-shadow: 0 0 0 3px rgba(var(--sscr-blue-rgb), .08), 0 0 18px rgba(var(--sscr-blue-rgb), .10);
    outline: none;
}

.sscr__topic.is-active {
    border-color: rgba(var(--sscr-blue-rgb), .58);
    background: linear-gradient(180deg, rgba(18, 31, 59, .88), rgba(5, 10, 19, .88));
    box-shadow: 0 0 0 3px rgba(var(--sscr-blue-rgb), .10), 0 0 22px rgba(var(--sscr-blue-rgb), .12);
}

.sscr__topic::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 0;
    margin-left: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid rgba(159, 196, 255, .92);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease, transform .22s ease;
    filter: drop-shadow(0 0 10px rgba(var(--sscr-blue-rgb), .28));
}

.sscr__topic.is-active::after {
    opacity: 1;
    transform: translateY(0);
}

.sscr__topic-visual {
    position: relative;
    width: clamp(28px, 3vw, 44px);
    height: clamp(28px, 3vw, 44px);
    flex: 0 0 auto;
}

.sscr__topic-icon-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .2s ease;
}

.sscr__topic-icon-img--on {
    opacity: 0;
}

.sscr__topic.is-active .sscr__topic-icon-img--on {
    opacity: 1;
}

.sscr__topic.is-active .sscr__topic-icon-img--off {
    opacity: 0;
}

.sscr__topic-text {
    display: block;
    min-width: 0;
    font-size: clamp(.88rem, 1.2vw, 1.03rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.sscr__stage {
    position: relative;
    padding: clamp(18px, 2vw, 26px);
    overflow: hidden;
}

.sscr__panel[hidden] {
    display: none !important;
}

.sscr__panel-head {
    margin-bottom: clamp(18px, 2vw, 24px);
}

.sscr__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid rgba(100, 149, 219, .20);
    border-radius: 999px;
    background: rgba(4, 10, 18, .78);
    color: #b9d0f6;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sscr__panel-title {
    margin: 14px 0 8px;
    color: #f0f6ff;
    font-size: clamp(1.8rem, 2.8vw, 2.65rem);
    line-height: 1.02;
}

.sscr__panel-intro {
    margin: 0;
    color: #b8cae7;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.sscr__compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(72px, 8vw, 112px) minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.sscr__card {
    position: relative;
    min-width: 0;
    padding: clamp(22px, 2.2vw, 30px);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--sscr-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 38px rgba(0,0,0,.28);
    overflow: hidden;
}

.sscr__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sscr__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%);
}

.sscr__card--with {
    border-color: rgba(var(--sscr-green-rgb), .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.26), 0 0 26px rgba(var(--sscr-green-rgb), .08), 0 16px 38px rgba(0,0,0,.30);
}

.sscr__card--with::before {
    background:
        radial-gradient(circle at 8% 10%, rgba(var(--sscr-green-rgb), .18), transparent 28%),
        radial-gradient(circle at 18% 50%, rgba(var(--sscr-green-rgb), .10), transparent 42%),
        linear-gradient(90deg, rgba(var(--sscr-green-rgb), .15), rgba(var(--sscr-green-rgb), .06) 30%, rgba(var(--sscr-green-rgb), 0) 64%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.sscr__card--without {
    border-color: rgba(var(--sscr-red-rgb), .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.26), 0 0 26px rgba(var(--sscr-red-rgb), .08), 0 16px 38px rgba(0,0,0,.30);
}

.sscr__card--without::before {
    background:
        radial-gradient(circle at 8% 10%, rgba(var(--sscr-red-rgb), .18), transparent 28%),
        radial-gradient(circle at 18% 50%, rgba(var(--sscr-red-rgb), .10), transparent 42%),
        linear-gradient(90deg, rgba(var(--sscr-red-rgb), .15), rgba(var(--sscr-red-rgb), .06) 30%, rgba(var(--sscr-red-rgb), 0) 64%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.sscr__card-top,
.sscr__points {
    position: relative;
    z-index: 1;
}

.sscr__card-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}

.sscr__badge {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 96px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
}

.sscr__badge img {
    width: 100%;
    height: auto;
    display: block;
}

.sscr__label {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.sscr__card--with .sscr__label {
    background: rgba(var(--sscr-green-rgb), .11);
    color: #95ff6c;
    border: 1px solid rgba(var(--sscr-green-rgb), .18);
}

.sscr__card--without .sscr__label {
    background: rgba(var(--sscr-red-rgb), .11);
    color: #ff8a82;
    border: 1px solid rgba(var(--sscr-red-rgb), .18);
}

.sscr__card-title {
    margin: 0;
    color: #f4f7ff;
    font-size: clamp(1.28rem, 1.9vw, 1.78rem);
    line-height: 1.14;
}

.sscr__points {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sscr__points li {
    position: relative;
    padding-left: 28px;
    color: #d5e1f5;
    font-size: 1.03rem;
    line-height: 1.45;
}

.sscr__points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .02em;
    color: var(--sscr-green);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 10px rgba(var(--sscr-green-rgb), .18);
}

.sscr__points--negative li::before {
    content: "✕";
    color: var(--sscr-red);
    text-shadow: 0 0 10px rgba(var(--sscr-red-rgb), .18);
}

.sscr__vs {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    min-height: 100%;
    padding: 0 6px;
}

.sscr__vs img {
    display: block;
    width: clamp(72px, 7vw, 100px);
    height: auto;
    filter: drop-shadow(0 0 16px rgba(var(--sscr-blue-rgb), .14));
}

.sscr__principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(18px, 2vw, 28px);
    padding: 18px;
}

.sscr__principle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border-radius: 18px;
    background: rgba(4, 9, 17, .52);
}

.sscr__principle-mark {
    width: 14px;
    height: 14px;
    margin-top: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(var(--sscr-blue-rgb), .9) 40%, rgba(7,16,28,1) 72%);
    box-shadow: 0 0 14px rgba(var(--sscr-blue-rgb), .20);
}

.sscr__principle h4 {
    margin: 0 0 6px;
    color: #edf5ff;
    font-size: 1rem;
    font-weight: 700;
}

.sscr__principle p {
    margin: 0;
    color: #9fb2d0;
    font-size: .95rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .sscr__stage {
        padding: 18px;
    }

    .sscr__card {
        padding: 20px;
    }

    .sscr__card-top {
        grid-template-columns: 84px 1fr;
    }

    .sscr__badge {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
    }

    .sscr__card-title {
        font-size: clamp(1.18rem, 2vw, 1.55rem);
    }

    .sscr__points li {
        font-size: .98rem;
    }

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

@media (max-width: 860px) {
    .sscr {
        padding: 16px;
    }

    .sscr__rail {
        padding: 12px 12px 16px;
    }

    .sscr__rail-list {
        gap: 8px;
    }

    .sscr__topic {
        min-height: 82px;
        padding: 9px 6px 11px;
        border-radius: 16px;
    }

    .sscr__topic::after {
        bottom: -9px;
        margin-left: -9px;
        border-left-width: 9px;
        border-right-width: 9px;
        border-top-width: 9px;
    }

    .sscr__topic-text {
        font-size: .92rem;
    }

    .sscr__compare {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sscr__vs {
        order: 2;
        min-height: 0;
        padding: 0;
        margin: -2px 0;
    }

    .sscr__vs img {
        width: 84px;
    }

    .sscr__card--with {
        order: 1;
    }

    .sscr__card--without {
        order: 3;
    }

    .sscr__principles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sscr__headline {
        font-size: clamp(1.82rem, 11vw, 2.45rem);
    }

    .sscr__summary {
        font-size: 1rem;
    }

    .sscr__rail-label {
        margin-bottom: 10px;
        font-size: .7rem;
    }

    .sscr__topic {
        min-height: 74px;
        gap: 6px;
        padding: 8px 4px 10px;
        border-radius: 14px;
    }

    .sscr__topic-text {
        font-size: .84rem;
        line-height: 1.06;
    }

    .sscr__panel-title {
        font-size: 1.9rem;
    }

    .sscr__card-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sscr__badge {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .sscr__card-title {
        font-size: 1.18rem;
    }

    .sscr__points li {
        font-size: .96rem;
    }
}

@media (max-width: 480px) {
    .sscr__topic {
        min-height: 68px;
        padding: 7px 3px 10px;
        border-radius: 12px;
    }

    .sscr__topic-visual {
        width: 26px;
        height: 26px;
    }

    .sscr__topic-text {
        font-size: .76rem;
    }

    .sscr__panel-head {
        margin-bottom: 16px;
    }

    .sscr__panel-title {
        font-size: 1.72rem;
    }

    .sscr__panel-intro {
        font-size: .98rem;
    }

    .sscr__card {
        padding: 18px 16px;
        border-radius: 20px;
    }

    .sscr__label {
        font-size: .72rem;
    }
}

@media (max-width: 360px) {
    .sscr__topic {
        min-height: 64px;
    }

    .sscr__topic-visual {
        width: 22px;
        height: 22px;
    }

    .sscr__topic-text {
        font-size: .71rem;
    }

    .sscr__card-title {
        font-size: 1.08rem;
    }

    .sscr__points li {
        font-size: .92rem;
    }
}

@media (hover: none) {
    .sscr__topic:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sscr__topic,
    .sscr__topic-icon-img {
        transition: none !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V6 OVERRIDE
   - Prevents theme/button active states from filling topic buttons green.
   - Overlays the supplied VS asset across the panel edges without
     covering comparison content.
   - Matches the comparison heading/subheading sizing to the typography
     used above the AI compatibility runway.
   ========================================================= */

/* Match the compatibility-runway intro typography. */
.sscr__intro {
    max-width: 1120px !important;
    margin: 0 auto clamp(14px, 1.2vw, 20px) !important;
}

.sscr__headline {
    margin: 0 !important;
    color: #e1edfa !important;
    font-size: clamp(29px, 2.65vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
}

.sscr__summary {
    max-width: 760px !important;
    margin: 12px auto 0 !important;
    color: rgba(203, 222, 241, .82) !important;
    font-size: clamp(14px, 1.06vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.48 !important;
    letter-spacing: .002em !important;
}

/* Keep every topic button dark even if Themify/theme button rules use
   green backgrounds for hover/focus/active states. */
.sscr__topic,
.sscr__topic:hover,
.sscr__topic:focus,
.sscr__topic:focus-visible,
.sscr__topic:active {
    background-color: #050a12 !important;
    background-image: linear-gradient(180deg, rgba(13, 23, 40, .84), rgba(3, 7, 13, .96)) !important;
    color: #d8e5fb !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.sscr__topic.is-active,
.sscr__topic.is-active:hover,
.sscr__topic.is-active:focus,
.sscr__topic.is-active:focus-visible,
.sscr__topic.is-active:active {
    background-color: #07101e !important;
    background-image: linear-gradient(180deg, rgba(15, 32, 58, .96), rgba(4, 10, 19, .96)) !important;
    border-color: rgba(var(--sscr-blue-rgb), .60) !important;
    color: #eff7ff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 2px rgba(var(--sscr-blue-rgb), .08),
        0 0 20px rgba(var(--sscr-blue-rgb), .12) !important;
}

/* Desktop / landscape comparison: VS overlaps both inner panel edges.
   Extra inner-side padding protects text and icons from the overlap. */
@media (min-width: 861px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: clamp(18px, 1.8vw, 26px) !important;
        align-items: stretch !important;
    }

    .sscr__card--with {
        padding-right: clamp(52px, 5vw, 70px) !important;
    }

    .sscr__card--without {
        padding-left: clamp(52px, 5vw, 70px) !important;
    }

    .sscr__vs {
        position: absolute !important;
        z-index: 6 !important;
        left: 50% !important;
        top: 50% !important;
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        width: clamp(80px, 7vw, 102px) !important;
        height: auto !important;
    }
}

/* Tablet/phone: VS straddles the bottom edge of With and the top edge
   of Without. Extra vertical padding keeps it away from card content. */
@media (max-width: 860px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    .sscr__card--with {
        order: 1 !important;
        padding-bottom: 54px !important;
    }

    .sscr__vs {
        position: relative !important;
        z-index: 6 !important;
        order: 2 !important;
        left: auto !important;
        top: auto !important;
        width: max-content !important;
        min-height: 0 !important;
        margin: -38px auto !important;
        padding: 0 !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        width: 82px !important;
        height: auto !important;
    }

    .sscr__card--without {
        order: 3 !important;
        padding-top: 54px !important;
    }
}

@media (max-width: 640px) {
    .sscr__headline {
        font-size: clamp(24px, 7.6vw, 33px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.04em !important;
    }

    .sscr__summary {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .sscr__card--with {
        padding-bottom: 50px !important;
    }

    .sscr__card--without {
        padding-top: 50px !important;
    }

    .sscr__vs {
        margin: -34px auto !important;
    }

    .sscr__vs img {
        width: 74px !important;
    }
}

@media (max-width: 480px) {
    .sscr__headline {
        font-size: clamp(22px, 8.6vw, 29px) !important;
    }
}



/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V7 SPACING POLISH
   Tightens the vertical rhythm without making the module cramped.
   ========================================================= */

.sscr__intro {
    margin-bottom: clamp(10px, .9vw, 14px) !important;
}

.sscr__rail {
    margin-bottom: clamp(8px, .8vw, 11px) !important;
    padding: 10px 12px 12px !important;
}

.sscr__rail-label {
    margin-bottom: 7px !important;
    font-size: .72rem !important;
}

.sscr__rail-list {
    gap: clamp(6px, .65vw, 10px) !important;
}

.sscr__topic,
.sscr__topic:hover,
.sscr__topic:focus,
.sscr__topic:focus-visible,
.sscr__topic:active {
    min-height: 66px !important;
    gap: 5px !important;
    padding: 7px 6px 8px !important;
    border-radius: 15px !important;
}

.sscr__topic-visual {
    width: clamp(25px, 2.35vw, 34px) !important;
    height: clamp(25px, 2.35vw, 34px) !important;
}

.sscr__topic-text {
    font-size: clamp(.82rem, 1vw, .96rem) !important;
    line-height: 1.06 !important;
}

.sscr__topic::after {
    bottom: -8px !important;
    margin-left: -8px !important;
    border-left-width: 8px !important;
    border-right-width: 8px !important;
    border-top-width: 8px !important;
}

.sscr__stage {
    padding: clamp(13px, 1.3vw, 17px) !important;
}

.sscr__panel-head {
    margin-bottom: clamp(12px, 1.2vw, 16px) !important;
}

.sscr__chip {
    padding: 6px 11px !important;
    font-size: .72rem !important;
}

.sscr__panel-title {
    margin-top: 9px !important;
    margin-bottom: 5px !important;
}

.sscr__panel-intro {
    margin-bottom: 0 !important;
}

@media (max-width: 860px) {
    .sscr__rail {
        padding: 9px 9px 11px !important;
        margin-bottom: 8px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 60px !important;
        padding: 6px 4px 7px !important;
        border-radius: 13px !important;
    }

    .sscr__topic-visual {
        width: 26px !important;
        height: 26px !important;
    }

    .sscr__topic-text {
        font-size: .80rem !important;
    }

    .sscr__stage {
        padding: 12px !important;
    }

    .sscr__panel-head {
        margin-bottom: 12px !important;
    }
}

@media (max-width: 640px) {
    .sscr__rail-label {
        margin-bottom: 6px !important;
        font-size: .66rem !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 56px !important;
        gap: 4px !important;
        padding: 5px 3px 7px !important;
        border-radius: 12px !important;
    }

    .sscr__topic-visual {
        width: 23px !important;
        height: 23px !important;
    }

    .sscr__topic-text {
        font-size: .74rem !important;
    }

    .sscr__stage {
        padding: 11px !important;
    }
}

@media (max-width: 420px) {
    .sscr__rail {
        padding: 8px 7px 10px !important;
    }

    .sscr__rail-list {
        gap: 5px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 52px !important;
        padding: 4px 2px 6px !important;
        border-radius: 11px !important;
    }

    .sscr__topic-visual {
        width: 21px !important;
        height: 21px !important;
    }

    .sscr__topic-text {
        font-size: .68rem !important;
        letter-spacing: -.015em !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V8 TIGHT STRUCTURE
   - Removes the redundant topic repeat area above the cards.
   - Keeps a deliberate VS gap between the panels at every width.
   - Removes inherited/fixed empty height beneath the cards.
   - Pulls the comparison cards closer to the topic buttons.
   ========================================================= */

.sscr__rail {
    margin-bottom: 6px !important;
}

.sscr__stage {
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(10px, 1vw, 14px) !important;
    overflow: visible !important;
}

.sscr__panel,
.sscr__panel.is-active {
    min-height: 0 !important;
    height: auto !important;
}

.sscr__panel-head,
.sscr__chip,
.sscr__panel-title,
.sscr__panel-intro {
    display: none !important;
}

.sscr__compare {
    grid-template-columns: minmax(0, 1fr) clamp(38px, 4.2vw, 54px) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-height: 0 !important;
}

.sscr__vs {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.sscr__vs img {
    width: clamp(76px, 6.5vw, 94px) !important;
    max-width: none !important;
}

.sscr__principles {
    margin-top: 10px !important;
}

@media (max-width: 860px) {
    .sscr__rail {
        margin-bottom: 6px !important;
    }

    .sscr__stage {
        padding: 10px !important;
    }

    .sscr__compare {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 34px auto !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with {
        grid-row: 1 !important;
        padding-bottom: 30px !important;
    }

    .sscr__vs {
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: stretch !important;
        margin: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        z-index: 5 !important;
    }

    .sscr__vs img {
        width: 80px !important;
    }

    .sscr__card--without {
        grid-row: 3 !important;
        padding-top: 30px !important;
    }

    .sscr__principles {
        margin-top: 8px !important;
    }
}

@media (max-width: 640px) {
    .sscr__stage {
        padding: 8px !important;
    }

    .sscr__compare {
        grid-template-rows: auto 32px auto !important;
    }

    .sscr__vs {
        height: 32px !important;
        min-height: 32px !important;
    }

    .sscr__vs img {
        width: 74px !important;
    }

    .sscr__card--with {
        padding-bottom: 28px !important;
    }

    .sscr__card--without {
        padding-top: 28px !important;
    }
}

@media (max-width: 420px) {
    .sscr__stage {
        padding: 7px !important;
    }

    .sscr__compare {
        grid-template-rows: auto 30px auto !important;
    }

    .sscr__vs {
        height: 30px !important;
        min-height: 30px !important;
    }

    .sscr__vs img {
        width: 70px !important;
    }
}



/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V9 GRID FIX
   Corrects a legacy desktop absolute-position rule that pulled the
   VS asset out of the 3-column grid and caused the red card to collapse
   into the narrow centre track.
   ========================================================= */

@media (min-width: 861px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(44px, 4.6vw, 60px) minmax(0, 1fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with {
        grid-column: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .sscr__vs {
        grid-column: 2 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: relative !important;
        z-index: 7 !important;
        flex: 0 0 auto !important;
        width: clamp(78px, 6.3vw, 96px) !important;
        max-width: none !important;
        height: auto !important;
    }

    .sscr__card--without {
        grid-column: 3 !important;
        width: auto !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V10 MOBILE VS CENTRING
   Forces the supplied VS asset to remain exactly centred between the
   stacked comparison panels on tablet and mobile layouts.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__vs {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        justify-self: stretch !important;
        align-self: center !important;
        display: grid !important;
        place-items: center !important;
    }

    .sscr__vs img {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V11 MOBILE VS OVERLAP
   Makes the supplied VS asset sit over the lower edge of the green card
   and the upper edge of the red card on tablet/mobile while staying
   centred and preserving a clean visible gap between the two panels.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__compare {
        row-gap: 0 !important;
    }

    .sscr__card--with {
        margin-bottom: 46px !important;
    }

    .sscr__vs {
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: -44px 0 -44px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: relative !important;
        z-index: 9 !important;
        width: clamp(82px, 18vw, 108px) !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .sscr__card--without {
        margin-top: 46px !important;
    }
}

@media (max-width: 640px) {
    .sscr__card--with {
        margin-bottom: 42px !important;
    }

    .sscr__vs {
        margin: -40px 0 -40px !important;
    }

    .sscr__vs img {
        width: clamp(78px, 24vw, 98px) !important;
    }

    .sscr__card--without {
        margin-top: 42px !important;
    }
}

@media (max-width: 480px) {
    .sscr__card--with {
        margin-bottom: 38px !important;
    }

    .sscr__vs {
        margin: -36px 0 -36px !important;
    }

    .sscr__vs img {
        width: clamp(74px, 28vw, 92px) !important;
    }

    .sscr__card--without {
        margin-top: 38px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V12 MOBILE VS BALANCE
   Reduces the mobile/tablet VS size and tightens the gap so the
   supplied VS asset overlaps both panel edges without opening up a
   large empty channel between the cards.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__card--with {
        margin-bottom: 22px !important;
    }

    .sscr__vs {
        margin: -22px 0 -22px !important;
    }

    .sscr__vs img {
        width: clamp(68px, 14vw, 84px) !important;
    }

    .sscr__card--without {
        margin-top: 22px !important;
    }
}

@media (max-width: 640px) {
    .sscr__card--with {
        margin-bottom: 18px !important;
    }

    .sscr__vs {
        margin: -18px 0 -18px !important;
    }

    .sscr__vs img {
        width: clamp(66px, 20vw, 80px) !important;
    }

    .sscr__card--without {
        margin-top: 18px !important;
    }
}

@media (max-width: 480px) {
    .sscr__card--with {
        margin-bottom: 14px !important;
    }

    .sscr__vs {
        margin: -14px 0 -14px !important;
    }

    .sscr__vs img {
        width: clamp(62px, 24vw, 74px) !important;
    }

    .sscr__card--without {
        margin-top: 14px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V13 MOBILE VS LOCK
   Keeps the stacked cards close together and places a smaller VS asset
   directly across the shared gap between their edges.
   ========================================================= */

@media (max-width: 860px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 0 !important;
    }

    .sscr__card--with {
        margin: 0 0 8px !important;
    }

    .sscr__vs {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: clamp(64px, 12vw, 78px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
    }

    .sscr__card--without {
        margin: 8px 0 0 !important;
    }
}

@media (max-width: 640px) {
    .sscr__card--with {
        margin-bottom: 7px !important;
    }

    .sscr__card--without {
        margin-top: 7px !important;
    }

    .sscr__vs img {
        width: clamp(62px, 17vw, 74px) !important;
    }
}

@media (max-width: 480px) {
    .sscr__card--with {
        margin-bottom: 6px !important;
    }

    .sscr__card--without {
        margin-top: 6px !important;
    }

    .sscr__vs img {
        width: clamp(60px, 20vw, 70px) !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V9
   Gentle neon glow for the main heading text.
   ========================================================= */

.saic__title {
    text-shadow:
        0 0 8px rgba(160, 218, 255, .10),
        0 0 18px rgba(36, 191, 255, .06) !important;
}

.saic__title span {
    text-shadow:
        0 0 8px rgba(160, 218, 255, .10),
        0 0 18px rgba(36, 191, 255, .06) !important;
}

.saic__title strong {
    text-shadow:
        0 0 10px rgba(77, 203, 255, .28),
        0 0 22px rgba(36, 191, 255, .18),
        0 0 34px rgba(36, 191, 255, .08) !important;
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V10
   Stronger visible neon glow for the heading highlight.
   ========================================================= */

.saic__title {
    color: #eef7ff !important;
    text-shadow:
        0 0 6px rgba(255, 255, 255, .10),
        0 0 14px rgba(120, 205, 255, .10) !important;
}

.saic__title span {
    color: #eef7ff !important;
    text-shadow:
        0 0 6px rgba(255, 255, 255, .10),
        0 0 14px rgba(120, 205, 255, .10) !important;
}

.saic__title strong {
    color: #8fd9ff !important;
    text-shadow:
        0 0 3px rgba(255,255,255,.72),
        0 0 10px rgba(88, 202, 255, .90),
        0 0 20px rgba(36, 191, 255, .78),
        0 0 36px rgba(36, 191, 255, .52),
        0 0 58px rgba(36, 191, 255, .26) !important;
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V14 PRINCIPLE CARDS
   Rebuilds the section under the comparison panels to match the
   supplied visual direction using the provided principle icon assets.
   ========================================================= */

.sscr__principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.1vw, 26px);
    margin-top: clamp(18px, 2vw, 28px);
    padding: 0;
}

.sscr__principle {
    position: relative;
    display: grid;
    grid-template-columns: clamp(128px, 18vw, 172px) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 28px);
    align-items: center;
    min-height: clamp(180px, 20vw, 240px);
    padding: clamp(20px, 2.1vw, 28px);
    border-radius: 26px;
    border: 1px solid rgba(122, 177, 255, .34);
    background:
        radial-gradient(circle at 85% 15%, rgba(61, 178, 255, .16), rgba(61, 178, 255, 0) 15%),
        linear-gradient(180deg, rgba(8, 16, 31, .88), rgba(4, 10, 22, .92));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 0 1px rgba(11, 28, 51, .35),
        0 18px 38px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.sscr__principle::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 50%, rgba(35, 156, 255, .10), transparent 32%),
        linear-gradient(90deg, rgba(31, 115, 255, .08), rgba(31, 115, 255, 0) 38%);
    pointer-events: none;
}

.sscr__principle-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.sscr__principle-art img {
    display: block;
    width: min(100%, 138px);
    height: auto;
    filter: drop-shadow(0 0 18px rgba(var(--sscr-blue-rgb), .16));
}

.sscr__principle-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-right: clamp(8px, 1vw, 16px);
}

.sscr__principle-orb {
    position: absolute;
    top: 2px;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(73, 182, 255, .98) 45%, rgba(22, 82, 255, .96) 72%, rgba(11, 18, 32, .98) 100%);
    box-shadow: 0 0 14px rgba(var(--sscr-blue-rgb), .44);
}

.sscr__principle h4 {
    margin: 0;
    color: #f5f8ff;
    font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.05rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.035em;
}

.sscr__principle-rule {
    display: block;
    width: 64px;
    height: 5px;
    margin: 16px 0 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(42, 150, 255, .96), rgba(72, 190, 255, .76));
    box-shadow: 0 0 12px rgba(var(--sscr-blue-rgb), .24);
}

.sscr__principle p {
    margin: 0;
    color: #b7c5dd;
    font-size: clamp(1rem, .92rem + .42vw, 1.18rem);
    line-height: 1.42;
    letter-spacing: -.01em;
}

.sscr__principle-mark {
    display: none !important;
}

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: 1fr;
    }

    .sscr__principle {
        grid-template-columns: 132px minmax(0, 1fr);
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .sscr__principle {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
        border-radius: 22px;
    }

    .sscr__principle-art img {
        width: min(100%, 100px);
    }

    .sscr__principle-orb {
        width: 18px;
        height: 18px;
    }

    .sscr__principle-rule {
        width: 54px;
        height: 4px;
        margin: 12px 0 14px;
    }
}

@media (max-width: 520px) {
    .sscr__principle {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .sscr__principle-art img {
        width: min(100%, 82px);
    }

    .sscr__principle h4 {
        font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
    }

    .sscr__principle p {
        font-size: .98rem;
        line-height: 1.38;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V15 PRINCIPLE CARDS SCALE
   Reduces the lower principle-card section on all screen sizes.
   ========================================================= */

.sscr__principles {
    gap: clamp(14px, 1.6vw, 20px);
    margin-top: clamp(14px, 1.6vw, 22px);
}

.sscr__principle {
    grid-template-columns: clamp(96px, 14vw, 132px) minmax(0, 1fr);
    gap: clamp(14px, 1.5vw, 20px);
    min-height: clamp(140px, 16vw, 190px);
    padding: clamp(16px, 1.65vw, 22px);
    border-radius: 22px;
}

.sscr__principle-art img {
    width: min(100%, 112px);
}

.sscr__principle-content {
    padding-right: clamp(4px, .6vw, 10px);
}

.sscr__principle-orb {
    top: 0;
    right: 2px;
    width: 18px;
    height: 18px;
    box-shadow: 0 0 10px rgba(var(--sscr-blue-rgb), .34);
}

.sscr__principle h4 {
    font-size: clamp(1.28rem, 1rem + 1vw, 1.72rem);
    line-height: 1.04;
}

.sscr__principle-rule {
    width: 52px;
    height: 4px;
    margin: 10px 0 12px;
}

.sscr__principle p {
    font-size: clamp(.92rem, .86rem + .26vw, 1.04rem);
    line-height: 1.36;
}

@media (max-width: 1100px) {
    .sscr__principle {
        grid-template-columns: 108px minmax(0, 1fr);
        min-height: 0;
        padding: 18px;
    }

    .sscr__principle-art img {
        width: min(100%, 94px);
    }
}

@media (max-width: 760px) {
    .sscr__principle {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
        border-radius: 20px;
    }

    .sscr__principle-art img {
        width: min(100%, 82px);
    }

    .sscr__principle-orb {
        width: 16px;
        height: 16px;
    }

    .sscr__principle h4 {
        font-size: clamp(1.18rem, 1rem + .7vw, 1.45rem);
    }

    .sscr__principle-rule {
        width: 46px;
        margin: 9px 0 11px;
    }

    .sscr__principle p {
        font-size: .92rem;
        line-height: 1.34;
    }
}

@media (max-width: 520px) {
    .sscr__principles {
        gap: 12px;
    }

    .sscr__principle {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .sscr__principle-art img {
        width: min(100%, 70px);
    }

    .sscr__principle h4 {
        font-size: 1.12rem;
    }

    .sscr__principle p {
        font-size: .88rem;
        line-height: 1.32;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V16 PRINCIPLE CARDS COMPACT
   Makes the lower principle cards noticeably smaller and tighter
   on all screens so they support the page instead of dominating it.
   ========================================================= */

.sscr__principles {
    gap: clamp(10px, 1.15vw, 14px) !important;
    margin-top: clamp(10px, 1.15vw, 16px) !important;
}

.sscr__principle {
    grid-template-columns: clamp(74px, 10vw, 102px) minmax(0, 1fr) !important;
    gap: clamp(10px, 1.1vw, 14px) !important;
    min-height: clamp(108px, 12vw, 142px) !important;
    padding: clamp(12px, 1.2vw, 16px) !important;
    border-radius: 18px !important;
}

.sscr__principle-art img {
    width: min(100%, 84px) !important;
}

.sscr__principle-content {
    padding-right: 4px !important;
}

.sscr__principle-orb {
    top: 0 !important;
    right: 0 !important;
    width: 14px !important;
    height: 14px !important;
    box-shadow: 0 0 8px rgba(var(--sscr-blue-rgb), .26) !important;
}

.sscr__principle h4 {
    font-size: clamp(1rem, .88rem + .65vw, 1.28rem) !important;
    line-height: 1.04 !important;
}

.sscr__principle-rule {
    width: 40px !important;
    height: 3px !important;
    margin: 8px 0 10px !important;
}

.sscr__principle p {
    font-size: clamp(.82rem, .78rem + .16vw, .92rem) !important;
    line-height: 1.28 !important;
}

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: 1fr !important;
    }

    .sscr__principle {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 72px) !important;
    }
}

@media (max-width: 760px) {
    .sscr__principle {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 58px) !important;
    }

    .sscr__principle-orb {
        width: 12px !important;
        height: 12px !important;
    }

    .sscr__principle h4 {
        font-size: 1rem !important;
    }

    .sscr__principle-rule {
        width: 34px !important;
        margin: 7px 0 8px !important;
    }

    .sscr__principle p {
        font-size: .82rem !important;
        line-height: 1.24 !important;
    }
}

@media (max-width: 520px) {
    .sscr__principles {
        gap: 10px !important;
    }

    .sscr__principle {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 11px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 50px) !important;
    }

    .sscr__principle h4 {
        font-size: .95rem !important;
    }

    .sscr__principle p {
        font-size: .78rem !important;
        line-height: 1.22 !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V17 PRINCIPLE CARDS WIDTH
   Removes the top-right orb and reduces unused right-side space
   by constraining one-column principle cards on medium layouts.
   ========================================================= */

.sscr__principle-orb {
    display: none !important;
}

/* Keep the desktop 2-up layout clean, but when the cards stack
   into a single column, stop them stretching so wide. */
@media (max-width: 1100px) {
    .sscr__principles {
        justify-items: center;
    }

    .sscr__principle {
        width: min(100%, 760px) !important;
        max-width: 760px !important;
        justify-self: center;
    }
}

@media (max-width: 760px) {
    .sscr__principles {
        justify-items: stretch;
    }

    .sscr__principle {
        width: 100% !important;
        max-width: none !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V11
   Removes the subtitle beneath the heading for a cleaner intro.
   ========================================================= */

.saic__subtitle {
    display: none !important;
}

.saic__intro {
    margin: 0 auto clamp(10px, 1vw, 14px) !important;
}

@media (max-width: 640px) {
    .saic__intro {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 480px) {
    .saic__intro {
        margin-bottom: 8px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V18 PRINCIPLE GRID
   Keep the principle cards in a 2 x 2 grid until the screen is
   genuinely too small, then collapse to a single column.
   ========================================================= */

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    .sscr__principle {
        width: 100% !important;
        max-width: none !important;
        min-height: clamp(102px, 15vw, 132px) !important;
        padding: 13px !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .sscr__principle-art img {
        width: min(100%, 62px) !important;
    }

    .sscr__principle h4 {
        font-size: clamp(.96rem, .9rem + .28vw, 1.12rem) !important;
    }

    .sscr__principle-rule {
        width: 34px !important;
        margin: 7px 0 8px !important;
    }

    .sscr__principle p {
        font-size: clamp(.76rem, .73rem + .14vw, .86rem) !important;
        line-height: 1.22 !important;
    }
}

@media (max-width: 760px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sscr__principle {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        min-height: 0 !important;
    }

    .sscr__principle-art img {
        width: min(100%, 52px) !important;
    }

    .sscr__principle h4 {
        font-size: .93rem !important;
    }

    .sscr__principle p {
        font-size: .76rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 620px) {
    .sscr__principles {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }

    .sscr__principle {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
    }

    .sscr__principle-art img {
        width: min(100%, 50px) !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V19 PRINCIPLES OPEN LAYOUT
   Removes the enclosing panels from the four principle items so the
   icons and text sit directly on the page in a lighter 2 x 2 layout.
   ========================================================= */

.sscr__principles {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: clamp(18px, 2.2vw, 30px) !important;
}

.sscr__principle {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding: clamp(8px, .8vw, 12px) !important;
}

.sscr__principle::before,
.sscr__principle::after {
    display: none !important;
    content: none !important;
}

.sscr__principle-art img {
    filter: drop-shadow(0 0 14px rgba(var(--sscr-blue-rgb), .16)) !important;
}

.sscr__principle-content {
    padding-right: 0 !important;
}

@media (max-width: 1100px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .sscr__principle {
        width: 100% !important;
        max-width: none !important;
        padding: 8px !important;
    }
}

@media (max-width: 760px) {
    .sscr__principles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .sscr__principle {
        padding: 6px !important;
    }
}

@media (max-width: 620px) {
    .sscr__principles {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .sscr__principle {
        padding: 4px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — AI COMPATIBILITY RUNWAY V12
   Removes the heading area completely and tightens the runway vertically.
   ========================================================= */

.saic {
    --saic-rail-height: clamp(82px, 6.7vw, 98px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Safety only: V12 PHP no longer outputs this block. */
.saic__intro,
.saic__title,
.saic__subtitle,
.saic__brand-divider {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

.saic__rail {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 640px) {
    .saic {
        --saic-rail-height: 78px !important;
    }
}

@media (max-width: 480px) {
    .saic {
        --saic-rail-height: 74px !important;
    }
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V21 STACKING SAFETY
   Keeps the entire comparison module beneath the floating site header
   while preserving all internal card / mascot / VS overlap effects.
   ========================================================= */

.sscr {
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate !important;
}

.sscr__shell,
.sscr__rail,
.sscr__stage,
.sscr__panel,
.sscr__compare {
    position: relative;
    z-index: 0 !important;
}

.sscr__card {
    position: relative !important;
    z-index: 1 !important;
}

.sscr__card-top,
.sscr__card-copy,
.sscr__points,
.sscr__badge {
    position: relative !important;
    z-index: 2 !important;
}

.sscr__vs,
.sscr__vs img {
    z-index: 3 !important;
}

/* Prevent any old high z-index values from escaping the component's
   own stacking order on desktop, tablet or mobile. */
.sscr [class^="sscr__"],
.sscr [class*=" sscr__"] {
    --sscr-local-stack: 1;
}


/* ========================================================================
   SIMME — SYMSOUL NODE ATLAS V3
   Scope: [symsoul_node_atlas]
   WordPress / Themify Ultra safe
   ======================================================================== */

.simme-na {
    --sna-bg: #f4f6fc;
    --sna-bg-deep: #eef1f9;
    --sna-surface: #ffffff;
    --sna-surface-soft: #f8f9fd;
    --sna-surface-strong: #edf0f8;
    --sna-text: #151b2a;
    --sna-text-soft: #5b6680;
    --sna-muted: #8490aa;
    --sna-border: rgba(57, 67, 98, .14);
    --sna-border-strong: rgba(36, 191, 255, .34);
    --sna-accent: #247cff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .105);
    --sna-accent-softer: rgba(36, 124, 255, .055);
    --sna-icon-bg: #363a43;
    --sna-shadow: 0 24px 70px rgba(32, 39, 69, .09);
    --sna-shadow-small: 0 12px 30px rgba(32, 39, 69, .075);

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    color: var(--sna-text);
    font-family: inherit;
    position: relative;
    isolation: isolate;
}

.simme-na[data-theme="dark"] {
    --sna-bg: #060a12;
    --sna-bg-deep: #09101b;
    --sna-surface: #0d1420;
    --sna-surface-soft: #101927;
    --sna-surface-strong: #162132;
    --sna-text: #eef3ff;
    --sna-text-soft: #b7c1d7;
    --sna-muted: #8995ae;
    --sna-border: rgba(185, 198, 227, .14);
    --sna-border-strong: rgba(88, 202, 255, .44);
    --sna-accent: #8fd9ff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .12);
    --sna-accent-softer: rgba(88, 202, 255, .065);
    --sna-icon-bg: #333841;
    --sna-shadow: 0 24px 80px rgba(0, 0, 0, .25);
    --sna-shadow-small: 0 12px 34px rgba(0, 0, 0, .23);
}

.simme-na *,
.simme-na *::before,
.simme-na *::after {
    box-sizing: border-box;
}

.simme-na a,
.simme-na button,
.simme-na input {
    font: inherit;
}

.simme-na button,
.simme-na input {
    color: inherit;
}

.simme-na h1,
.simme-na h2,
.simme-na h3,
.simme-na p,
.simme-na dl,
.simme-na dd {
    margin-top: 0;
}

.simme-na__shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--sna-border);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 0%, var(--sna-accent-softer) 0, transparent 30%),
        radial-gradient(circle at 88% 2%, var(--sna-accent-soft) 0, transparent 26%),
        var(--sna-bg);
    box-shadow: var(--sna-shadow);
    transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

/* ------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */

.simme-na__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
    gap: clamp(26px, 4vw, 58px);
    align-items: start;
    padding: clamp(34px, 4.5vw, 64px);
    border-bottom: 1px solid var(--sna-border);
    background: linear-gradient(135deg, transparent 0 58%, var(--sna-accent-softer) 100%);
}

.simme-na__hero::before {
    content: "";
    position: absolute;
    left: clamp(34px, 4.5vw, 64px);
    right: clamp(34px, 4.5vw, 64px);
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sna-accent), var(--sna-accent-2), transparent);
    opacity: .65;
}

.simme-na__hero-copy {
    max-width: 880px;
}

.simme-na__eyebrow {
    display: inline-block;
    color: var(--sna-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.simme-na h1 {
    color: var(--sna-text);
    font-size: clamp(38px, 5.1vw, 68px);
    line-height: 1.01;
    font-weight: 500;
    letter-spacing: -.04em;
    margin-bottom: 18px;
}

.simme-na h2 {
    color: var(--sna-text);
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.1;
    font-weight: 560;
    letter-spacing: -.03em;
}

.simme-na h3 {
    color: var(--sna-text);
    font-weight: 650;
}

.simme-na__lead {
    max-width: 820px;
    color: var(--sna-text);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.52;
    margin-bottom: 12px;
}

.simme-na__support {
    max-width: 760px;
    color: var(--sna-text-soft);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}

.simme-na__hero-side {
    display: grid;
    gap: 12px;
    width: 100%;
}

.simme-na__count {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid var(--sna-border-strong);
    border-radius: 20px;
    background: color-mix(in srgb, var(--sna-surface) 94%, var(--sna-accent) 6%);
    box-shadow: var(--sna-shadow-small);
}

.simme-na__count::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border: 1px solid var(--sna-border-strong);
    border-radius: 50%;
    right: -34px;
    top: -38px;
    opacity: .55;
}

.simme-na__count strong {
    color: var(--sna-text);
    font-size: 48px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;
}

.simme-na__count span {
    color: var(--sna-text);
    font-size: 15px;
    font-weight: 700;
}

.simme-na__count small {
    color: var(--sna-text-soft);
    font-size: 12px;
}


.simme-na__theme-toggle {
    --thumb-size: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 56px;
    padding: 4px;
    border: 1px solid var(--sna-border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sna-surface) 88%, var(--sna-accent) 12%);
    color: var(--sna-text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--sna-shadow-small);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.simme-na__theme-toggle:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--sna-accent) 72%, white 28%);
    box-shadow: 0 16px 34px rgba(24, 31, 56, .10), inset 0 1px 0 rgba(255,255,255,.08);
}

.simme-na__theme-toggle:focus-visible {
    outline: 2px solid var(--sna-accent);
    outline-offset: 2px;
}

.simme-na__theme-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
}

.simme-na__theme-option {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    color: var(--sna-text-soft);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: color .18s ease, opacity .18s ease;
}

.simme-na__theme-thumb {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    border: 1px solid var(--sna-border-strong);
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--sna-surface-soft) 76%, var(--sna-accent) 24%), color-mix(in srgb, var(--sna-surface) 80%, var(--sna-accent-2) 20%));
    box-shadow: 0 8px 22px rgba(18, 24, 46, .16);
    transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    transform: translateX(calc(100% - 0px));
}

.simme-na[data-theme="dark"] .simme-na__theme-option--dark,
.simme-na[data-theme="light"] .simme-na__theme-option--light {
    color: var(--sna-text);
}

.simme-na__theme-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.simme-na__theme-icon--sun::before,
.simme-na__theme-icon--moon::before,
.simme-na__theme-icon--moon::after {
    content: "";
    position: absolute;
}

.simme-na__theme-icon--sun::before {
    inset: 3px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 -7px 0 -6px currentColor, 0 7px 0 -6px currentColor, 7px 0 0 -6px currentColor, -7px 0 0 -6px currentColor, 5px 5px 0 -6px currentColor, -5px 5px 0 -6px currentColor, 5px -5px 0 -6px currentColor, -5px -5px 0 -6px currentColor;
}

.simme-na__theme-icon--moon::before {
    inset: 1px;
    border-radius: 50%;
    background: currentColor;
}

.simme-na__theme-icon--moon::after {
    top: 1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sna-surface);
}

/* ------------------------------------------------------------------------
   SEARCH + FILTERS
   ------------------------------------------------------------------------ */

.simme-na__controls {
    padding: 24px clamp(28px, 4vw, 58px) 19px;
    border-bottom: 1px solid var(--sna-border);
    background: color-mix(in srgb, var(--sna-surface-soft) 88%, transparent);
}

.simme-na__search-label {
    display: block;
    margin-bottom: 8px;
    color: var(--sna-text);
    font-size: 13px;
    font-weight: 700;
}

.simme-na__search {
    width: 100% !important;
    min-height: 54px;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 15px !important;
    background: var(--sna-surface) !important;
    color: var(--sna-text) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset !important;
    outline: none;
}

.simme-na__search::placeholder {
    color: var(--sna-muted);
    opacity: 1;
}

.simme-na__search:focus {
    border-color: var(--sna-accent) !important;
    box-shadow: 0 0 0 4px var(--sna-accent-soft) !important;
}

.simme-na__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.simme-na__filter {
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid var(--sna-border);
    border-radius: 999px;
    background: var(--sna-surface);
    color: var(--sna-text-soft);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.simme-na__filter:hover {
    transform: translateY(-1px);
    border-color: var(--sna-border-strong);
    color: var(--sna-text);
}

.simme-na__filter.is-active {
    border-color: var(--sna-accent);
    background: var(--sna-accent-soft);
    color: var(--sna-text);
    box-shadow: 0 0 0 1px var(--sna-accent-soft) inset;
}

.simme-na__results {
    margin-top: 11px;
    color: var(--sna-muted);
    font-size: 12px;
}

/* ------------------------------------------------------------------------
   WORKSPACE — FULL WIDTH, NO LARGE-SCREEN RIGHT DEAD SPACE
   ------------------------------------------------------------------------ */

.simme-na__workspace {
    width: 100% !important;
    max-width: none !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 31%);
    gap: clamp(18px, 2vw, 28px);
    align-items: start;
    padding: clamp(28px, 3.6vw, 54px);
}

.simme-na__directory,
.simme-na__detail {
    min-width: 0;
    width: 100%;
}

.simme-na__directory-heading {
    display: grid;
    grid-template-columns: minmax(250px, .75fr) minmax(320px, 1.25fr);
    gap: 28px;
    align-items: end;
    margin-bottom: 22px;
}

.simme-na__directory-heading h2 {
    margin-bottom: 0;
}

.simme-na__directory-heading p {
    color: var(--sna-text-soft);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 3px;
}

/* ------------------------------------------------------------------------
   NODE GRID
   ------------------------------------------------------------------------ */

.simme-na__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.simme-na__node {
    position: relative;
    min-width: 0;
    min-height: 235px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 15px;
    overflow: hidden;
    border: 1px solid var(--sna-border);
    border-radius: 18px;
    background: var(--sna-surface);
    color: var(--sna-text) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.simme-na__node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--sna-accent), var(--sna-accent-2));
    opacity: 0;
    transition: opacity .2s ease;
}

.simme-na__node:hover,
.simme-na__node:focus-visible,
.simme-na__node.is-selected {
    transform: translateY(-3px);
    border-color: var(--sna-border-strong);
    background: color-mix(in srgb, var(--sna-surface) 95%, var(--sna-accent) 5%);
    box-shadow: var(--sna-shadow-small);
}

.simme-na__node:hover::before,
.simme-na__node:focus-visible::before,
.simme-na__node.is-selected::before {
    opacity: 1;
}

.simme-na__node[hidden] {
    display: none !important;
}

.simme-na__node-media {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: var(--sna-icon-bg);
    margin-bottom: 14px;
}

.simme-na__node-media img,
.simme-na__detail-icon img,
.simme-na__neighbour-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.simme-na__node-media.is-missing {
    border: 1px dashed var(--sna-border-strong);
    background: transparent;
}

.simme-na__node-number-only,
.simme-na__detail-number-only {
    color: var(--sna-muted);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .08em;
}

.simme-na__node-copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}

.simme-na__node-number {
    color: var(--sna-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: 6px;
}

.simme-na__node-title {
    display: block;
    color: var(--sna-text);
    font-size: 15px;
    line-height: 1.26;
    font-weight: 730;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.simme-na__node-summary {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sna-text-soft);
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 13px;
}

.simme-na__node-action {
    margin-top: auto;
    color: var(--sna-accent);
    font-size: 11px;
    font-weight: 750;
}

.simme-na__no-results {
    padding: 36px;
    border: 1px dashed var(--sna-border-strong);
    border-radius: 18px;
    background: var(--sna-surface);
    text-align: center;
}

.simme-na__no-results strong,
.simme-na__no-results span {
    display: block;
}

.simme-na__no-results span {
    margin-top: 7px;
    color: var(--sna-text-soft);
}

/* ------------------------------------------------------------------------
   DETAIL PANEL — INITIAL STATE
   ------------------------------------------------------------------------ */

.simme-na__detail {
    position: sticky;
    top: 86px;
    overflow: hidden;
    border: 1px solid var(--sna-border-strong);
    border-radius: 22px;
    background: var(--sna-surface);
    box-shadow: var(--sna-shadow-small);
}

.simme-na__detail-empty {
    position: relative;
    min-height: 320px;
    padding: 30px;
    overflow: hidden;
    background:
        linear-gradient(145deg, transparent 0 62%, var(--sna-accent-soft) 100%),
        var(--sna-surface);
}

.simme-na__detail-empty::after {
    content: "32";
    position: absolute;
    right: 12px;
    bottom: -28px;
    color: var(--sna-accent-soft);
    font-size: 150px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.08em;
    pointer-events: none;
}

.simme-na__detail-empty h2 {
    position: relative;
    z-index: 1;
    font-size: clamp(26px, 2.4vw, 34px);
    margin-bottom: 14px;
}

.simme-na__detail-empty p {
    position: relative;
    z-index: 1;
    color: var(--sna-text-soft);
    font-size: 14px;
    line-height: 1.65;
}

.simme-na__detail-empty-note {
    margin-top: 18px !important;
    padding-top: 18px;
    border-top: 1px solid var(--sna-border);
    font-size: 12px !important;
}

/* ------------------------------------------------------------------------
   DETAIL PANEL — SELECTED NODE FOCUS MODE
   ------------------------------------------------------------------------ */

.simme-na.is-detail-open .simme-na__workspace {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 32px);
}

.simme-na.is-detail-open .simme-na__directory-heading {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 16px;
}

.simme-na.is-detail-open .simme-na__directory-heading h2 {
    font-size: 25px;
}

.simme-na.is-detail-open .simme-na__directory-heading p {
    display: none;
}

.simme-na.is-detail-open .simme-na__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.simme-na.is-detail-open .simme-na__node {
    min-height: 142px;
    padding: 10px;
}

.simme-na.is-detail-open .simme-na__node-media {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    margin-bottom: 9px;
    border-radius: 12px;
}

.simme-na.is-detail-open .simme-na__node-title {
    font-size: 11px;
    margin-bottom: 0;
}

.simme-na.is-detail-open .simme-na__node-summary,
.simme-na.is-detail-open .simme-na__node-action,
.simme-na.is-detail-open .simme-na__node-number {
    display: none;
}

.simme-na.is-detail-open .simme-na__detail {
    position: relative;
    top: auto;
    border-color: var(--sna-border-strong);
    background: var(--sna-surface);
}

.simme-na__detail-content {
    min-width: 0;
}

.simme-na__detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
    padding: clamp(28px, 3.3vw, 46px);
    overflow: hidden;
    border-bottom: 1px solid var(--sna-border);
    background:
        radial-gradient(circle at 86% 14%, var(--sna-accent-soft) 0, transparent 28%),
        linear-gradient(145deg, var(--sna-surface) 0 70%, var(--sna-accent-softer) 100%);
}

.simme-na__detail-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--sna-accent), var(--sna-accent-2), transparent 80%);
}

.simme-na__detail-icon {
    width: 110px;
    height: 110px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background: var(--sna-icon-bg);
    box-shadow: 0 14px 30px rgba(24, 30, 54, .16);
}

.simme-na__detail-hero-copy {
    min-width: 0;
}

.simme-na__detail-number {
    display: inline-block;
    color: var(--sna-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    margin: 2px 0 7px;
}

.simme-na__detail-hero h2 {
    font-size: clamp(34px, 4.1vw, 56px);
    line-height: 1.02;
    margin-bottom: 8px;
}

.simme-na__detail-tagline {
    color: var(--sna-accent);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.4;
    font-weight: 650;
    margin-bottom: 9px;
}

.simme-na__detail-summary {
    max-width: 790px;
    color: var(--sna-text-soft);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 0;
}

.simme-na__back-to-atlas {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--sna-border);
    border-radius: 12px;
    background: var(--sna-surface-soft);
    color: var(--sna-text-soft);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.simme-na__back-to-atlas:hover {
    border-color: var(--sna-accent);
    color: var(--sna-text);
}

.simme-na__detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(235px, 270px);
    gap: clamp(24px, 3vw, 42px);
    padding: clamp(28px, 3.3vw, 46px);
    align-items: start;
}

.simme-na__reading {
    min-width: 0;
}

.simme-na__intro-block {
    position: relative;
    margin-bottom: 12px;
    padding: 24px 26px 24px 30px;
    border: 1px solid var(--sna-border);
    border-radius: 18px;
    background: var(--sna-surface-soft);
}

.simme-na__intro-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--sna-accent), var(--sna-accent-2));
}

.simme-na__intro-block p {
    color: var(--sna-text);
    font-size: 16px;
    line-height: 1.76;
    margin-bottom: 12px;
}

.simme-na__intro-block p:last-child {
    margin-bottom: 0;
}

.simme-na__sections {
    display: block;
}

.simme-na__reading-section {
    position: relative;
    padding: 30px 4px 31px 28px;
    border-bottom: 1px solid var(--sna-border);
    scroll-margin-top: 100px;
}

.simme-na__reading-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 37px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sna-accent);
    box-shadow: 0 0 0 6px var(--sna-accent-soft);
}

.simme-na__reading-section > h3 {
    font-size: clamp(23px, 2.2vw, 31px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-bottom: 17px;
}

.simme-na__section-copy {
    color: var(--sna-text-soft);
    font-size: 15px;
    line-height: 1.76;
}

.simme-na__section-copy p,
.simme-na__section-copy ul,
.simme-na__section-copy ol,
.simme-na__section-copy blockquote {
    margin-top: 0;
    margin-bottom: 15px;
}

.simme-na__section-copy p:last-child,
.simme-na__section-copy ul:last-child,
.simme-na__section-copy ol:last-child,
.simme-na__section-copy blockquote:last-child {
    margin-bottom: 0;
}

.simme-na__section-copy ul,
.simme-na__section-copy ol {
    padding-left: 22px;
}

.simme-na__section-copy li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.simme-na__section-copy h3 {
    margin: 24px 0 9px;
    color: var(--sna-text);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 720;
}

.simme-na__section-copy blockquote {
    padding: 16px 19px;
    border-left: 3px solid var(--sna-accent);
    background: var(--sna-accent-soft);
    color: var(--sna-text);
}

.simme-na__section-copy a {
    color: var(--sna-accent) !important;
}

.simme-na__loading {
    padding: 18px;
    border: 1px dashed var(--sna-border-strong);
    border-radius: 15px;
    background: var(--sna-surface-soft);
    color: var(--sna-text-soft);
    font-size: 13px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------------
   PASSPORT + TOC
   ------------------------------------------------------------------------ */

.simme-na__passport {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 12px;
}

.simme-na__passport-card,
.simme-na__toc {
    padding: 18px;
    border: 1px solid var(--sna-border);
    border-radius: 17px;
    background: var(--sna-surface-soft);
}

.simme-na__passport-card dl {
    display: grid;
    gap: 13px;
    margin-bottom: 17px;
}

.simme-na__passport-card dl > div {
    display: grid;
    gap: 4px;
}

.simme-na__passport-card dt,
.simme-na__runtime > span {
    color: var(--sna-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.simme-na__passport-card dd {
    color: var(--sna-text);
    font-size: 12px;
    line-height: 1.48;
    font-weight: 650;
    margin-bottom: 0;
}

.simme-na__runtime {
    display: grid;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--sna-border);
}

.simme-na__runtime > div {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: baseline;
    padding: 9px 10px;
    border: 1px solid var(--sna-border);
    border-radius: 11px;
    background: var(--sna-surface);
}

.simme-na__runtime b {
    color: var(--sna-text-soft);
    font-size: 11px;
    font-weight: 650;
}

.simme-na__runtime strong {
    color: var(--sna-text);
    font-size: 14px;
}

.simme-na__runtime small {
    color: var(--sna-muted);
    font-size: 9px;
}

.simme-na__toc > div {
    display: grid;
    gap: 2px;
}

.simme-na__toc a {
    position: relative;
    display: block;
    padding: 8px 8px 8px 13px;
    border-radius: 9px;
    color: var(--sna-text-soft) !important;
    text-decoration: none !important;
    font-size: 11px;
    line-height: 1.42;
}

.simme-na__toc a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sna-accent);
}

.simme-na__toc a:hover {
    background: var(--sna-accent-soft);
    color: var(--sna-text) !important;
}

.simme-na__canonical-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid var(--sna-accent);
    border-radius: 13px;
    background: var(--sna-accent);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 750;
    text-align: center;
}

.simme-na[data-theme="dark"] .simme-na__canonical-link {
    color: #080b12 !important;
}

/* ------------------------------------------------------------------------
   PREVIOUS / NEXT
   ------------------------------------------------------------------------ */

.simme-na__node-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin-top: 28px;
    padding-top: 24px;
}

.simme-na__neighbour {
    min-height: 66px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid var(--sna-border);
    border-radius: 14px;
    background: var(--sna-surface-soft);
    color: var(--sna-text) !important;
    text-decoration: none !important;
}

.simme-na__neighbour--next {
    justify-content: flex-end;
    text-align: right;
}

.simme-na__neighbour:hover {
    border-color: var(--sna-border-strong);
    background: var(--sna-accent-soft);
}

.simme-na__neighbour-media {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--sna-icon-bg);
}

.simme-na__neighbour-media .simme-na__detail-number-only {
    font-size: 11px;
}

.simme-na__neighbour-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.simme-na__neighbour-copy small {
    color: var(--sna-muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.simme-na__neighbour-copy b {
    color: var(--sna-text);
    font-size: 11px;
    line-height: 1.35;
}

.simme-na__atlas-button {
    min-width: 108px;
    border: 1px solid var(--sna-border-strong);
    border-radius: 13px;
    background: var(--sna-surface);
    color: var(--sna-text);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.simme-na__atlas-button:hover {
    background: var(--sna-accent-soft);
}

/* ------------------------------------------------------------------------
   DISCOVERY FOOTER
   ------------------------------------------------------------------------ */

.simme-na__index-block {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.55fr);
    gap: 32px;
    padding: clamp(30px, 4vw, 54px);
    border-top: 1px solid var(--sna-border);
    background: var(--sna-surface-soft);
}

.simme-na__index-block h2 {
    font-size: clamp(24px, 2.4vw, 33px);
    margin-bottom: 11px;
}

.simme-na__index-block p {
    color: var(--sna-text-soft);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 0;
}

.simme-na__index-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 15px;
    align-content: start;
}

.simme-na__index-list a {
    display: flex;
    gap: 7px;
    align-items: baseline;
    min-width: 0;
    color: var(--sna-text-soft) !important;
    text-decoration: none !important;
    font-size: 11px;
    line-height: 1.45;
}

.simme-na__index-list a:hover {
    color: var(--sna-accent) !important;
}

.simme-na__index-list span {
    color: var(--sna-accent);
    font-weight: 800;
    flex: 0 0 auto;
}

.simme-na__mobile-backdrop {
    display: none;
}

html.simme-na-detail-lock,
html.simme-na-detail-lock body {
    overflow: hidden !important;
}

.simme-na a:focus-visible,
.simme-na button:focus-visible,
.simme-na input:focus-visible {
    outline: 2px solid var(--sna-accent) !important;
    outline-offset: 3px;
}

/* ------------------------------------------------------------------------
   LARGE DESKTOP
   ------------------------------------------------------------------------ */

@media (min-width: 1500px) {
    .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) minmax(410px, 30%);
    }

    .simme-na.is-detail-open .simme-na__workspace {
        grid-template-columns: 330px minmax(0, 1fr);
    }

    .simme-na__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------------
   TABLET / SMALL DESKTOP
   ------------------------------------------------------------------------ */

@media (max-width: 1240px) {
    .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 35%);
    }

    .simme-na__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .simme-na.is-detail-open .simme-na__workspace {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__detail-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 24px;
    }

    .simme-na__index-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .simme-na__workspace,
    .simme-na.is-detail-open .simme-na__workspace {
        grid-template-columns: 1fr;
    }

    .simme-na__detail {
        position: relative;
        top: auto;
    }

    .simme-na.is-detail-open .simme-na__directory {
        display: none;
    }

    .simme-na__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------------
   MOBILE — SAME DESIGN INTEGRITY, DIFFERENT COMPOSITION
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .simme-na__shell {
        border-radius: 20px;
    }

    .simme-na__hero {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 30px 22px;
    }

    .simme-na__hero::before {
        left: 22px;
        right: 22px;
    }

    .simme-na h1 {
        font-size: clamp(36px, 11vw, 52px);
    }

    .simme-na__hero-side {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .simme-na__count {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "count label"
            "count small";
        align-items: center;
        column-gap: 12px;
        padding: 15px 16px;
    }

    .simme-na__count strong { grid-area: count; font-size: 38px; }
    .simme-na__count span { grid-area: label; }
    .simme-na__count small { grid-area: small; }

    .simme-na__theme-toggle {
        width: auto;
        min-width: 112px;
        padding: 0 13px;
    }

    .simme-na__controls {
        padding: 20px 18px 16px;
    }

    .simme-na__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .simme-na__filters::-webkit-scrollbar {
        display: none;
    }

    .simme-na__filter {
        flex: 0 0 auto;
    }

    .simme-na__workspace,
    .simme-na.is-detail-open .simme-na__workspace {
        display: block;
        padding: 22px 16px 28px;
    }

    .simme-na__directory-heading {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .simme-na__directory-heading p {
        display: block !important;
    }

    .simme-na__grid,
    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .simme-na__node,
    .simme-na.is-detail-open .simme-na__node {
        min-height: 188px;
        padding: 12px;
    }

    .simme-na__node-media,
    .simme-na.is-detail-open .simme-na__node-media {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
        margin-bottom: 10px;
    }

    .simme-na.is-detail-open .simme-na__node-number {
        display: block;
    }

    .simme-na.is-detail-open .simme-na__node-title {
        font-size: 13px;
    }

    .simme-na.is-detail-open .simme-na__node-summary,
    .simme-na.is-detail-open .simme-na__node-action {
        display: none;
    }

    .simme-na__detail {
        position: fixed;
        z-index: 100001;
        inset: 10px;
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        border-radius: 20px;
        transform: translateY(calc(100% + 30px));
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease;
        -webkit-overflow-scrolling: touch;
    }

    .simme-na.is-mobile-detail-open .simme-na__detail {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .simme-na__detail-empty {
        display: none;
    }

    .simme-na__detail-hero {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
        padding: 20px 18px;
    }

    .simme-na__detail-icon {
        width: 76px;
        height: 76px;
        border-radius: 16px;
    }

    .simme-na__detail-hero h2 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .simme-na__detail-summary {
        font-size: 13px;
    }

    .simme-na__back-to-atlas {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
    }

    .simme-na__detail-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
    }

    .simme-na__passport {
        position: static;
        grid-row: 1;
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__canonical-link {
        grid-column: 1 / -1;
    }

    .simme-na__reading {
        grid-row: 2;
    }

    .simme-na__intro-block {
        padding: 20px 18px 20px 23px;
    }

    .simme-na__intro-block p,
    .simme-na__section-copy {
        font-size: 15px;
        line-height: 1.72;
    }

    .simme-na__reading-section {
        padding: 25px 0 26px 22px;
    }

    .simme-na__reading-section > h3 {
        font-size: 24px;
    }

    .simme-na__toc {
        display: none;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__atlas-button {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 44px;
    }

    .simme-na__mobile-backdrop {
        position: fixed;
        z-index: 100000;
        inset: 0;
        background: rgba(4, 7, 14, .62);
        backdrop-filter: blur(6px);
    }

    .simme-na__mobile-backdrop:not([hidden]) {
        display: block;
    }

    .simme-na__index-block {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .simme-na__index-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .simme-na__hero-side {
        grid-template-columns: 1fr;
    }

    .simme-na__theme-toggle {
        width: 100%;
    }

    .simme-na__grid,
    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .simme-na__node,
    .simme-na.is-detail-open .simme-na__node {
        min-height: 170px;
    }

    .simme-na__node-summary {
        -webkit-line-clamp: 3;
    }

    .simme-na__passport {
        grid-template-columns: 1fr;
    }

    .simme-na__canonical-link {
        grid-column: auto;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr;
    }

    .simme-na__atlas-button {
        grid-column: auto;
        grid-row: auto;
        min-height: 42px;
    }

    .simme-na__index-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na *,
    .simme-na *::before,
    .simme-na *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }
}


/* V2.1 theme toggle refinement */
@media (max-width: 640px) {
    .simme-na__theme-toggle { min-height: 52px; }
    .simme-na__theme-option { gap: 8px; font-size: 12px; }
    .simme-na__theme-label { display: inline-block; }
}

/* ========================================================================
   SYMSOUL NODE ATLAS V3 — REFINEMENT LAYER
   - Simme homepage neon-blue visual language
   - Themify button-colour isolation (prevents global green hover styles)
   - container-aware responsive detail layouts
   - dedicated Node URLs rendered as Atlas reading pages
   ======================================================================== */

/* Use the actual width of the Themify module, not just the browser viewport. */
.simme-na {
    container-type: inline-size;
    container-name: simme-node-atlas;
}

/* ------------------------------------------------------------------------
   SIMME NEON-BLUE PALETTE
   ------------------------------------------------------------------------ */

.simme-na[data-theme="light"] {
    --sna-bg: #f5f8fc;
    --sna-bg-deep: #edf3fa;
    --sna-surface: #ffffff;
    --sna-surface-soft: #f7faff;
    --sna-surface-strong: #eaf2fb;
    --sna-text: #121a2a;
    --sna-text-soft: #52617a;
    --sna-muted: #7d8da8;
    --sna-border: rgba(32, 70, 111, .13);
    --sna-border-strong: rgba(36, 191, 255, .34);
    --sna-accent: #247cff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .105);
    --sna-accent-softer: rgba(36, 124, 255, .055);
    --sna-icon-bg: #343a44;
    --sna-shadow: 0 24px 70px rgba(30, 57, 91, .085);
    --sna-shadow-small: 0 12px 30px rgba(30, 57, 91, .07);
}

.simme-na[data-theme="dark"] {
    --sna-bg: #050a12;
    --sna-bg-deep: #08101c;
    --sna-surface: #0a1321;
    --sna-surface-soft: #0d1828;
    --sna-surface-strong: #12243a;
    --sna-text: #eef7ff;
    --sna-text-soft: #b5c7dc;
    --sna-muted: #829bb8;
    --sna-border: rgba(143, 217, 255, .14);
    --sna-border-strong: rgba(88, 202, 255, .44);
    --sna-accent: #8fd9ff;
    --sna-accent-2: #24bfff;
    --sna-accent-soft: rgba(36, 191, 255, .12);
    --sna-accent-softer: rgba(88, 202, 255, .065);
    --sna-icon-bg: #303842;
    --sna-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    --sna-shadow-small: 0 12px 34px rgba(0, 0, 0, .25);
}

.simme-na[data-theme="dark"] .simme-na__shell {
    background:
        radial-gradient(circle at 10% -3%, rgba(36, 191, 255, .105), transparent 30%),
        radial-gradient(circle at 91% 2%, rgba(88, 202, 255, .07), transparent 25%),
        linear-gradient(180deg, #07101d 0%, var(--sna-bg) 38%, #060c15 100%) !important;
}

.simme-na__hero::before,
.simme-na__detail-hero::before {
    background: linear-gradient(90deg, transparent 0%, #8fd9ff 18%, #24bfff 55%, rgba(36,191,255,0) 100%) !important;
    box-shadow:
        0 0 3px rgba(255,255,255,.45),
        0 0 10px rgba(88,202,255,.65),
        0 0 22px rgba(36,191,255,.34);
}

.simme-na[data-theme="dark"] .simme-na__eyebrow,
.simme-na[data-theme="dark"] .simme-na__detail-number,
.simme-na[data-theme="dark"] .simme-na__detail-tagline {
    color: #8fd9ff;
    text-shadow:
        0 0 3px rgba(255,255,255,.28),
        0 0 10px rgba(88,202,255,.42),
        0 0 20px rgba(36,191,255,.22);
}

/* ------------------------------------------------------------------------
   BUTTON / LINK RESET — BLOCK THEMIFY GREEN HOVER LEAKAGE
   ------------------------------------------------------------------------ */

.simme-na button,
.simme-na button:hover,
.simme-na button:focus,
.simme-na button:active,
.simme-na button:visited,
.simme-na .simme-na__back-to-atlas,
.simme-na .simme-na__back-to-atlas:hover,
.simme-na .simme-na__atlas-button,
.simme-na .simme-na__atlas-button:hover,
.simme-na .simme-na__filter,
.simme-na .simme-na__filter:hover,
.simme-na .simme-na__theme-toggle,
.simme-na .simme-na__theme-toggle:hover {
    background-image: none !important;
    text-shadow: none !important;
}

.simme-na__filter,
.simme-na__back-to-atlas,
.simme-na__atlas-button,
.simme-na__theme-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ------------------------------------------------------------------------
   THEME SWITCH — COMPACT MOON / SUN CONTROL
   ------------------------------------------------------------------------ */

.simme-na .simme-na__theme-toggle,
.simme-na .simme-na__theme-toggle:hover,
.simme-na .simme-na__theme-toggle:focus,
.simme-na .simme-na__theme-toggle:active {
    width: 100%;
    min-height: 50px;
    padding: 4px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface) 92%, transparent) !important;
    color: var(--sna-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 22px rgba(0,0,0,.10) !important;
}

.simme-na .simme-na__theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--sna-accent-2) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 3px rgba(255,255,255,.16),
        0 0 10px rgba(88,202,255,.38),
        0 0 22px rgba(36,191,255,.18) !important;
}

.simme-na__theme-track {
    min-height: 42px;
}

.simme-na__theme-option {
    min-height: 42px;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .015em;
}

.simme-na__theme-thumb {
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border: 1px solid rgba(143,217,255,.28) !important;
    background: linear-gradient(145deg, rgba(35,61,88,.96), rgba(15,29,47,.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 12px rgba(36,191,255,.16) !important;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    background: linear-gradient(145deg, #ffffff, #eaf5ff) !important;
    border-color: rgba(36,124,255,.24) !important;
    box-shadow: 0 6px 16px rgba(43,91,145,.10) !important;
}

.simme-na[data-theme="dark"] .simme-na__theme-option--dark,
.simme-na[data-theme="light"] .simme-na__theme-option--light {
    color: var(--sna-text) !important;
}

.simme-na[data-theme="dark"] .simme-na__theme-option--dark .simme-na__theme-icon,
.simme-na[data-theme="light"] .simme-na__theme-option--light .simme-na__theme-icon {
    color: var(--sna-accent);
    filter: drop-shadow(0 0 5px rgba(88,202,255,.45));
}

/* ------------------------------------------------------------------------
   SEARCH / FILTER CONTROLS
   ------------------------------------------------------------------------ */

.simme-na__search {
    border-color: var(--sna-border) !important;
    background: color-mix(in srgb, var(--sna-surface) 96%, transparent) !important;
}

.simme-na__search:focus {
    border-color: var(--sna-accent-2) !important;
    box-shadow: 0 0 0 3px rgba(36,191,255,.10), 0 0 14px rgba(36,191,255,.12) !important;
}

.simme-na .simme-na__filter,
.simme-na .simme-na__filter:hover,
.simme-na .simme-na__filter:focus,
.simme-na .simme-na__filter:active {
    min-height: 36px;
    padding: 7px 13px !important;
    border: 1px solid var(--sna-border) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface) 94%, transparent) !important;
    color: var(--sna-text-soft) !important;
    box-shadow: none !important;
}

.simme-na .simme-na__filter:hover {
    border-color: var(--sna-accent-2) !important;
    color: var(--sna-text) !important;
    background: var(--sna-accent-soft) !important;
}

.simme-na .simme-na__filter.is-active,
.simme-na .simme-na__filter.is-active:hover {
    border-color: rgba(88,202,255,.68) !important;
    background: rgba(36,191,255,.12) !important;
    color: var(--sna-text) !important;
    box-shadow:
        inset 0 0 0 1px rgba(143,217,255,.08),
        0 0 10px rgba(88,202,255,.22),
        0 0 20px rgba(36,191,255,.10) !important;
}

/* ------------------------------------------------------------------------
   NODE CARDS — MORE DEPTH WITHOUT TURNING THEM INTO BUTTON BRICKS
   ------------------------------------------------------------------------ */

.simme-na__node {
    border-color: var(--sna-border) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sna-surface) 98%, transparent), color-mix(in srgb, var(--sna-surface-soft) 94%, var(--sna-accent) 6%)) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.055) !important;
}

.simme-na[data-theme="dark"] .simme-na__node {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 26px rgba(0,0,0,.14) !important;
}

.simme-na__node:hover,
.simme-na__node:focus-visible,
.simme-na__node.is-active {
    border-color: rgba(88,202,255,.62) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sna-surface) 93%, var(--sna-accent) 7%), color-mix(in srgb, var(--sna-surface-soft) 90%, var(--sna-accent-2) 10%)) !important;
    box-shadow:
        0 0 3px rgba(255,255,255,.14),
        0 0 10px rgba(88,202,255,.24),
        0 0 22px rgba(36,191,255,.12),
        0 12px 28px rgba(0,0,0,.10) !important;
}

.simme-na__node-action {
    color: var(--sna-accent) !important;
}

/* ------------------------------------------------------------------------
   FULL NODE DETAIL — LAYOUT & READABILITY
   ------------------------------------------------------------------------ */

.simme-na__detail,
.simme-na.is-detail-open .simme-na__detail {
    min-width: 0 !important;
}

.simme-na__detail-content,
.simme-na__detail-hero,
.simme-na__detail-hero-copy,
.simme-na__detail-layout,
.simme-na__reading,
.simme-na__passport,
.simme-na__reading-section,
.simme-na__section-copy {
    min-width: 0 !important;
}

.simme-na__detail-hero-copy h1,
.simme-na__detail-hero-copy h2,
.simme-na__detail-summary,
.simme-na__detail-tagline,
.simme-na__intro-block,
.simme-na__section-copy,
.simme-na__passport-card dd,
.simme-na__neighbour-copy b {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.simme-na__detail-hero-copy h1,
.simme-na__detail-hero-copy h2 {
    overflow-wrap: normal;
    hyphens: manual;
}

.simme-na__detail-hero {
    grid-template-columns: 100px minmax(320px, 1fr) max-content;
    gap: clamp(18px, 2.4vw, 28px);
    align-items: start;
}

.simme-na__detail-icon {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    border-color: rgba(143,217,255,.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 14px 30px rgba(0,0,0,.18),
        0 0 18px rgba(36,191,255,.08) !important;
}

.simme-na__detail-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.simme-na__detail-hero h1,
.simme-na__detail-hero h2 {
    color: var(--sna-text) !important;
    font-size: clamp(34px, 3.7vw, 54px);
    line-height: 1.02;
    letter-spacing: -.038em;
    margin: 0 0 9px;
    max-width: 100%;
}

.simme-na .simme-na__back-to-atlas,
.simme-na .simme-na__back-to-atlas:hover,
.simme-na .simme-na__back-to-atlas:focus,
.simme-na .simme-na__back-to-atlas:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface-soft) 92%, transparent) !important;
    color: var(--sna-text-soft) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
}

.simme-na .simme-na__back-to-atlas:hover {
    border-color: var(--sna-accent-2) !important;
    color: var(--sna-text) !important;
    background: var(--sna-accent-soft) !important;
    box-shadow: 0 0 10px rgba(88,202,255,.18) !important;
}

.simme-na__detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(225px, 260px);
    gap: clamp(24px, 3vw, 40px);
}

.simme-na__passport {
    width: 100%;
}

.simme-na__passport-card,
.simme-na__toc {
    overflow: hidden;
    border-color: var(--sna-border) !important;
    background: color-mix(in srgb, var(--sna-surface-soft) 96%, transparent) !important;
}

.simme-na__passport-card dd {
    font-size: 12px;
    line-height: 1.55;
}

.simme-na__runtime > div {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-width: 0;
}

.simme-na__runtime b,
.simme-na__runtime strong,
.simme-na__runtime small {
    white-space: nowrap;
}

.simme-na__reading-section::before {
    background: var(--sna-accent-2) !important;
    box-shadow: 0 0 0 6px rgba(36,191,255,.09), 0 0 12px rgba(36,191,255,.22) !important;
}

.simme-na__reading-section > h2,
.simme-na__reading-section > h3 {
    color: var(--sna-text) !important;
    font-size: clamp(23px, 2.2vw, 31px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin: 0 0 17px;
}

/* ------------------------------------------------------------------------
   FULL-PAGE ACTIONS / NAVIGATION
   ------------------------------------------------------------------------ */

.simme-na__canonical-link,
.simme-na__canonical-link:hover,
.simme-na__canonical-link:focus,
.simme-na__canonical-link:active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 13px !important;
    border: 1px solid rgba(88,202,255,.58) !important;
    border-radius: 13px !important;
    background: rgba(36,191,255,.075) !important;
    color: var(--sna-text) !important;
    box-shadow: inset 0 0 0 1px rgba(143,217,255,.035) !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
}

.simme-na__canonical-link:hover {
    border-color: #8fd9ff !important;
    background: rgba(36,191,255,.13) !important;
    box-shadow:
        0 0 3px rgba(255,255,255,.12),
        0 0 10px rgba(88,202,255,.28),
        0 0 20px rgba(36,191,255,.13) !important;
}

.simme-na__node-nav {
    grid-template-columns: minmax(0, 1fr) minmax(138px, auto) minmax(0, 1fr);
    gap: 10px;
}

.simme-na__neighbour {
    min-width: 0;
    min-height: 62px;
    padding: 8px 10px;
    border-color: var(--sna-border) !important;
    background: color-mix(in srgb, var(--sna-surface-soft) 96%, transparent) !important;
}

.simme-na__neighbour:hover {
    border-color: rgba(88,202,255,.48) !important;
    background: rgba(36,191,255,.075) !important;
    box-shadow: 0 0 12px rgba(36,191,255,.09) !important;
}

.simme-na .simme-na__atlas-button,
.simme-na .simme-na__atlas-button:hover,
.simme-na .simme-na__atlas-button:focus,
.simme-na .simme-na__atlas-button:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    min-height: 62px;
    padding: 9px 13px !important;
    border: 1px solid var(--sna-border-strong) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--sna-surface) 96%, transparent) !important;
    color: var(--sna-text) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
}

.simme-na .simme-na__atlas-button:hover {
    border-color: var(--sna-accent-2) !important;
    background: rgba(36,191,255,.085) !important;
    box-shadow: 0 0 13px rgba(36,191,255,.12) !important;
}

/* ------------------------------------------------------------------------
   VISITOR-FACING CLOSING SECTION
   ------------------------------------------------------------------------ */

.simme-na__index-block {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sna-surface-soft) 98%, transparent), color-mix(in srgb, var(--sna-surface-soft) 92%, var(--sna-accent-2) 8%)) !important;
}

.simme-na__index-block h2 {
    max-width: 520px;
}

.simme-na__index-list a:hover {
    color: var(--sna-accent) !important;
    text-shadow: 0 0 9px rgba(88,202,255,.22);
}

/* ------------------------------------------------------------------------
   DEDICATED NODE URL — SAME ATLAS DESIGN, SERVER-RENDERED CONTENT
   ------------------------------------------------------------------------ */

body.simme-node-atlas-detail-page .page-title,
body.simme-node-atlas-detail-page .post-title,
body.simme-node-atlas-detail-page .entry-title,
body.simme-node-atlas-detail-page h1.page-title,
body.simme-node-atlas-detail-page h1.post-title,
body.simme-node-atlas-detail-page h1.entry-title {
    display: none !important;
}

.simme-na--node-page {
    width: 100% !important;
}

.simme-na--node-page .simme-na__shell {
    overflow: visible;
}

.simme-na__nodepage-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(190px, 250px);
    gap: 16px;
    align-items: center;
    padding: 14px clamp(20px, 3vw, 38px);
    border-bottom: 1px solid var(--sna-border);
    background: color-mix(in srgb, var(--sna-surface-soft) 94%, transparent);
}

.simme-na__nodepage-atlas-link {
    justify-self: start;
    color: var(--sna-text) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 720;
}

.simme-na__nodepage-atlas-link:hover {
    color: var(--sna-accent) !important;
}

.simme-na__nodepage-context {
    color: var(--sna-muted);
    font-size: 11px;
    letter-spacing: .035em;
    text-align: center;
}

.simme-na--node-page .simme-na__theme-toggle {
    justify-self: end;
    width: 100%;
}

.simme-na--node-page .simme-na__detail--standalone,
.simme-na--node-page.is-detail-open .simme-na__detail--standalone {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.simme-na--node-page .simme-na__detail-layout {
    max-width: 1320px;
    margin: 0 auto;
}

.simme-na--node-page .simme-na__detail-hero {
    padding-left: clamp(28px, 4vw, 60px);
    padding-right: clamp(28px, 4vw, 60px);
}

.simme-na--node-page .simme-na__detail-hero h1 {
    font-size: clamp(38px, 4.8vw, 64px);
}

/* ------------------------------------------------------------------------
   CONTAINER-BASED RESPONSIVE SAFETY
   These respond to the Atlas/module width, fixing Themify narrow-column
   overlap even when the browser itself is still a desktop width.
   ------------------------------------------------------------------------ */

@container simme-node-atlas (max-width: 1180px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: 1fr !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na__detail-hero {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        gap: 18px;
    }

    .simme-na__detail-icon {
        width: 92px;
        height: 92px;
    }

    .simme-na__back-to-atlas {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .simme-na__detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 250px) !important;
    }
}

@container simme-node-atlas (max-width: 900px) {
    .simme-na__detail-hero {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        padding: 24px 22px;
    }

    .simme-na__detail-icon {
        width: 78px;
        height: 78px;
        border-radius: 16px;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(30px, 7cqw, 43px) !important;
    }

    .simme-na__back-to-atlas {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .simme-na__detail-layout {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 22px;
    }

    .simme-na__passport {
        position: static !important;
        top: auto !important;
        grid-row: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .simme-na__canonical-link {
        grid-column: 1 / -1;
    }

    .simme-na__toc {
        display: block;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr 1fr;
    }

    .simme-na__atlas-button {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 46px !important;
    }

    .simme-na__nodepage-bar {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
    }

    .simme-na__nodepage-context {
        display: none;
    }
}

@container simme-node-atlas (max-width: 620px) {
    .simme-na__detail-hero {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 14px;
        padding: 20px 17px;
    }

    .simme-na__detail-icon {
        width: 68px;
        height: 68px;
        border-radius: 15px;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(28px, 9cqw, 38px) !important;
        line-height: 1.04;
    }

    .simme-na__detail-summary {
        font-size: 13px;
        line-height: 1.6;
    }

    .simme-na__detail-layout {
        padding: 17px;
    }

    .simme-na__passport {
        grid-template-columns: 1fr;
    }

    .simme-na__canonical-link {
        grid-column: auto;
    }

    .simme-na__intro-block {
        padding: 18px 16px 18px 21px;
    }

    .simme-na__reading-section {
        padding-left: 20px;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr;
    }

    .simme-na__atlas-button {
        grid-column: auto;
        grid-row: auto;
        min-height: 44px !important;
    }

    .simme-na__neighbour {
        min-height: 58px;
    }

    .simme-na__nodepage-bar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .simme-na--node-page .simme-na__theme-toggle {
        justify-self: stretch;
        max-width: 280px;
    }
}

/* ------------------------------------------------------------------------
   VIEWPORT MOBILE SAFETY — ATLAS SHEET ONLY, NOT DEDICATED NODE URLS
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .simme-na:not(.simme-na--node-page) .simme-na__detail {
        width: auto !important;
    }

    .simme-na--node-page .simme-na__detail,
    .simme-na--node-page .simme-na__detail--standalone {
        position: relative !important;
        inset: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .simme-na--node-page .simme-na__passport {
        grid-row: auto !important;
    }

    .simme-na--node-page .simme-na__reading {
        grid-row: auto !important;
    }
}


/* ========================================================================
   SYMSOUL NODE ATLAS V3.1 — LAYOUT / PARSER-SAFETY VISUAL REPAIR
   Only affects .simme-na (Node Atlas).
   - removes theme/global button colour leakage
   - prevents hero/title clipping
   - forces safe one-column detail layout before sidebars can overlap
   - prevents source-page links/navigation fragments looking like article copy
   - improves medium/mobile Node Passport and navigation controls
   ======================================================================== */

/* Never allow the Atlas itself to create horizontal page overflow. */
.simme-na,
.simme-na__shell,
.simme-na__workspace,
.simme-na__detail,
.simme-na__detail-content,
.simme-na__detail-hero,
.simme-na__detail-layout,
.simme-na__reading,
.simme-na__passport {
    max-width: 100% !important;
}

.simme-na {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .simme-na { overflow-x: hidden; }
}

/* Hard isolation from Themify / site-wide button skins. */
body .simme-na .simme-na__theme-toggle,
body .simme-na .simme-na__theme-toggle:hover,
body .simme-na .simme-na__theme-toggle:focus,
body .simme-na .simme-na__theme-toggle:active {
    background-color: var(--sna-surface) !important;
    background-image: none !important;
    color: var(--sna-text) !important;
    -webkit-text-fill-color: var(--sna-text) !important;
}

body .simme-na[data-theme="dark"] .simme-na__theme-toggle,
body .simme-na[data-theme="dark"] .simme-na__theme-toggle:hover,
body .simme-na[data-theme="dark"] .simme-na__theme-toggle:focus,
body .simme-na[data-theme="dark"] .simme-na__theme-toggle:active {
    background: #091423 !important;
    background-color: #091423 !important;
}

body .simme-na[data-theme="light"] .simme-na__theme-toggle,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:hover,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:focus,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:active {
    background: #f7fbff !important;
    background-color: #f7fbff !important;
}

body .simme-na .simme-na__theme-toggle::before,
body .simme-na .simme-na__theme-toggle::after {
    display: none !important;
    content: none !important;
}

body .simme-na .simme-na__theme-track {
    background: transparent !important;
    background-color: transparent !important;
}

body .simme-na .simme-na__theme-option {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sna-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
}

body .simme-na[data-theme="dark"] .simme-na__theme-option--dark,
body .simme-na[data-theme="light"] .simme-na__theme-option--light {
    color: var(--sna-text) !important;
}

/* The hero always gives the title a real flexible column. The Atlas-return
   control floats independently instead of stealing the title's grid width. */
.simme-na__detail-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr) !important;
    column-gap: clamp(18px, 2.4vw, 28px) !important;
    row-gap: 10px !important;
    padding-right: clamp(150px, 15vw, 180px) !important;
    overflow: hidden !important;
}

.simme-na__detail-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.simme-na__detail-hero h1,
.simme-na__detail-hero h2 {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-overflow: clip !important;
}

.simme-na__back-to-atlas {
    position: absolute !important;
    top: clamp(22px, 3vw, 34px) !important;
    right: clamp(20px, 3vw, 34px) !important;
    grid-column: auto !important;
    margin: 0 !important;
    z-index: 3;
}

/* Sidebar content must never force the reading column to collapse. */
.simme-na__detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 290px) !important;
}

.simme-na__passport,
.simme-na__passport-card,
.simme-na__toc,
.simme-na__canonical-link {
    min-width: 0 !important;
    max-width: 100% !important;
}

.simme-na__passport-card dd,
.simme-na__toc a,
.simme-na__canonical-link {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
}

/* Source article links should never inherit the site's red/green link skin.
   V3.1 PHP strips source anchors; these rules also protect any cached/legacy
   fragment while caches refresh. */
.simme-na__intro-block a,
.simme-na__section-copy a,
.simme-na__intro-block a:hover,
.simme-na__section-copy a:hover {
    color: var(--sna-accent) !important;
    -webkit-text-fill-color: var(--sna-accent) !important;
    background: transparent !important;
    text-decoration-color: color-mix(in srgb, var(--sna-accent) 55%, transparent) !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* Action controls: explicit text/fill so no Themify black/green state leaks. */
body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active,
body .simme-na .simme-na__atlas-button,
body .simme-na .simme-na__atlas-button:hover,
body .simme-na .simme-na__atlas-button:focus,
body .simme-na .simme-na__atlas-button:active,
body .simme-na .simme-na__back-to-atlas,
body .simme-na .simme-na__back-to-atlas:hover,
body .simme-na .simme-na__back-to-atlas:focus,
body .simme-na .simme-na__back-to-atlas:active {
    color: var(--sna-text) !important;
    -webkit-text-fill-color: var(--sna-text) !important;
    text-shadow: none !important;
}

body .simme-na .simme-na__canonical-link {
    background: linear-gradient(135deg, rgba(36,191,255,.10), rgba(36,124,255,.055)) !important;
    background-color: rgba(36,191,255,.08) !important;
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    background: linear-gradient(135deg, rgba(36,191,255,.18), rgba(36,124,255,.09)) !important;
    background-color: rgba(36,191,255,.14) !important;
}

/* Medium widths: abandon the sidebar before it can crush the article.
   This viewport fallback mirrors the container query for browsers/contexts
   where Themify prevents container queries from being useful. */
@media (max-width: 1180px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: 1fr !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na__detail-hero {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        padding-right: 24px !important;
    }

    .simme-na__detail-icon {
        width: 92px !important;
        height: 92px !important;
    }

    .simme-na__back-to-atlas {
        position: static !important;
        grid-column: 2 !important;
        justify-self: start !important;
        width: auto !important;
        max-width: 180px !important;
    }

    .simme-na__detail-layout {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .simme-na__passport {
        position: static !important;
        top: auto !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .simme-na__reading {
        grid-row: 2 !important;
        width: 100% !important;
    }

    .simme-na__canonical-link {
        grid-column: 1 / -1 !important;
        width: auto !important;
        justify-self: stretch !important;
    }

    .simme-na--node-page .simme-na__detail-layout {
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    .simme-na__detail-hero {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 24px 20px !important;
    }

    .simme-na__detail-icon {
        width: 78px !important;
        height: 78px !important;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(31px, 7.5vw, 44px) !important;
    }

    .simme-na__back-to-atlas {
        grid-column: 1 / -1 !important;
        margin-top: 2px !important;
    }

    .simme-na__detail-layout {
        padding: 22px 20px !important;
    }

    .simme-na__passport {
        grid-template-columns: 1fr 1fr !important;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .simme-na__atlas-button {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        min-height: 48px !important;
    }
}

@media (max-width: 640px) {
    .simme-na__detail-hero {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 20px 16px !important;
    }

    .simme-na__detail-icon {
        width: 68px !important;
        height: 68px !important;
        border-radius: 15px !important;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(28px, 9.5vw, 38px) !important;
        line-height: 1.04 !important;
    }

    .simme-na__detail-layout {
        padding: 17px 15px !important;
    }

    .simme-na__passport {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .simme-na__canonical-link {
        grid-column: auto !important;
    }

    .simme-na__node-nav {
        grid-template-columns: 1fr !important;
    }

    .simme-na__atlas-button {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}


/* ========================================================================
   SYMSOUL NODE ATLAS V3.2 — VISUAL SYSTEM / INTERACTION REFINEMENT
   Scope: .simme-na only. No non-Atlas site CSS is changed.
   ======================================================================== */

.simme-na {
    --sna-neon: #24bfff;
    --sna-neon-soft: #8fd9ff;
    --sna-neon-deep: #137fc2;
    --sna-corner-glow: rgba(36, 191, 255, .105);
    --sna-corner-glow-soft: rgba(143, 217, 255, .05);
}

.simme-na[data-theme="light"] {
    --sna-corner-glow: rgba(36, 124, 255, .08);
    --sna-corner-glow-soft: rgba(36, 191, 255, .045);
}

/* Remove the old illuminated strips along panel tops. Depth now comes from
   light contained inside each surface instead of a line sitting on its edge. */
.simme-na__hero::before,
.simme-na__detail-hero::before,
.simme-na__node::before {
    display: none !important;
    content: none !important;
}

/* Shared Simme surface language: a restrained cyan bloom starts inside the
   upper corner and decays into the panel. */
.simme-na[data-theme="dark"] .simme-na__hero,
.simme-na[data-theme="dark"] .simme-na__count,
.simme-na[data-theme="dark"] .simme-na__detail-hero,
.simme-na[data-theme="dark"] .simme-na__passport-card,
.simme-na[data-theme="dark"] .simme-na__toc,
.simme-na[data-theme="dark"] .simme-na__intro-block,
.simme-na[data-theme="dark"] .simme-na__reading-section,
.simme-na[data-theme="dark"] .simme-na__detail-empty,
.simme-na[data-theme="dark"] .simme-na__index-block,
.simme-na[data-theme="dark"] .simme-na__nodepage-bar {
    background:
        radial-gradient(ellipse at 4% 0%, rgba(36,191,255,.115) 0%, rgba(36,191,255,.045) 24%, transparent 53%),
        radial-gradient(ellipse at 98% 0%, rgba(143,217,255,.045) 0%, transparent 38%),
        linear-gradient(145deg, #0c1727 0%, #091321 52%, #07101c 100%) !important;
}

.simme-na[data-theme="light"] .simme-na__hero,
.simme-na[data-theme="light"] .simme-na__count,
.simme-na[data-theme="light"] .simme-na__detail-hero,
.simme-na[data-theme="light"] .simme-na__passport-card,
.simme-na[data-theme="light"] .simme-na__toc,
.simme-na[data-theme="light"] .simme-na__intro-block,
.simme-na[data-theme="light"] .simme-na__reading-section,
.simme-na[data-theme="light"] .simme-na__detail-empty,
.simme-na[data-theme="light"] .simme-na__index-block,
.simme-na[data-theme="light"] .simme-na__nodepage-bar {
    background:
        radial-gradient(ellipse at 4% 0%, rgba(36,124,255,.075) 0%, rgba(36,191,255,.028) 26%, transparent 54%),
        linear-gradient(145deg, #ffffff 0%, #f8fbff 60%, #f3f7fc 100%) !important;
}

.simme-na__passport-card,
.simme-na__toc,
.simme-na__intro-block,
.simme-na__reading-section,
.simme-na__detail-empty,
.simme-na__nodepage-bar {
    border-color: rgba(92, 185, 231, .22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 18px 16px 38px rgba(36,191,255,.018),
        0 12px 30px rgba(0,0,0,.08) !important;
}

/* ------------------------------------------------------------------------
   32-NODE LIVING ORBIT
   ------------------------------------------------------------------------ */

.simme-na__count {
    --sna-orbit-x: 0px;
    --sna-orbit-y: 0px;
    --sna-orbit-tilt-x: 0deg;
    --sna-orbit-tilt-y: 0deg;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 154px;
    padding: 20px 18px 20px 22px !important;
    overflow: hidden;
    perspective: 700px;
    touch-action: pan-y;
}

.simme-na__count::after {
    display: none !important;
    content: none !important;
}

.simme-na__count-copy {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.simme-na__count-copy strong,
.simme-na__count-copy span,
.simme-na__count-copy small {
    position: relative;
    z-index: 2;
}

.simme-na__orbit {
    position: relative;
    z-index: 2;
    width: 108px;
    height: 108px;
    justify-self: end;
    border-radius: 50%;
    transform:
        translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0)
        rotateX(var(--sna-orbit-tilt-x))
        rotateY(var(--sna-orbit-tilt-y));
    transform-style: preserve-3d;
    transition: transform .22s cubic-bezier(.2,.72,.2,1);
}

.simme-na__orbit::before,
.simme-na__orbit::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    pointer-events: none;
}

.simme-na__orbit::before {
    inset: 25%;
    background: radial-gradient(circle, rgba(143,217,255,.26), rgba(36,191,255,.07) 48%, transparent 72%);
    box-shadow: 0 0 20px rgba(36,191,255,.19), 0 0 46px rgba(36,191,255,.08);
    animation: simme-na-orbit-core-breathe 3.8s ease-in-out infinite;
}

.simme-na__orbit::after {
    inset: 5%;
    border: 1px solid rgba(143,217,255,.08);
    box-shadow: inset 0 0 24px rgba(36,191,255,.035);
}

.simme-na__orbit-core {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dff6ff;
    box-shadow:
        0 0 5px rgba(255,255,255,.8),
        0 0 13px rgba(143,217,255,.9),
        0 0 28px rgba(36,191,255,.52);
    transform: translate(-50%, -50%);
}

.simme-na__orbit-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    border: 1px solid rgba(143,217,255,.24);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.simme-na__orbit-ring i {
    position: absolute;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #78d5ff;
    box-shadow: 0 0 8px rgba(143,217,255,.86), 0 0 18px rgba(36,191,255,.42);
}

.simme-na__orbit-ring i:nth-child(1) { left: -4px; top: 50%; }
.simme-na__orbit-ring i:nth-child(2) { right: -4px; top: 24%; }

.simme-na__orbit-ring--one {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    animation: simme-na-orbit-spin 7.2s linear infinite;
}

.simme-na__orbit-ring--two {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-color: rgba(96,176,255,.20);
    transform: rotateX(64deg) rotateZ(22deg);
    animation: simme-na-orbit-spin-two 10.5s linear infinite reverse;
}

.simme-na__orbit-ring--three {
    width: 98px;
    height: 98px;
    margin: -49px 0 0 -49px;
    border-color: rgba(143,217,255,.12);
    transform: rotateY(58deg) rotateZ(-17deg);
    animation: simme-na-orbit-spin-three 14s linear infinite;
}

@keyframes simme-na-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes simme-na-orbit-spin-two {
    from { transform: rotateX(64deg) rotateZ(22deg) rotate(0deg); }
    to { transform: rotateX(64deg) rotateZ(22deg) rotate(360deg); }
}

@keyframes simme-na-orbit-spin-three {
    from { transform: rotateY(58deg) rotateZ(-17deg) rotate(0deg); }
    to { transform: rotateY(58deg) rotateZ(-17deg) rotate(360deg); }
}

@keyframes simme-na-orbit-core-breathe {
    0%,100% { opacity: .58; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1.14); }
}

/* ------------------------------------------------------------------------
   CELESTIAL LIGHT / DARK CONTROL
   ------------------------------------------------------------------------ */

body .simme-na .simme-na__theme-toggle,
body .simme-na .simme-na__theme-toggle:hover,
body .simme-na .simme-na__theme-toggle:focus,
body .simme-na .simme-na__theme-toggle:active {
    min-height: 58px !important;
    padding: 5px !important;
    overflow: hidden;
    border: 1px solid rgba(88,202,255,.32) !important;
    background:
        radial-gradient(circle at 16% 50%, rgba(36,191,255,.10), transparent 24%),
        linear-gradient(180deg, #081321, #07101b) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 22px rgba(36,191,255,.025),
        0 9px 24px rgba(0,0,0,.16) !important;
}

body .simme-na[data-theme="light"] .simme-na__theme-toggle,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:hover,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:focus,
body .simme-na[data-theme="light"] .simme-na__theme-toggle:active {
    background:
        radial-gradient(circle at 84% 50%, rgba(36,191,255,.11), transparent 25%),
        linear-gradient(180deg, #ffffff, #eef7ff) !important;
}

.simme-na__theme-track {
    position: relative;
    min-height: 48px !important;
    isolation: isolate;
}

.simme-na__theme-track::before {
    position: absolute;
    z-index: 0;
    left: 22%;
    right: 22%;
    top: 50%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(143,217,255,.18), transparent);
    transform: translateY(-50%);
}

.simme-na__theme-track::after {
    position: absolute;
    z-index: 4;
    left: 25%;
    top: 50%;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #a7e5ff;
    box-shadow: 0 0 6px #dff6ff, 0 0 14px rgba(36,191,255,.65), 0 0 28px rgba(36,191,255,.28);
    transform: translate(-50%, -50%);
    transition: left .34s cubic-bezier(.2,.75,.2,1), box-shadow .25s ease;
    pointer-events: none;
}

.simme-na[data-theme="light"] .simme-na__theme-track::after {
    left: 75%;
}

.simme-na__theme-thumb {
    top: 2px !important;
    left: 2px !important;
    width: calc(50% - 2px) !important;
    height: calc(100% - 4px) !important;
    border: 1px solid rgba(143,217,255,.30) !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(143,217,255,.17), transparent 34%),
        linear-gradient(145deg, #17283d, #0d1a2a) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 0 14px rgba(36,191,255,.16),
        0 8px 20px rgba(0,0,0,.18) !important;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    background:
        radial-gradient(circle at 80% 20%, rgba(36,191,255,.12), transparent 36%),
        linear-gradient(145deg, #ffffff, #e8f5ff) !important;
    box-shadow: 0 0 14px rgba(36,124,255,.10), 0 8px 18px rgba(39,78,122,.10) !important;
}

.simme-na__theme-option {
    z-index: 5 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: .025em !important;
}

.simme-na__theme-icon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
}

/* ------------------------------------------------------------------------
   BUTTONS / ACTIONS — CLEAR HIERARCHY, NO THEME COLOUR LEAKAGE
   ------------------------------------------------------------------------ */

body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    min-height: 50px !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(143,217,255,.72) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #168fcf 0%, #20b8f3 58%, #35c9ff 100%) !important;
    color: #04121d !important;
    -webkit-text-fill-color: #04121d !important;
    font-weight: 800 !important;
    letter-spacing: .005em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        0 0 14px rgba(36,191,255,.18),
        0 10px 24px rgba(0,0,0,.12) !important;
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    border-color: #d9f5ff !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 34%),
        linear-gradient(135deg, #28a9e8 0%, #45cfff 62%, #8be2ff 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 0 8px rgba(143,217,255,.44),
        0 0 22px rgba(36,191,255,.26),
        0 12px 28px rgba(0,0,0,.14) !important;
    transform: translateY(-1px);
}

body .simme-na .simme-na__atlas-button,
body .simme-na .simme-na__back-to-atlas,
body .simme-na .simme-na__nodepage-atlas-link {
    border: 1px solid rgba(88,202,255,.34) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(36,191,255,.08), transparent 42%),
        rgba(9,20,35,.78) !important;
    color: #eaf7ff !important;
    -webkit-text-fill-color: #eaf7ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body .simme-na .simme-na__atlas-button:hover,
body .simme-na .simme-na__back-to-atlas:hover,
body .simme-na .simme-na__nodepage-atlas-link:hover {
    border-color: rgba(143,217,255,.72) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(36,191,255,.16), transparent 46%),
        rgba(10,29,48,.92) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(36,191,255,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.simme-na[data-theme="light"] .simme-na__atlas-button,
.simme-na[data-theme="light"] .simme-na__back-to-atlas,
.simme-na[data-theme="light"] .simme-na__nodepage-atlas-link {
    background: linear-gradient(145deg, #ffffff, #edf7ff) !important;
    color: #18304c !important;
    -webkit-text-fill-color: #18304c !important;
}

.simme-na__nodepage-atlas-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    white-space: nowrap;
}

/* Previous / next Nodes become deliberate journey cards rather than default links. */
.simme-na__neighbour {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    border-color: rgba(88,202,255,.20) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(36,191,255,.07), transparent 44%),
        color-mix(in srgb, var(--sna-surface-soft) 96%, transparent) !important;
}

.simme-na__neighbour::after {
    position: absolute;
    inset: 0;
    content: "";
    background: radial-gradient(circle at 8% 0%, rgba(36,191,255,.13), transparent 45%);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.simme-na__neighbour:hover::after { opacity: 1; }
.simme-na__neighbour-copy,
.simme-na__neighbour-media { position: relative; z-index: 2; }

/* ------------------------------------------------------------------------
   ARTICLE LISTS — DESIGNED CONTENT, NOT BROWSER BULLETS
   ------------------------------------------------------------------------ */

.simme-na__intro-block ul,
.simme-na__intro-block ol,
.simme-na__section-copy ul,
.simme-na__section-copy ol {
    display: grid;
    gap: 7px;
    margin: 16px 0 20px !important;
    padding: 0 !important;
    list-style: none !important;
}

.simme-na__intro-block li,
.simme-na__section-copy li {
    position: relative;
    margin: 0 !important;
    padding: 8px 10px 8px 27px !important;
    border: 1px solid rgba(88,202,255,.10);
    border-radius: 10px;
    background: linear-gradient(100deg, rgba(36,191,255,.045), rgba(36,191,255,.01) 58%, transparent);
    color: var(--sna-text-soft);
    line-height: 1.55;
}

.simme-na__intro-block li::before,
.simme-na__section-copy li::before {
    position: absolute;
    left: 11px;
    top: 1.08em;
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: var(--sna-neon-soft);
    box-shadow: 0 0 8px rgba(36,191,255,.45);
}

.simme-na__intro-block ol,
.simme-na__section-copy ol {
    counter-reset: sna-list;
}

.simme-na__intro-block ol li,
.simme-na__section-copy ol li {
    counter-increment: sna-list;
    padding-left: 35px !important;
}

.simme-na__intro-block ol li::before,
.simme-na__section-copy ol li::before {
    content: counter(sna-list);
    top: 7px;
    left: 9px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    background: rgba(36,191,255,.10);
    border: 1px solid rgba(143,217,255,.30);
    color: var(--sna-neon-soft);
    font-size: 9px;
    font-weight: 800;
    box-shadow: none;
}

/* Contents links are a compact navigation component rather than a naked list. */
.simme-na__toc > div {
    display: grid !important;
    gap: 6px !important;
}

.simme-na__toc a {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    min-height: 38px;
    padding: 8px 9px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(36,191,255,.025) !important;
    color: var(--sna-text-soft) !important;
    text-decoration: none !important;
}

.simme-na__toc a::before {
    position: static !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: .52em;
    border-radius: 50%;
    background: var(--sna-neon-soft) !important;
    box-shadow: 0 0 7px rgba(36,191,255,.34);
    content: "" !important;
}

.simme-na__toc a:hover {
    border-color: rgba(88,202,255,.20);
    background: rgba(36,191,255,.065) !important;
    color: var(--sna-text) !important;
}

/* The 32-link closing directory remains crawlable but reads as a designed
   knowledge index rather than an unstyled bank of links. */
.simme-na__index-list {
    gap: 8px !important;
}

.simme-na__index-list a {
    min-height: 38px;
    padding: 8px 10px !important;
    border: 1px solid rgba(88,202,255,.11);
    border-radius: 10px;
    background: rgba(36,191,255,.025);
    transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}

.simme-na__index-list a:hover {
    border-color: rgba(88,202,255,.34);
    background: rgba(36,191,255,.07);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------------
   DEDICATED NODE PAGE CONTROL DOCK
   ------------------------------------------------------------------------ */

.simme-na--node-page .simme-na__nodepage-bar {
    margin: 16px 16px 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(88,202,255,.18) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.08) !important;
}

.simme-na--node-page .simme-na__detail--standalone {
    margin-top: 10px;
}

/* ------------------------------------------------------------------------
   RESPONSIVE ORBIT / CONTROLS
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .simme-na__count {
        grid-template-columns: minmax(0, 1fr) 90px !important;
        min-height: 128px;
        padding: 15px 15px 15px 17px !important;
    }

    .simme-na__orbit {
        width: 86px;
        height: 86px;
        transform: scale(.82) translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0) rotateX(var(--sna-orbit-tilt-x)) rotateY(var(--sna-orbit-tilt-y));
        transform-origin: center;
    }

    .simme-na__nodepage-bar {
        margin: 12px 12px 0 !important;
    }
}

@media (max-width: 560px) {
    .simme-na__count {
        grid-template-columns: minmax(0, 1fr) 76px !important;
        gap: 8px !important;
        min-height: 116px;
    }

    .simme-na__count-copy strong { font-size: 38px !important; }
    .simme-na__orbit { width: 74px; height: 74px; transform: scale(.68); }

    body .simme-na .simme-na__canonical-link {
        min-height: 48px !important;
        padding: 11px 14px !important;
        font-size: 12px !important;
    }

    .simme-na__theme-option {
        font-size: 11px !important;
        gap: 6px !important;
    }

    .simme-na__nodepage-atlas-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na__orbit,
    .simme-na__orbit::before,
    .simme-na__orbit-ring,
    .simme-na__theme-track::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ========================================================================
   SYMSOUL NODE ATLAS V3.4 — INDIVIDUAL NODE PAGE HEADER + LAYOUT POLISH
   - Dark sticky Simme bar on every individual Node URL
   - Dynamic WordPress logo/menu
   - Safer full-detail responsive layout
   - Stable action sizing
   - Cleaner light-mode typography
   ======================================================================== */

.simme-node-topbar {
    position: sticky;
    top: 0;
    z-index: 99990;
    width: 100%;
    color: #eef8ff !important;
    background:
        radial-gradient(circle at 7% -120%, rgba(46, 194, 255, .18), transparent 42%),
        linear-gradient(180deg, rgba(4, 11, 21, .98), rgba(5, 13, 25, .96));
    border-bottom: 1px solid rgba(96, 207, 255, .20);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .02);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.simme-node-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1480px, 100%);
    min-height: 62px;
    margin: 0 auto;
    padding: 8px clamp(16px, 3vw, 34px);
}

.simme-node-topbar__brand,
.simme-node-topbar__brand:hover,
.simme-node-topbar__brand:focus,
.simme-node-topbar__brand:active,
.simme-node-topbar__brand:visited {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: min(170px, 48vw);
    min-height: 38px;
    margin: 0 !important;
    padding: 0 !important;
    color: #f3f8ff !important;
    -webkit-text-fill-color: #f3f8ff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.simme-node-topbar__logo {
    display: block !important;
    width: auto !important;
    max-width: 150px !important;
    height: auto !important;
    max-height: 36px !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 10px rgba(84, 201, 255, .08));
}

.simme-node-topbar__wordmark {
    font-size: 20px;
    font-weight: 720;
    letter-spacing: -.025em;
}

body .simme-na .simme-node-topbar__burger,
body .simme-na .simme-node-topbar__burger:hover,
body .simme-na .simme-node-topbar__burger:focus,
body .simme-na .simme-node-topbar__burger:active {
    position: relative;
    display: grid !important;
    place-content: center;
    gap: 5px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(112, 211, 255, .22) !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at 30% 0%, rgba(36, 191, 255, .10), transparent 55%),
        rgba(10, 22, 38, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    color: #ddf5ff !important;
    cursor: pointer;
    transform: none !important;
}

.simme-node-topbar__burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform .2s ease, opacity .16s ease, width .2s ease;
}

.simme-node-topbar__burger:hover {
    border-color: rgba(143, 217, 255, .58) !important;
    box-shadow: 0 0 14px rgba(36, 191, 255, .14), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.simme-node-topbar__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.simme-node-topbar__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    width: 10px;
}
.simme-node-topbar__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.simme-node-topbar__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(12px, 3vw, 34px);
    width: min(360px, calc(100vw - 24px));
    max-height: min(72vh, 620px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(97, 205, 255, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 0%, rgba(36, 191, 255, .12), transparent 45%),
        rgba(5, 14, 27, .985);
    box-shadow: 0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.simme-node-topbar__menu[hidden] {
    display: none !important;
}

.simme-node-topbar__menu-list,
.simme-node-topbar__menu-list ul {
    display: grid;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.simme-node-topbar__menu-list ul {
    margin: 4px 0 5px 12px !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(102, 205, 255, .16);
}

.simme-node-topbar__menu-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.simme-node-topbar__menu-list a,
.simme-node-topbar__menu-list a:hover,
.simme-node-topbar__menu-list a:focus,
.simme-node-topbar__menu-list a:active,
.simme-node-topbar__menu-list a:visited {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #c9d9ea !important;
    -webkit-text-fill-color: #c9d9ea !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.simme-node-topbar__menu-list a:hover,
.simme-node-topbar__menu-list a:focus-visible {
    border-color: rgba(99, 205, 255, .16) !important;
    background: rgba(36, 191, 255, .065) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* The Atlas control dock stays useful below the persistent site bar. */
.simme-na--node-page .simme-na__nodepage-bar {
    position: relative !important;
    top: auto !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(190px, 250px) !important;
}

/* Stable action typography in every interaction state. */
body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:link,
body .simme-na .simme-na__canonical-link:visited,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    width: min(100%, 440px) !important;
    min-height: 52px !important;
    margin: 14px auto 0 !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 780 !important;
    transform: none !important;
}

body .simme-na .simme-na__atlas-button,
body .simme-na .simme-na__atlas-button:visited,
body .simme-na .simme-na__atlas-button:hover,
body .simme-na .simme-na__atlas-button:focus,
body .simme-na .simme-na__atlas-button:active,
body .simme-na .simme-na__back-to-atlas,
body .simme-na .simme-na__back-to-atlas:visited,
body .simme-na .simme-na__back-to-atlas:hover,
body .simme-na .simme-na__back-to-atlas:focus,
body .simme-na .simme-na__back-to-atlas:active {
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 680 !important;
    transform: none !important;
}

/* Light theme: readable editorial colour rather than saturated electric blue. */
.simme-na[data-theme="light"] .simme-na__detail-tagline {
    color: #2c6b8f !important;
    -webkit-text-fill-color: #2c6b8f !important;
    text-shadow: none !important;
}

.simme-na[data-theme="light"] .simme-na__detail-number,
.simme-na[data-theme="light"] .simme-na__eyebrow {
    color: #407793 !important;
    -webkit-text-fill-color: #407793 !important;
    text-shadow: none !important;
}

/* Never allow raw Builder instructions to look like article content if an old
   cache/browser snapshot happens to contain one. */
.simme-na__section-copy > p:first-child:last-child {
    overflow-wrap: anywhere;
}

/* Earlier layout collapse: the sidebar must never squeeze the article. */
@media (max-width: 1180px) {
    .simme-na--node-page .simme-na__detail-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .simme-na--node-page .simme-na__passport {
        position: static !important;
        top: auto !important;
        order: -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px;
        width: 100%;
    }

    .simme-na--node-page .simme-na__passport-card,
    .simme-na--node-page .simme-na__toc {
        height: 100%;
        min-width: 0;
    }

    .simme-na--node-page .simme-na__canonical-link {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .simme-na--node-page .simme-na__detail-hero {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .simme-na--node-page .simme-na__detail-icon {
        width: 82px !important;
        height: 82px !important;
    }

    .simme-na--node-page .simme-na__back-to-atlas {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .simme-na--node-page .simme-na__passport {
        grid-template-columns: 1fr !important;
    }

    .simme-na--node-page .simme-na__nodepage-bar {
        grid-template-columns: 1fr auto !important;
        gap: 10px !important;
    }

    .simme-na--node-page .simme-na__nodepage-context {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .simme-node-topbar__inner {
        min-height: 58px;
        padding-inline: 13px;
    }

    .simme-node-topbar__logo {
        max-width: 132px !important;
        max-height: 32px !important;
    }

    .simme-na--node-page .simme-na__detail-hero {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .simme-na--node-page .simme-na__detail-icon {
        width: 66px !important;
        height: 66px !important;
        border-radius: 15px !important;
    }

    .simme-na--node-page .simme-na__detail-hero h1,
    .simme-na--node-page .simme-na__detail-hero h2 {
        font-size: clamp(32px, 10vw, 46px) !important;
    }

    .simme-na--node-page .simme-na__nodepage-bar {
        grid-template-columns: 1fr !important;
    }

    .simme-na--node-page .simme-na__theme-toggle,
    .simme-na--node-page .simme-na__nodepage-atlas-link {
        width: 100% !important;
    }

    .simme-na__runtime > div {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
    }

    .simme-na__runtime > div b {
        flex: 1 1 100px;
    }

    .simme-na__runtime > div strong,
    .simme-na__runtime > div small {
        white-space: nowrap;
    }
}


/* ========================================================================
   SYMSOUL NODE ATLAS V3.5 — RESPONSIVE BREATHING-ROOM REPAIR
   2026-08-13
   Only affects .simme-na (Node Atlas).
   - prevents the directory introduction text from flowing beneath the
     Refined Node Detail panel at awkward intermediate widths
   - moves section markers comfortably inside the reading panel instead of
     pinning them against the outer edge
   ======================================================================== */

/* The directory introduction previously contained two minimum-width columns.
   When Themify supplied an intermediate module width, the explanatory copy
   could physically overflow its grid track and appear underneath the sticky
   detail card. A vertical editorial arrangement is more robust at every
   width and gives the opening copy more breathing room. */
.simme-na__directory-heading,
.simme-na.is-detail-open .simme-na__directory-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

.simme-na__directory-heading > *,
.simme-na__directory-heading p {
    min-width: 0 !important;
    max-width: 100% !important;
}

.simme-na__directory-heading p {
    width: min(100%, 760px) !important;
    margin: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Add a little extra separation from the neighbouring detail panel so the
   two areas read as deliberate peers rather than touching columns. */
@media (min-width: 1051px) {
    .simme-na__workspace {
        column-gap: clamp(24px, 2.6vw, 38px) !important;
    }
}

/* Reading-section marker: bring the cyan node marker well inside the panel
   and increase the copy inset to match. This applies to both the Atlas detail
   view and the dedicated individual Node reading pages. */
.simme-na__reading-section {
    padding-left: 52px !important;
    padding-right: clamp(16px, 2vw, 28px) !important;
}

.simme-na__reading-section::before {
    left: 20px !important;
    top: 38px !important;
    width: 10px !important;
    height: 10px !important;
    box-shadow:
        0 0 0 7px rgba(36, 191, 255, .10),
        0 0 16px rgba(36, 191, 255, .22) !important;
}

@media (max-width: 700px) {
    .simme-na__reading-section {
        padding-left: 44px !important;
        padding-right: 14px !important;
    }

    .simme-na__reading-section::before {
        left: 16px !important;
        top: 34px !important;
        width: 9px !important;
        height: 9px !important;
    }
}

/* ========================================================================
   SYMSOUL NODE ATLAS V3.6 — CONTROL + RETURN-STATE RESPONSIVE REPAIR
   2026-08-13
   Only affects .simme-na (Node Atlas).
   - rebuilds the light/dark switch so no decorative light can cover labels
   - removes the legacy responsive grid-area collision in the 32 Node panel
   - gives selected Node titles more width before the directory/sidebar collapses
   - restores a clean Atlas state when leaving a Node detail view
   ======================================================================== */

/* ------------------------------------------------------------------------
   THEME SWITCH — COMPACT SIMME CELESTIAL CONTROL
   ------------------------------------------------------------------------ */
body .simme-na .simme-na__theme-toggle,
body .simme-na .simme-na__theme-toggle:hover,
body .simme-na .simme-na__theme-toggle:focus,
body .simme-na .simme-na__theme-toggle:active {
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 4px !important;
    aspect-ratio: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.simme-na__theme-track {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    isolation: isolate;
    border-radius: 14px !important;
}

/* V3.2 used a travelling luminous particle between the states. At compact
   widths that particle could sit over the label. The active capsule now
   provides the movement and illumination, so the free-floating dot is gone. */
.simme-na__theme-track::after {
    display: none !important;
    content: none !important;
}

.simme-na__theme-track::before {
    left: 50% !important;
    right: auto !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 1px !important;
    height: auto !important;
    background: linear-gradient(180deg, transparent, rgba(143,217,255,.16), transparent) !important;
    transform: none !important;
    opacity: .72;
}

.simme-na__theme-thumb {
    z-index: 1 !important;
    top: 3px !important;
    left: 3px !important;
    width: calc(50% - 3px) !important;
    height: 44px !important;
    border-radius: 12px !important;
    transform: translateX(0) !important;
    transition: transform .28s cubic-bezier(.2,.76,.2,1), background .22s ease, box-shadow .22s ease !important;
}

.simme-na[data-theme="light"] .simme-na__theme-thumb {
    transform: translateX(calc(100% - 3px)) !important;
}

.simme-na__theme-option {
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.simme-na__theme-label {
    position: relative;
    z-index: 2;
    display: inline-block !important;
    min-width: 0;
}

.simme-na__theme-icon {
    position: relative !important;
    z-index: 2;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
}

/* A cleaner crescent. Its cut-out uses the active surface colour rather than
   a bright circular overlay, so there is no second 'light dot'. */
.simme-na__theme-icon--moon::before {
    inset: 1px !important;
    background: currentColor !important;
    box-shadow: 0 0 10px rgba(143,217,255,.24) !important;
}

.simme-na__theme-icon--moon::after {
    top: -1px !important;
    right: -2px !important;
    width: 13px !important;
    height: 13px !important;
    background: #17283d !important;
}

.simme-na[data-theme="light"] .simme-na__theme-icon--moon::after {
    background: #ffffff !important;
}

/* Make Light read as a small sun rather than a plain dot. */
.simme-na__theme-icon--sun::before {
    inset: 4px !important;
    border: 1.7px solid currentColor !important;
    background: transparent !important;
    box-shadow: none !important;
}

.simme-na__theme-icon--sun::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(currentColor,currentColor) center top / 1.5px 3px no-repeat,
        linear-gradient(currentColor,currentColor) center bottom / 1.5px 3px no-repeat,
        linear-gradient(90deg,currentColor,currentColor) left center / 3px 1.5px no-repeat,
        linear-gradient(90deg,currentColor,currentColor) right center / 3px 1.5px no-repeat;
    opacity: .9;
}

/* Keep the dedicated Node-page control compact. Global theme/button rules in
   Themify cannot turn it into the large circular control seen in V3.5. */
.simme-na--node-page .simme-na__theme-toggle {
    width: min(100%, 244px) !important;
    min-width: 210px !important;
    justify-self: end !important;
}

@media (max-width: 860px) {
    .simme-na--node-page .simme-na__theme-toggle {
        width: min(100%, 244px) !important;
        min-width: 0 !important;
        justify-self: start !important;
    }
}

@media (max-width: 640px) {
    .simme-na--node-page .simme-na__theme-toggle {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ------------------------------------------------------------------------
   32 NODE PANEL — REMOVE LEGACY GRID COLLISION
   ------------------------------------------------------------------------ */
.simme-na__count-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: none !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 5px !important;
}

.simme-na__count-copy strong,
.simme-na__count-copy span,
.simme-na__count-copy small {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    max-width: 100% !important;
}

.simme-na__count-copy strong {
    font-size: clamp(38px, 4vw, 54px) !important;
    line-height: .95 !important;
}

.simme-na__count-copy span {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.simme-na__count-copy small {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

@media (max-width: 900px) {
    .simme-na__count {
        grid-template-areas: none !important;
    }
}

@media (max-width: 560px) {
    .simme-na__count-copy strong {
        font-size: 36px !important;
    }
    .simme-na__count-copy span {
        font-size: 12px !important;
    }
    .simme-na__count-copy small {
        font-size: 10px !important;
    }
}

/* ------------------------------------------------------------------------
   SELECTED NODE — GIVE LONG TITLES ROOM BEFORE THEY CAN CLIP
   ------------------------------------------------------------------------ */
.simme-na__detail-hero-copy,
.simme-na__detail-hero-copy h1,
.simme-na__detail-hero-copy h2,
.simme-na__detail-summary,
.simme-na__detail-tagline {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* The compact directory + article split only survives where there is genuinely
   enough Atlas width. This prevents Transparency & Intervention and similar
   names being clipped at intermediate Themify widths. */
@container simme-node-atlas (max-width: 1420px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__detail-hero {
        grid-template-columns: 100px minmax(0, 1fr) !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__back-to-atlas {
        position: static !important;
        grid-column: 2 !important;
        justify-self: start !important;
    }
}

@media (max-width: 1420px) {
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .simme-na__detail-hero,
    .simme-na.is-detail-open:not(.simme-na--node-page) .simme-na__detail-hero {
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .simme-na__detail-icon {
        width: 74px !important;
        height: 74px !important;
    }

    .simme-na__detail-hero h1,
    .simme-na__detail-hero h2 {
        font-size: clamp(31px, 8vw, 44px) !important;
        line-height: 1.02 !important;
    }
}

/* ------------------------------------------------------------------------
   CLEAN RETURN TO ATLAS
   ------------------------------------------------------------------------ */
/* When detail mode is not active there must be no condensed-directory state
   left behind. These are intentionally narrow resets, not a redesign of the
   normal Atlas desktop composition. */
.simme-na:not(.is-detail-open) .simme-na__directory {
    min-width: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

.simme-na:not(.is-detail-open) .simme-na__grid {
    width: 100% !important;
}

@media (max-width: 1050px) {
    .simme-na:not(.is-detail-open) .simme-na__workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .simme-na:not(.is-detail-open) .simme-na__detail {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}



/* =========================================================
   SYMSOUL NODE ATLAS V3.7 — PREMIUM CATEGORY CONTROLS,
   COLOUR-CODED ORBIT SPHERES & ACTIVE NODE ICON AURA

   - Seven orbit spheres match the seven Node category colour accents.
   - Uses only colours already present elsewhere in the Simme/site CSS.
   - Category controls are flatter and more premium, with a restrained
     warm-gold halo behind the control on hover/focus/selection.
   - Selecting a Node creates a colour-coded glow behind its authorised icon.
   ========================================================= */

/* Shared semantic colour set: all colours already exist in the current Simme CSS. */
.simme-na {
    --sna-group-1: #8fd9ff;
    --sna-group-2: #24bfff;
    --sna-group-3: #37b7ff;
    --sna-group-4: #d84bff;
    --sna-group-5: #ff7bd9;
    --sna-group-6: #f5d66d;
    --sna-group-7: #e1edfa;
    --sna-warm-glow: #f5d66d;
}

/* ---------------------------------------------------------------------
   1. PREMIUM CATEGORY FILTERS — FLAT, QUIET, WARM INTERACTION AURA
   --------------------------------------------------------------------- */

.simme-na .simme-na__filters {
    gap: 10px 12px;
    align-items: center;
}

.simme-na .simme-na__filter,
.simme-na .simme-na__filter:hover,
.simme-na .simme-na__filter:focus,
.simme-na .simme-na__filter:active {
    --sna-filter-accent: var(--sna-group-1);
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    min-height: 42px;
    padding: 9px 17px !important;
    border: 1px solid color-mix(in srgb, var(--sna-filter-accent) 24%, var(--sna-border) 76%) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sna-surface) 92%, transparent) !important;
    color: var(--sna-text-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    line-height: 1.15 !important;
    letter-spacing: .012em !important;
    text-shadow: none !important;
    transform: none !important;
    isolation: isolate !important;
    transition:
        border-color .22s ease,
        color .22s ease,
        background-color .22s ease,
        box-shadow .25s ease !important;
}

.simme-na .simme-na__filter::before {
    position: absolute;
    z-index: -1;
    left: 12%;
    right: 12%;
    bottom: -10px;
    height: 24px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(245,214,109,.28) 0%,
        rgba(245,214,109,.13) 38%,
        rgba(245,214,109,0) 74%
    );
    filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transform: scale(.86);
    transition: opacity .24s ease, transform .28s ease;
}

.simme-na .simme-na__filter::after {
    position: absolute;
    z-index: 0;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    content: "";
    border-radius: 999px;
    background: color-mix(in srgb, var(--sna-filter-accent) 72%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, left .22s ease, right .22s ease;
}

.simme-na .simme-na__filter:hover,
.simme-na .simme-na__filter:focus-visible {
    border-color: color-mix(in srgb, var(--sna-filter-accent) 54%, var(--sna-border) 46%) !important;
    background: color-mix(in srgb, var(--sna-surface) 88%, var(--sna-filter-accent) 12%) !important;
    color: var(--sna-text) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

.simme-na .simme-na__filter:hover::before,
.simme-na .simme-na__filter:focus-visible::before {
    opacity: .72;
    transform: scale(1);
}

.simme-na .simme-na__filter:hover::after,
.simme-na .simme-na__filter:focus-visible::after {
    left: 12px;
    right: 12px;
    opacity: .48;
}

.simme-na .simme-na__filter.is-active,
.simme-na .simme-na__filter.is-active:hover,
.simme-na .simme-na__filter.is-active:focus-visible {
    border-color: color-mix(in srgb, var(--sna-filter-accent) 72%, var(--sna-border) 28%) !important;
    background: color-mix(in srgb, var(--sna-surface) 84%, var(--sna-filter-accent) 16%) !important;
    color: var(--sna-text) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--sna-filter-accent) 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--sna-filter-accent) 7%, transparent) !important;
}

.simme-na .simme-na__filter.is-active::before {
    opacity: .88;
    transform: scale(1.08);
}

.simme-na .simme-na__filter.is-active::after {
    left: 10px;
    right: 10px;
    opacity: .78;
}

.simme-na .simme-na__filter[data-simme-filter="all"]   { --sna-filter-accent: var(--sna-group-1); }
.simme-na .simme-na__filter[data-simme-filter="01-05"] { --sna-filter-accent: var(--sna-group-1); }
.simme-na .simme-na__filter[data-simme-filter="06-10"] { --sna-filter-accent: var(--sna-group-2); }
.simme-na .simme-na__filter[data-simme-filter="11-15"] { --sna-filter-accent: var(--sna-group-3); }
.simme-na .simme-na__filter[data-simme-filter="16-20"] { --sna-filter-accent: var(--sna-group-4); }
.simme-na .simme-na__filter[data-simme-filter="21-25"] { --sna-filter-accent: var(--sna-group-5); }
.simme-na .simme-na__filter[data-simme-filter="26-30"] { --sna-filter-accent: var(--sna-group-6); }
.simme-na .simme-na__filter[data-simme-filter="31-32"] { --sna-filter-accent: var(--sna-group-7); }

/* Slightly softer warm aura on the light reading theme. */
.simme-na[data-theme="light"] .simme-na__filter::before {
    opacity: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(245,214,109,.20) 0%,
        rgba(245,214,109,.08) 40%,
        rgba(245,214,109,0) 74%
    );
}

.simme-na[data-theme="light"] .simme-na__filter:hover::before,
.simme-na[data-theme="light"] .simme-na__filter:focus-visible::before {
    opacity: .64;
}

.simme-na[data-theme="light"] .simme-na__filter.is-active::before {
    opacity: .76;
}

/* ---------------------------------------------------------------------
   2. SEVEN ORBIT SPHERES — ONE COLOUR FAMILY PER NODE GROUP
   --------------------------------------------------------------------- */

.simme-na__orbit-ring i {
    --sna-orb: var(--sna-group-1);
    width: 10px !important;
    height: 10px !important;
    border: 1px solid color-mix(in srgb, var(--sna-orb) 60%, white 40%) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(
            circle at 29% 24%,
            rgba(255,255,255,.98) 0 10%,
            color-mix(in srgb, var(--sna-orb) 72%, white 28%) 14% 28%,
            var(--sna-orb) 48% 64%,
            color-mix(in srgb, var(--sna-orb) 55%, #00121d 45%) 100%
        ) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.48),
        inset -2px -2px 3px rgba(0,18,29,.42),
        0 0 6px color-mix(in srgb, var(--sna-orb) 88%, transparent),
        0 0 15px color-mix(in srgb, var(--sna-orb) 48%, transparent) !important;
    transform-style: preserve-3d;
}

/* Seven group colours, all already used elsewhere in the existing site/app CSS. */
.simme-na__orbit-ring--one i:nth-child(1)  { --sna-orb: var(--sna-group-1); }
.simme-na__orbit-ring--one i:nth-child(2)  { --sna-orb: var(--sna-group-2); }
.simme-na__orbit-ring--one i:nth-child(3)  { --sna-orb: var(--sna-group-3); }
.simme-na__orbit-ring--two i:nth-child(1)  { --sna-orb: var(--sna-group-4); }
.simme-na__orbit-ring--two i:nth-child(2)  { --sna-orb: var(--sna-group-5); }
.simme-na__orbit-ring--three i:nth-child(1){ --sna-orb: var(--sna-group-6); }
.simme-na__orbit-ring--three i:nth-child(2){ --sna-orb: var(--sna-group-7); }

/* Re-space the sphere centres around each ring. */
.simme-na__orbit-ring--one i:nth-child(1) {
    left: -5px !important;
    top: calc(50% - 5px) !important;
}

.simme-na__orbit-ring--one i:nth-child(2) {
    right: -5px !important;
    top: 18% !important;
}

.simme-na__orbit-ring--one i:nth-child(3) {
    left: calc(50% - 5px) !important;
    bottom: -5px !important;
    top: auto !important;
    right: auto !important;
}

.simme-na__orbit-ring--two i:nth-child(1) {
    left: 7% !important;
    top: 7% !important;
}

.simme-na__orbit-ring--two i:nth-child(2) {
    right: 4% !important;
    bottom: 13% !important;
    top: auto !important;
}

.simme-na__orbit-ring--three i:nth-child(1) {
    left: -5px !important;
    top: 56% !important;
}

.simme-na__orbit-ring--three i:nth-child(2) {
    right: 9% !important;
    top: 12% !important;
}

/* Keep the orbital paths fine and understated so the spheres are the focus. */
.simme-na__orbit-ring {
    border-color: rgba(143,217,255,.16) !important;
    box-shadow: inset 0 0 12px rgba(36,191,255,.025);
}

.simme-na__orbit-ring--two {
    border-color: rgba(216,75,255,.13) !important;
}

.simme-na__orbit-ring--three {
    border-color: rgba(245,214,109,.11) !important;
}

/* ---------------------------------------------------------------------
   3. ACTIVE NODE ICON — GROUP-COLOURED LIGHT FROM BEHIND
   --------------------------------------------------------------------- */

.simme-na__node[data-group="01-05"] { --sna-node-aura: var(--sna-group-1); }
.simme-na__node[data-group="06-10"] { --sna-node-aura: var(--sna-group-2); }
.simme-na__node[data-group="11-15"] { --sna-node-aura: var(--sna-group-3); }
.simme-na__node[data-group="16-20"] { --sna-node-aura: var(--sna-group-4); }
.simme-na__node[data-group="21-25"] { --sna-node-aura: var(--sna-group-5); }
.simme-na__node[data-group="26-30"] { --sna-node-aura: var(--sna-group-6); }
.simme-na__node[data-group="31-32"] { --sna-node-aura: var(--sna-group-7); }

.simme-na__node-media {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.simme-na__node-media::before {
    position: absolute;
    z-index: -1;
    inset: -15px;
    content: "";
    border-radius: 28px;
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 40%, transparent) 0%,
        color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 20%, transparent) 38%,
        transparent 72%
    );
    filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transform: scale(.78);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.72,.2,1), filter .28s ease;
}

.simme-na__node-media img,
.simme-na__node-media .simme-na__node-number-only {
    position: relative;
    z-index: 2;
    border-radius: inherit;
}

/* A hint on hover; a fuller aura only once the Node is actually selected. */
.simme-na__node:hover .simme-na__node-media::before,
.simme-na__node:focus-visible .simme-na__node-media::before {
    opacity: .42;
    transform: scale(.92);
}

.simme-na__node.is-selected .simme-na__node-media::before {
    opacity: .96;
    filter: blur(8px);
    transform: scale(1.08);
}

.simme-na__node.is-selected .simme-na__node-media {
    border-color: color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 52%, rgba(255,255,255,.07) 48%) !important;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 30%, transparent),
        0 0 24px color-mix(in srgb, var(--sna-node-aura, var(--sna-group-1)) 18%, transparent) !important;
}

/* Keep the image aura tasteful in the light theme. */
.simme-na[data-theme="light"] .simme-na__node.is-selected .simme-na__node-media::before {
    opacity: .58;
}

/* ---------------------------------------------------------------------
   4. SMALL-SCREEN TUNING
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
    .simme-na .simme-na__filters {
        gap: 8px;
    }

    .simme-na .simme-na__filter,
    .simme-na .simme-na__filter:hover,
    .simme-na .simme-na__filter:focus,
    .simme-na .simme-na__filter:active {
        min-height: 38px;
        padding: 8px 13px !important;
        font-size: 11px !important;
    }

    .simme-na .simme-na__filter::before {
        bottom: -8px;
        height: 20px;
        filter: blur(6px);
    }

    .simme-na__orbit-ring i {
        width: 9px !important;
        height: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na .simme-na__filter::before,
    .simme-na .simme-na__filter::after,
    .simme-na__node-media::before {
        transition: none !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V3.8 — ORBIT MOTION RELIABILITY

   The three orbit paths now have two motion layers:
   1. CSS animation remains as a no-JavaScript fallback.
   2. When the V3.8 JavaScript engine starts, it takes direct control of
      ring rotation so global theme rules / browser animation resets cannot
      leave the seven Node spheres frozen.
   ========================================================= */

/* Strong fallback: make sure the orbit actually runs if JS is unavailable. */
.simme-na .simme-na__orbit-ring--one {
    animation: simme-na-orbit-spin 7.2s linear infinite !important;
}

.simme-na .simme-na__orbit-ring--two {
    animation: simme-na-orbit-spin-two 10.5s linear infinite reverse !important;
}

.simme-na .simme-na__orbit-ring--three {
    animation: simme-na-orbit-spin-three 14s linear infinite !important;
}

/* Once JS is active it owns transform updates; prevent CSS animation from
   fighting those inline transforms. */
.simme-na.simme-na--orbit-js .simme-na__orbit-ring,
.simme-na.simme-na--orbit-js .simme-na__orbit-ring--one,
.simme-na.simme-na--orbit-js .simme-na__orbit-ring--two,
.simme-na.simme-na--orbit-js .simme-na__orbit-ring--three {
    animation: none !important;
    will-change: transform;
}

/* Keep the seven spheres visually spherical while their parent orbit tilts. */
.simme-na.simme-na--orbit-js .simme-na__orbit-ring i {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Reduced-motion is slowed dramatically rather than frozen completely, so
   the panel still reads as a living Node system without fast movement. */
@media (prefers-reduced-motion: reduce) {
    .simme-na:not(.simme-na--orbit-js) .simme-na__orbit-ring--one {
        animation: simme-na-orbit-spin 45s linear infinite !important;
    }

    .simme-na:not(.simme-na--orbit-js) .simme-na__orbit-ring--two {
        animation: simme-na-orbit-spin-two 58s linear infinite reverse !important;
    }

    .simme-na:not(.simme-na--orbit-js) .simme-na__orbit-ring--three {
        animation: simme-na-orbit-spin-three 72s linear infinite !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V3.9 — MOBILE RESILIENCE, ROUNDED
   READING PANELS & PREMIUM PRIMARY ACTION
   2026-08-13

   - Prevents the intermittent empty mobile Atlas caused by detail-state and
     viewport-state becoming out of sync after resize/orientation/BFCache.
   - Adds a safe no-JS / class-mismatch fallback so server-rendered Node cards
     always remain available rather than leaving an empty workspace.
   - Rounds full Node reading panels to match the wider Simme design language.
   - Rebuilds the standalone/Atlas action as a restrained premium control with
     a stronger CSS-drawn open/grid symbol instead of the weak text arrow.
   ========================================================= */

/* ---------------------------------------------------------------------
   1. MOBILE / TABLET RENDERING RESILIENCE
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* vh fallback first for Safari/older mobile engines, dvh where supported. */
    .simme-na__detail {
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

    /* Normal Atlas state must always render its server-side directory/cards. */
    .simme-na:not(.is-detail-open):not(.simme-na--node-page) .simme-na__directory {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .simme-na:not(.is-detail-open):not(.simme-na--node-page) .simme-na__grid {
        display: grid !important;
        width: 100% !important;
        min-height: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .simme-na:not(.is-detail-open):not(.simme-na--node-page) .simme-na__node:not([hidden]) {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Fail-safe state. If the browser crosses the mobile breakpoint while the
       desktop detail class is still present, show usable inline content instead
       of hiding the directory and translating the only detail panel off-screen. */
    .simme-na.is-detail-open:not(.is-mobile-detail-open):not(.simme-na--node-page) .simme-na__directory {
        display: block !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .simme-na.is-detail-open:not(.is-mobile-detail-open):not(.simme-na--node-page) .simme-na__detail {
        position: relative !important;
        z-index: 2 !important;
        inset: auto !important;
        width: 100% !important;
        max-height: none !important;
        margin-top: 20px !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .simme-na.is-mobile-detail-open:not(.simme-na--node-page) .simme-na__directory {
        display: none !important;
    }

    .simme-na.is-mobile-detail-open:not(.simme-na--node-page) .simme-na__detail {
        position: fixed !important;
        inset: 10px !important;
        margin: 0 !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }
}

/* The narrow phone grid remains two useful columns until the viewport is too
   small for readable cards, then drops cleanly to one. */
@media (max-width: 360px) {
    .simme-na__grid,
    .simme-na.is-detail-open .simme-na__grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------------------------------------------------------------------
   2. FULL NODE READING PANELS — SOFT ROUNDED CONTAINERS
   --------------------------------------------------------------------- */

.simme-na__sections {
    display: grid !important;
    gap: 14px !important;
}

.simme-na__reading-section {
    margin: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 31px !important;
    border: 1px solid rgba(92,185,231,.20) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 16px 15px 34px rgba(36,191,255,.015),
        0 10px 26px rgba(0,0,0,.06) !important;
}

.simme-na[data-theme="dark"] .simme-na__reading-section {
    border-color: rgba(92,185,231,.19) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 18px 16px 38px rgba(36,191,255,.018),
        0 12px 28px rgba(0,0,0,.12) !important;
}

.simme-na[data-theme="light"] .simme-na__reading-section {
    border-color: rgba(67,151,205,.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 16px 14px 34px rgba(36,124,255,.018),
        0 12px 28px rgba(46,74,112,.065) !important;
}

@media (max-width: 700px) {
    .simme-na__sections {
        gap: 11px !important;
    }

    .simme-na__reading-section {
        border-radius: 17px !important;
    }
}

/* ---------------------------------------------------------------------
   3. PRIMARY NODE ACTION — DARK GLASS + CYAN ENERGY EDGE
   --------------------------------------------------------------------- */

body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:link,
body .simme-na .simme-na__canonical-link:visited,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: auto !important;
    max-width: min(100%, 470px) !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 9px 10px 9px 18px !important;
    overflow: visible !important;
    border: 1px solid rgba(88,202,255,.48) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(ellipse at 8% 0%, rgba(36,191,255,.13), transparent 48%),
        linear-gradient(135deg, #10243a 0%, #0b192b 56%, #081321 100%) !important;
    color: #e1edfa !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 16px 14px 30px rgba(36,191,255,.025),
        0 10px 24px rgba(0,0,0,.16) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transform: none !important;
    transition:
        border-color .2s ease,
        box-shadow .24s ease,
        background .24s ease,
        color .2s ease !important;
}

body .simme-na .simme-na__canonical-link::before {
    position: absolute;
    z-index: -1;
    left: 10%;
    right: 10%;
    bottom: -13px;
    height: 25px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(245,214,109,.20), rgba(245,214,109,.07) 44%, transparent 74%);
    filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .24s ease;
    transform: scale(.84);
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    border-color: rgba(143,217,255,.78) !important;
    color: #ffffff !important;
    background:
        radial-gradient(ellipse at 8% 0%, rgba(36,191,255,.19), transparent 50%),
        linear-gradient(135deg, #132b45 0%, #0c1d31 56%, #081321 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 0 16px rgba(36,191,255,.14),
        0 12px 26px rgba(0,0,0,.18) !important;
}

body .simme-na .simme-na__canonical-link:hover::before,
body .simme-na .simme-na__canonical-link:focus-visible::before {
    opacity: .78;
    transform: scale(1);
}

.simme-na__canonical-label {
    min-width: 0;
    flex: 1 1 auto;
}

.simme-na__canonical-icon {
    position: relative;
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(143,217,255,.34);
    border-radius: 13px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.14), transparent 30%),
        rgba(36,191,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 14px rgba(36,191,255,.08);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

body .simme-na .simme-na__canonical-link:hover .simme-na__canonical-icon,
body .simme-na .simme-na__canonical-link:focus-visible .simme-na__canonical-icon {
    border-color: rgba(143,217,255,.68);
    background: rgba(36,191,255,.14);
    box-shadow: 0 0 16px rgba(36,191,255,.15);
}

/* CSS-drawn 'open' symbol: a clean page corner + outward movement mark. */
.simme-na__canonical-icon--open::before,
.simme-na__canonical-icon--open::after,
.simme-na__canonical-icon--open > span::before,
.simme-na__canonical-icon--open > span::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.simme-na__canonical-icon--open::before {
    left: 10px;
    bottom: 9px;
    width: 14px;
    height: 14px;
    border: 1.7px solid #8fd9ff;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 3px;
}

.simme-na__canonical-icon--open::after {
    right: 9px;
    top: 9px;
    width: 13px;
    height: 13px;
    border-top: 1.8px solid #e1edfa;
    border-right: 1.8px solid #e1edfa;
}

.simme-na__canonical-icon--open > span::before {
    left: 16px;
    top: 20px;
    width: 15px;
    height: 1.8px;
    border-radius: 2px;
    background: #e1edfa;
    transform: rotate(-45deg);
    transform-origin: center;
}

.simme-na__canonical-icon--open > span::after {
    right: 8px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #24bfff;
    box-shadow: 0 0 8px rgba(36,191,255,.6);
}

/* Atlas symbol: four connected Node points rather than another arrow. */
.simme-na__canonical-icon--atlas::before {
    position: absolute;
    inset: 9px;
    content: "";
    border: 1px solid rgba(143,217,255,.48);
    border-radius: 8px;
    transform: rotate(45deg) scale(.75);
}

.simme-na__canonical-icon--atlas::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: #e1edfa;
    box-shadow:
        -9px 0 0 #24bfff,
        9px 0 0 #8fd9ff,
        0 -9px 0 #d84bff,
        0 9px 0 #f5d66d,
        0 0 10px rgba(36,191,255,.34);
    transform: translate(-50%,-50%);
}

/* Light mode keeps the action premium instead of reverting to the previous
   bright cyan slab with black copy. */
.simme-na[data-theme="light"] .simme-na__canonical-link,
.simme-na[data-theme="light"] .simme-na__canonical-link:link,
.simme-na[data-theme="light"] .simme-na__canonical-link:visited {
    border-color: rgba(38,148,212,.38) !important;
    background:
        radial-gradient(ellipse at 7% 0%, rgba(36,191,255,.10), transparent 48%),
        linear-gradient(135deg, #ffffff 0%, #f5faff 62%, #edf6fd 100%) !important;
    color: #102033 !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 10px 24px rgba(31,77,112,.09) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-link:hover,
.simme-na[data-theme="light"] .simme-na__canonical-link:focus-visible {
    border-color: rgba(36,191,255,.64) !important;
    color: #0c1b2d !important;
    background:
        radial-gradient(ellipse at 7% 0%, rgba(36,191,255,.15), transparent 50%),
        linear-gradient(135deg, #ffffff 0%, #f0f8ff 58%, #e9f5fd 100%) !important;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 0 14px rgba(36,191,255,.10),
        0 12px 26px rgba(31,77,112,.10) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon {
    border-color: rgba(36,124,255,.24);
    background: rgba(36,191,255,.07);
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--open::after {
    border-color: #1e5f91 !important;
    background: transparent !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--open > span::before {
    background: #1e5f91 !important;
}

@media (max-width: 700px) {
    body .simme-na .simme-na__canonical-link,
    body .simme-na .simme-na__canonical-link:link,
    body .simme-na .simme-na__canonical-link:visited,
    body .simme-na .simme-na__canonical-link:hover,
    body .simme-na .simme-na__canonical-link:focus,
    body .simme-na .simme-na__canonical-link:active {
        width: 100% !important;
        max-width: none !important;
        min-height: 56px !important;
        padding-left: 15px !important;
        font-size: 12px !important;
    }

    .simme-na__canonical-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V4.0 — LIVE SPHERE ORBIT + PURPOSEFUL
   FOCUS/ATLAS ACTIONS
   2026-08-13

   This block intentionally overrides the earlier V3.8/V3.9 orbit and
   canonical-link experiments without changing any non-Atlas styling.
   ========================================================= */

/* ---------------------------------------------------------------------
   1. LIVE ORBIT: STATIC PATHS, JAVASCRIPT-MOVED SPHERES
   --------------------------------------------------------------------- */

.simme-na.simme-na--orbit-live .simme-na__orbit {
    overflow: visible !important;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring,
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--one,
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--two,
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--three {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    pointer-events: none;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring::before {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    border: 1px solid rgba(143,217,255,.17);
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(36,191,255,.018);
    transform-origin: 50% 50%;
    pointer-events: none;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--one::before {
    width: 68px;
    height: 36px;
    border-color: rgba(143,217,255,.20);
    transform: translate(-50%,-50%) rotate(-18deg);
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--two::before {
    width: 90px;
    height: 54px;
    border-color: rgba(216,75,255,.16);
    transform: translate(-50%,-50%) rotate(51deg);
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--three::before {
    width: 100px;
    height: 74px;
    border-color: rgba(245,214,109,.13);
    transform: translate(-50%,-50%) rotate(-39deg);
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring i {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    animation: none !important;
    transition: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Make the balls read as tiny illuminated Node bodies rather than flat dots. */
.simme-na.simme-na--orbit-live .simme-na__orbit-ring i::after {
    position: absolute;
    left: 22%;
    top: 16%;
    width: 27%;
    height: 27%;
    content: "";
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    filter: blur(.2px);
    opacity: .82;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   2. PURPOSEFUL ACTION CONTROL — FOCUS VIEW
   --------------------------------------------------------------------- */

body .simme-na .simme-na__canonical-link,
body .simme-na .simme-na__canonical-link:link,
body .simme-na .simme-na__canonical-link:visited,
body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus,
body .simme-na .simme-na__canonical-link:active {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    overflow: visible !important;
    border: 1px solid rgba(93,196,242,.34) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(36,191,255,.10), transparent 48%),
        linear-gradient(135deg, #0c1a29 0%, #0a1522 68%, #08111c 100%) !important;
    color: #e1edfa !important;
    -webkit-text-fill-color: #e1edfa !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 22px rgba(36,191,255,.025),
        0 10px 24px rgba(0,0,0,.16) !important;
    transform: none !important;
    isolation: isolate;
    transition: border-color .22s ease, background .22s ease, box-shadow .25s ease !important;
}

body .simme-na .simme-na__canonical-link::before {
    position: absolute;
    z-index: -1;
    left: 7%;
    right: 7%;
    bottom: -12px;
    height: 28px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(245,214,109,.24), rgba(245,214,109,.09) 42%, transparent 76%);
    filter: blur(8px);
    opacity: 0;
    transform: scale(.84);
    pointer-events: none;
    transition: opacity .22s ease, transform .25s ease;
}

body .simme-na .simme-na__canonical-link:hover,
body .simme-na .simme-na__canonical-link:focus-visible {
    border-color: rgba(143,217,255,.72) !important;
    background:
        radial-gradient(ellipse at 11% 0%, rgba(36,191,255,.15), transparent 50%),
        linear-gradient(135deg, #0e2032 0%, #0a1725 68%, #08131f 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        inset 0 0 24px rgba(36,191,255,.04),
        0 0 16px rgba(36,191,255,.09),
        0 12px 26px rgba(0,0,0,.2) !important;
}

body .simme-na .simme-na__canonical-link:hover::before,
body .simme-na .simme-na__canonical-link:focus-visible::before {
    opacity: .82;
    transform: scale(1);
}

body .simme-na .simme-na__canonical-copy {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 3px !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body .simme-na .simme-na__canonical-label {
    display: block !important;
    min-width: 0 !important;
    color: #e1edfa !important;
    -webkit-text-fill-color: #e1edfa !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    letter-spacing: .005em !important;
}

body .simme-na .simme-na__canonical-copy small {
    display: block !important;
    color: #94a9c2 !important;
    -webkit-text-fill-color: #94a9c2 !important;
    font-size: 10px !important;
    font-weight: 560 !important;
    line-height: 1.25 !important;
    letter-spacing: .015em !important;
}

body .simme-na .simme-na__canonical-link:hover .simme-na__canonical-label,
body .simme-na .simme-na__canonical-link:focus-visible .simme-na__canonical-label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Purpose icon: a Node reading page, not an external-link arrow. */
.simme-na__canonical-icon,
.simme-na__canonical-icon--read {
    position: relative !important;
    display: block !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(143,217,255,.28) !important;
    border-radius: 14px !important;
    background: rgba(36,191,255,.055) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 14px rgba(36,191,255,.055) !important;
}

.simme-na__canonical-icon--read::before {
    position: absolute;
    left: 12px;
    top: 8px;
    width: 19px;
    height: 26px;
    content: "";
    border: 1.6px solid #8fd9ff;
    border-radius: 4px;
    background: rgba(4,16,27,.48);
    box-shadow: inset 0 0 8px rgba(36,191,255,.06);
}

.simme-na__canonical-icon--read::after {
    position: absolute;
    left: 17px;
    top: 13px;
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: #24bfff;
    box-shadow: 0 0 7px rgba(36,191,255,.75);
}

.simme-na__canonical-icon--read > span::before,
.simme-na__canonical-icon--read > span::after {
    position: absolute;
    left: 17px;
    content: "";
    height: 1.5px;
    border-radius: 999px;
    background: #dff6ff;
    opacity: .92;
}

.simme-na__canonical-icon--read > span::before {
    top: 23px;
    width: 10px;
    box-shadow: 0 5px 0 rgba(223,246,255,.72);
}

.simme-na__canonical-icon--read > span::after {
    right: 8px;
    left: auto;
    bottom: 8px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #f5d66d;
    border-bottom: 1.5px solid #f5d66d;
    border-radius: 0 0 3px 0;
    background: transparent;
    opacity: .76;
}

/* Atlas icon: connected Nodes/orbits, purpose-specific to returning to the Atlas. */
.simme-na__canonical-icon--atlas::before {
    position: absolute !important;
    left: 9px !important;
    top: 13px !important;
    width: 24px !important;
    height: 16px !important;
    content: "" !important;
    border: 1px solid rgba(143,217,255,.54) !important;
    border-radius: 50% !important;
    transform: rotate(-14deg) !important;
}

.simme-na__canonical-icon--atlas::after {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 5px !important;
    height: 5px !important;
    content: "" !important;
    border-radius: 50% !important;
    background: #e1edfa !important;
    box-shadow:
        -10px -5px 0 #24bfff,
        10px -4px 0 #d84bff,
        -6px 8px 0 #f5d66d,
        8px 7px 0 #ff7bd9,
        0 0 9px rgba(36,191,255,.35) !important;
    transform: translate(-50%,-50%) !important;
}

.simme-na__canonical-icon--atlas > span::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    content: "";
    border: 1px solid rgba(216,75,255,.18);
    border-radius: 50%;
    transform: translate(-50%,-50%) rotate(50deg) scaleY(.52);
}

/* Light theme: preserve the same hierarchy and make the copy unambiguously readable. */
.simme-na[data-theme="light"] .simme-na__canonical-link,
.simme-na[data-theme="light"] .simme-na__canonical-link:link,
.simme-na[data-theme="light"] .simme-na__canonical-link:visited {
    border-color: rgba(38,148,212,.34) !important;
    background:
        radial-gradient(ellipse at 9% 0%, rgba(36,191,255,.09), transparent 48%),
        linear-gradient(135deg, #ffffff 0%, #f6faff 72%, #eef6fc 100%) !important;
    color: #102033 !important;
    -webkit-text-fill-color: #102033 !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-label {
    color: #102033 !important;
    -webkit-text-fill-color: #102033 !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-copy small {
    color: #60748d !important;
    -webkit-text-fill-color: #60748d !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon {
    border-color: rgba(38,148,212,.22) !important;
    background: rgba(36,191,255,.05) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--read::before {
    background: rgba(255,255,255,.72);
    border-color: #2d8fc5;
}

@media (max-width: 700px) {
    body .simme-na .simme-na__canonical-link,
    body .simme-na .simme-na__canonical-link:link,
    body .simme-na .simme-na__canonical-link:visited,
    body .simme-na .simme-na__canonical-link:hover,
    body .simme-na .simme-na__canonical-link:focus,
    body .simme-na .simme-na__canonical-link:active {
        min-height: 62px !important;
        padding: 9px 12px !important;
        gap: 11px !important;
        border-radius: 16px !important;
    }

    .simme-na__canonical-icon,
    .simme-na__canonical-icon--read {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
    }

    body .simme-na .simme-na__canonical-label {
        font-size: 12px !important;
    }

    body .simme-na .simme-na__canonical-copy small {
        font-size: 9px !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V4.1 — RESPONSIVE ORBIT CONTAINMENT
   2026-08-13

   Keeps every orbit path and sphere inside the 32-node panel at all
   responsive sizes. The V4.0 live animation remains; only geometry is
   normalised so compact phone/tablet orbit visuals do not use desktop
   pixel dimensions.
   ========================================================= */

/* The orbit visual owns its own contained drawing area. */
.simme-na.simme-na--orbit-live .simme-na__orbit {
    overflow: visible !important;
    contain: layout style;
}

/* Paths now scale with the rendered orbit visual rather than staying at
   desktop-only pixel dimensions. */
.simme-na.simme-na--orbit-live .simme-na__orbit-ring--one::before {
    width: 56% !important;
    height: 30% !important;
    transform: translate(-50%, -50%) rotate(-18deg) !important;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--two::before {
    width: 70% !important;
    height: 42% !important;
    transform: translate(-50%, -50%) rotate(51deg) !important;
}

.simme-na.simme-na--orbit-live .simme-na__orbit-ring--three::before {
    width: 80% !important;
    height: 58% !important;
    transform: translate(-50%, -50%) rotate(-39deg) !important;
}

/* Give the drawing a little safe area on compact controls. */
@media (max-width: 900px) {
    .simme-na.simme-na--orbit-live .simme-na__orbit {
        width: 82px !important;
        height: 82px !important;
        transform:
            translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0)
            rotateX(var(--sna-orbit-tilt-x))
            rotateY(var(--sna-orbit-tilt-y)) !important;
    }
}

@media (max-width: 560px) {
    .simme-na.simme-na--orbit-live .simme-na__orbit {
        width: 70px !important;
        height: 70px !important;
        transform:
            translate3d(var(--sna-orbit-x), var(--sna-orbit-y), 0)
            rotateX(var(--sna-orbit-tilt-x))
            rotateY(var(--sna-orbit-tilt-y)) !important;
    }

    .simme-na.simme-na--orbit-live .simme-na__orbit-ring i {
        width: 9px !important;
        height: 9px !important;
    }
}


/* =========================================================
   SYMSOUL NODE ATLAS V4.2 — CANVAS ORBIT RELIABILITY
   2026-08-13

   The living 32-node visual is now rendered entirely inside a responsive
   canvas. This removes cross-browser transform/overflow conflicts and hard
   clamps every orbit and sphere to the visual's own bounds.
   ========================================================= */

.simme-na .simme-na__orbit {
    position: relative !important;
    overflow: hidden !important;
    contain: layout paint style !important;
    isolation: isolate;
    border-radius: 50% !important;
    transform:
        translate3d(var(--sna-orbit-x, 0px), var(--sna-orbit-y, 0px), 0)
        rotateX(var(--sna-orbit-tilt-x, 0deg))
        rotateY(var(--sna-orbit-tilt-y, 0deg)) !important;
}

.simme-na .simme-na__orbit-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* The previous DOM-orbit elements are no longer emitted, but these guards
   prevent stale cached markup from leaking outside the panel during rollout. */
.simme-na.simme-na--orbit-canvas .simme-na__orbit-core,
.simme-na.simme-na--orbit-canvas .simme-na__orbit-ring {
    display: none !important;
}

/* Compact sizes remain explicit and bounded on small devices. */
@media (max-width: 900px) {
    .simme-na .simme-na__orbit {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
        min-height: 82px !important;
    }
}

@media (max-width: 560px) {
    .simme-na .simme-na__orbit {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
    }
}


/* ========================================================================
   V4.6 — CLEAN STABLE ORBIT BASELINE + AMBIENT CARD LIGHT
   IMPORTANT: no .simme-na__orbit sizing, transform, canvas or JS behaviour is
   changed here. The animated light uses a separate background-only child.
   ======================================================================== */

.simme-na__count {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

.simme-na__count-copy,
.simme-na__orbit {
    position: relative !important;
    z-index: 3 !important;
}

.simme-na__count-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.simme-na__count-ambient > i,
.simme-na__count-ambient > b,
.simme-na__count-ambient > em {
    position: absolute;
    display: block;
    pointer-events: none;
    font: inherit;
}

.simme-na__count-ambient > i {
    width: 80%;
    height: 150%;
    left: -30%;
    top: -28%;
    border-radius: 50%;
    background: radial-gradient(circle at 53% 48%, rgba(203,83,255,.44) 0%, rgba(128,92,255,.25) 28%, rgba(74,106,255,.09) 49%, transparent 71%);
    filter: blur(22px);
    opacity: .62;
    animation: simme-na-v46-ambient-violet 8.8s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.simme-na__count-ambient > b {
    width: 78%;
    height: 142%;
    right: -31%;
    bottom: -25%;
    border-radius: 50%;
    background: radial-gradient(circle at 43% 50%, rgba(36,191,255,.38) 0%, rgba(72,146,255,.21) 30%, rgba(35,88,174,.07) 51%, transparent 72%);
    filter: blur(24px);
    opacity: .58;
    animation: simme-na-v46-ambient-cyan 10.8s ease-in-out infinite alternate-reverse;
    will-change: transform, opacity;
}

.simme-na__count-ambient > em {
    left: 5%;
    top: 49%;
    width: 90%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(202,88,255,.18) 22%, rgba(222,156,255,.52) 39%, rgba(153,201,255,.58) 56%, rgba(36,191,255,.18) 76%, transparent 100%);
    filter: blur(2px);
    opacity: .38;
    animation: simme-na-v46-ambient-streak 7s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes simme-na-v46-ambient-violet {
    0%   { transform: translate3d(-4%,-2%,0) scale(.94); opacity:.43; }
    48%  { transform: translate3d(16%,5%,0) scale(1.12); opacity:.80; }
    100% { transform: translate3d(25%,-3%,0) scale(1.02); opacity:.56; }
}

@keyframes simme-na-v46-ambient-cyan {
    0%   { transform: translate3d(6%,7%,0) scale(.95); opacity:.39; }
    52%  { transform: translate3d(-15%,-4%,0) scale(1.13); opacity:.72; }
    100% { transform: translate3d(-25%,5%,0) scale(1.03); opacity:.50; }
}

@keyframes simme-na-v46-ambient-streak {
    from { transform: translateX(-12%) scaleX(.78); opacity:.20; }
    to   { transform: translateX(13%) scaleX(1.16); opacity:.55; }
}

@media (prefers-reduced-motion: reduce) {
    .simme-na__count-ambient > i,
    .simme-na__count-ambient > b,
    .simme-na__count-ambient > em {
        animation: none !important;
    }
}

/* ========================================================================
   V4.6 — OFFICIAL INDIVIDUAL NODE SECTION ICONS
   ======================================================================== */

.simme-na__reading-section::before {
    content: none !important;
    display: none !important;
}

.simme-na__section-heading {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
}

.simme-na__section-heading > h2,
.simme-na__section-heading > h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.simme-na__section-icon-wrap {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.simme-na__section-icon-wrap::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(48,205,255,.42), rgba(48,205,255,.16) 36%, rgba(177,84,255,.08) 56%, transparent 72%);
    filter: blur(12px);
    opacity: .95;
}

.simme-na__section-icon {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(49,194,255,.18));
}

.simme-na[data-theme="light"] .simme-na__section-icon-wrap::before {
    background: radial-gradient(circle, rgba(70,176,255,.23), rgba(70,176,255,.08) 40%, rgba(177,84,255,.05) 58%, transparent 74%);
}

@media (max-width: 700px) {
    .simme-na__section-heading { gap: 14px !important; margin-bottom: 14px !important; }
    .simme-na__section-icon-wrap,
    .simme-na__section-icon { width: 54px; height: 54px; }
    .simme-na__section-icon-wrap { flex-basis: 54px; }
}

@media (max-width: 480px) {
    .simme-na__section-heading { gap: 12px !important; }
    .simme-na__section-icon-wrap,
    .simme-na__section-icon { width: 48px; height: 48px; }
    .simme-na__section-icon-wrap { flex-basis: 48px; }
}


/* ========================================================================
   V4.7 — Animated orbit icon for the “Explore the complete Node Atlas” link
   Keeps the existing link structure, but animates the Atlas icon so the
   miniature orbit feels alive and clearly communicates the destination.
   ======================================================================== */

.simme-na__canonical-icon--atlas {
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.12), rgba(36,191,255,0) 46%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
}

.simme-na__canonical-icon--atlas::before {
    left: 10px !important;
    top: 13px !important;
    width: 24px !important;
    height: 16px !important;
    border: 1px solid rgba(143,217,255,.5) !important;
    transform-origin: 50% 50% !important;
    animation: simmeAtlasMiniOrbitA 9.5s linear infinite;
}

.simme-na__canonical-icon--atlas::after {
    left: 50% !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #eaf4ff !important;
    box-shadow:
        -11px -7px 0 #24bfff,
        11px -5px 0 #d84bff,
        -8px 10px 0 #f5d66d,
        10px 9px 0 #ff7bd9,
        0 0 12px rgba(36,191,255,.35) !important;
    transform: translate(-50%,-50%) rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    animation: simmeAtlasMiniOrbitNodes 6.8s linear infinite;
}

.simme-na__canonical-icon--atlas > span::before,
.simme-na__canonical-icon--atlas > span::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    border-radius: 50%;
    transform-origin: 50% 50%;
}

.simme-na__canonical-icon--atlas > span::before {
    width: 29px;
    height: 29px;
    border: 1px solid rgba(216,75,255,.2);
    transform: translate(-50%,-50%) rotate(50deg) scaleY(.54);
    animation: simmeAtlasMiniOrbitB 8.2s linear infinite reverse;
}

.simme-na__canonical-icon--atlas > span::after {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(245,214,109,.22);
    transform: translate(-50%,-50%) rotate(18deg) scaleY(.58);
    animation: simmeAtlasMiniOrbitC 5.6s linear infinite;
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas::before,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas::before {
    animation-duration: 7.4s;
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas::after,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas::after {
    animation-duration: 4.2s;
    filter: drop-shadow(0 0 9px rgba(36,191,255,.32));
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas > span::before,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas > span::before {
    animation-duration: 6.2s;
}

body .simme-na .simme-na__canonical-link--atlas:hover .simme-na__canonical-icon--atlas > span::after,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-na__canonical-icon--atlas > span::after {
    animation-duration: 4.4s;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas {
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.10), rgba(36,191,255,0) 44%),
        linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.2)) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas::before {
    border-color: rgba(73, 154, 214, .42) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas > span::before {
    border-color: rgba(180, 92, 232, .18) !important;
}

.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas > span::after {
    border-color: rgba(226, 183, 67, .18) !important;
}

@keyframes simmeAtlasMiniOrbitA {
    from { transform: rotate(-14deg); }
    to   { transform: rotate(346deg); }
}

@keyframes simmeAtlasMiniOrbitB {
    from { transform: translate(-50%,-50%) rotate(50deg) scaleY(.54); }
    to   { transform: translate(-50%,-50%) rotate(410deg) scaleY(.54); }
}

@keyframes simmeAtlasMiniOrbitC {
    from { transform: translate(-50%,-50%) rotate(18deg) scaleY(.58); }
    to   { transform: translate(-50%,-50%) rotate(-342deg) scaleY(.58); }
}

@keyframes simmeAtlasMiniOrbitNodes {
    0%   { transform: translate(-50%,-50%) rotate(0deg) scale(1); }
    50%  { transform: translate(-50%,-50%) rotate(180deg) scale(1.03); }
    100% { transform: translate(-50%,-50%) rotate(360deg) scale(1); }
}


/* ========================================================================
   V4.8 — INDIVIDUAL NODE PAGES USE THE REAL THEMIFY/SIMME TOP BAR
   The custom Atlas top bar is retired. The actual site header is allowed to
   render unchanged, so the Node pages use the same Simme logo, menu, spacing,
   sizing and responsive behaviour as the rest of simme.co.uk.
   ======================================================================== */

/* Safety only: if a stale page cache still contains the retired custom bar,
   keep it out of view so it cannot duplicate the real site header. */
body.simme-node-atlas-detail-page .simme-node-topbar {
    display: none !important;
}

/* Do not let the Atlas theme switch alter the real site header. */
body.simme-node-atlas-detail-page #headerwrap,
body.simme-node-atlas-detail-page #header,
body.simme-node-atlas-detail-page #site-logo,
body.simme-node-atlas-detail-page .header-bar,
body.simme-node-atlas-detail-page .header-icons,
body.simme-node-atlas-detail-page .mobile-menu-module {
    color-scheme: normal;
}

/* Section anchors should clear the real sticky Simme header comfortably. */
body.simme-node-atlas-detail-page .simme-na__reading-section {
    scroll-margin-top: 120px;
}


/* ========================================================================
   V4.9 — EXACT NORMAL SIMME TOP BAR ON ALL INDIVIDUAL NODE PAGES
   Renders the same Themify Layout Part (ID 4330) used by the normal site,
   including the real Simme logo and the main-simmes-navigation burger menu.
   ======================================================================== */

body.simme-node-atlas-detail-page .simme-node-site-topbar-exact {
    position: sticky !important;
    top: 0;
    z-index: 100050 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    isolation: isolate;
    color-scheme: dark;
}

/* Keep WordPress' logged-in admin bar above the genuine site bar. */
body.admin-bar.simme-node-atlas-detail-page .simme-node-site-topbar-exact {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar.simme-node-atlas-detail-page .simme-node-site-topbar-exact {
        top: 46px !important;
    }
}

/* We deliberately use the exact Layout Part rather than the theme header on
   Node pages, because these legacy Node templates do not consistently render
   the normal header themselves. Prevent a future duplicate if the template
   setting is changed later. */
body.simme-node-atlas-detail-page #headerwrap,
body.simme-node-atlas-detail-page > #pagewrap > #headerwrap {
    display: none !important;
}

/* The V4.8 rule hid the former fallback header. It should only become visible
   inside the exact-topbar wrapper when the Themify Layout Part cannot render. */
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact--fallback .simme-node-topbar {
    display: block !important;
    position: relative !important;
    top: auto !important;
}

/* The exact Layout Part should own its own dimensions/styles. Remove only
   accidental outer margins introduced by being rendered inside post content. */
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact > :first-child {
    margin-top: 0 !important;
}

body.simme-node-atlas-detail-page .simme-node-site-topbar-exact > :last-child {
    margin-bottom: 0 !important;
}

/* Atlas section anchors clear the real sticky site bar plus the Node controls. */
body.simme-node-atlas-detail-page .simme-na__reading-section {
    scroll-margin-top: 170px !important;
}


/* ========================================================================
   V5.0 — STABLE LIVING ORBIT + MOVING/PULSATING CARD GLOW
   This final override deliberately does not depend on canvas or JS for the
   orbit. Three contained CSS orbit paths animate continuously in all modern
   browsers. Pointer/finger response remains a progressive enhancement.
   ======================================================================== */

/* ---------- 32-node card layout ---------- */
body .simme-na .simme-na__count {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(150px, .82fr) minmax(190px, 1.18fr) !important;
    grid-template-areas: "copy orbit" !important;
    align-items: center !important;
    gap: clamp(16px, 2.4vw, 34px) !important;
    min-height: 300px !important;
    padding: clamp(26px, 3vw, 42px) !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    isolation: isolate !important;
}

body .simme-na .simme-na__count-copy {
    grid-area: copy !important;
    position: relative !important;
    z-index: 5 !important;
    align-self: center !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: clamp(18px, 2.2vw, 28px) !important;
    border: 1px solid rgba(143,217,255,.18) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(15,29,59,.56), rgba(10,21,42,.34)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 20px 48px rgba(0,0,0,.13) !important;
}

body .simme-na .simme-na__count-copy::before {
    content: "" !important;
    position: absolute !important;
    inset: -34% -26% !important;
    z-index: -1 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(205,84,255,.50) 0%, rgba(110,111,255,.24) 34%, rgba(36,191,255,.12) 55%, transparent 73%) !important;
    filter: blur(22px) !important;
    opacity: .72 !important;
    animation: simmeV50CopyAura 6.4s ease-in-out infinite alternate !important;
    pointer-events: none !important;
}

body .simme-na .simme-na__count-copy strong {
    font-size: clamp(58px, 7vw, 88px) !important;
    line-height: .88 !important;
    letter-spacing: -.05em !important;
    color: #f1f6ff !important;
}
body .simme-na .simme-na__count-copy span {
    font-size: clamp(19px, 2vw, 27px) !important;
    line-height: 1.05 !important;
    font-weight: 760 !important;
    color: #f3f7ff !important;
}
body .simme-na .simme-na__count-copy small {
    font-size: clamp(13px, 1.3vw, 17px) !important;
    line-height: 1.38 !important;
    color: rgba(225,237,250,.83) !important;
}

/* ---------- strong moving/pulsating background light ---------- */
body .simme-na .simme-na__count-ambient {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

body .simme-na .simme-na__count-ambient > i {
    width: 95% !important;
    height: 185% !important;
    left: -36% !important;
    top: -43% !important;
    background: radial-gradient(circle at 52% 50%, rgba(211,70,255,.68) 0%, rgba(129,84,255,.40) 28%, rgba(64,103,255,.17) 51%, transparent 73%) !important;
    filter: blur(26px) !important;
    opacity: .78 !important;
    mix-blend-mode: screen !important;
    animation: simmeV50AmbientViolet 7.6s cubic-bezier(.4,0,.2,1) infinite alternate !important;
}

body .simme-na .simme-na__count-ambient > b {
    width: 98% !important;
    height: 175% !important;
    right: -37% !important;
    bottom: -39% !important;
    background: radial-gradient(circle at 44% 50%, rgba(36,191,255,.62) 0%, rgba(50,145,255,.34) 30%, rgba(34,85,189,.14) 52%, transparent 74%) !important;
    filter: blur(28px) !important;
    opacity: .70 !important;
    mix-blend-mode: screen !important;
    animation: simmeV50AmbientCyan 9.4s cubic-bezier(.4,0,.2,1) infinite alternate-reverse !important;
}

body .simme-na .simme-na__count-ambient > em {
    left: -8% !important;
    top: 48% !important;
    width: 116% !important;
    height: 5px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(213,71,255,.08) 12%,
        rgba(222,119,255,.48) 32%,
        rgba(187,180,255,.76) 49%,
        rgba(98,203,255,.66) 65%,
        rgba(36,191,255,.12) 86%,
        transparent 100%) !important;
    filter: blur(2.5px) !important;
    opacity: .58 !important;
    animation: simmeV50AmbientStreak 5.8s ease-in-out infinite alternate !important;
}

body .simme-na .simme-na__count::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 20% 44%, rgba(255,255,255,.10), transparent 23%),
        radial-gradient(circle at 76% 50%, rgba(36,191,255,.055), transparent 34%) !important;
    animation: simmeV50PanelPulse 4.8s ease-in-out infinite alternate !important;
}

/* ---------- robust CSS orbit ---------- */
body .simme-na .simme-na__orbit--css {
    --sna-css-orbit-x: 0px;
    --sna-css-orbit-y: 0px;
    --sna-css-orbit-rx: 0deg;
    --sna-css-orbit-ry: 0deg;
    grid-area: orbit !important;
    position: relative !important;
    z-index: 5 !important;
    justify-self: center !important;
    align-self: center !important;
    width: min(100%, 310px) !important;
    min-width: 190px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    contain: paint !important;
    isolation: isolate !important;
    perspective: 800px !important;
    transform:
        translate3d(var(--sna-css-orbit-x), var(--sna-css-orbit-y), 0)
        rotateX(var(--sna-css-orbit-rx))
        rotateY(var(--sna-css-orbit-ry)) !important;
    transition: transform .22s cubic-bezier(.2,.72,.2,1) !important;
    background: radial-gradient(circle at 50% 50%, rgba(36,191,255,.10), rgba(12,36,66,.15) 34%, rgba(5,16,31,.02) 62%, transparent 72%) !important;
    box-shadow: inset 0 0 55px rgba(36,191,255,.03) !important;
}

body .simme-na .simme-na__orbit--css::before,
body .simme-na .simme-na__orbit--css::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}
body .simme-na .simme-na__orbit--css::before {
    width: 88% !important;
    height: 88% !important;
    border: 1px solid rgba(143,217,255,.10) !important;
}
body .simme-na .simme-na__orbit--css::after {
    width: 68% !important;
    height: 68% !important;
    background: radial-gradient(circle, rgba(36,191,255,.11), rgba(36,191,255,.025) 48%, transparent 70%) !important;
    box-shadow: 0 0 44px rgba(36,191,255,.08) !important;
}

.simme-na__orbit-halo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 46% !important;
    height: 46% !important;
    transform: translate(-50%,-50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(25,103,165,.24), rgba(8,34,66,.52) 55%, rgba(3,16,32,.82) 100%) !important;
    box-shadow: 0 0 42px rgba(36,191,255,.09) !important;
    z-index: 1 !important;
}

.simme-na__orbit-ring-css {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 3 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 50% !important;
    transform-origin: 50% 50% !important;
    will-change: transform !important;
}

.simme-na__orbit-ring-css--one {
    width: 72% !important;
    height: 39% !important;
    margin-left: -36% !important;
    margin-top: -19.5% !important;
    border-color: rgba(87,191,255,.38) !important;
    animation: simmeV50OrbitOne 7.2s linear infinite !important;
}
.simme-na__orbit-ring-css--two {
    width: 61% !important;
    height: 72% !important;
    margin-left: -30.5% !important;
    margin-top: -36% !important;
    border-color: rgba(216,75,255,.30) !important;
    animation: simmeV50OrbitTwo 9.6s linear infinite reverse !important;
}
.simme-na__orbit-ring-css--three {
    width: 79% !important;
    height: 52% !important;
    margin-left: -39.5% !important;
    margin-top: -26% !important;
    border-color: rgba(245,214,109,.24) !important;
    animation: simmeV50OrbitThree 12.4s linear infinite !important;
}

.simme-na__orbit-ball {
    position: absolute !important;
    width: clamp(10px, 4.5%, 16px) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: 0 0 12px currentColor, 0 0 22px color-mix(in srgb, currentColor 42%, transparent) !important;
    background:
        radial-gradient(circle at 33% 27%, rgba(255,255,255,.98) 0 12%, color-mix(in srgb, currentColor 72%, white 28%) 22%, currentColor 58%, color-mix(in srgb, currentColor 58%, black 42%) 100%) !important;
    color: #24bfff;
    transform: translate(-50%,-50%) !important;
}
.simme-na__orbit-ball--cyan { color:#24bfff !important; }
.simme-na__orbit-ball--blue { color:#37b7ff !important; }
.simme-na__orbit-ball--ice { color:#8fd9ff !important; }
.simme-na__orbit-ball--violet { color:#d84bff !important; }
.simme-na__orbit-ball--pink { color:#ff7bd9 !important; }
.simme-na__orbit-ball--gold { color:#f5d66d !important; }
.simme-na__orbit-ball--white { color:#e1edfa !important; }

/* balls positioned on their parent orbit; the ring rotation moves them */
.simme-na__orbit-ring-css--one .simme-na__orbit-ball:nth-child(1) { left: 0%; top: 50%; }
.simme-na__orbit-ring-css--one .simme-na__orbit-ball:nth-child(2) { left: 73%; top: 5%; }
.simme-na__orbit-ring-css--one .simme-na__orbit-ball:nth-child(3) { left: 100%; top: 50%; }
.simme-na__orbit-ring-css--two .simme-na__orbit-ball:nth-child(1) { left: 19%; top: 8%; }
.simme-na__orbit-ring-css--two .simme-na__orbit-ball:nth-child(2) { left: 81%; top: 92%; }
.simme-na__orbit-ring-css--three .simme-na__orbit-ball:nth-child(1) { left: 79%; top: 7%; }
.simme-na__orbit-ring-css--three .simme-na__orbit-ball:nth-child(2) { left: 21%; top: 93%; }

.simme-na__orbit-core-css {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 6 !important;
    width: clamp(12px, 7%, 22px) !important;
    aspect-ratio: 1 / 1 !important;
    transform: translate(-50%,-50%) !important;
    border-radius: 50% !important;
    background: #e1edfa !important;
    box-shadow: 0 0 14px rgba(143,217,255,.82), 0 0 32px rgba(36,191,255,.28) !important;
    animation: simmeV50CorePulse 2.8s ease-in-out infinite alternate !important;
}

@keyframes simmeV50OrbitOne {
    from { transform: rotate(-18deg); }
    to   { transform: rotate(342deg); }
}
@keyframes simmeV50OrbitTwo {
    from { transform: rotate(49deg); }
    to   { transform: rotate(409deg); }
}
@keyframes simmeV50OrbitThree {
    from { transform: rotate(-39deg); }
    to   { transform: rotate(321deg); }
}
@keyframes simmeV50CorePulse {
    from { transform: translate(-50%,-50%) scale(.92); opacity:.84; }
    to   { transform: translate(-50%,-50%) scale(1.12); opacity:1; }
}
@keyframes simmeV50CopyAura {
    from { transform: translate3d(-5%,-2%,0) scale(.92); opacity:.54; }
    to   { transform: translate3d(9%,4%,0) scale(1.10); opacity:.88; }
}
@keyframes simmeV50AmbientViolet {
    0%   { transform: translate3d(-8%,-4%,0) scale(.90); opacity:.52; }
    46%  { transform: translate3d(18%,4%,0) scale(1.16); opacity:.92; }
    100% { transform: translate3d(30%,-2%,0) scale(1.03); opacity:.65; }
}
@keyframes simmeV50AmbientCyan {
    0%   { transform: translate3d(8%,6%,0) scale(.92); opacity:.48; }
    52%  { transform: translate3d(-18%,-5%,0) scale(1.17); opacity:.84; }
    100% { transform: translate3d(-30%,5%,0) scale(1.04); opacity:.60; }
}
@keyframes simmeV50AmbientStreak {
    from { transform: translateX(-16%) scaleX(.76); opacity:.25; }
    to   { transform: translateX(16%) scaleX(1.18); opacity:.70; }
}
@keyframes simmeV50PanelPulse {
    from { opacity:.50; }
    to   { opacity:1; }
}

/* Light theme keeps the same motion, simply reduces the intensity. */
.simme-na[data-theme="light"] .simme-na__count-copy {
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(244,248,255,.62)) !important;
    border-color: rgba(73,156,218,.16) !important;
}
.simme-na[data-theme="light"] .simme-na__count-copy strong,
.simme-na[data-theme="light"] .simme-na__count-copy span { color:#17233a !important; }
.simme-na[data-theme="light"] .simme-na__count-copy small { color:rgba(59,77,108,.80) !important; }
.simme-na[data-theme="light"] .simme-na__count-ambient > i { opacity:.36 !important; }
.simme-na[data-theme="light"] .simme-na__count-ambient > b { opacity:.34 !important; }
.simme-na[data-theme="light"] .simme-na__count-ambient > em { opacity:.30 !important; }

/* ---------- responsive containment ---------- */
@media (max-width: 900px) {
    body .simme-na .simme-na__count {
        grid-template-columns: minmax(130px, .9fr) minmax(150px, 1.1fr) !important;
        min-height: 252px !important;
        padding: 24px !important;
        border-radius: 30px !important;
    }
    body .simme-na .simme-na__orbit--css {
        width: min(100%, 230px) !important;
        min-width: 150px !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    body .simme-na .simme-na__count {
        grid-template-columns: 1fr !important;
        grid-template-areas: "copy" "orbit" !important;
        gap: 18px !important;
        min-height: 0 !important;
        padding: 20px !important;
        border-radius: 28px !important;
    }
    body .simme-na .simme-na__count-copy {
        width: 100% !important;
        max-width: 300px !important;
        justify-self: center !important;
        text-align: center !important;
        justify-items: center !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }
    body .simme-na .simme-na__count-copy strong { font-size: 56px !important; }
    body .simme-na .simme-na__count-copy span { font-size: 19px !important; }
    body .simme-na .simme-na__count-copy small { font-size: 13px !important; }
    body .simme-na .simme-na__orbit--css {
        width: min(76vw, 240px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        justify-self: center !important;
    }
}

/* Reduced motion: keep the design alive, but slow it substantially rather
   than freezing it completely. */
@media (prefers-reduced-motion: reduce) {
    .simme-na__orbit-ring-css--one { animation-duration: 38s !important; }
    .simme-na__orbit-ring-css--two { animation-duration: 46s !important; }
    .simme-na__orbit-ring-css--three { animation-duration: 58s !important; }
    .simme-na__orbit-core-css { animation-duration: 8s !important; }
    body .simme-na .simme-na__count-ambient > i { animation-duration: 24s !important; }
    body .simme-na .simme-na__count-ambient > b { animation-duration: 30s !important; }
    body .simme-na .simme-na__count-ambient > em { animation-duration: 20s !important; }
}


/* ========================================================================
   V5.1 — INLINE SVG ORBIT FAILSAFE
   The V5.0 CSS orbit spheres were being suppressed on the live site by a
   theme/browser interaction. V5.1 draws the complete orbit as inline SVG.
   SVG keeps every path and sphere visible, scalable and physically contained,
   while the existing pointer/finger wrapper transform remains untouched.
   ======================================================================== */

body .simme-na .simme-na__orbit--svg {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(36,191,255,.11), rgba(12,36,66,.15) 36%, rgba(5,16,31,.02) 64%, transparent 73%) !important;
}

body .simme-na .simme-na__orbit--svg::before,
body .simme-na .simme-na__orbit--svg::after {
    display: none !important;
    content: none !important;
}

.simme-na__orbit-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
}

.simme-na__svg-orbit,
.simme-na__svg-orbit-core,
.simme-na__svg-orbit-core-halo {
    transform-box: view-box;
    transform-origin: 120px 120px;
}

.simme-na__svg-orbit-core-halo {
    opacity: .72;
}

/* We intentionally use SVG/SMIL for the actual orbit rotation because it is
   independent of page CSS animation resets and remains stable in current
   Safari, Chrome, Edge and Firefox. If animation is unavailable the complete
   orbit remains visible as a static fallback. */

@media (prefers-reduced-motion: reduce) {
    .simme-na__orbit-svg {
        opacity: .96;
    }
}


/* ========================================================================
   V5.2 — STABLE ORBIT + TRUE SIMME-STYLE NODE HEADER
   ======================================================================== */

/* ---------- exact Simme-style sticky header clone, using real logo/menu ---------- */
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact { display:none !important; }
body.simme-node-atlas-detail-page .simme-node-normal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100060 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 12px 12px, rgba(36,191,255,.055) 0 2px, transparent 2.5px) 0 0/24px 24px,
        linear-gradient(90deg,#00354a 0%,#003247 44%,#002d42 100%) !important;
    border: 0 !important;
    border-bottom: 4px solid #15c9ff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
    isolation:isolate;
}
body.admin-bar.simme-node-atlas-detail-page .simme-node-normal-header { top:32px !important; }
@media(max-width:782px){body.admin-bar.simme-node-atlas-detail-page .simme-node-normal-header{top:46px !important;}}

.simme-node-normal-header__inner {
    width:min(1720px,100%);
    min-height:136px;
    margin:0 auto;
    padding:16px clamp(28px,5vw,76px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.simme-node-normal-header__brand,
.simme-node-normal-header__brand:hover,
.simme-node-normal-header__brand:focus,
.simme-node-normal-header__brand:visited {
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    max-width:min(260px,48vw) !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.simme-node-normal-header__logo {
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:240px !important;
    max-height:96px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 !important;
    filter:drop-shadow(0 0 12px rgba(36,191,255,.08));
}
.simme-node-normal-header__wordmark {color:#fff;font-size:28px;font-weight:750;line-height:.9}.simme-node-normal-header__wordmark small{display:block;font-size:11px;letter-spacing:.34em;margin-top:8px;font-weight:500}

body .simme-node-normal-header__burger,
body .simme-node-normal-header__burger:hover,
body .simme-node-normal-header__burger:focus,
body .simme-node-normal-header__burger:active {
    display:grid !important;
    place-content:center !important;
    gap:7px !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    cursor:pointer !important;
}
.simme-node-normal-header__burger span{display:block !important;width:34px !important;height:3px !important;border-radius:3px !important;background:#fff !important;transition:transform .2s ease,opacity .16s ease !important;transform-origin:center !important}
.simme-node-normal-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg) !important}.simme-node-normal-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0 !important}.simme-node-normal-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg) !important}

.simme-node-normal-header__menu {
    position:absolute !important;
    top:calc(100% + 1px) !important;
    right:clamp(18px,4vw,70px) !important;
    width:min(390px,calc(100vw - 36px)) !important;
    max-height:min(72vh,660px) !important;
    overflow:auto !important;
    padding:12px !important;
    border:1px solid rgba(67,205,255,.28) !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,rgba(3,34,50,.99),rgba(3,20,33,.99)) !important;
    box-shadow:0 28px 68px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}
.simme-node-normal-header__menu[hidden]{display:none !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list,.simme-node-normal-header__menu .simme-node-topbar__menu-list ul{display:grid !important;gap:5px !important;list-style:none !important;margin:0 !important;padding:0 !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list ul{margin:4px 0 4px 12px !important;padding-left:10px !important;border-left:1px solid rgba(90,208,255,.17) !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list li{list-style:none !important;margin:0 !important;padding:0 !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list a,
.simme-node-normal-header__menu .simme-node-topbar__menu-list a:visited{display:block !important;padding:11px 12px !important;border-radius:10px !important;color:#d8e8f5 !important;-webkit-text-fill-color:#d8e8f5 !important;text-decoration:none !important;background:transparent !important;font-size:14px !important;font-weight:600 !important;line-height:1.3 !important}
.simme-node-normal-header__menu .simme-node-topbar__menu-list a:hover,.simme-node-normal-header__menu .simme-node-topbar__menu-list a:focus-visible{background:rgba(36,191,255,.08) !important;color:#fff !important;-webkit-text-fill-color:#fff !important}

@media(max-width:700px){
    .simme-node-normal-header__inner{min-height:92px;padding:10px 18px}
    .simme-node-normal-header__logo{max-width:176px !important;max-height:68px !important}
    body .simme-node-normal-header__burger,body .simme-node-normal-header__burger:hover,body .simme-node-normal-header__burger:focus{width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important}
    .simme-node-normal-header__burger span{width:30px !important;height:2.5px !important}
}

/* ---------- V5.2 DOM orbit: visible without JS, dynamically moved with JS ---------- */
body .simme-na .simme-na__orbit--live52 {
    --sna-live-x:0px;--sna-live-y:0px;--sna-live-rx:0deg;--sna-live-ry:0deg;
    position:relative !important;
    z-index:6 !important;
    display:block !important;
    width:min(100%,300px) !important;
    min-width:170px !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    justify-self:center !important;
    align-self:center !important;
    overflow:hidden !important;
    border-radius:50% !important;
    isolation:isolate !important;
    background:radial-gradient(circle at 50% 50%,rgba(36,191,255,.12),rgba(7,27,50,.24) 42%,rgba(3,16,30,.04) 68%,transparent 74%) !important;
    transform:translate3d(var(--sna-live-x),var(--sna-live-y),0) rotateX(var(--sna-live-rx)) rotateY(var(--sna-live-ry)) !important;
    transition:transform .2s ease !important;
}
body .simme-na .simme-na__orbit--live52::before,body .simme-na .simme-na__orbit--live52::after{content:none !important;display:none !important}
.simme-na__orbit-halo52{position:absolute !important;left:50% !important;top:50% !important;width:50% !important;height:50% !important;transform:translate(-50%,-50%) !important;border-radius:50% !important;background:radial-gradient(circle,rgba(27,112,174,.32),rgba(7,34,66,.56) 58%,rgba(2,15,30,.9) 100%) !important;box-shadow:0 0 54px rgba(36,191,255,.11) !important;z-index:1 !important}
.simme-na__orbit-set52{position:absolute !important;inset:0 !important;display:block !important;z-index:3 !important;pointer-events:none !important;transform-origin:50% 50% !important}
.simme-na__orbit-set52::before{content:"" !important;position:absolute !important;left:50% !important;top:50% !important;border:1px solid rgba(143,217,255,.26) !important;border-radius:50% !important;transform:translate(-50%,-50%) !important;box-shadow:inset 0 0 12px rgba(36,191,255,.025) !important}
.simme-na__orbit-set52--one::before{width:64% !important;height:34% !important;transform:translate(-50%,-50%) rotate(-18deg) !important;border-color:rgba(88,202,255,.42) !important}
.simme-na__orbit-set52--two::before{width:58% !important;height:72% !important;transform:translate(-50%,-50%) rotate(51deg) !important;border-color:rgba(216,75,255,.34) !important}
.simme-na__orbit-set52--three::before{width:78% !important;height:48% !important;transform:translate(-50%,-50%) rotate(-39deg) !important;border-color:rgba(245,214,109,.28) !important}
.simme-na__orbit-ball52{position:absolute !important;display:block !important;left:50% !important;top:50% !important;width:clamp(11px,5.2%,17px) !important;height:clamp(11px,5.2%,17px) !important;border-radius:50% !important;border:1px solid rgba(255,255,255,.88) !important;box-sizing:border-box !important;opacity:1 !important;z-index:6 !important;will-change:transform,opacity !important}
.simme-na__orbit-ball52--cyan{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#b8edff 20%,#24bfff 56%,#086693 100%) !important;box-shadow:0 0 13px #24bfff,0 0 24px rgba(36,191,255,.34) !important}
.simme-na__orbit-ball52--blue{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#c5efff 20%,#37b7ff 56%,#145a86 100%) !important;box-shadow:0 0 13px #37b7ff,0 0 24px rgba(55,183,255,.34) !important}
.simme-na__orbit-ball52--ice{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#f0fbff 20%,#8fd9ff 56%,#4c8da9 100%) !important;box-shadow:0 0 13px #8fd9ff,0 0 24px rgba(143,217,255,.34) !important}
.simme-na__orbit-ball52--violet{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#f4c8ff 20%,#d84bff 56%,#70218e 100%) !important;box-shadow:0 0 13px #d84bff,0 0 24px rgba(216,75,255,.34) !important}
.simme-na__orbit-ball52--pink{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#ffd5f1 20%,#ff7bd9 56%,#983d7e 100%) !important;box-shadow:0 0 13px #ff7bd9,0 0 24px rgba(255,123,217,.34) !important}
.simme-na__orbit-ball52--gold{background:radial-gradient(circle at 30% 25%,#fff 0 10%,#fff2b0 20%,#f5d66d 56%,#967424 100%) !important;box-shadow:0 0 13px #f5d66d,0 0 24px rgba(245,214,109,.34) !important}
.simme-na__orbit-ball52--white{background:radial-gradient(circle at 30% 25%,#fff 0 16%,#f7fbff 26%,#e1edfa 60%,#839ab0 100%) !important;box-shadow:0 0 13px #e1edfa,0 0 24px rgba(225,237,250,.30) !important}
.simme-na__orbit-core52{position:absolute !important;left:50% !important;top:50% !important;width:clamp(13px,7%,22px) !important;height:clamp(13px,7%,22px) !important;transform:translate(-50%,-50%) !important;border-radius:50% !important;background:#e1edfa !important;box-shadow:0 0 16px rgba(143,217,255,.88),0 0 34px rgba(36,191,255,.34) !important;z-index:8 !important;animation:simmeV52CorePulse 2.7s ease-in-out infinite alternate !important}
@keyframes simmeV52CorePulse{from{transform:translate(-50%,-50%) scale(.94);opacity:.88}to{transform:translate(-50%,-50%) scale(1.08);opacity:1}}

/* Visible CSS fallback if JS is blocked. */
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one{animation:simmeV52FallbackA 7.2s linear infinite !important}.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--two{animation:simmeV52FallbackB 9.6s linear infinite reverse !important}.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--three{animation:simmeV52FallbackC 12.4s linear infinite !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(1){transform:translate(-50%,-50%) translate(-31%,0)}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(2){transform:translate(-50%,-50%) translate(22%,-14%)}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(3){transform:translate(-50%,-50%) translate(31%,0)}
@keyframes simmeV52FallbackA{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes simmeV52FallbackB{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes simmeV52FallbackC{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media(max-width:700px){body .simme-na .simme-na__orbit--live52{min-width:150px !important;width:min(100%,240px) !important}}


/* V5.2 fallback sphere positions — visible even before/without JS. */
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(1){left:18% !important;top:50% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(2){left:66% !important;top:32% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--one .simme-na__orbit-ball52:nth-child(3){left:82% !important;top:50% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--two .simme-na__orbit-ball52:nth-child(1){left:39% !important;top:20% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--two .simme-na__orbit-ball52:nth-child(2){left:64% !important;top:79% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--three .simme-na__orbit-ball52:nth-child(1){left:72% !important;top:31% !important;transform:translate(-50%,-50%) !important}
.simme-na:not(.simme-na--orbit-v52-js) .simme-na__orbit-set52--three .simme-na__orbit-ball52:nth-child(2){left:29% !important;top:70% !important;transform:translate(-50%,-50%) !important}


/* ========================================================================
   V5.3 — RESTORE THE GOOD ORBIT VISUAL + MATCH THE HOME-PAGE STICKY BAR
   Unique class names deliberately avoid all accumulated V3/V4/V5 orbit/header
   experiments. The ambient card glow from V5.0+ remains intact.
   ======================================================================== */

/* Retire every previous custom/exact Node header implementation. */
body.simme-node-atlas-detail-page .simme-node-normal-header,
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact,
body.simme-node-atlas-detail-page .simme-node-topbar {
    display: none !important;
}

/* HOME-PAGE MATCHED STICKY BAR */
body.simme-node-atlas-detail-page .simme-node-homebar53 {
    position: sticky !important;
    top: 0 !important;
    z-index: 100080 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    color-scheme: dark !important;
    background:
        radial-gradient(circle at 18px 18px, rgba(41,192,235,.075) 0 2px, transparent 2.6px) 0 0 / 39px 39px,
        linear-gradient(90deg, #00374c 0%, #003448 48%, #002f43 100%) !important;
    border: 0 !important;
    border-bottom: 3px solid #11c8ff !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.16) !important;
}
body.admin-bar.simme-node-atlas-detail-page .simme-node-homebar53 { top: 32px !important; }
@media (max-width:782px){ body.admin-bar.simme-node-atlas-detail-page .simme-node-homebar53 { top:46px !important; } }

.simme-node-homebar53__inner {
    min-height: 138px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(54px,4.7vw,98px) 0 clamp(76px,9.9vw,205px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}
.simme-node-homebar53__brand,
.simme-node-homebar53__brand:hover,
.simme-node-homebar53__brand:focus,
.simme-node-homebar53__brand:visited {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.simme-node-homebar53__logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 245px !important;
    max-height: 104px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
}
.simme-node-homebar53__fallback {
    display:inline-flex !important;
    flex-direction:column !important;
    color:#fff !important;
    font-size:31px !important;
    font-weight:700 !important;
    line-height:.8 !important;
}
.simme-node-homebar53__fallback small { margin-top:10px; font-size:11px; letter-spacing:.32em; font-weight:500; }

body .simme-node-homebar53__burger,
body .simme-node-homebar53__burger:hover,
body .simme-node-homebar53__burger:focus,
body .simme-node-homebar53__burger:active {
    display: grid !important;
    place-content: center !important;
    gap: 7px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer !important;
}
.simme-node-homebar53__burger span {
    display:block !important;
    width:34px !important;
    height:3px !important;
    border-radius:2px !important;
    background:#fff !important;
    transition:transform .2s ease,opacity .16s ease !important;
    transform-origin:center !important;
}
.simme-node-homebar53__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)!important}
.simme-node-homebar53__burger[aria-expanded="true"] span:nth-child(2){opacity:0!important}
.simme-node-homebar53__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)!important}

.simme-node-homebar53__menu {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: clamp(24px,4.7vw,98px) !important;
    width: min(390px, calc(100vw - 36px)) !important;
    max-height: min(72vh,660px) !important;
    overflow: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(82,202,245,.28) !important;
    border-radius: 17px !important;
    background: linear-gradient(180deg,rgba(3,43,59,.995),rgba(3,24,38,.995)) !important;
    box-shadow: 0 28px 68px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}
.simme-node-homebar53__menu[hidden]{display:none!important}
.simme-node-homebar53__menu .simme-node-topbar__menu-list,
.simme-node-homebar53__menu .simme-node-topbar__menu-list ul { display:grid!important; gap:5px!important; list-style:none!important; margin:0!important; padding:0!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list ul { margin:4px 0 4px 12px!important; padding-left:10px!important; border-left:1px solid rgba(90,208,255,.17)!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list li { list-style:none!important; margin:0!important; padding:0!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list a,
.simme-node-homebar53__menu .simme-node-topbar__menu-list a:visited { display:block!important; padding:11px 12px!important; border-radius:10px!important; color:#d8e8f5!important; -webkit-text-fill-color:#d8e8f5!important; text-decoration:none!important; background:transparent!important; font-size:14px!important; font-weight:600!important; line-height:1.3!important; }
.simme-node-homebar53__menu .simme-node-topbar__menu-list a:hover,
.simme-node-homebar53__menu .simme-node-topbar__menu-list a:focus-visible { background:rgba(36,191,255,.08)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; }

@media(max-width:700px){
    .simme-node-homebar53__inner { min-height:92px!important; padding:0 18px!important; }
    .simme-node-homebar53__logo { max-width:185px!important; max-height:72px!important; }
    body .simme-node-homebar53__burger,body .simme-node-homebar53__burger:hover,body .simme-node-homebar53__burger:focus { width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; }
    .simme-node-homebar53__burger span { width:30px!important;height:2.5px!important; }
    .simme-node-homebar53__menu { right:18px!important; }
}

/* RESTORED V4.0-STYLE ORBIT, ISOLATED UNDER V5.3 NAMES */
.simme-na__count {
    grid-template-columns: minmax(0,1fr) minmax(180px,44%) !important;
    align-items:center !important;
    gap:clamp(16px,2.2vw,30px) !important;
    overflow:hidden !important;
}

.simme-na53-orbit {
    position:relative !important;
    z-index:8 !important;
    display:block !important;
    width:min(100%,300px) !important;
    aspect-ratio:1/1 !important;
    justify-self:center !important;
    overflow:hidden !important;
    border-radius:50% !important;
    contain:layout paint !important;
    isolation:isolate !important;
    touch-action:pan-y !important;
}
.simme-na53-orbit::before,
.simme-na53-orbit::after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.simme-na53-orbit::before {
    inset:28%;
    z-index:0;
    background:radial-gradient(circle,rgba(225,237,250,.86) 0 8%,rgba(143,217,255,.30) 18%,rgba(36,191,255,.09) 46%,transparent 73%);
    box-shadow:0 0 20px rgba(36,191,255,.20),0 0 52px rgba(36,191,255,.08);
    animation:simmeNA53CoreBreath 3.9s ease-in-out infinite;
}
.simme-na53-orbit::after {
    inset:5%;
    z-index:0;
    border:1px solid rgba(143,217,255,.10);
    box-shadow:inset 0 0 26px rgba(36,191,255,.035);
}
.simme-na53-orbit__halo {
    position:absolute;
    inset:19%;
    z-index:0;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,rgba(36,191,255,.07),rgba(36,191,255,0) 68%);
}
.simme-na53-orbit__ring {
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    z-index:1 !important;
    display:block !important;
    border:1px solid rgba(143,217,255,.20) !important;
    border-radius:50% !important;
    box-shadow:inset 0 0 12px rgba(36,191,255,.025) !important;
    transform-origin:center !important;
    pointer-events:none !important;
}
.simme-na53-orbit__ring--one { width:68%;height:36%;transform:translate(-50%,-50%) rotate(-18deg)!important;border-color:rgba(143,217,255,.24)!important; }
.simme-na53-orbit__ring--two { width:58%;height:68%;transform:translate(-50%,-50%) rotate(51deg)!important;border-color:rgba(216,75,255,.19)!important; }
.simme-na53-orbit__ring--three{ width:78%;height:46%;transform:translate(-50%,-50%) rotate(-39deg)!important;border-color:rgba(245,214,109,.15)!important; }
.simme-na53-orbit__core {
    position:absolute;
    z-index:9;
    left:50%;top:50%;
    width:12px;height:12px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:#e1edfa;
    box-shadow:0 0 5px rgba(255,255,255,.9),0 0 15px rgba(143,217,255,.95),0 0 34px rgba(36,191,255,.58);
}
.simme-na53-orbit__ball {
    --orb:#24bfff;--orb-glow:rgba(36,191,255,.65);
    position:absolute !important;
    left:0;top:0;
    z-index:5;
    width:14px !important;height:14px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:50% !important;
    background:radial-gradient(circle at 29% 24%,#fff 0 10%,rgba(255,255,255,.92) 11%,var(--orb) 35% 67%,rgba(0,18,29,.92) 100%) !important;
    box-shadow:inset 1px 1px 2px rgba(255,255,255,.48),inset -2px -2px 3px rgba(0,18,29,.40),0 0 7px var(--orb-glow),0 0 18px var(--orb-glow) !important;
    will-change:transform,opacity;
    pointer-events:none;
}
.simme-na53-orbit__ball::after {
    content:"";position:absolute;left:22%;top:15%;width:28%;height:28%;border-radius:50%;background:rgba(255,255,255,.95);opacity:.84;
}
.simme-na53-orbit__ball--cyan{--orb:#24bfff;--orb-glow:rgba(36,191,255,.66)}
.simme-na53-orbit__ball--blue{--orb:#37b7ff;--orb-glow:rgba(55,183,255,.60)}
.simme-na53-orbit__ball--ice{--orb:#8fd9ff;--orb-glow:rgba(143,217,255,.62)}
.simme-na53-orbit__ball--violet{--orb:#d84bff;--orb-glow:rgba(216,75,255,.56)}
.simme-na53-orbit__ball--pink{--orb:#ff7bd9;--orb-glow:rgba(255,123,217,.54)}
.simme-na53-orbit__ball--gold{--orb:#f5d66d;--orb-glow:rgba(245,214,109,.52)}
.simme-na53-orbit__ball--white{--orb:#e1edfa;--orb-glow:rgba(225,237,250,.56)}

@keyframes simmeNA53CoreBreath { 0%,100%{opacity:.62;transform:scale(.90)}50%{opacity:1;transform:scale(1.12)} }

@media(max-width:700px){
    .simme-na__count { grid-template-columns:1fr !important; min-height:420px !important; }
    .simme-na__count-copy { justify-self:center!important; text-align:center!important; }
    .simme-na53-orbit { width:min(78vw,225px)!important; }
}
@media(max-width:430px){
    .simme-na__count { min-height:386px!important; }
    .simme-na53-orbit { width:min(72vw,190px)!important; }
    .simme-na53-orbit__ball { width:12px!important;height:12px!important; }
}

@media(prefers-reduced-motion:reduce){
    .simme-na53-orbit::before { animation-duration:9s!important; }
}


/* ========================================================================
   V5.4 — EXACT NODE-PAGE TOP BAR + RESTORED KNOWN-GOOD ORBIT MECHANISM
   ======================================================================== */

/* ---- Individual Node page header: intentionally simple and exact. ---- */
body.simme-node-atlas-detail-page .simme-node-homebar53,
body.simme-node-atlas-detail-page .simme-node-normal-header,
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact,
body.simme-node-atlas-detail-page .simme-node-topbar {
    display:none !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54 {
    position:sticky !important;
    top:0 !important;
    z-index:100100 !important;
    display:block !important;
    width:100% !important;
    min-height:68px !important;
    margin:0 !important;
    padding:0 !important;
    background:#050607 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    color-scheme:dark !important;
}
body.admin-bar.simme-node-atlas-detail-page .simme-node-topbar54{top:32px !important}
@media(max-width:782px){body.admin-bar.simme-node-atlas-detail-page .simme-node-topbar54{top:46px !important}}

.simme-node-topbar54__inner{
    width:100% !important;
    min-height:68px !important;
    margin:0 auto !important;
    padding:0 clamp(18px,3vw,44px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
}
.simme-node-topbar54__brand,
.simme-node-topbar54__brand:hover,
.simme-node-topbar54__brand:focus,
.simme-node-topbar54__brand:visited{
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.simme-node-topbar54__logo{
    display:block !important;
    width:auto !important;
    height:48px !important;
    max-width:190px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 !important;
}
body .simme-node-topbar54__burger,
body .simme-node-topbar54__burger:hover,
body .simme-node-topbar54__burger:focus,
body .simme-node-topbar54__burger:active{
    display:grid !important;
    place-content:center !important;
    gap:5px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
.simme-node-topbar54__burger span{
    display:block !important;
    width:28px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#fff !important;
    transition:transform .18s ease,opacity .15s ease !important;
}
.simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
.simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(2){opacity:0!important}
.simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

.simme-node-topbar54__menu{
    position:absolute !important;
    top:100% !important;
    right:18px !important;
    width:min(360px,calc(100vw - 36px)) !important;
    max-height:min(72vh,650px) !important;
    overflow:auto !important;
    margin:0 !important;
    padding:10px !important;
    border:0 !important;
    border-radius:0 0 14px 14px !important;
    background:#07090c !important;
    box-shadow:0 22px 48px rgba(0,0,0,.42) !important;
}
.simme-node-topbar54__menu[hidden]{display:none!important}
.simme-node-topbar54__menu .simme-node-topbar__menu-list,
.simme-node-topbar54__menu .simme-node-topbar__menu-list ul{
    display:grid !important;gap:2px !important;list-style:none !important;margin:0 !important;padding:0 !important
}
.simme-node-topbar54__menu .simme-node-topbar__menu-list ul{margin-left:12px !important;padding-left:10px !important;border-left:1px solid rgba(255,255,255,.08) !important}
.simme-node-topbar54__menu .simme-node-topbar__menu-list li{list-style:none !important;margin:0 !important;padding:0 !important}
.simme-node-topbar54__menu .simme-node-topbar__menu-list a,
.simme-node-topbar54__menu .simme-node-topbar__menu-list a:visited{
    display:block !important;padding:10px 12px !important;border-radius:8px !important;background:transparent !important;color:#eaf1f8 !important;-webkit-text-fill-color:#eaf1f8 !important;text-decoration:none !important;font-size:14px !important;line-height:1.3 !important;font-weight:600 !important
}
.simme-node-topbar54__menu .simme-node-topbar__menu-list a:hover,
.simme-node-topbar54__menu .simme-node-topbar__menu-list a:focus-visible{background:rgba(255,255,255,.07)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

@media(max-width:600px){
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    .simme-node-topbar54__inner{min-height:60px !important}
    .simme-node-topbar54__inner{padding:0 14px !important}
    .simme-node-topbar54__logo{height:42px !important;max-width:165px !important}
    body .simme-node-topbar54__burger,body .simme-node-topbar54__burger:hover,body .simme-node-topbar54__burger:focus{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
    .simme-node-topbar54__burger span{width:26px !important}
    .simme-node-topbar54__menu{right:10px !important;width:calc(100vw - 20px) !important}
}

/* ---- Orbit: V4.0 behaviour, isolated under V5.4 names. ---- */
.simme-na__count{
    grid-template-columns:minmax(0,1fr) minmax(170px,42%) !important;
    align-items:center !important;
    gap:clamp(14px,2vw,28px) !important;
    overflow:hidden !important;
}
.simme-na54-orbit{
    position:relative !important;
    z-index:8 !important;
    display:block !important;
    width:min(100%,240px) !important;
    aspect-ratio:1 / 1 !important;
    justify-self:center !important;
    overflow:hidden !important;
    border-radius:50% !important;
    isolation:isolate !important;
    touch-action:pan-y !important;
}
.simme-na54-orbit::before,.simme-na54-orbit::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.simme-na54-orbit::before{
    inset:27%;z-index:0;
    background:radial-gradient(circle,rgba(225,237,250,.88) 0 7%,rgba(143,217,255,.34) 18%,rgba(36,191,255,.09) 46%,transparent 72%);
    box-shadow:0 0 18px rgba(36,191,255,.20),0 0 44px rgba(36,191,255,.08);
    animation:simmeNA54CoreBreath 3.8s ease-in-out infinite
}
.simme-na54-orbit::after{inset:5%;z-index:0;border:1px solid rgba(143,217,255,.10);box-shadow:inset 0 0 24px rgba(36,191,255,.03)}
.simme-na54-orbit__halo{position:absolute;inset:17%;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(36,191,255,.07),transparent 68%)}
.simme-na54-orbit__ring{position:absolute !important;left:50% !important;top:50% !important;z-index:1 !important;display:block !important;border:1px solid rgba(143,217,255,.20) !important;border-radius:50% !important;box-shadow:inset 0 0 10px rgba(36,191,255,.02) !important;transform-origin:center !important;pointer-events:none !important}
.simme-na54-orbit__ring--one{width:62%;height:32%;transform:translate(-50%,-50%) rotate(-18deg)!important;border-color:rgba(143,217,255,.24)!important}
.simme-na54-orbit__ring--two{width:80%;height:48%;transform:translate(-50%,-50%) rotate(51deg)!important;border-color:rgba(216,75,255,.18)!important}
.simme-na54-orbit__ring--three{width:86%;height:62%;transform:translate(-50%,-50%) rotate(-39deg)!important;border-color:rgba(245,214,109,.14)!important}
.simme-na54-orbit__core{position:absolute;left:50%;top:50%;z-index:10;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#e1edfa;box-shadow:0 0 5px rgba(255,255,255,.95),0 0 15px rgba(143,217,255,.95),0 0 30px rgba(36,191,255,.55)}
.simme-na54-orbit__ball{
    --orb:#24bfff;--orb-glow:rgba(36,191,255,.64);
    position:absolute !important;left:50% !important;top:50% !important;right:auto !important;bottom:auto !important;z-index:5;
    width:14px !important;height:14px !important;margin:0 !important;border:1px solid rgba(255,255,255,.72) !important;border-radius:50% !important;
    background:radial-gradient(circle at 29% 24%,#fff 0 10%,rgba(255,255,255,.92) 11%,var(--orb) 35% 67%,rgba(0,18,29,.92) 100%) !important;
    box-shadow:inset 1px 1px 2px rgba(255,255,255,.48),inset -2px -2px 3px rgba(0,18,29,.40),0 0 7px var(--orb-glow),0 0 17px var(--orb-glow) !important;
    will-change:transform,opacity !important;pointer-events:none !important;transform:translate(-50%,-50%) !important
}
.simme-na54-orbit__ball::after{content:"";position:absolute;left:22%;top:15%;width:28%;height:28%;border-radius:50%;background:rgba(255,255,255,.95);opacity:.84}
.simme-na54-orbit__ball--cyan{--orb:#24bfff;--orb-glow:rgba(36,191,255,.66)}
.simme-na54-orbit__ball--blue{--orb:#37b7ff;--orb-glow:rgba(55,183,255,.60)}
.simme-na54-orbit__ball--ice{--orb:#8fd9ff;--orb-glow:rgba(143,217,255,.62)}
.simme-na54-orbit__ball--violet{--orb:#d84bff;--orb-glow:rgba(216,75,255,.56)}
.simme-na54-orbit__ball--pink{--orb:#ff7bd9;--orb-glow:rgba(255,123,217,.54)}
.simme-na54-orbit__ball--gold{--orb:#f5d66d;--orb-glow:rgba(245,214,109,.52)}
.simme-na54-orbit__ball--white{--orb:#e1edfa;--orb-glow:rgba(225,237,250,.56)}
@keyframes simmeNA54CoreBreath{0%,100%{opacity:.62;transform:scale(.90)}50%{opacity:1;transform:scale(1.12)}}

@media(max-width:700px){
    .simme-na__count{grid-template-columns:1fr !important;min-height:390px !important}
    .simme-na54-orbit{width:min(64vw,210px) !important;margin-top:4px !important}
}
@media(max-width:430px){
    .simme-na__count{min-height:350px !important}
    .simme-na54-orbit{width:min(58vw,180px) !important}
    .simme-na54-orbit__ball{width:12px !important;height:12px !important}
}


/* ========================================================================
   V5.5 — NODE PAGE TOP BAR VISIBILITY + PERMANENT OUTER BREATHING SPACE
   Targeted repair only: the orbit and Node content are intentionally untouched.
   ======================================================================== */

/* Keep the page background visible around the Node reader. */
body.simme-node-atlas-detail-page {
    background: #05090f !important;
}

/* The Node reader must never butt against the viewport or the sticky bar. */
body.simme-node-atlas-detail-page .simme-na--node-page {
    box-sizing: border-box !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin: 18px auto 30px !important;
    padding: 0 !important;
}

body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 28px !important;
}

/* The sticky header stays full-width; only the Node reader gets the outer gap. */
body.simme-node-atlas-detail-page .simme-node-topbar54 {
    box-sizing: border-box !important;
    overflow: visible !important;
}

.simme-node-topbar54__inner {
    position: relative !important;
    box-sizing: border-box !important;
    padding-right: clamp(76px, 6vw, 98px) !important;
}

/* Guarantee that the burger occupies the far-right position regardless of
   Themify/global button/grid rules. */
body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
    position: absolute !important;
    top: 50% !important;
    right: clamp(18px, 3vw, 44px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    overflow: visible !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__burger span {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform-origin: 50% 50% !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__burger span:nth-child(1) {
    top: 12px !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger span:nth-child(2) {
    top: 21px !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger span:nth-child(3) {
    top: 30px !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(1) {
    top: 21px !important;
    transform: rotate(45deg) !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__burger[aria-expanded="true"] span:nth-child(3) {
    top: 21px !important;
    transform: rotate(-45deg) !important;
}

/* Keep the drop-down visually attached to the right-hand burger. */
body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
    right: clamp(12px, 2.5vw, 36px) !important;
    z-index: 100120 !important;
}

@media (max-width: 782px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 24px) !important;
        margin: 12px auto 22px !important;
    }

    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 22px !important;
    }

    .simme-node-topbar54__inner {
        padding-right: 66px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__burger span {
        left: 7px !important;
        width: 26px !important;
    }
}

@media (max-width: 480px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 16px) !important;
        margin: 8px auto 18px !important;
    }

    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 18px !important;
    }
}


/* ========================================================================
   V5.6 — CSS-FIRST ORBIT: NO SCRIPT DEPENDENCY
   The seven Node spheres now travel with three independently rotating
   elliptical rings. Animation is pure CSS, so a JavaScript failure elsewhere
   on the page cannot freeze or hide the orbit. JavaScript only adds optional
   pointer/finger drift to the completed component.
   ======================================================================== */

/* Retire every older orbit implementation in the live 32-node panel. */
.simme-na__count > .simme-na54-orbit,
.simme-na__count > .simme-na53-orbit,
.simme-na__count > .simme-na__orbit,
.simme-na__count > .simme-na__orbit--css,
.simme-na__count > .simme-na__orbit--svg,
.simme-na__count > .simme-na__orbit--live52 {
    display: none !important;
}

.simme-na56-orbit {
    --sna56-x: 0px;
    --sna56-y: 0px;
    position: relative !important;
    z-index: 8 !important;
    display: block !important;
    width: min(100%, 246px) !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    isolation: isolate !important;
    touch-action: pan-y !important;
    transform: translate3d(var(--sna56-x), var(--sna56-y), 0) !important;
    transition: transform .22s cubic-bezier(.2,.72,.2,1) !important;
}

.simme-na56-orbit::before,
.simme-na56-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.simme-na56-orbit::before {
    inset: 28%;
    z-index: 1;
    background: radial-gradient(circle,
        rgba(255,255,255,.96) 0 7%,
        rgba(225,237,250,.92) 8% 14%,
        rgba(143,217,255,.38) 20%,
        rgba(36,191,255,.10) 43%,
        transparent 72%);
    box-shadow: 0 0 16px rgba(143,217,255,.28), 0 0 42px rgba(36,191,255,.10);
    animation: simmeNA56CoreField 3.6s ease-in-out infinite !important;
}

.simme-na56-orbit::after {
    inset: 5%;
    z-index: 0;
    border: 1px solid rgba(143,217,255,.10);
    box-shadow: inset 0 0 26px rgba(36,191,255,.035);
}

.simme-na56-orbit__halo {
    position: absolute !important;
    inset: 16% !important;
    z-index: 0 !important;
    display: block !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(36,191,255,.075), rgba(12,49,79,.035) 52%, transparent 72%) !important;
}

.simme-na56-orbit__ring {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(143,217,255,.30) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: inset 0 0 12px rgba(36,191,255,.025) !important;
    transform-origin: 50% 50% !important;
    pointer-events: none !important;
    will-change: transform !important;
}

.simme-na56-orbit__ring--one {
    width: 68% !important;
    height: 34% !important;
    margin-left: -34% !important;
    margin-top: -17% !important;
    border-color: rgba(88,202,255,.44) !important;
    animation: simmeNA56OrbitOne 7.6s linear infinite !important;
}

.simme-na56-orbit__ring--two {
    width: 58% !important;
    height: 76% !important;
    margin-left: -29% !important;
    margin-top: -38% !important;
    border-color: rgba(216,75,255,.34) !important;
    animation: simmeNA56OrbitTwo 10.4s linear infinite reverse !important;
}

.simme-na56-orbit__ring--three {
    width: 84% !important;
    height: 50% !important;
    margin-left: -42% !important;
    margin-top: -25% !important;
    border-color: rgba(245,214,109,.26) !important;
    animation: simmeNA56OrbitThree 13.8s linear infinite !important;
}

.simme-na56-orbit__ball {
    --orb: #24bfff;
    --orb-glow: rgba(36,191,255,.62);
    position: absolute !important;
    z-index: 6 !important;
    display: block !important;
    width: clamp(12px, 7%, 17px) !important;
    height: clamp(12px, 7%, 17px) !important;
    min-width: 12px !important;
    min-height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: radial-gradient(circle at 30% 24%,
        #ffffff 0 10%,
        rgba(255,255,255,.96) 11%,
        var(--orb) 38% 67%,
        rgba(4,22,34,.96) 100%) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.46),
        inset -2px -2px 3px rgba(0,18,29,.38),
        0 0 8px var(--orb-glow),
        0 0 18px var(--orb-glow) !important;
    pointer-events: none !important;
}

.simme-na56-orbit__ball::after {
    content: "";
    position: absolute;
    left: 21%;
    top: 15%;
    width: 29%;
    height: 29%;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    opacity: .88;
}

.simme-na56-orbit__ball--cyan   { --orb:#24bfff; --orb-glow:rgba(36,191,255,.66); }
.simme-na56-orbit__ball--blue   { --orb:#37b7ff; --orb-glow:rgba(55,183,255,.61); }
.simme-na56-orbit__ball--ice    { --orb:#8fd9ff; --orb-glow:rgba(143,217,255,.62); }
.simme-na56-orbit__ball--violet { --orb:#d84bff; --orb-glow:rgba(216,75,255,.58); }
.simme-na56-orbit__ball--pink   { --orb:#ff7bd9; --orb-glow:rgba(255,123,217,.56); }
.simme-na56-orbit__ball--gold   { --orb:#f5d66d; --orb-glow:rgba(245,214,109,.56); }
.simme-na56-orbit__ball--white  { --orb:#e1edfa; --orb-glow:rgba(225,237,250,.58); }

/* Fixed attachment points on the rotating ellipses. Because the entire ring
   rotates, every sphere continuously travels around the shared centre without
   relying on JavaScript-calculated coordinates. */
.simme-na56-orbit__ball--one-a   { left: -7px !important; top: calc(50% - 7px) !important; }
.simme-na56-orbit__ball--one-b   { right: 15% !important; top: -7px !important; }
.simme-na56-orbit__ball--one-c   { right: -7px !important; top: calc(50% - 7px) !important; }
.simme-na56-orbit__ball--two-a   { left: 8% !important; top: 12% !important; }
.simme-na56-orbit__ball--two-b   { right: 8% !important; bottom: 10% !important; }
.simme-na56-orbit__ball--three-a { right: 9% !important; top: 3% !important; }
.simme-na56-orbit__ball--three-b { left: 11% !important; bottom: 2% !important; }

.simme-na56-orbit__core {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 12 !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    margin: -7px 0 0 -7px !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 50% !important;
    background: #e1edfa !important;
    box-shadow: 0 0 6px rgba(255,255,255,.94), 0 0 17px rgba(143,217,255,.92), 0 0 34px rgba(36,191,255,.44) !important;
    animation: simmeNA56CorePulse 2.7s ease-in-out infinite !important;
}

@keyframes simmeNA56OrbitOne {
    from { transform: rotate(-18deg); }
    to   { transform: rotate(342deg); }
}
@keyframes simmeNA56OrbitTwo {
    from { transform: rotate(51deg); }
    to   { transform: rotate(411deg); }
}
@keyframes simmeNA56OrbitThree {
    from { transform: rotate(-39deg); }
    to   { transform: rotate(321deg); }
}
@keyframes simmeNA56CoreField {
    0%,100% { opacity:.62; transform:scale(.92); }
    50%     { opacity:1; transform:scale(1.10); }
}
@keyframes simmeNA56CorePulse {
    0%,100% { opacity:.80; transform:scale(.94); }
    50%     { opacity:1; transform:scale(1.10); }
}

/* Responsive layout: keep the orbit entirely visible rather than allowing it
   to run off the right-hand edge at intermediate widths. */
@media (min-width: 701px) {
    .simme-na__count {
        grid-template-columns: minmax(0, 1fr) minmax(176px, 42%) !important;
        align-items: center !important;
        gap: clamp(14px, 2vw, 28px) !important;
        overflow: hidden !important;
    }
}

@media (max-width: 700px) {
    .simme-na__count {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
        padding-bottom: 22px !important;
        overflow: hidden !important;
    }
    .simme-na56-orbit {
        width: min(62vw, 210px) !important;
        min-width: 156px !important;
        margin: 6px auto 0 !important;
    }
}

@media (max-width: 430px) {
    .simme-na56-orbit {
        width: min(58vw, 182px) !important;
        min-width: 146px !important;
    }
    .simme-na56-orbit__ball {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }
}

/* The Atlas should continue to feel alive if the operating system requests
   reduced motion, but at a deliberately much slower pace. These rules are
   later and more specific than the older global animation reset. */
@media (prefers-reduced-motion: reduce) {
    .simme-na .simme-na56-orbit__ring--one {
        animation: simmeNA56OrbitOne 38s linear infinite !important;
    }
    .simme-na .simme-na56-orbit__ring--two {
        animation: simmeNA56OrbitTwo 52s linear infinite reverse !important;
    }
    .simme-na .simme-na56-orbit__ring--three {
        animation: simmeNA56OrbitThree 66s linear infinite !important;
    }
    .simme-na .simme-na56-orbit::before {
        animation: simmeNA56CoreField 10s ease-in-out infinite !important;
    }
    .simme-na .simme-na56-orbit__core {
        animation: simmeNA56CorePulse 9s ease-in-out infinite !important;
    }
}


/* ========================================================================
   V5.7 — VERIFIED ATLAS INTERACTION + ORBIT + NODE-PAGE FRAME
   ======================================================================== */

/* --- 1. Restore the proven live-sphere orbit model with direct children. --- */
.simme-na__count > .simme-na56-orbit,
.simme-na__count > .simme-na54-orbit,
.simme-na__count > .simme-na53-orbit,
.simme-na__count > .simme-na__orbit,
.simme-na__count > .simme-na__orbit--css,
.simme-na__count > .simme-na__orbit--svg,
.simme-na__count > .simme-na__orbit--live52 { display:none !important; }

.simme-na57-orbit {
    --sna57-x:0px;
    --sna57-y:0px;
    --sna57-tilt-x:0deg;
    --sna57-tilt-y:0deg;
    position:relative !important;
    z-index:9 !important;
    display:block !important;
    width:min(100%,246px) !important;
    aspect-ratio:1/1 !important;
    justify-self:center !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:50% !important;
    isolation:isolate !important;
    transform:translate3d(var(--sna57-x),var(--sna57-y),0) rotateX(var(--sna57-tilt-x)) rotateY(var(--sna57-tilt-y)) !important;
    transform-style:preserve-3d !important;
    transition:transform .20s cubic-bezier(.2,.72,.2,1) !important;
}
.simme-na57-orbit__field,
.simme-na57-orbit__path,
.simme-na57-orbit__ball,
.simme-na57-orbit__core { position:absolute !important; display:block !important; pointer-events:none !important; box-sizing:border-box !important; }
.simme-na57-orbit__field {
    inset:3% !important;
    border-radius:50% !important;
    z-index:0 !important;
    background:radial-gradient(circle at 50% 50%,rgba(36,191,255,.12),rgba(14,55,83,.035) 48%,transparent 70%) !important;
    border:1px solid rgba(143,217,255,.08) !important;
}
.simme-na57-orbit__path {
    left:50% !important; top:50% !important; z-index:1 !important;
    border:1px solid rgba(143,217,255,.19) !important;
    border-radius:50% !important;
    background:transparent !important;
    transform-origin:50% 50% !important;
}
.simme-na57-orbit__path--one { width:62% !important;height:31% !important;transform:translate(-50%,-50%) rotate(-18deg) !important;border-color:rgba(88,202,255,.30) !important; }
.simme-na57-orbit__path--two { width:53% !important;height:71% !important;transform:translate(-50%,-50%) rotate(51deg) !important;border-color:rgba(216,75,255,.20) !important; }
.simme-na57-orbit__path--three { width:77% !important;height:45% !important;transform:translate(-50%,-50%) rotate(-39deg) !important;border-color:rgba(245,214,109,.17) !important; }
.simme-na57-orbit__ball {
    --orb:#24bfff; --orb-glow:rgba(36,191,255,.65);
    left:50%; top:50%; z-index:7;
    width:clamp(12px,6.8%,17px) !important;height:clamp(12px,6.8%,17px) !important;
    margin:0 !important;padding:0 !important;
    border:1px solid rgba(255,255,255,.84) !important;border-radius:50% !important;
    background:radial-gradient(circle at 29% 23%,#fff 0 9%,rgba(255,255,255,.96) 10%,var(--orb) 36% 68%,rgba(4,22,34,.96) 100%) !important;
    box-shadow:inset 1px 1px 2px rgba(255,255,255,.42),inset -2px -2px 3px rgba(0,18,29,.34),0 0 8px var(--orb-glow),0 0 18px var(--orb-glow) !important;
    opacity:1;visibility:visible !important;will-change:transform,opacity !important;
}
.simme-na57-orbit__ball::after { content:"";position:absolute;left:20%;top:14%;width:29%;height:29%;border-radius:50%;background:rgba(255,255,255,.95);opacity:.88; }
.simme-na57-orbit__ball--cyan{--orb:#24bfff;--orb-glow:rgba(36,191,255,.67)}
.simme-na57-orbit__ball--blue{--orb:#37b7ff;--orb-glow:rgba(55,183,255,.62)}
.simme-na57-orbit__ball--ice{--orb:#8fd9ff;--orb-glow:rgba(143,217,255,.64)}
.simme-na57-orbit__ball--violet{--orb:#d84bff;--orb-glow:rgba(216,75,255,.60)}
.simme-na57-orbit__ball--pink{--orb:#ff7bd9;--orb-glow:rgba(255,123,217,.58)}
.simme-na57-orbit__ball--gold{--orb:#f5d66d;--orb-glow:rgba(245,214,109,.60)}
.simme-na57-orbit__ball--white{--orb:#e1edfa;--orb-glow:rgba(225,237,250,.62)}
/* static fallback positions before JS begins */
.simme-na57-orbit__ball:nth-of-type(5){left:22%;top:50%}.simme-na57-orbit__ball:nth-of-type(6){left:66%;top:37%}.simme-na57-orbit__ball:nth-of-type(7){left:78%;top:53%}
.simme-na57-orbit__ball:nth-of-type(8){left:37%;top:22%}.simme-na57-orbit__ball:nth-of-type(9){left:65%;top:76%}.simme-na57-orbit__ball:nth-of-type(10){left:76%;top:27%}.simme-na57-orbit__ball:nth-of-type(11){left:28%;top:72%}
.simme-na57-orbit__core { left:50% !important;top:50% !important;z-index:14 !important;width:15px !important;height:15px !important;transform:translate(-50%,-50%) !important;border:1px solid rgba(255,255,255,.92) !important;border-radius:50% !important;background:#e1edfa !important;box-shadow:0 0 7px rgba(255,255,255,.95),0 0 18px rgba(143,217,255,.95),0 0 36px rgba(36,191,255,.42) !important; }

@media(min-width:701px){.simme-na__count{grid-template-columns:minmax(0,1fr) minmax(176px,42%) !important;align-items:center !important;gap:clamp(14px,2vw,28px) !important;overflow:hidden !important}}
@media(max-width:700px){.simme-na__count{grid-template-columns:1fr !important;grid-template-rows:auto auto !important;min-height:0 !important;padding-bottom:22px !important;overflow:hidden !important}.simme-na57-orbit{width:min(62vw,210px) !important;min-width:150px !important;margin:8px auto 0 !important}}
@media(max-width:430px){.simme-na57-orbit{width:min(58vw,184px) !important;min-width:144px !important}.simme-na57-orbit__ball{width:12px !important;height:12px !important}}

/* --- 2. Search/filter controls: calmer, smaller and easier to understand. --- */
.simme-na__controls { padding:clamp(18px,2.3vw,28px) !important; }
.simme-na__search-label { display:block !important;margin:0 0 10px !important;font-size:13px !important;font-weight:720 !important;letter-spacing:.015em !important;color:var(--sna-text) !important; }
body .simme-na .simme-na__search {
    width:100% !important;height:54px !important;min-height:54px !important;
    padding:0 18px !important;border:1px solid rgba(84,193,255,.42) !important;border-radius:17px !important;
    outline:0 !important;background:linear-gradient(180deg,rgba(8,22,38,.96),rgba(5,15,27,.98)) !important;
    color:#e1edfa !important;-webkit-text-fill-color:#e1edfa !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 24px rgba(36,191,255,.025),0 8px 26px rgba(0,0,0,.08) !important;
    font-size:15px !important;line-height:1 !important;transition:border-color .2s ease,box-shadow .2s ease !important;
}
body .simme-na .simme-na__search::placeholder{color:#839bb9 !important;-webkit-text-fill-color:#839bb9 !important;opacity:1 !important}
body .simme-na .simme-na__search:focus{border-color:#8fd9ff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(36,191,255,.08),0 0 24px rgba(36,191,255,.11) !important}
.simme-na__filters{display:flex !important;flex-wrap:wrap !important;gap:9px !important;margin-top:14px !important;overflow:visible !important}
body .simme-na .simme-na__filter{min-height:39px !important;padding:8px 14px !important;border-radius:14px !important;font-size:11.5px !important;font-weight:670 !important;background:rgba(7,18,31,.72) !important;border:1px solid color-mix(in srgb,var(--sna-filter-accent) 24%,rgba(112,150,181,.38) 76%) !important;color:#afc0d7 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important}
body .simme-na .simme-na__filter::after{display:none !important}
body .simme-na .simme-na__filter::before{left:12% !important;right:12% !important;bottom:-8px !important;height:18px !important;background:radial-gradient(ellipse,rgba(245,196,112,.24),rgba(245,196,112,0) 72%) !important;filter:blur(7px) !important}
body .simme-na .simme-na__filter:hover,body .simme-na .simme-na__filter:focus-visible{color:#e1edfa !important;border-color:color-mix(in srgb,var(--sna-filter-accent) 55%,rgba(112,150,181,.4) 45%) !important;background:color-mix(in srgb,#081726 92%,var(--sna-filter-accent) 8%) !important}
body .simme-na .simme-na__filter.is-active{color:#f3f8ff !important;border-color:color-mix(in srgb,var(--sna-filter-accent) 72%,white 28%) !important;background:linear-gradient(180deg,color-mix(in srgb,#0c2237 87%,var(--sna-filter-accent) 13%),#081624) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 18px color-mix(in srgb,var(--sna-filter-accent) 12%,transparent) !important}
.simme-na__results{margin-top:14px !important;font-size:12.5px !important;color:#8097b2 !important}

/* --- 3. Theme control: compact celestial switch, no oversized outline. --- */
body .simme-na .simme-na__theme-toggle{width:260px !important;min-height:50px !important;padding:3px !important;border:1px solid rgba(84,193,255,.34) !important;border-radius:16px !important;background:#061421 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.10) !important;overflow:visible !important}
.simme-na__theme-track{min-height:44px !important;border-radius:13px !important}
.simme-na__theme-thumb{top:2px !important;left:2px !important;width:calc(50% - 2px) !important;height:40px !important;border:1px solid rgba(143,217,255,.34) !important;border-radius:12px !important;background:linear-gradient(145deg,#17314c,#0e2237) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 16px rgba(36,191,255,.08),0 9px 20px rgba(0,0,0,.18) !important}
.simme-na[data-theme="light"] .simme-na__theme-thumb{background:linear-gradient(145deg,#f9fcff,#eaf3fb) !important;border-color:rgba(72,157,215,.30) !important;box-shadow:0 0 18px rgba(245,198,105,.10),0 8px 18px rgba(69,96,124,.12) !important}
.simme-na__theme-option{min-height:40px !important;font-size:12px !important;font-weight:720 !important;color:#94abc4 !important}
.simme-na[data-theme="dark"] .simme-na__theme-option--dark,.simme-na[data-theme="light"] .simme-na__theme-option--light{color:var(--sna-text) !important}
@media(max-width:700px){body .simme-na .simme-na__theme-toggle{width:100% !important;max-width:280px !important}.simme-na__filters{flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:visible !important;padding:2px 2px 10px !important;scroll-snap-type:x proximity !important;scrollbar-width:none}.simme-na__filters::-webkit-scrollbar{display:none}.simme-na__filter{flex:0 0 auto !important;scroll-snap-align:start}}

/* light-mode forms */
.simme-na[data-theme="light"] .simme-na__search{background:#fff !important;color:#142137 !important;-webkit-text-fill-color:#142137 !important;border-color:rgba(62,157,214,.26) !important;box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(68,95,123,.08) !important}
.simme-na[data-theme="light"] .simme-na__search::placeholder{color:#7d8ca4 !important;-webkit-text-fill-color:#7d8ca4 !important}
.simme-na[data-theme="light"] .simme-na__filter{background:rgba(255,255,255,.76) !important;color:#52637b !important}

/* --- 4. Individual Node pages: same luminous cyan edge as the wider Simme site. --- */
body.simme-node-atlas-detail-page{background:#050a11 !important}
body.simme-node-atlas-detail-page .simme-na--node-page{width:calc(100% - 48px) !important;margin:20px auto 32px !important;background:transparent !important}
body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell{
    border:1px solid rgba(55,186,239,.54) !important;
    border-radius:28px !important;
    background:radial-gradient(circle at 7% 0%,rgba(36,191,255,.055),transparent 28%),linear-gradient(180deg,#081523,#06111d) !important;
    box-shadow:inset 0 1px 0 rgba(143,217,255,.08),inset 0 0 34px rgba(36,191,255,.022),0 0 24px rgba(36,191,255,.035) !important;
    overflow:hidden !important;
}
@media(max-width:782px){body.simme-node-atlas-detail-page .simme-na--node-page{width:calc(100% - 28px) !important;margin:14px auto 24px !important}body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell{border-radius:23px !important}}
@media(max-width:480px){body.simme-node-atlas-detail-page .simme-na--node-page{width:calc(100% - 18px) !important;margin:10px auto 20px !important}body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell{border-radius:19px !important}}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V22 FRAMELESS WRAPPERS
   Removes the two large enclosing container panels so the topic
   controls and With/Without comparison cards sit directly on the
   page's black background. Individual topic buttons, colour-coded
   comparison cards, glows, VS overlap and responsive behaviour remain.
   ========================================================= */

/* The shell is structural only — never draw a visible container around it. */
.sscr__shell {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove the large panel surrounding the four comparison-topic buttons. */
.sscr__rail {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 12px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
}

/* Remove the large panel surrounding the With / Without cards. */
.sscr__stage {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Guard against an old theme/CSS layer recreating the wrappers with pseudo-elements. */
.sscr__rail::before,
.sscr__rail::after,
.sscr__stage::before,
.sscr__stage::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep the small label naturally aligned with the frameless controls. */
.sscr__rail-label {
    padding-inline: 2px !important;
}

/* The active-topic arrow hangs below the button, so retain a little breathing room
   without bringing back a visible enclosing rail panel. */
.sscr__rail-list {
    overflow: visible !important;
}

/* Reassert frameless spacing after all older responsive rail/stage rules. */
@media (max-width: 860px) {
    .sscr__rail {
        padding: 0 0 11px !important;
        margin-bottom: 4px !important;
    }

    .sscr__stage {
        padding: 0 !important;
    }
}

@media (max-width: 640px) {
    .sscr__rail {
        padding: 0 0 10px !important;
    }

    .sscr__stage {
        padding: 0 !important;
    }
}

@media (max-width: 420px) {
    .sscr__rail {
        padding: 0 0 9px !important;
    }

    .sscr__stage {
        padding: 0 !important;
    }
}

/* =========================================================
   SIMME — AI COMPATIBILITY RUNWAY
   Remove separator dots between logo panels
   ========================================================= */
.saic__item::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}


/* =========================================================
   SIMME HOMEPAGE — COMPARISON INTRO CLEANUP
   Removes the descriptive sentence beneath the comparison heading
   and closes the vertical space it occupied.
   ========================================================= */

.sscr__summary {
    display: none !important;
}

.sscr__intro {
    margin-bottom: clamp(6px, .6vw, 10px) !important;
}


/* ========================================================================
   SYMSOUL NODE ATLAS V6.0 — REFERENCE-LED HERO REDESIGN
   2026-08-13

   Scope: ONLY the top Node Atlas hero introduced by the V6.0 PHP markup.
   The existing Node directory, full-detail reader, dedicated Node pages,
   authorised Node icons, SEO/indexing and all unrelated site CSS remain intact.

   Reliability decision:
   - Orbiting spheres use native inline SVG animateMotion.
   - The animation therefore does not rely on legacy .simme-na orbit classes,
     CSS transform resets, requestAnimationFrame or interval timers.
   - Pointer/finger parallax is optional enhancement only.
   ======================================================================== */

body .simme-na .simme-na6-hero,
body .simme-na .simme-na6-hero *,
body .simme-na .simme-na6-hero *::before,
body .simme-na .simme-na6-hero *::after {
    box-sizing: border-box;
}

body .simme-na .simme-na6-hero {
    --sna6-cyan: #39c8ff;
    --sna6-blue: #2b8cff;
    --sna6-violet: #9a54ff;
    --sna6-pink: #df4fd3;
    --sna6-gold: #e8ad48;
    --sna6-ice: #dfeaff;
    --sna6-text: #f3f6ff;
    --sna6-soft: #aebbd0;
    --sna6-panel: rgba(7, 18, 34, .74);
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .82fr) minmax(540px, 1.42fr) !important;
    align-items: center !important;
    gap: clamp(40px, 5vw, 86px) !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: clamp(82px, 7vw, 104px) clamp(34px, 5vw, 78px) clamp(36px, 4.6vw, 70px) !important;
    overflow: hidden !important;
    isolation: isolate;
    color: var(--sna6-text) !important;
    background:
        radial-gradient(circle at 60% 48%, rgba(119, 64, 255, .13), transparent 31%),
        radial-gradient(circle at 90% 30%, rgba(26, 151, 255, .08), transparent 34%),
        linear-gradient(135deg, #07101f 0%, #06101d 54%, #071525 100%) !important;
    border: 1px solid rgba(94, 167, 226, .38) !important;
    border-radius: clamp(26px, 2.4vw, 38px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 26px 70px rgba(0, 0, 0, .24) !important;
}

body .simme-na .simme-na6-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    opacity: .42;
    background-image:
        radial-gradient(circle at 18% 28%, rgba(81, 157, 255, .10) 0 1px, transparent 1.2px);
    background-size: 17px 17px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.72), transparent 42%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.72), transparent 42%);
}

/* V6.29 — compact back-home control anchored at the very top of the hero. */
body .simme-na .simme-na6-home-link,
body .simme-na .simme-na6-home-link:link,
body .simme-na .simme-na6-home-link:visited {
    position: absolute !important;
    z-index: 8 !important;
    top: clamp(15px, 1.5vw, 22px) !important;
    left: clamp(17px, 2vw, 28px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 5px 14px 5px 7px !important;
    border: 1px solid rgba(102, 184, 242, .34) !important;
    border-radius: 999px !important;
    color: #dcecff !important;
    -webkit-text-fill-color: #dcecff !important;
    text-decoration: none !important;
    background:
        linear-gradient(180deg, rgba(15, 35, 61, .88), rgba(7, 19, 38, .82)) padding-box,
        linear-gradient(100deg, rgba(180, 81, 255, .24), rgba(57, 205, 255, .30)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 24px rgba(0,0,0,.20),
        0 0 18px rgba(47, 172, 255, .07) !important;
    -webkit-backdrop-filter: blur(11px) saturate(1.1);
    backdrop-filter: blur(11px) saturate(1.1);
    font-size: clamp(11px, .78vw, 13px) !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: translateZ(0) !important;
    transition:
        transform .32s cubic-bezier(.2,.72,.2,1),
        border-color .32s ease,
        background .32s ease,
        box-shadow .32s ease,
        color .32s ease !important;
    -webkit-tap-highlight-color: transparent;
}

body .simme-na .simme-na6-home-link__icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid rgba(121, 204, 255, .34) !important;
    border-radius: 50% !important;
    color: #70d8ff !important;
    background: linear-gradient(135deg, rgba(160,72,255,.16), rgba(37,179,255,.14)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(58,194,255,.08) !important;
}

body .simme-na .simme-na6-home-link__icon svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    overflow: visible !important;
    transition: transform .32s cubic-bezier(.2,.72,.2,1) !important;
}

body .simme-na .simme-na6-home-link:hover,
body .simme-na .simme-na6-home-link:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(116, 218, 255, .62) !important;
    background:
        linear-gradient(180deg, rgba(20, 43, 72, .94), rgba(9, 24, 47, .90)) padding-box,
        linear-gradient(100deg, rgba(196, 86, 255, .52), rgba(61, 213, 255, .62)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 28px rgba(0,0,0,.23),
        0 0 22px rgba(54, 196, 255, .14),
        0 0 20px rgba(181, 75, 255, .08) !important;
    transform: translateY(-1px) !important;
}

body .simme-na .simme-na6-home-link:hover .simme-na6-home-link__icon svg,
body .simme-na .simme-na6-home-link:focus-visible .simme-na6-home-link__icon svg {
    transform: translateX(-2px) !important;
}

body .simme-na .simme-na6-home-link:focus-visible {
    outline: 2px solid rgba(90, 214, 255, .88) !important;
    outline-offset: 3px !important;
}

body .simme-na .simme-na6-home-link:active {
    transform: translateY(0) scale(.985) !important;
}

body .simme-na[data-theme="light"] .simme-na6-home-link,
body .simme-na[data-theme="light"] .simme-na6-home-link:link,
body .simme-na[data-theme="light"] .simme-na6-home-link:visited {
    color: #31435f !important;
    -webkit-text-fill-color: #31435f !important;
    background: rgba(245, 249, 255, .82) !important;
    border-color: rgba(82, 128, 181, .24) !important;
    box-shadow: 0 8px 22px rgba(70, 91, 129, .10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}

body .simme-na[data-theme="light"] .simme-na6-home-link__icon {
    color: #327bb4 !important;
    background: rgba(226, 239, 253, .86) !important;
    border-color: rgba(73, 145, 197, .26) !important;
}

body .simme-na .simme-na6-hero__copy,
body .simme-na .simme-na6-hero__visual {
    position: relative !important;
    min-width: 0 !important;
    z-index: 1;
}

body .simme-na .simme-na6-hero__copy {
    max-width: 560px !important;
}

body .simme-na .simme-na6-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 20px !important;
    color: #42d9ff !important;
    font-size: clamp(10px, .8vw, 13px) !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 18px rgba(57,200,255,.18) !important;
}

body .simme-na .simme-na6-eyebrow__mark {
    position: relative !important;
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    transform: rotate(45deg) !important;
    border: 1px solid rgba(57,200,255,.86) !important;
    box-shadow: 0 0 10px rgba(57,200,255,.24) !important;
}

body .simme-na .simme-na6-eyebrow__mark::before,
body .simme-na .simme-na6-eyebrow__mark::after {
    position: absolute;
    inset: 2px;
    content: "";
    border: 1px solid rgba(57,200,255,.56);
}
body .simme-na .simme-na6-eyebrow__mark::after { inset: 4px; background:#39c8ff; border:0; }

body .simme-na .simme-na6-hero h1 {
    width: min(100%, 600px) !important;
    margin: 0 !important;
    color: #f3f6ff !important;
    font-size: clamp(42px, 4.35vw, 74px) !important;
    font-weight: 520 !important;
    line-height: 1.03 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
    background: linear-gradient(96deg, #f4f8ff 0%, #f4f8ff 36%, #eab8ff 69%, #b597ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body .simme-na .simme-na6-title-rule {
    display: block !important;
    width: 92px !important;
    height: 3px !important;
    margin: 24px 0 30px !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg, #3ed7ff 0%, #3ed7ff 54%, #ba59ff 100%) !important;
    box-shadow: 0 0 15px rgba(57,200,255,.22), 0 0 18px rgba(178,73,255,.14) !important;
}

body .simme-na .simme-na6-lead {
    margin: 0 0 28px !important;
    max-width: 530px !important;
    color: #aebbd0 !important;
    font-size: clamp(14px, 1.12vw, 18px) !important;
    font-weight: 430 !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
}

body .simme-na .simme-na6-mobile-lead,
body .simme-na .simme-na6-mobile-brand {
    display: none !important;
}

body .simme-na .simme-na6-facts {
    display: grid !important;
    gap: 15px !important;
    margin: 0 !important;
}

/* Duplicate facts set used only when the hero stacks at tablet widths. */
body .simme-na .simme-na6-facts--stacked {
    display: none !important;
}

body .simme-na .simme-na6-fact {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    min-width: 0 !important;
    color: #c5cee0 !important;
    font-size: clamp(13px, .95vw, 16px) !important;
    font-weight: 470 !important;
    line-height: 1.3 !important;
}

body .simme-na .simme-na6-fact__icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 33px !important;
    width: 33px !important;
    height: 33px !important;
    color: #42ceff !important;
    filter: drop-shadow(0 0 7px rgba(57,200,255,.42));
}
body .simme-na .simme-na6-fact__icon--groups { color:#a462ff !important; filter:drop-shadow(0 0 7px rgba(164,98,255,.42)); }
body .simme-na .simme-na6-fact__icon--unified { color:#965cff !important; filter:drop-shadow(0 0 9px rgba(150,92,255,.50)); }
body .simme-na .simme-na6-fact__icon svg { display:block !important; width:100% !important; height:100% !important; }

body .simme-na .simme-na6-hero__visual {
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 18px !important;
    width: 100% !important;
}

body .simme-na .simme-na6-network-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(180px, 30%) minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1.92 / 1 !important;
    min-height: 330px !important;
    max-height: 470px !important;
    padding: clamp(26px, 2.8vw, 42px) !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid transparent !important;
    border-radius: clamp(24px, 2.2vw, 36px) !important;
    background:
        linear-gradient(135deg, rgba(9,20,43,.93), rgba(5,22,40,.92)) padding-box,
        linear-gradient(110deg, rgba(196,82,255,.9), rgba(126,91,255,.76) 35%, rgba(61,213,255,.95) 100%) border-box !important;
    box-shadow:
        0 0 0 1px rgba(124, 145, 255, .08),
        0 0 28px rgba(122, 61, 255, .15),
        0 0 38px rgba(42, 190, 255, .11),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body .simme-na .simme-na6-network-card::before {
    position:absolute;
    inset:0;
    z-index:-2;
    content:"";
    pointer-events:none;
    background:
        linear-gradient(115deg, rgba(9,18,45,.78) 0%, rgba(8,17,42,.68) 24%, rgba(4,16,35,.38) 56%, rgba(4,15,32,.54) 100%),
        radial-gradient(circle at 17% 35%, rgba(146,69,255,.18), transparent 34%),
        radial-gradient(circle at 77% 55%, rgba(31,155,255,.14), transparent 34%),
        linear-gradient(100deg, transparent 24%, rgba(139,75,255,.06) 49%, rgba(50,188,255,.06) 72%, transparent 92%),
        url("https://www.simme.co.uk/wp-content/uploads/2026/08/Atlas-Background-2.jpg");
    background-repeat:no-repeat;
    background-size:cover, auto, auto, auto, cover;
    background-position:50% 50%, 17% 35%, 77% 55%, 50% 50%, 68% 50%;
    background-blend-mode:normal, screen, screen, normal, normal;
    opacity:.76;
    filter:saturate(.90) brightness(.88);
}

body .simme-na .simme-na6-network-card__bloom {
    position:absolute !important;
    z-index:-1 !important;
    left:8% !important;
    top:8% !important;
    width:48% !important;
    height:82% !important;
    border-radius:50% !important;
    background:rgba(132,68,255,.18) !important;
    filter:blur(58px) !important;
    opacity:.82 !important;
    animation:simme-na6-bloom 8.5s ease-in-out infinite alternate !important;
}

body .simme-na .simme-na6-network-card__beam {
    position:absolute !important;
    z-index:0 !important;
    left:-7% !important;
    right:-7% !important;
    top:50% !important;
    height:2px !important;
    pointer-events:none !important;
    background:linear-gradient(90deg, transparent 0%, rgba(183,75,255,.42) 20%, rgba(182,92,255,.56) 39%, rgba(73,205,255,.62) 68%, transparent 100%) !important;
    box-shadow:0 0 16px rgba(95,94,255,.25),0 0 26px rgba(57,200,255,.16) !important;
    opacity:.66 !important;
}

body .simme-na .simme-na6-metric {
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    align-content:center !important;
    justify-items:start !important;
    align-self:stretch !important;
    min-width:0 !important;
    padding:clamp(20px,2.1vw,34px) !important;
    overflow:hidden !important;
    border:1px solid rgba(137,147,255,.55) !important;
    border-radius:clamp(20px,1.9vw,30px) !important;
    background:linear-gradient(160deg,rgba(38,42,104,.36),rgba(7,18,45,.28)) !important;
    box-shadow:inset 0 0 30px rgba(103,75,255,.07),0 0 18px rgba(105,69,255,.08) !important;
}

body .simme-na .simme-na6-metric strong {
    display:block !important;
    margin:0 !important;
    color:#f3f5ff !important;
    font-size:clamp(66px,6.8vw,112px) !important;
    font-weight:420 !important;
    line-height:.82 !important;
    letter-spacing:-.06em !important;
    text-shadow:0 0 20px rgba(255,255,255,.08) !important;
}

body .simme-na .simme-na6-metric span {
    display:block !important;
    margin:clamp(18px,1.5vw,24px) 0 0 !important;
    color:#f4f6ff !important;
    font-size:clamp(20px,1.75vw,31px) !important;
    font-weight:720 !important;
    line-height:1.05 !important;
    letter-spacing:-.015em !important;
}
body .simme-na .simme-na6-metric i {
    display:block !important;
    width:100% !important;
    height:1px !important;
    margin:clamp(16px,1.4vw,22px) 0 !important;
    background:linear-gradient(90deg,rgba(122,137,255,.28),rgba(110,151,232,.17)) !important;
}
body .simme-na .simme-na6-metric small {
    color:#aeb6d1 !important;
    font-size:clamp(14px,1.05vw,18px) !important;
    font-weight:430 !important;
    line-height:1.35 !important;
}

body .simme-na .simme-na6-orbit {
    --sna6-orbit-x:0px;
    --sna6-orbit-y:0px;
    position:relative !important;
    z-index:2 !important;
    align-self:stretch !important;
    min-width:0 !important;
    width:100% !important;
    min-height:260px !important;
    overflow:visible !important;
    transform:translate3d(var(--sna6-orbit-x),var(--sna6-orbit-y),0) !important;
    transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;
}

body .simme-na .simme-na6-orbit::before {
    position:absolute;
    left:50%;
    top:50%;
    width:min(72%,360px);
    aspect-ratio:1;
    content:"";
    border-radius:50%;
    background:radial-gradient(circle,rgba(31,137,255,.16),rgba(31,137,255,.06) 34%,transparent 68%);
    filter:blur(18px);
    transform:translate(-50%,-50%);
    animation:simme-na6-core-breathe 4.2s ease-in-out infinite;
}

body .simme-na .simme-na6-orbit__svg {
    position:absolute !important;
    inset:50% auto auto 50% !important;
    display:block !important;
    width:min(100%,560px) !important;
    height:auto !important;
    max-height:100% !important;
    overflow:visible !important;
    transform:translate(-50%,-50%) !important;
    transform-origin:center !important;
}

body .simme-na .simme-na6-theme,
body .simme-na .simme-na6-theme:hover,
body .simme-na .simme-na6-theme:focus,
body .simme-na .simme-na6-theme:active {
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:center !important;
    width:min(260px,100%) !important;
    min-height:48px !important;
    margin:0 !important;
    padding:4px !important;
    overflow:hidden !important;
    color:#aebbd0 !important;
    background:rgba(4,12,25,.70) !important;
    border:1px solid rgba(86,134,198,.28) !important;
    border-radius:999px !important;
    box-shadow:inset 0 0 18px rgba(26,117,255,.05) !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    cursor:pointer !important;
}
body .simme-na .simme-na6-theme__option {
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-height:38px !important;
    color:#8ea2be !important;
    font-size:13px !important;
    font-weight:650 !important;
    transition:color .2s ease !important;
}
body .simme-na[data-theme="dark"] .simme-na6-theme__option--dark,
body .simme-na[data-theme="light"] .simme-na6-theme__option--light { color:#cfeeff !important; }
body .simme-na .simme-na6-theme__thumb {
    position:absolute !important;
    z-index:1 !important;
    left:4px !important;
    top:4px !important;
    width:calc(50% - 4px) !important;
    height:calc(100% - 8px) !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,rgba(10,46,79,.72),rgba(10,31,59,.82)) !important;
    border:1px solid rgba(57,200,255,.22) !important;
    box-shadow:0 0 18px rgba(57,200,255,.07),inset 0 1px 0 rgba(255,255,255,.04) !important;
    transform:translateX(0) !important;
    transition:transform .26s cubic-bezier(.2,.75,.2,1) !important;
}
body .simme-na[data-theme="light"] .simme-na6-theme__thumb { transform:translateX(100%) !important; }
body .simme-na .simme-na6-theme__moon { position:relative !important; width:14px !important; height:14px !important; border-radius:50% !important; background:#50cbff !important; box-shadow:0 0 9px rgba(80,203,255,.38) !important; }
body .simme-na .simme-na6-theme__moon::after { position:absolute; content:""; width:13px; height:13px; top:-2px; left:5px; border-radius:50%; background:#09192d; }
body .simme-na .simme-na6-theme__sun { position:relative !important; width:13px !important; height:13px !important; border:2px solid #7285a0 !important; border-radius:50% !important; }
body .simme-na .simme-na6-theme__sun::before { position:absolute; inset:-6px; content:""; background:repeating-conic-gradient(from 0deg,#7285a0 0 3deg,transparent 3deg 45deg); mask:radial-gradient(circle,transparent 0 6px,#000 6px 8px,transparent 8px); -webkit-mask:radial-gradient(circle,transparent 0 6px,#000 6px 8px,transparent 8px); }

/* Light mode keeps the exact composition while reducing bloom and restoring
   comfortable dark-on-light reading around the network visual. */
body .simme-na[data-theme="light"] .simme-na6-hero {
    --sna6-text:#121a2b;
    --sna6-soft:#5f6d87;
    background:
        radial-gradient(circle at 60% 48%,rgba(136,92,255,.08),transparent 31%),
        radial-gradient(circle at 90% 30%,rgba(42,177,255,.08),transparent 34%),
        linear-gradient(135deg,#f8faff,#f2f6fd 55%,#f7fbff 100%) !important;
    border-color:rgba(103,142,194,.28) !important;
    box-shadow:0 18px 48px rgba(52,73,105,.10) !important;
}
body .simme-na[data-theme="light"] .simme-na6-hero h1 { background:linear-gradient(96deg,#151c2b 0%,#202b42 44%,#7e54bf 78%,#4075ba 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body .simme-na[data-theme="light"] .simme-na6-lead,
body .simme-na[data-theme="light"] .simme-na6-fact { color:#586782 !important; }
body .simme-na[data-theme="light"] .simme-na6-network-card { background:linear-gradient(135deg,rgba(243,247,255,.96),rgba(235,244,253,.95)) padding-box,linear-gradient(110deg,rgba(169,94,244,.70),rgba(116,111,238,.54) 35%,rgba(56,188,235,.78) 100%) border-box !important; box-shadow:0 16px 44px rgba(64,78,118,.13),0 0 28px rgba(127,85,232,.08) !important; }
body .simme-na[data-theme="light"] .simme-na6-metric { background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(225,235,252,.34)) !important; border-color:rgba(114,117,204,.28) !important; }
body .simme-na[data-theme="light"] .simme-na6-metric strong,
body .simme-na[data-theme="light"] .simme-na6-metric span { color:#1b2337 !important; text-shadow:none !important; }
body .simme-na[data-theme="light"] .simme-na6-metric small { color:#65718c !important; }
body .simme-na[data-theme="light"] .simme-na6-theme,
body .simme-na[data-theme="light"] .simme-na6-theme:hover { background:rgba(239,245,253,.90) !important; border-color:rgba(92,121,166,.24) !important; }
body .simme-na[data-theme="light"] .simme-na6-theme__option { color:#65738d !important; }
body .simme-na[data-theme="light"] .simme-na6-theme__option--light { color:#1f2b41 !important; }

@keyframes simme-na6-bloom {
    0% { transform:translate3d(-4%,2%,0) scale(.94); opacity:.62; }
    50% { transform:translate3d(10%,-4%,0) scale(1.12); opacity:.92; }
    100% { transform:translate3d(2%,6%,0) scale(1.02); opacity:.72; }
}
@keyframes simme-na6-core-breathe {
    0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.58; }
    50% { transform:translate(-50%,-50%) scale(1.08); opacity:.92; }
}

/* Tablet: preserve the two-column editorial reference until the layout would
   become crowded, then stack copy above the network card. */
@media (max-width: 1180px) {
    body .simme-na .simme-na6-hero { grid-template-columns:minmax(260px,.75fr) minmax(470px,1.25fr) !important; gap:34px !important; padding:82px 34px 44px !important; }
    body .simme-na .simme-na6-network-card { min-height:300px !important; }
    body .simme-na .simme-na6-metric strong { font-size:clamp(60px,7vw,86px) !important; }
}

@media (max-width: 940px) {
    body .simme-na .simme-na6-hero {
        grid-template-columns:1fr !important;
        gap:32px !important;
        padding:80px 28px 34px !important;
    }
    body .simme-na .simme-na6-hero__copy { max-width:760px !important; }
    body .simme-na .simme-na6-network-card { width:min(100%,760px) !important; margin-inline:auto !important; }
}

/*
 * When the hero becomes a single-column tablet layout, keep the large 32-node
 * visual immediately after the intro copy and move the three supporting facts
 * underneath it. This preserves the intended visual hierarchy instead of
 * leaving the facts above the 32-node panel.
 */
@media (min-width: 681px) and (max-width: 940px) {
    body .simme-na .simme-na6-hero__copy > .simme-na6-facts {
        display: none !important;
    }

    body .simme-na .simme-na6-hero__visual .simme-na6-facts--stacked {
        display: grid !important;
        width: min(100%, 760px) !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(14px, 2.1vw, 24px) !important;
        margin: 2px auto 0 !important;
        padding: 0 clamp(4px, .7vw, 10px) !important;
    }

    body .simme-na .simme-na6-hero__visual .simme-na6-facts--stacked .simme-na6-fact {
        justify-content: center !important;
        text-align: left !important;
    }

    body .simme-na .simme-na6-theme {
        margin-top: 4px !important;
    }
}

/* Phone composition mirrors the supplied portrait reference: SymSoul mark,
   Node Atlas title, compact supporting line, network card, then toggle. */
@media (max-width: 680px) {
    body .simme-na .simme-na6-hero {
        display:block !important;
        padding:74px 16px 28px !important;
        border-radius:24px !important;
        text-align:center !important;
    }
    body .simme-na .simme-na6-home-link,
    body .simme-na .simme-na6-home-link:link,
    body .simme-na .simme-na6-home-link:visited {
        top:14px !important;
        left:14px !important;
        min-height:36px !important;
        padding:4px 12px 4px 6px !important;
        gap:8px !important;
        font-size:11px !important;
    }

    body .simme-na .simme-na6-home-link__icon {
        width:25px !important;
        height:25px !important;
        flex-basis:25px !important;
    }
    body .simme-na .simme-na6-mobile-brand {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:4px !important;
        margin:0 0 14px !important;
    }
    body .simme-na .simme-na6-brand-mark { display:block !important; width:48px !important; height:48px !important; filter:drop-shadow(0 0 12px rgba(139,86,255,.28)); }
    body .simme-na .simme-na6-brand-mark svg { display:block !important; width:100% !important; height:100% !important; }
    body .simme-na .simme-na6-mobile-brand__word { display:block !important; background:linear-gradient(90deg,#bc5aff,#43bbff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:22px !important; font-weight:600 !important; line-height:1 !important; letter-spacing:-.03em !important; }
    body .simme-na .simme-na6-eyebrow,
    body .simme-na .simme-na6-title-rule,
    body .simme-na .simme-na6-lead,
    body .simme-na .simme-na6-facts { display:none !important; }
    body .simme-na .simme-na6-hero h1 { width:100% !important; font-size:clamp(46px,14vw,64px) !important; line-height:.98 !important; }
    body .simme-na .simme-na6-title-prefix { display:none !important; }
    body .simme-na .simme-na6-mobile-lead { display:block !important; margin:16px auto 28px !important; color:#aeb8cd !important; font-size:clamp(16px,4.7vw,20px) !important; line-height:1.42 !important; }
    body .simme-na[data-theme="light"] .simme-na6-mobile-lead { color:#63718b !important; }
    body .simme-na .simme-na6-network-card {
        grid-template-columns:minmax(112px,39%) minmax(0,1fr) !important;
        width:100% !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:1.52 / 1 !important;
        padding:14px !important;
        border-radius:22px !important;
    }
    body .simme-na .simme-na6-metric { padding:16px 14px !important; border-radius:18px !important; }
    body .simme-na .simme-na6-metric strong { font-size:clamp(54px,18vw,78px) !important; }
    body .simme-na .simme-na6-metric span { margin-top:12px !important; font-size:clamp(17px,5.2vw,23px) !important; }
    body .simme-na .simme-na6-metric i { margin:12px 0 !important; }
    body .simme-na .simme-na6-metric small { font-size:clamp(11px,3.4vw,14px) !important; }
    body .simme-na .simme-na6-orbit { min-height:0 !important; height:100% !important; }
    body .simme-na .simme-na6-orbit__svg { width:112% !important; max-width:none !important; left:50% !important; }
    body .simme-na .simme-na6-theme { width:min(270px,82%) !important; margin:28px auto 0 !important; }
}

@media (max-width: 420px) {
    body .simme-na .simme-na6-hero { padding-left:12px !important; padding-right:12px !important; }
    body .simme-na .simme-na6-network-card { grid-template-columns:minmax(104px,42%) minmax(0,1fr) !important; aspect-ratio:1.38 / 1 !important; padding:11px !important; }
    body .simme-na .simme-na6-metric { padding:14px 12px !important; }
    body .simme-na .simme-na6-metric strong { font-size:clamp(50px,19vw,70px) !important; }
    body .simme-na .simme-na6-orbit__svg { width:116% !important; left:50% !important; }
}

@media (prefers-reduced-motion: reduce) {
    body .simme-na .simme-na6-network-card__bloom,
    body .simme-na .simme-na6-orbit::before { animation-duration:18s !important; }
}


/* ========================================================================
   V6.1 — OFFICIAL SYMSOUL HERO ICONS
   Asset-only refinement. The V6.0 hero structure, spacing, network card,
   animated orbit, theme control and responsive layout are intentionally
   unchanged. These rules only let the supplied official WEBP artwork replace
   the temporary inline SVG drawings.
   ======================================================================== */

/* Official feature artwork: use its own baked-in colour and glow exactly. */
body .simme-na .simme-na6-fact__icon,
body .simme-na .simme-na6-fact__icon--groups,
body .simme-na .simme-na6-fact__icon--unified {
    filter: none !important;
}
body .simme-na .simme-na6-fact__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

/* Legacy image-brand support from V6.1. The final hero-brand sizing and
   alignment are superseded by the V6.12 combined Euclid1 + SymSoul rules
   below; these base image rules remain harmless and reusable. */
body .simme-na .simme-na6-brand-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

@media (max-width: 680px) {
    body .simme-na .simme-na6-brand-mark {
        width: 82px !important;
        height: 72px !important;
        filter: none !important;
    }
    body .simme-na .simme-na6-mobile-brand__word {
        display: none !important;
    }
}

/* ========================================================================
   V6.24 — EUCLID1 HERO LOGO SCALE REFINEMENT
   2026-08-16

   Scope: Node Atlas hero branding only.
   - Scales the approved Euclid1 hero logo down so it feels less dominant
     inside the hero panel.
   - Reduces the desktop and mobile logo widths while preserving the same
     image source and flexible aspect-ratio behaviour.
   - Slightly tightens the space below the logo so the whole hero feels more
     balanced.
   ======================================================================== */

body .simme-na .simme-na6-mobile-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
}

body .simme-na .simme-na6-brand-mark {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(112px, 9.4vw, 142px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    filter: none !important;
}

body .simme-na .simme-na6-brand-mark img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
}

/* The hero artwork already carries the intended wordmark treatment. */
body .simme-na .simme-na6-mobile-brand__word {
    display: none !important;
}

body .simme-na .simme-na6-eyebrow {
    display: none !important;
}

@media (max-width: 680px) {
    body .simme-na .simme-na6-mobile-brand {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 0 10px !important;
    }

    body .simme-na .simme-na6-brand-mark {
        width: clamp(104px, 30vw, 126px) !important;
        height: auto !important;
        margin-inline: auto !important;
    }

    body .simme-na .simme-na6-brand-mark img {
        width: 100% !important;
        height: auto !important;
        object-position: center !important;
    }
}


/* ========================================================================
   V6.3 — INDIVIDUAL NODE PAGE FRAME + CORRECT SITE HEADER LOGO
   2026-08-14

   Scope is intentionally narrow:
   - Individual Node pages now sit on the same vivid blue patterned Simme
     surround used around the main Node Atlas composition.
   - A black outer presentation frame and blue edge recreate the Atlas page's
     layered framing while leaving the existing Node reader structure intact.
   - The sticky Node header uses the corrected official SymSoul site logo and
     matches the visual scale of the normal site header.
   - Node content, reader structure, section icons, theme control and Atlas
     hero/orbit are untouched.
   ======================================================================== */

/* --- 1. Bring the Simme blue surround onto every dedicated Node page. --- */
body.simme-node-atlas-detail-page {
    --simme-node-surround-blue: #02b8f0;
    --simme-node-surround-ink: #0059c7;
    min-height: 100vh !important;
    background-color: var(--simme-node-surround-blue) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='86' viewBox='0 0 150 86'%3E%3Cg fill='%230059c7' fill-opacity='.24'%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Ccircle cx='56' cy='16' r='4'/%3E%3Ccircle cx='96' cy='16' r='4'/%3E%3Ccircle cx='136' cy='16' r='4'/%3E%3Crect x='22' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='38' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='72' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='78' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='112' y='4' width='5' height='18' rx='2.5'/%3E%3Crect x='128' y='4' width='5' height='18' rx='2.5'/%3E%3Ccircle cx='9' cy='50' r='4'/%3E%3Ccircle cx='30' cy='50' r='4'/%3E%3Ccircle cx='51' cy='50' r='4'/%3E%3Ccircle cx='72' cy='50' r='4'/%3E%3Ccircle cx='93' cy='50' r='4'/%3E%3Ccircle cx='114' cy='50' r='4'/%3E%3Ccircle cx='135' cy='50' r='4'/%3E%3Crect x='15' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='35' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='75' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='95' y='64' width='5' height='14' rx='2.5'/%3E%3Crect x='135' y='64' width='5' height='14' rx='2.5'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #06b7ef 0%, #02b8f0 58%, #00b4ee 100%) !important;
    background-repeat: repeat, no-repeat !important;
    background-size: 150px 86px, 100% 100% !important;
    background-attachment: fixed, fixed !important;
}

/* Themify's legacy Node templates can paint their own black page canvas.
   Let the new Simme surround remain visible outside the Node presentation. */
body.simme-node-atlas-detail-page #pagewrap,
body.simme-node-atlas-detail-page #body,
body.simme-node-atlas-detail-page #layout,
body.simme-node-atlas-detail-page #content,
body.simme-node-atlas-detail-page .pagewidth,
body.simme-node-atlas-detail-page .post,
body.simme-node-atlas-detail-page .post-content,
body.simme-node-atlas-detail-page .entry-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* The shortcode itself becomes the same black presentation island seen on
   the Atlas page, with the blue surround always visible beyond its edge. */
body.simme-node-atlas-detail-page .simme-na--node-page {
    box-sizing: border-box !important;
    width: calc(100% - 72px) !important;
    max-width: 1960px !important;
    margin: clamp(32px, 3vw, 58px) auto clamp(34px, 4vw, 72px) !important;
    padding: clamp(28px, 4vw, 72px) !important;
    overflow: visible !important;
    background: #000000 !important;
    border: 7px solid var(--simme-node-surround-ink) !important;
    border-radius: clamp(32px, 3vw, 48px) !important;
    box-shadow:
        0 18px 54px rgba(0, 33, 73, .22),
        0 0 0 1px rgba(0, 106, 210, .34) !important;
}

/* Preserve the current Node reader; only strengthen the same fine cyan edge
   used throughout the Atlas rather than changing its internal structure. */
body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(72, 199, 249, .62) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 6% 0%, rgba(36, 191, 255, .075), transparent 28%),
        linear-gradient(180deg, #081523 0%, #06111d 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(143, 217, 255, .09),
        inset 0 0 36px rgba(36, 191, 255, .024),
        0 0 30px rgba(36, 191, 255, .045) !important;
}

/* Keep light mode confined to the reader; the recognisable Simme blue outer
   surround remains constant so moving between Atlas and Node pages feels like
   one site rather than two different templates. */
body.simme-node-atlas-detail-page .simme-na--node-page[data-theme="light"] > .simme-na__shell {
    background: var(--sna-bg) !important;
}

/* --- 2. Sticky site bar: corrected official logo and normal site scale. --- */
body.simme-node-atlas-detail-page .simme-node-topbar54 {
    width: 100vw !important;
    min-height: 150px !important;
    margin-left: calc(50% - 50vw) !important;
    background: #020405 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
    box-sizing: border-box !important;
    width: min(100%, 1770px) !important;
    min-height: 150px !important;
    margin: 0 auto !important;
    padding: 10px clamp(30px, 7.8vw, 174px) !important;
    display: flex !important;
    align-items: center !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
    display: block !important;
    width: 300px !important;
    height: 130px !important;
    max-width: 300px !important;
    max-height: 130px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    filter: none !important;
}

/* Position the burger against the same inner page line as the normal header. */
body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
    right: clamp(30px, 7.8vw, 174px) !important;
}

/* Keep the menu visually attached to the same right-hand header line. */
body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
    right: clamp(20px, 7.8vw, 174px) !important;
}

/* Responsive framing keeps a clear ribbon of the blue Simme surround visible
   on every screen size without squeezing the Node reader. */
@media (max-width: 1100px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 44px) !important;
        padding: clamp(22px, 3vw, 42px) !important;
        border-width: 6px !important;
        border-radius: 38px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        min-height: 118px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        padding-inline: clamp(24px, 5vw, 72px) !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 240px !important;
        height: 104px !important;
        max-width: 240px !important;
        max-height: 104px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active,
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
        right: clamp(22px, 5vw, 72px) !important;
    }
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page {
        background-attachment: scroll, scroll !important;
        background-size: 120px 69px, 100% 100% !important;
    }
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 20px) !important;
        margin: 18px auto 28px !important;
        padding: 14px !important;
        border-width: 4px !important;
        border-radius: 27px !important;
    }
    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 20px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        min-height: 86px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        width: 100% !important;
        padding: 5px 18px !important;
        padding-right: 70px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 176px !important;
        height: auto !important;
        max-width: 176px !important;
        max-height: 76px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:hover,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:focus,
    body.simme-node-atlas-detail-page .simme-node-topbar54__burger:active {
        right: 16px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu {
        right: 10px !important;
        width: calc(100vw - 20px) !important;
    }
}

@media (max-width: 420px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        width: calc(100% - 14px) !important;
        margin-top: 12px !important;
        padding: 10px !important;
        border-width: 3px !important;
        border-radius: 22px !important;
    }
    body.simme-node-atlas-detail-page .simme-na--node-page > .simme-na__shell {
        border-radius: 17px !important;
    }
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 158px !important;
        max-width: 158px !important;
    }
}


/* ========================================================================
   V6.4 — SCALABLE NODE ATLAS RETURN ORBIT
   One real SVG component replaces the old CSS pseudo-element miniature.
   - proportional at every size
   - motion lives inside the SVG (SMIL), not in page CSS or JS
   - identical component can be reused in any return-to-Atlas control
   ======================================================================== */

/* Retire every historic pseudo-element drawing from V4.7 and earlier. */
body .simme-na .simme-na__canonical-icon--atlas::before,
body .simme-na .simme-na__canonical-icon--atlas::after,
body .simme-na .simme-na__canonical-icon--atlas > span::before,
body .simme-na .simme-na__canonical-icon--atlas > span::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Generic scalable icon shell. Change --sna-atlas-orbit-size anywhere. */
.simme-atlas-return-icon {
    --sna-atlas-orbit-size: 40px;
    position: relative;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 var(--sna-atlas-orbit-size);
    width: var(--sna-atlas-orbit-size) !important;
    height: var(--sna-atlas-orbit-size) !important;
    min-width: var(--sna-atlas-orbit-size) !important;
    min-height: var(--sna-atlas-orbit-size) !important;
    overflow: visible !important;
    line-height: 0 !important;
    isolation: isolate;
}

.simme-atlas-return-icon--compact {
    --sna-atlas-orbit-size: 28px;
}

.simme-atlas-return-orbit-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: translateZ(0);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 5px rgba(36,191,255,.16));
    transition: filter .2s ease, transform .2s ease;
}

/* Existing square canonical icon remains the premium frame; the SVG now owns
   all of the network geometry inside it. */
body .simme-na .simme-na__canonical-icon--atlas {
    --sna-atlas-orbit-size: 40px;
    padding: 3px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
}

/* Text-return controls use the exact same SVG at a smaller scale. */
body .simme-na .simme-atlas-return-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

body .simme-na .simme-atlas-return-action > span:last-child {
    min-width: 0;
}

body .simme-na .simme-atlas-return-action:hover .simme-atlas-return-orbit-svg,
body .simme-na .simme-atlas-return-action:focus-visible .simme-atlas-return-orbit-svg,
body .simme-na .simme-na__canonical-link--atlas:hover .simme-atlas-return-orbit-svg,
body .simme-na .simme-na__canonical-link--atlas:focus-visible .simme-atlas-return-orbit-svg {
    filter:
        drop-shadow(0 0 5px rgba(36,191,255,.34))
        drop-shadow(0 0 8px rgba(180,81,255,.18));
    transform: scale(1.045);
}

/* Light mode changes only the frame; the official Node colours remain intact. */
.simme-na[data-theme="light"] .simme-na__canonical-icon--atlas {
    background:
        radial-gradient(circle at 50% 48%, rgba(36,191,255,.10), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(237,247,255,.60)) !important;
}

@media (max-width: 700px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 25px;
    }
    body .simme-na .simme-na__canonical-icon--atlas {
        --sna-atlas-orbit-size: 40px;
    }
}

@media (max-width: 420px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 23px;
    }
}

/* ========================================================================
   V6.5 — INDIVIDUAL NODE PAGE HEADER LOGO SIZE
   Exact requested width: 150px at every viewport size.
   No other Node Atlas structure or styling is changed.
   ======================================================================== */
body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
    width: 150px !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: none !important;
}

@media (max-width: 1100px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: none !important;
    }
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: none !important;
    }
}

@media (max-width: 420px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: none !important;
    }
}

/* ========================================================================
   V6.6 — SMALL-SCREEN CONTROL + RUNTIME + MINI-ORBIT POLISH
   2026-08-14
   Scope is deliberately narrow:
   - centre the Node-page Dark/Light switch at compact widths
   - restyle Standard/Lite runtime footprint rows in the cleaner app style
   - enlarge the reusable miniature Atlas orbit
   - remove only the inner icon frame from the large “Explore the complete
     Node Atlas” action; the action itself keeps its existing outer border
   ======================================================================== */

/* 1. Compact Node-page theme switch — centred, never pinned left/right. */
@media (max-width: 860px) {
    body .simme-na--node-page .simme-na__theme-toggle {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        justify-self: center !important;
        align-self: center !important;
    }
}

@media (max-width: 640px) {
    body .simme-na--node-page .simme-na__nodepage-bar {
        justify-items: center !important;
    }

    body .simme-na--node-page .simme-na__theme-toggle {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-self: center !important;
    }
}

/* 2. Runtime footprint — compact app-style token chips. */
body .simme-na .simme-na__runtime {
    gap: 10px !important;
}

body .simme-na .simme-na__runtime > span {
    margin-bottom: 2px !important;
}

body .simme-na .simme-na__runtime > div {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 48px !important;
    padding: 10px 13px !important;
    overflow: hidden !important;
    border: 1px dashed rgba(225, 240, 255, .62) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(48, 177, 255, .075), transparent 42%),
        linear-gradient(180deg, rgba(8, 20, 38, .96), rgba(5, 14, 28, .96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 6px 16px rgba(0,0,0,.10) !important;
}

body .simme-na .simme-na__runtime > div::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 62%, rgba(91, 202, 255, .035) 76%, transparent 92%);
}

body .simme-na .simme-na__runtime b {
    position: relative !important;
    z-index: 1 !important;
    color: #c5d3e8 !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    letter-spacing: .005em !important;
}

body .simme-na .simme-na__runtime strong {
    position: relative !important;
    z-index: 1 !important;
    color: #f1f7ff !important;
    font-size: 17px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}

body .simme-na .simme-na__runtime small {
    position: relative !important;
    z-index: 1 !important;
    color: #859bb9 !important;
    font-size: 9px !important;
    font-weight: 560 !important;
}

body .simme-na[data-theme="light"] .simme-na__runtime > div {
    border-color: rgba(78, 108, 151, .42) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(69, 169, 226, .055), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,254,.96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 7px 18px rgba(57, 79, 112, .065) !important;
}

body .simme-na[data-theme="light"] .simme-na__runtime b { color: #43536c !important; }
body .simme-na[data-theme="light"] .simme-na__runtime strong { color: #17243a !important; }
body .simme-na[data-theme="light"] .simme-na__runtime small { color: #71819b !important; }

@media (max-width: 640px) {
    body .simme-na .simme-na__runtime > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        min-height: 46px !important;
        padding: 9px 12px !important;
    }

    body .simme-na .simme-na__runtime > div b {
        flex: none !important;
    }
}

/* 3. Reusable mini Atlas orbit — larger without changing SVG geometry. */
.simme-atlas-return-icon--compact {
    --sna-atlas-orbit-size: 36px !important;
}

body .simme-na .simme-na__canonical-icon--atlas {
    --sna-atlas-orbit-size: 54px !important;
    width: var(--sna-atlas-orbit-size) !important;
    height: var(--sna-atlas-orbit-size) !important;
    min-width: var(--sna-atlas-orbit-size) !important;
    min-height: var(--sna-atlas-orbit-size) !important;
}

/* The large Explore-the-complete-Atlas CTA already has its own outer button
   frame, so the miniature orbit floats cleanly without a second square frame. */
body .simme-na .simme-na__canonical-link--atlas .simme-na__canonical-icon--atlas,
body .simme-na[data-theme="light"] .simme-na__canonical-link--atlas .simme-na__canonical-icon--atlas {
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .simme-na .simme-na__canonical-link--atlas .simme-atlas-return-orbit-svg {
    filter:
        drop-shadow(0 0 5px rgba(36,191,255,.25))
        drop-shadow(0 0 7px rgba(180,81,255,.11));
}

@media (max-width: 700px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 34px !important;
    }

    body .simme-na .simme-na__canonical-icon--atlas {
        --sna-atlas-orbit-size: 50px !important;
    }
}

@media (max-width: 420px) {
    .simme-atlas-return-icon--compact {
        --sna-atlas-orbit-size: 32px !important;
    }

    body .simme-na .simme-na__canonical-icon--atlas {
        --sna-atlas-orbit-size: 48px !important;
    }
}

/* ========================================================================
   V6.7 — INDIVIDUAL NODE PAGE OUTER FRAME + DESKTOP HEADER HEIGHT
   2026-08-14
   Scope is deliberately narrow:
   - keep the blue outer presentation border at exactly 5px on every viewport
   - cap the sticky site header at 100px on larger/tablet screens
   - preserve the existing compact-phone header sizing unchanged
   ======================================================================== */

/* 1. One consistent 5px blue presentation border on every device. */
body.simme-node-atlas-detail-page .simme-na--node-page {
    border-width: 5px !important;
}

@media (max-width: 1100px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        border-width: 5px !important;
    }
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        border-width: 5px !important;
    }
}

@media (max-width: 420px) {
    body.simme-node-atlas-detail-page .simme-na--node-page {
        border-width: 5px !important;
    }
}

/* 2. Large/tablet sticky header: maximum visual height 100px.
   The <=700px phone layout remains exactly as V6.6 (86px). */
@media (min-width: 701px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54,
    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__inner {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-topbar54__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: 82px !important;
    }
}



/* ========================================================================
   SYMSOUL NODE ATLAS V6.8 — MOBILE PREVIOUS / ATLAS / NEXT NAVIGATION DOCK
   Scope: mobile bottom navigation only. Desktop/tablet structure untouched.
   ======================================================================== */

@media (max-width: 640px) {
    /* One compact navigation dock replaces the three vertically stacked cards. */
    .simme-na .simme-na__node-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 24px 0 0 !important;
        padding: 7px !important;
        border: 1px solid rgba(72, 196, 244, .38) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(81, 188, 255, .08), transparent 54%),
            linear-gradient(180deg, rgba(15, 35, 54, .78), rgba(6, 18, 33, .92)) !important;
        box-shadow:
            inset 0 1px 0 rgba(190, 235, 255, .06),
            0 14px 34px rgba(0, 0, 0, .16) !important;
        overflow: hidden !important;
    }

    /* AJAX Atlas uses wrappers for the previous/next slots. */
    .simme-na .simme-na__node-nav > [data-simme-prev],
    .simme-na .simme-na__node-nav > [data-simme-next] {
        display: block !important;
        min-width: 0 !important;
        height: 100% !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour {
        display: grid !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 66px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 15px !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transition: background .2s ease, box-shadow .2s ease, transform .2s ease !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--prev {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        text-align: left !important;
        justify-content: stretch !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--next {
        grid-template-columns: minmax(0, 1fr) 40px !important;
        text-align: right !important;
        justify-content: stretch !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour:hover,
    .simme-na .simme-na__node-nav .simme-na__neighbour:focus-visible {
        background: rgba(34, 160, 224, .08) !important;
        box-shadow: inset 0 0 22px rgba(56, 191, 255, .06) !important;
        transform: translateY(-1px) !important;
        outline: 0 !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-media {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 10px !important;
        box-shadow: 0 0 14px rgba(58, 193, 255, .06) !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy {
        min-width: 0 !important;
        display: grid !important;
        align-content: center !important;
        gap: 2px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy small {
        color: #86a5c2 !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: .09em !important;
        white-space: nowrap !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy b {
        display: -webkit-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #eef7ff !important;
        font-size: 9.5px !important;
        line-height: 1.28 !important;
        font-weight: 720 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    /* Centre Atlas action becomes the visual hub of the dock. The SVG itself
       has no surrounding icon box; only the dock supplies structure. */
    body .simme-na .simme-na__node-nav .simme-na__atlas-button,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:focus,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:active {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: grid !important;
        place-items: center !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 68px !important;
        min-width: 68px !important;
        min-height: 66px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 15px !important;
        color: #eaf7ff !important;
        background: transparent !important;
        box-shadow:
            inset 1px 0 0 rgba(111, 184, 224, .14),
            inset -1px 0 0 rgba(111, 184, 224, .14) !important;
        overflow: visible !important;
    }

    body .simme-na .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:focus-visible {
        background: radial-gradient(circle, rgba(76, 190, 255, .12), transparent 66%) !important;
        box-shadow:
            inset 1px 0 0 rgba(111, 184, 224, .18),
            inset -1px 0 0 rgba(111, 184, 224, .18),
            0 0 24px rgba(72, 180, 255, .08) !important;
        outline: 0 !important;
    }

    .simme-na .simme-na__node-nav .simme-na__atlas-button > span:last-child {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .simme-na .simme-na__node-nav .simme-atlas-return-icon,
    .simme-na .simme-na__node-nav .simme-atlas-return-icon--compact {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex: 0 0 48px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .simme-na .simme-na__node-nav .simme-atlas-return-icon svg {
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important;
        filter: drop-shadow(0 0 7px rgba(78, 197, 255, .18)) !important;
    }

    /* Keep the three controls on a single row in both the server-rendered
       individual Node page and the AJAX detail view. */
    .simme-na .simme-na__node-nav > :first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .simme-na .simme-na__node-nav > :last-child {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }
}

@media (max-width: 390px) {
    .simme-na .simme-na__node-nav {
        grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) !important;
        padding: 6px !important;
        border-radius: 20px !important;
    }

    body .simme-na .simme-na__node-nav .simme-na__atlas-button,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:focus,
    body .simme-na .simme-na__node-nav .simme-na__atlas-button:active {
        width: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }

    .simme-na .simme-na__node-nav .simme-atlas-return-icon,
    .simme-na .simme-na__node-nav .simme-atlas-return-icon--compact {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex-basis: 44px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour {
        min-height: 60px !important;
        padding: 5px 6px !important;
        gap: 5px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--prev {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour--next {
        grid-template-columns: minmax(0, 1fr) 34px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-media {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-radius: 9px !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy small {
        font-size: 7.5px !important;
        letter-spacing: .06em !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy b {
        font-size: 8.5px !important;
        -webkit-line-clamp: 2 !important;
    }
}

@media (max-width: 340px) {
    .simme-na .simme-na__node-nav .simme-na__neighbour-copy b {
        display: none !important;
    }

    .simme-na .simme-na__node-nav .simme-na__neighbour-copy small {
        white-space: normal !important;
        line-height: 1.15 !important;
    }
}

/* V6.8 light-theme equivalent for the compact mobile navigation dock. */
@media (max-width: 640px) {
    .simme-na[data-theme="light"] .simme-na__node-nav {
        border-color: rgba(72, 158, 210, .30) !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(69, 170, 226, .08), transparent 54%),
            linear-gradient(180deg, rgba(248, 252, 255, .96), rgba(236, 245, 252, .98)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .78),
            0 12px 30px rgba(41, 88, 122, .08) !important;
    }

    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour-copy small {
        color: #68839b !important;
    }

    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour-copy b {
        color: #15263a !important;
    }

    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour:hover,
    .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__neighbour:focus-visible {
        background: rgba(46, 152, 213, .08) !important;
        box-shadow: inset 0 0 20px rgba(54, 166, 226, .05) !important;
    }

    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button,
    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button:hover,
    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button:focus,
    body .simme-na[data-theme="light"] .simme-na__node-nav .simme-na__atlas-button:active {
        box-shadow:
            inset 1px 0 0 rgba(64, 133, 177, .14),
            inset -1px 0 0 rgba(64, 133, 177, .14) !important;
    }
}

/* ========================================================================
   V6.9 — PREMIUM INDIVIDUAL-NODE DROP-DOWN NAVIGATION
   Reference-led redesign: dark floating panel, Simme mascot at top-left,
   separate Navigation / Integrations cards, restrained cyan edge-lighting.
   Existing WordPress main-simmes-navigation items remain the source of truth.
   ======================================================================== */

body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: clamp(14px, 3vw, 42px) !important;
    width: min(430px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 126px) !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(155, 177, 198, .34) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(44, 174, 236, .10), transparent 31%),
        radial-gradient(circle at 92% 82%, rgba(25, 128, 211, .07), transparent 40%),
        linear-gradient(180deg, rgba(5, 15, 27, .985), rgba(4, 12, 23, .992)) !important;
    box-shadow:
        inset 0 1px 0 rgba(221, 244, 255, .055),
        inset 0 0 34px rgba(32, 163, 229, .025),
        0 20px 58px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(0, 0, 0, .28) !important;
    isolation: isolate !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(72, 184, 240, .28) transparent !important;
}

body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69::-webkit-scrollbar {
    width: 6px !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69::-webkit-scrollbar-track {
    background: transparent !important;
}
body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(80, 190, 243, .24) !important;
}

.simme-node-menu69[hidden] {
    display: none !important;
}

/* Star field + very quiet flowing contour light. */
.simme-node-menu69__chrome,
.simme-node-menu69__chrome::before,
.simme-node-menu69__chrome::after {
    position: absolute !important;
    content: "" !important;
    pointer-events: none !important;
}

.simme-node-menu69__chrome {
    z-index: -2 !important;
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: .62 !important;
    background-image:
        radial-gradient(circle, rgba(91, 190, 239, .30) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(174, 217, 244, .16) 0 .8px, transparent 1.4px) !important;
    background-position: 0 0, 13px 15px !important;
    background-size: 30px 30px, 44px 44px !important;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
}

.simme-node-menu69__chrome::before {
    z-index: -1 !important;
    right: -105px !important;
    bottom: -126px !important;
    width: 330px !important;
    height: 420px !important;
    opacity: .34 !important;
    border-radius: 50% !important;
    background:
        repeating-radial-gradient(
            ellipse at 65% 78%,
            transparent 0 18px,
            rgba(51, 166, 228, .22) 19px 20px,
            transparent 21px 31px
        ) !important;
    transform: rotate(-24deg) !important;
    filter: drop-shadow(0 0 9px rgba(38, 153, 215, .08)) !important;
}

.simme-node-menu69__chrome::after {
    z-index: -1 !important;
    left: 20px !important;
    top: 78px !important;
    width: 180px !important;
    height: 120px !important;
    border-radius: 50% !important;
    opacity: .18 !important;
    background: radial-gradient(ellipse, rgba(53, 195, 255, .14), transparent 66%) !important;
    filter: blur(18px) !important;
}

.simme-node-menu69__header {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    padding: 2px 4px 10px !important;
}

/* Reuse the official full header logo but crop the image to its mascot only. */
.simme-node-menu69__mascot {
    position: relative !important;
    display: block !important;
    width: 62px !important;
    height: 64px !important;
    flex: 0 0 62px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    filter: drop-shadow(0 0 11px rgba(35, 190, 255, .12)) !important;
}

.simme-node-menu69__mascot img {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    display: block !important;
    width: auto !important;
    height: 64px !important;
    max-width: none !important;
    max-height: 64px !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: translateY(-50%) !important;
    filter: none !important;
}

body .simme-node-menu69__close,
body .simme-node-menu69__close:hover,
body .simme-node-menu69__close:focus,
body .simme-node-menu69__close:active {
    position: relative !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
}

.simme-node-menu69__close span {
    position: absolute !important;
    left: 9px !important;
    top: 20px !important;
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #eaf6ff !important;
    box-shadow: 0 0 8px rgba(123, 214, 255, .10) !important;
}
.simme-node-menu69__close span:first-child { transform: rotate(45deg) !important; }
.simme-node-menu69__close span:last-child { transform: rotate(-45deg) !important; }
body .simme-node-menu69__close:hover,
body .simme-node-menu69__close:focus-visible {
    background: rgba(74, 183, 238, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 195, 246, .15) !important;
}

.simme-node-menu69__body {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 16px !important;
}

.simme-node-menu69__group {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 17px 16px 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(75, 181, 235, .45) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 96% 0%, rgba(46, 184, 247, .085), transparent 32%),
        linear-gradient(180deg, rgba(14, 40, 61, .62), rgba(7, 27, 44, .74)) !important;
    box-shadow:
        inset 0 1px 0 rgba(214, 241, 255, .045),
        inset 0 0 24px rgba(39, 177, 241, .025),
        0 0 17px rgba(35, 168, 233, .055) !important;
}

.simme-node-menu69__group::after {
    position: absolute !important;
    right: -22px !important;
    bottom: -25px !important;
    width: 130px !important;
    height: 130px !important;
    content: "" !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(39, 173, 236, .08), transparent 68%) !important;
}

.simme-node-menu69__group-title {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 10px !important;
    padding: 0 2px !important;
    color: #55c9ff !important;
    -webkit-text-fill-color: #55c9ff !important;
    font: 760 11px/1.2 Arial, Helvetica, sans-serif !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px rgba(74, 195, 255, .18) !important;
}

.simme-node-menu69__links {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 2px !important;
}

.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:hover,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:focus,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:active,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:visited {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 5px 7px 3px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #e2edf6 !important;
    -webkit-text-fill-color: #e2edf6 !important;
    text-decoration: none !important;
    font: 600 15px/1.28 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.01em !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:hover,
.simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link:focus-visible {
    background: rgba(48, 166, 224, .075) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(72, 191, 246, .07), 0 0 18px rgba(47, 181, 241, .035) !important;
    transform: translateX(2px) !important;
    outline: 0 !important;
}

.simme-node-menu69__link--child {
    padding-left: 14px !important;
}

.simme-node-menu69__link-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    color: #36bfff !important;
    -webkit-text-fill-color: currentColor !important;
    filter: drop-shadow(0 0 7px rgba(55, 190, 255, .18)) !important;
}

.simme-node-menu69__link-icon > svg:not(.simme-atlas-orbit-svg) {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* The Atlas item gets the real reusable animated miniature. */
.simme-node-menu69__link--atlas .simme-node-menu69__link-icon {
    width: 30px !important;
    height: 30px !important;
}
.simme-node-menu69__link--atlas .simme-node-menu69__link-icon .simme-atlas-orbit-svg,
.simme-node-menu69__link--atlas .simme-node-menu69__link-icon svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    max-width: none !important;
    overflow: visible !important;
}

.simme-node-menu69__link-label {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.simme-node-menu69__chevron {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 24px !important;
    color: rgba(220, 236, 246, .78) !important;
}
.simme-node-menu69__chevron svg {
    display: block !important;
    width: 9px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* The close button inside the new panel owns the X while open. */
body.simme-node-atlas-detail-page .simme-node-topbar54.is-node-menu-open .simme-node-topbar54__burger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
        top: calc(100% + 8px) !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 104px) !important;
        padding: 13px !important;
        border-radius: 21px !important;
    }

    .simme-node-menu69__header {
        min-height: 56px !important;
        padding-bottom: 8px !important;
    }

    .simme-node-menu69__mascot {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px !important;
    }
    .simme-node-menu69__mascot img {
        height: 56px !important;
        max-height: 56px !important;
    }

    .simme-node-menu69__body {
        gap: 13px !important;
    }

    .simme-node-menu69__group {
        padding: 14px 13px 13px !important;
        border-radius: 18px !important;
    }

    .simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link {
        min-height: 42px !important;
        grid-template-columns: 28px minmax(0, 1fr) 16px !important;
        gap: 9px !important;
        padding-block: 6px !important;
        font-size: 14px !important;
    }

    .simme-node-menu69__link-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
}

@media (max-width: 390px) {
    body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
        padding: 11px !important;
        border-radius: 19px !important;
    }
    .simme-node-menu69__group {
        padding: 13px 11px 12px !important;
    }
    .simme-node-menu69__group-title {
        font-size: 10px !important;
    }
    .simme-node-topbar54__menu.simme-node-menu69 .simme-node-menu69__link {
        font-size: 13px !important;
    }
}

/* V6.9 QA correction: include padding/border inside the declared panel width
   and crop the official full wordmark tightly enough to show mascot only. */
body.simme-node-atlas-detail-page .simme-node-topbar54__menu.simme-node-menu69 {
    box-sizing: border-box !important;
}
.simme-node-menu69__mascot {
    width: 50px !important;
    flex-basis: 50px !important;
}
@media (max-width: 700px) {
    .simme-node-menu69__mascot {
        width: 46px !important;
        flex-basis: 46px !important;
    }
}

/* ========================================================================
   V6.11 — TINY SIMME PEEK MASCOT ON NODE-PAGE MENU
   Uses the supplied Tiny-Paste-Pallet.svg as a true transparent peeking
   character centred over the top Navigation card. V6.11 raises only the character itself so its hands sit just over the Navigation panel line without moving that panel. The V6.9 menu structure,
   groups, links, icons, star field and interactions remain unchanged.
   ======================================================================== */

/* The close control keeps the top-right header area; the character is taken
   out of normal flow and overlaps the centre of the first menu card. */
body.simme-node-atlas-detail-page .simme-node-menu69__header {
    justify-content: flex-end !important;
    min-height: 64px !important;
    padding: 2px 4px 12px !important;
    overflow: visible !important;
}

body.simme-node-atlas-detail-page .simme-node-menu69__mascot {
    position: absolute !important;
    z-index: 8 !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -7px !important;
    display: block !important;
    width: 112px !important;
    height: auto !important;
    max-width: none !important;
    flex: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 6px 8px rgba(0,0,0,.34))
        drop-shadow(0 0 11px rgba(22,180,255,.12)) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

body.simme-node-atlas-detail-page .simme-node-menu69__mascot img {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    filter: none !important;
}

/* Give the character's hands/head room without moving the card itself. */
body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation {
    overflow: visible !important;
    padding-top: 34px !important;
}

/* Keep the heading comfortably below the character while preserving the
   original V6.9 typography and alignment. */
body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation .simme-node-menu69__group-title {
    margin-top: 2px !important;
}

@media (max-width: 700px) {
    body.simme-node-atlas-detail-page .simme-node-menu69__header {
        min-height: 58px !important;
        padding-bottom: 10px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-menu69__mascot {
        bottom: -4px !important;
        width: 98px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation {
        padding-top: 31px !important;
    }
}

@media (max-width: 390px) {
    body.simme-node-atlas-detail-page .simme-node-menu69__mascot {
        bottom: -2px !important;
        width: 90px !important;
    }

    body.simme-node-atlas-detail-page .simme-node-menu69__group--navigation {
        padding-top: 29px !important;
    }
}


/* ========================================================================
   SIMME — GLOBAL STICKY HEADER + PREMIUM MENU
   Standalone reusable component
   Shortcode: [simme_sticky_header]
   Added to complete site stylesheet on 2026-08-14
   ======================================================================== */

/* ========================================================================
   SIMME — GLOBAL STICKY HEADER + PREMIUM MENU V1.0
   Shortcode: [simme_sticky_header]
   WordPress / Themify Ultra

   This is the COMPLETE stylesheet for the standalone reusable header.
   It does not depend on the SymSoul Node Atlas stylesheet.
   ======================================================================== */

.simme-global-header,
.simme-global-header *,
.simme-global-header *::before,
.simme-global-header *::after {
    box-sizing: border-box !important;
}

.simme-global-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100100 !important;
    display: block !important;
    width: 100vw !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #eaf4fb !important;
    background: rgba(2, 4, 5, .76) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    isolation: isolate !important;
    color-scheme: dark !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body.admin-bar .simme-global-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .simme-global-header {
        top: 46px !important;
    }
}

.simme-global-header__inner {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: min(100%, 1770px) !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    margin: 0 auto !important;
    padding: 6px clamp(30px, 7.8vw, 174px) !important;
    gap: 20px !important;
}

.simme-global-header__brand,
.simme-global-header__brand:hover,
.simme-global-header__brand:focus,
.simme-global-header__brand:active,
.simme-global-header__brand:visited {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: 0 !important;
}

.simme-global-header__logo {
    display: block !important;
    width: 150px !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

body .simme-global-header__burger,
body .simme-global-header__burger:hover,
body .simme-global-header__burger:focus,
body .simme-global-header__burger:active {
    position: relative !important;
    z-index: 7 !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.simme-global-header__burger span {
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255,255,255,.05) !important;
    transform-origin: center !important;
    transition: transform .18s ease, opacity .15s ease !important;
}

.simme-global-header__burger:focus-visible {
    outline: 2px solid rgba(85, 201, 255, .92) !important;
    outline-offset: 5px !important;
    border-radius: 8px !important;
}

.simme-global-header__menu {
    position: absolute !important;
    z-index: 8 !important;
    top: calc(100% + 12px) !important;
    right: clamp(14px, 7.8vw, 174px) !important;
    display: block !important;
    width: min(430px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 126px) !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(155, 177, 198, .34) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(44, 174, 236, .10), transparent 31%),
        radial-gradient(circle at 92% 82%, rgba(25, 128, 211, .07), transparent 40%),
        linear-gradient(180deg, rgba(5, 15, 27, .985), rgba(4, 12, 23, .992)) !important;
    box-shadow:
        inset 0 1px 0 rgba(221, 244, 255, .055),
        inset 0 0 34px rgba(32, 163, 229, .025),
        0 20px 58px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(0, 0, 0, .28) !important;
    isolation: isolate !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(72, 184, 240, .28) transparent !important;
}

.simme-global-header__menu[hidden] {
    display: none !important;
}

.simme-global-header__menu::-webkit-scrollbar {
    width: 6px !important;
}

.simme-global-header__menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.simme-global-header__menu::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(80, 190, 243, .24) !important;
}

.simme-global-header__menu-chrome,
.simme-global-header__menu-chrome::before,
.simme-global-header__menu-chrome::after {
    position: absolute !important;
    content: "" !important;
    pointer-events: none !important;
}

.simme-global-header__menu-chrome {
    z-index: -2 !important;
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: .62 !important;
    background-image:
        radial-gradient(circle, rgba(91, 190, 239, .30) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(174, 217, 244, .16) 0 .8px, transparent 1.4px) !important;
    background-position: 0 0, 13px 15px !important;
    background-size: 30px 30px, 44px 44px !important;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.25) 100%) !important;
}

.simme-global-header__menu-chrome::before {
    z-index: -1 !important;
    right: -105px !important;
    bottom: -126px !important;
    width: 330px !important;
    height: 420px !important;
    opacity: .34 !important;
    border-radius: 50% !important;
    background:
        repeating-radial-gradient(
            ellipse at 65% 78%,
            transparent 0 18px,
            rgba(51, 166, 228, .22) 19px 20px,
            transparent 21px 31px
        ) !important;
    transform: rotate(-24deg) !important;
    filter: drop-shadow(0 0 9px rgba(38, 153, 215, .08)) !important;
}

.simme-global-header__menu-chrome::after {
    z-index: -1 !important;
    left: 20px !important;
    top: 78px !important;
    width: 180px !important;
    height: 120px !important;
    border-radius: 50% !important;
    opacity: .18 !important;
    background: radial-gradient(ellipse, rgba(53, 195, 255, .14), transparent 66%) !important;
    filter: blur(18px) !important;
}

.simme-global-header__menu-head {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 2px 4px 12px !important;
    overflow: visible !important;
}

.simme-global-header__peek {
    position: absolute !important;
    z-index: 8 !important;
    left: 50% !important;
    bottom: -7px !important;
    display: block !important;
    width: 112px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 6px 8px rgba(0,0,0,.34))
        drop-shadow(0 0 11px rgba(22,180,255,.12)) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.simme-global-header__peek img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border: 0 !important;
    transform: none !important;
    filter: none !important;
}

body .simme-global-header__close,
body .simme-global-header__close:hover,
body .simme-global-header__close:focus,
body .simme-global-header__close:active {
    position: relative !important;
    display: block !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #e8f4fb !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

.simme-global-header__close span {
    position: absolute !important;
    left: 9px !important;
    top: 20px !important;
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform-origin: center !important;
}

.simme-global-header__close span:first-child {
    transform: rotate(45deg) !important;
}

.simme-global-header__close span:last-child {
    transform: rotate(-45deg) !important;
}

body .simme-global-header__close:hover,
body .simme-global-header__close:focus-visible {
    background: rgba(74, 183, 238, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 195, 246, .15) !important;
    outline: 0 !important;
}

.simme-global-header__menu-body {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 16px !important;
}

.simme-global-header__group {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 17px 16px 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(75, 181, 235, .45) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 96% 0%, rgba(46, 184, 247, .085), transparent 32%),
        linear-gradient(180deg, rgba(14, 40, 61, .62), rgba(7, 27, 44, .74)) !important;
    box-shadow:
        inset 0 1px 0 rgba(214, 241, 255, .045),
        inset 0 0 24px rgba(39, 177, 241, .025),
        0 0 17px rgba(35, 168, 233, .055) !important;
}

.simme-global-header__group--navigation {
    overflow: visible !important;
    padding-top: 34px !important;
}

.simme-global-header__group::after {
    position: absolute !important;
    right: -22px !important;
    bottom: -25px !important;
    width: 130px !important;
    height: 130px !important;
    content: "" !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(39, 173, 236, .08), transparent 68%) !important;
}

.simme-global-header__group-title {
    position: relative !important;
    z-index: 2 !important;
    margin: 2px 0 10px !important;
    padding: 0 2px !important;
    color: #55c9ff !important;
    -webkit-text-fill-color: #55c9ff !important;
    font: 760 11px/1.2 Arial, Helvetica, sans-serif !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px rgba(74, 195, 255, .18) !important;
}

.simme-global-header__links {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 2px !important;
}

.simme-global-header__link,
.simme-global-header__link:hover,
.simme-global-header__link:focus,
.simme-global-header__link:active,
.simme-global-header__link:visited {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 5px 7px 3px !important;
    gap: 10px !important;
    color: #e2edf6 !important;
    -webkit-text-fill-color: #e2edf6 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font: 600 15px/1.28 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.01em !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.simme-global-header__link:hover,
.simme-global-header__link:focus-visible,
.simme-global-header__link[aria-current="page"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(48, 166, 224, .075) !important;
    box-shadow:
        inset 0 0 0 1px rgba(72, 191, 246, .07),
        0 0 18px rgba(47, 181, 241, .035) !important;
    transform: translateX(2px) !important;
    outline: 0 !important;
}

.simme-global-header__link--child {
    padding-left: 14px !important;
}

.simme-global-header__link-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    color: #36bfff !important;
    -webkit-text-fill-color: currentColor !important;
    filter: drop-shadow(0 0 7px rgba(55, 190, 255, .18)) !important;
}

.simme-global-header__link-icon > svg:not(.simme-global-header__orbit-svg) {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.simme-global-header__link--atlas .simme-global-header__link-icon {
    width: 30px !important;
    height: 30px !important;
}

.simme-global-header__orbit-svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    max-width: none !important;
    overflow: visible !important;
}

.simme-global-header__link-label {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.simme-global-header__chevron {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 24px !important;
    color: rgba(220, 236, 246, .78) !important;
}

.simme-global-header__chevron svg {
    display: block !important;
    width: 9px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.simme-global-header.is-menu-open .simme-global-header__burger {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 700px) {
    .simme-global-header {
        height: 86px !important;
        min-height: 86px !important;
        max-height: 86px !important;
    }

    .simme-global-header__inner {
        width: 100% !important;
        height: 86px !important;
        min-height: 86px !important;
        max-height: 86px !important;
        padding: 5px 16px !important;
        gap: 14px !important;
    }

    .simme-global-header__logo {
        width: 150px !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: 76px !important;
    }

    body .simme-global-header__burger,
    body .simme-global-header__burger:hover,
    body .simme-global-header__burger:focus,
    body .simme-global-header__burger:active {
        flex-basis: 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .simme-global-header__burger span {
        width: 26px !important;
    }

    .simme-global-header__menu {
        top: calc(100% + 8px) !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 104px) !important;
        padding: 13px !important;
        border-radius: 21px !important;
    }

    .simme-global-header__menu-head {
        min-height: 58px !important;
        padding-bottom: 10px !important;
    }

    .simme-global-header__peek {
        bottom: -4px !important;
        width: 98px !important;
    }

    .simme-global-header__menu-body {
        gap: 13px !important;
    }

    .simme-global-header__group {
        padding: 14px 13px 13px !important;
        border-radius: 18px !important;
    }

    .simme-global-header__group--navigation {
        padding-top: 31px !important;
    }

    .simme-global-header__link,
    .simme-global-header__link:hover,
    .simme-global-header__link:focus,
    .simme-global-header__link:active,
    .simme-global-header__link:visited {
        grid-template-columns: 28px minmax(0, 1fr) 16px !important;
        min-height: 42px !important;
        padding-block: 6px !important;
        gap: 9px !important;
        font-size: 14px !important;
    }

    .simme-global-header__link-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
}

@media (max-width: 390px) {
    .simme-global-header__menu {
        padding: 11px !important;
        border-radius: 19px !important;
    }

    .simme-global-header__peek {
        bottom: -2px !important;
        width: 90px !important;
    }

    .simme-global-header__group {
        padding: 13px 11px 12px !important;
    }

    .simme-global-header__group--navigation {
        padding-top: 29px !important;
    }

    .simme-global-header__group-title {
        font-size: 10px !important;
    }

    .simme-global-header__link,
    .simme-global-header__link:hover,
    .simme-global-header__link:focus,
    .simme-global-header__link:active,
    .simme-global-header__link:visited {
        font-size: 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simme-global-header__burger span,
    .simme-global-header__link {
        transition-duration: .01ms !important;
    }
}
/* ========================================================================
   SIMME GLOBAL STICKY HEADER — SINGLE-SOURCE LEGACY BRIDGE V1.1
   2026-08-14

   The individual SymSoul Node pages previously generated their own copied
   header/menu markup from the Node Atlas PHP. The Global Sticky Header
   snippet now auto-renders the canonical .simme-global-header on those pages.

   Retire only the old Node-specific header copies. The Node reader, Atlas
   controls, theme switch, animated Atlas return icon and page framing remain
   completely untouched.

   This final override is deliberately placed at the END of the full CSS so
   historic Node-header rules cannot bring a legacy copy back into view.
   ======================================================================== */

body.simme-node-atlas-detail-page .simme-node-topbar,
body.simme-node-atlas-detail-page .simme-node-site-topbar-exact,
body.simme-node-atlas-detail-page .simme-node-normal-header,
body.simme-node-atlas-detail-page .simme-node-topbar54 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The shared component is the only site header allowed on generated Node pages. */
body.simme-node-atlas-detail-page .simme-global-header {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* ========================================================================
   SIMME GLOBAL STICKY HEADER V1.3 — TRUE TRANSPARENCY THROUGH THEMIFY ROW
   2026-08-14

   V1.2 made the header surface translucent, but a solid Themify row/module
   behind it could still make the result LOOK completely opaque. The shared
   header JavaScript now marks only the Themify containers that actually host
   this component. These rules clear those host surfaces so the page itself is
   what shows through the glass bar while scrolling.
   ======================================================================== */

.simme-global-header-host {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    overflow: visible !important;
}

.simme-global-header-host::before,
.simme-global-header-host::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Themify can place a separate cover/frame layer inside a row. Neutralise it
   only when JavaScript has identified that row as the sticky-header host. */
.module_row.simme-global-header-host > .builder_row_cover,
.module_row.simme-global-header-host > .tb_row_frame,
.module_row.simme-global-header-host > .row-slider,
.module_row.simme-global-header-host > .row-slider-slides,
.module_row.simme-global-header-host > .video-wrap,
.module_row.simme-global-header-host > .tb_video_background {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep the canonical shared bar visibly glassy over the real page. */
.simme-global-header {
    background: rgba(2, 4, 5, .76) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
}

/* Safari/WebKit needs the layer to remain composited for backdrop-filter to
   sample the page behind it consistently while scrolling. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .simme-global-header {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }
}

/* =========================================================
   SIMME HOMEPAGE — COMPARISON RAIL V23 BREATHING ROOM
   14 AUGUST 2026

   Purpose
   - Keeps the approved comparison design intact.
   - Restores a calmer vertical rhythm between heading, topic controls
     and the With / Without cards.
   - Gives the topic controls a little more height and presence.
   - Opens the desktop VS channel slightly without changing its artwork.
   - Adds modest internal card breathing room while preserving the
     existing colour, typography, assets, interaction and mobile VS logic.
   ========================================================= */

/* Give the whole comparison module a little more air without making it
   feel detached from the surrounding homepage sections. */
.sscr {
    padding-top: clamp(24px, 2.8vw, 38px) !important;
    padding-bottom: clamp(28px, 3vw, 42px) !important;
}

/* The heading was previously pulled very close to the controls. */
.sscr__intro {
    margin-bottom: clamp(20px, 1.7vw, 28px) !important;
}

/* Preserve the frameless topic area but create a deliberate pause before
   the comparison cards. */
.sscr__rail {
    padding: 0 0 clamp(20px, 1.7vw, 26px) !important;
    margin-bottom: clamp(8px, .8vw, 12px) !important;
}

.sscr__rail-label {
    margin-bottom: 11px !important;
    padding-inline: 2px !important;
}

.sscr__rail-list {
    gap: clamp(9px, .9vw, 14px) !important;
}

/* Re-open the topic buttons just enough for the icon and label to sit with
   more confidence. No change to their approved visual language. */
.sscr__topic,
.sscr__topic:hover,
.sscr__topic:focus,
.sscr__topic:focus-visible,
.sscr__topic:active {
    min-height: 76px !important;
    gap: 7px !important;
    padding: 9px 8px 11px !important;
    border-radius: 16px !important;
}

.sscr__topic-visual {
    width: clamp(28px, 2.55vw, 38px) !important;
    height: clamp(28px, 2.55vw, 38px) !important;
}

.sscr__topic-text {
    font-size: clamp(.86rem, 1.03vw, 1rem) !important;
    line-height: 1.1 !important;
}

/* Frameless stage remains visually invisible; spacing comes from the
   surrounding rhythm rather than a new container. */
.sscr__stage {
    padding: 0 !important;
}

/* Slightly more generous card rhythm. */
.sscr__card {
    padding-top: clamp(26px, 2.35vw, 34px) !important;
    padding-bottom: clamp(28px, 2.5vw, 36px) !important;
}

.sscr__card-top {
    gap: clamp(17px, 1.5vw, 22px) !important;
    margin-bottom: clamp(22px, 1.8vw, 28px) !important;
}

.sscr__points {
    gap: clamp(16px, 1.35vw, 22px) !important;
}

.sscr__points li {
    line-height: 1.5 !important;
}

/* Desktop: enlarge the central breathing channel slightly. The supplied
   VS image remains centred in its own track and still visually bridges the
   two comparison cards without crowding either side. */
@media (min-width: 861px) {
    .sscr__compare {
        grid-template-columns:
            minmax(0, 1fr)
            clamp(68px, 5.2vw, 84px)
            minmax(0, 1fr) !important;
    }

    .sscr__vs img {
        width: clamp(78px, 6vw, 94px) !important;
    }
}

/* Tablet: retain all four topic controls and the proven stacked-card VS
   behaviour, while avoiding the desktop section's former compressed feel. */
@media (max-width: 860px) {
    .sscr {
        padding-top: 22px !important;
        padding-bottom: 30px !important;
    }

    .sscr__intro {
        margin-bottom: 18px !important;
    }

    .sscr__rail {
        padding: 0 0 18px !important;
        margin-bottom: 7px !important;
    }

    .sscr__rail-list {
        gap: 8px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 64px !important;
        gap: 5px !important;
        padding: 7px 5px 8px !important;
        border-radius: 14px !important;
    }

    .sscr__topic-visual {
        width: 27px !important;
        height: 27px !important;
    }

    .sscr__topic-text {
        font-size: .82rem !important;
    }

    .sscr__card {
        padding-top: 22px !important;
        padding-bottom: 24px !important;
    }

    .sscr__card-top {
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .sscr__points {
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .sscr {
        padding-top: 20px !important;
        padding-bottom: 26px !important;
    }

    .sscr__intro {
        margin-bottom: 16px !important;
    }

    .sscr__rail {
        padding: 0 0 16px !important;
        margin-bottom: 6px !important;
    }

    .sscr__rail-label {
        margin-bottom: 8px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 60px !important;
        gap: 4px !important;
        padding: 6px 4px 8px !important;
        border-radius: 13px !important;
    }

    .sscr__topic-visual {
        width: 24px !important;
        height: 24px !important;
    }

    .sscr__topic-text {
        font-size: .76rem !important;
    }

    .sscr__card {
        padding-top: 20px !important;
        padding-bottom: 22px !important;
    }

    .sscr__card-top {
        margin-bottom: 18px !important;
    }

    .sscr__points {
        gap: 14px !important;
    }
}

@media (max-width: 420px) {
    .sscr {
        padding-top: 18px !important;
        padding-bottom: 24px !important;
    }

    .sscr__intro {
        margin-bottom: 14px !important;
    }

    .sscr__rail {
        padding: 0 0 14px !important;
        margin-bottom: 5px !important;
    }

    .sscr__rail-list {
        gap: 5px !important;
    }

    .sscr__topic,
    .sscr__topic:hover,
    .sscr__topic:focus,
    .sscr__topic:focus-visible,
    .sscr__topic:active {
        min-height: 56px !important;
        padding: 5px 2px 7px !important;
        border-radius: 12px !important;
    }

    .sscr__topic-visual {
        width: 22px !important;
        height: 22px !important;
    }

    .sscr__topic-text {
        font-size: .70rem !important;
    }

    .sscr__card-top {
        margin-bottom: 16px !important;
    }

    .sscr__points {
        gap: 13px !important;
    }
}

/* ========================================================================
   SIMME HOMEPAGE — SYMSOUL COVERFLOW V12 RESPONSIVE CONTAINMENT
   14 AUGUST 2026

   Purpose:
   - protects the rounded top of the cards from the coverflow clipping edge;
   - adds a proper 3D headroom allowance for the active card and its glow;
   - reins in outer-card spread at the intermediate breakpoints where cards
     could reach the page/frame edge;
   - preserves the existing six-card design, reflections, controls, links,
     drag/swipe, wheel and keyboard behaviour;
   - scoped exclusively to .sscf.
   ======================================================================== */

/* The active card is translated towards the viewer and therefore projects
   slightly larger than its raw CSS width/height. Give that projected shape a
   reliable top safety zone instead of allowing .sscf__surface to shave the
   rounded corners at particular viewport widths. */
.sscf__surface {
    padding-top: 42px;
}

.sscf__stage {
    height: clamp(530px, 42vw, 600px);
}

.sscf__card,
.sscf__card:hover,
.sscf__card:focus,
.sscf__card:active,
.sscf__card:visited {
    top: 44.5% !important;
}

/* Mid-size desktop / landscape tablet.
   Slightly reduce the outer-card travel so the furthest panels remain within
   the usable page frame instead of meeting the clipping edge. */
@media (max-width: 1180px) {
    .sscf {
        --sscf-step: clamp(116px, 14vw, 166px);
    }

    .sscf__surface {
        padding-top: 38px;
    }

    .sscf__stage {
        height: 530px;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 44.5% !important;
    }
}

/* Tablet / small laptop is the most sensitive range because the cards are
   still multi-panel while the original stage had already become shallower. */
@media (max-width: 860px) {
    .sscf {
        --sscf-step: clamp(112px, 18vw, 150px);
    }

    .sscf__surface {
        padding-top: 38px;
    }

    .sscf__stage {
        height: 535px;
    }
}

/* Phone / portrait tablet.
   Retain the deliberate adjacent-card peek, but draw it slightly further
   inside the composition and increase vertical headroom so neither the active
   rounded corner nor its glow is cut off. */
@media (max-width: 640px) {
    .sscf {
        --sscf-step: min(64vw, 246px);
    }

    .sscf__surface {
        padding-top: 34px;
    }

    .sscf__stage {
        height: clamp(590px, 140vw, 620px);
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 43% !important;
    }
}

/* Very narrow phones need their own balance because the title/media stack
   becomes relatively tall compared with the stage. */
@media (max-width: 380px) {
    .sscf {
        --sscf-step: min(64vw, 236px);
    }

    .sscf__surface {
        padding-top: 32px;
    }

    .sscf__stage {
        height: 570px;
    }

    .sscf__card,
    .sscf__card:hover,
    .sscf__card:focus,
    .sscf__card:active,
    .sscf__card:visited {
        top: 42.5% !important;
    }
}



/* ========================================================================
   SIMME GLOBAL STICKY HEADER V1.4 — BRANDED INTEGRATION ICONS
   14 AUGUST 2026

   Uses the six supplied high-resolution transparent WebP assets for the
   ChatGPT, Claude, Copilot, Gemini, Perplexity and Grok menu rows.

   The Navigation group retains its existing bespoke cyan SVG icon language.
   Only .simme-global-header__link--integration is affected here.
   ======================================================================== */

/* The WebP artwork already contains its own finished neon treatment, so do
   not pass it through the generic cyan SVG colour/filter pipeline. */
.simme-global-header__link--integration .simme-global-header__link-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    color: inherit !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
}

.simme-global-header__integration-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    filter:
        drop-shadow(0 0 3px rgba(56, 194, 255, .28))
        drop-shadow(0 0 7px rgba(40, 172, 255, .12)) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* A tiny optical lift on row hover keeps the new artwork feeling native to
   the existing premium menu without changing the image itself. */
.simme-global-header__link--integration:hover .simme-global-header__integration-icon,
.simme-global-header__link--integration:focus-visible .simme-global-header__integration-icon,
.simme-global-header__link--integration[aria-current="page"] .simme-global-header__integration-icon {
    filter:
        drop-shadow(0 0 4px rgba(89, 211, 255, .42))
        drop-shadow(0 0 10px rgba(48, 180, 255, .20)) !important;
}

/* Preserve the compact menu geometry on phones while still rendering from
   the full 200px-class source assets for very crisp high-DPI output. */
@media (max-width: 700px) {
    .simme-global-header__link--integration .simme-global-header__link-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .simme-global-header__integration-icon {
        width: 26px !important;
        height: 26px !important;
    }
}

@media (max-width: 390px) {
    .simme-global-header__integration-icon {
        width: 25px !important;
        height: 25px !important;
    }
}


/* ========================================================================
/* ========================================================================
/* ========================================================================
/* ========================================================================
/* ========================================================================
/* ========================================================================
   SIMME EUCLID1 NODE ATLAS PORTAL V1.9 — AURORA GLASS HERO
   16 AUGUST 2026

   Shortcode: [simme_node_atlas_portal]
   Destination: /simmes-nodes-atlas/

   V1.9 content-driven mid-width height repair
   - Keeps only the Euclid1 brand lockup.
   - Removes the fragile fixed 2:1 height at 1220px and below.
   - Lets the card grow naturally from its actual content between tablet and narrow desktop widths.
   - Prevents the Euclid1 footer row from crossing the panel edge without creating a large empty lower area.
   - Preserves the longer CTA-triggered zoom focused on the Euclid1 glyph.
   ======================================================================== */

.simme-atlas-portal,
.simme-atlas-portal *,
.simme-atlas-portal *::before,
.simme-atlas-portal *::after {
    box-sizing: border-box;
}

.simme-atlas-portal {
    --sap-cyan: #22d3ff;
    --sap-blue: #168cff;
    --sap-violet: #7459ff;
    --sap-magenta: #d32fe8;
    --sap-text: #f5f8ff;
    --sap-muted: rgba(231, 239, 255, .76);
    --sap-edge: rgba(176, 210, 255, .50);
    --sap-bg: #020816;

    position: relative;
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: clamp(12px, 1.35vw, 22px);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    isolation: isolate;
}

.simme-atlas-portal__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--sap-text);
    background: var(--sap-bg);
    border: 1px solid var(--sap-edge);
    border-radius: clamp(24px, 2.7vw, 40px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -1px 0 rgba(35, 111, 201, .12),
        0 18px 52px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(52, 119, 202, .10),
        0 0 42px rgba(33, 125, 255, .07);
    transform: translateZ(0);
}

.simme-atlas-portal__card::before,
.simme-atlas-portal__card::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.simme-atlas-portal__card::before {
    z-index: 7;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        inset 0 0 34px rgba(26, 137, 255, .055),
        inset 0 0 70px rgba(100, 59, 255, .04);
}

.simme-atlas-portal__card::after {
    z-index: 1;
    left: 8%;
    right: 8%;
    bottom: -12%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(37, 183, 255, .19) 0%,
        rgba(86, 90, 255, .11) 35%,
        rgba(191, 54, 255, .07) 55%,
        transparent 74%
    );
    filter: blur(25px);
    opacity: .72;
}

/* ------------------------------------------------------------------------
   BACKGROUND ART + MAGICAL NODE LIGHTS
   ------------------------------------------------------------------------ */

.simme-atlas-portal__scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    background-color: #031027;
    background-image: url("https://www.simme.co.uk/wp-content/uploads/2026/08/Atlas-Background-2.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    transform: translateZ(0) scale(1.003);
    transform-origin: 76.8% 46.8%;
    transition:
        transform 2.1s cubic-bezier(.18, .72, .2, 1),
        filter 1.75s ease;
    will-change: transform, filter;
}

.simme-atlas-portal__scene::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 24, .90) 0%,
            rgba(3, 16, 42, .70) 24%,
            rgba(3, 20, 52, .36) 42%,
            rgba(2, 11, 31, .10) 60%,
            rgba(1, 6, 18, .02) 76%
        ),
        linear-gradient(
            180deg,
            rgba(56, 135, 224, .03) 0%,
            transparent 55%,
            rgba(0, 4, 16, .18) 100%
        );
    pointer-events: none;
}

.simme-atlas-portal__scene::after {
    position: absolute;
    z-index: 2;
    inset: -10%;
    content: "";
    background:
        radial-gradient(ellipse at 33% 45%, rgba(23, 220, 255, .23) 0%, rgba(18, 164, 255, .10) 24%, transparent 57%),
        radial-gradient(ellipse at 82% 46%, rgba(220, 61, 255, .12) 0%, rgba(95, 63, 255, .06) 27%, transparent 56%);
    mix-blend-mode: screen;
    opacity: .56;
    filter: blur(10px) saturate(1.05);
    transform: translate3d(-1.2%, .2%, 0) scale(1.005);
    animation: simme-atlas-portal-aurora 10.5s ease-in-out infinite;
    pointer-events: none;
}

.simme-atlas-portal__magic {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    pointer-events: none;
}

.simme-atlas-portal__pulse {
    --sap-pulse: rgba(38, 212, 255, .97);
    --sap-pulse-soft: rgba(38, 212, 255, .20);
    --sap-pulse-size: clamp(4px, .40vw, 7px);
    --sap-pulse-duration: 10.5s;
    --sap-pulse-delay: 0s;

    position: absolute;
    width: var(--sap-pulse-size);
    height: var(--sap-pulse-size);
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 2px .5px #fff,
        0 0 6px 1.5px var(--sap-pulse),
        0 0 16px 4px var(--sap-pulse-soft);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.66);
    animation: simme-atlas-portal-node-pulse var(--sap-pulse-duration) ease-in-out var(--sap-pulse-delay) infinite;
    pointer-events: none;
}

.simme-atlas-portal__pulse::after {
    position: absolute;
    inset: -145%;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, var(--sap-pulse-soft), transparent 70%);
    opacity: 0;
    transform: scale(.44);
    animation: simme-atlas-portal-node-halo var(--sap-pulse-duration) ease-in-out var(--sap-pulse-delay) infinite;
}

/* Star-origin coordinates aligned to Atlas-Background-2.jpg */
.simme-atlas-portal__pulse--01 { left: 59.8%; top: 29.9%; --sap-pulse: rgba(69, 225, 255, .97); --sap-pulse-soft: rgba(69, 225, 255, .21); --sap-pulse-duration: 10.0s; --sap-pulse-delay: -.8s; }
.simme-atlas-portal__pulse--02 { left: 66.0%; top: 12.2%; --sap-pulse: rgba(255, 255, 255, .97); --sap-pulse-soft: rgba(141, 223, 255, .26); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 11.6s; --sap-pulse-delay: -3.3s; }
.simme-atlas-portal__pulse--03 { left: 70.8%; top: 16.8%; --sap-pulse: rgba(90, 199, 255, .96); --sap-pulse-soft: rgba(90, 199, 255, .21); --sap-pulse-duration: 10.9s; --sap-pulse-delay: -1.7s; }
.simme-atlas-portal__pulse--04 { left: 78.9%; top: 16.0%; --sap-pulse: rgba(219, 105, 255, .98); --sap-pulse-soft: rgba(219, 105, 255, .22); --sap-pulse-duration: 10.8s; --sap-pulse-delay: -4.1s; }
.simme-atlas-portal__pulse--05 { left: 85.5%; top: 25.7%; --sap-pulse: rgba(244, 77, 255, .98); --sap-pulse-soft: rgba(244, 77, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 10.2s; --sap-pulse-delay: -5.1s; }
.simme-atlas-portal__pulse--06 { left: 85.1%; top: 39.8%; --sap-pulse: rgba(208, 72, 255, .97); --sap-pulse-soft: rgba(208, 72, 255, .21); --sap-pulse-duration: 11.9s; --sap-pulse-delay: -2.0s; }
.simme-atlas-portal__pulse--07 { left: 78.2%; top: 45.6%; --sap-pulse: rgba(244, 83, 255, .98); --sap-pulse-soft: rgba(244, 83, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 10.1s; --sap-pulse-delay: -2.8s; }
.simme-atlas-portal__pulse--08 { left: 80.4%; top: 63.4%; --sap-pulse: rgba(255, 234, 255, .96); --sap-pulse-soft: rgba(211, 69, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 12.2s; --sap-pulse-delay: -6.0s; }
.simme-atlas-portal__pulse--09 { left: 70.2%; top: 70.0%; --sap-pulse: rgba(186, 176, 255, .95); --sap-pulse-soft: rgba(133, 119, 255, .20); --sap-pulse-duration: 11.1s; --sap-pulse-delay: -4.2s; }
.simme-atlas-portal__pulse--10 { left: 59.4%; top: 64.8%; --sap-pulse: rgba(255, 255, 255, .97); --sap-pulse-soft: rgba(45, 177, 255, .23); --sap-pulse-size: clamp(5px, .46vw, 8px); --sap-pulse-duration: 10.4s; --sap-pulse-delay: -5.0s; }
.simme-atlas-portal__pulse--11 { left: 52.8%; top: 47.0%; --sap-pulse: rgba(55, 222, 255, .98); --sap-pulse-soft: rgba(55, 222, 255, .22); --sap-pulse-duration: 9.8s; --sap-pulse-delay: -2.3s; }
.simme-atlas-portal__pulse--12 { left: 64.6%; top: 33.7%; --sap-pulse: rgba(35, 206, 255, .97); --sap-pulse-soft: rgba(35, 206, 255, .20); --sap-pulse-duration: 11.2s; --sap-pulse-delay: -1.2s; }
.simme-atlas-portal__pulse--13 { left: 67.2%; top: 58.8%; --sap-pulse: rgba(47, 224, 255, .98); --sap-pulse-soft: rgba(47, 224, 255, .21); --sap-pulse-duration: 10.7s; --sap-pulse-delay: -4.6s; }
.simme-atlas-portal__pulse--14 { left: 63.3%; top: 79.7%; --sap-pulse: rgba(81, 199, 255, .96); --sap-pulse-soft: rgba(81, 199, 255, .19); --sap-pulse-duration: 12.0s; --sap-pulse-delay: -6.6s; }

/* ------------------------------------------------------------------------
   COPY
   ------------------------------------------------------------------------ */

.simme-atlas-portal__copy {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 52%;
    height: 100%;
    padding: clamp(46px, 5.5vw, 82px) clamp(42px, 5vw, 84px) clamp(28px, 3.1vw, 40px);
    pointer-events: none;
}

.simme-atlas-portal__title {
    display: block;
    max-width: 8.75em;
    color: #f8fbff;
    font-size: clamp(36px, 4.55vw, 66px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.043em;
    text-shadow: 0 2px 12px rgba(1, 8, 24, .38);
}

.simme-atlas-portal__title-line {
    display: block;
}

.simme-atlas-portal__title-line + .simme-atlas-portal__title-line {
    margin-top: clamp(8px, .9vw, 13px);
}

.simme-atlas-portal__facts {
    display: block;
    margin-top: clamp(22px, 2.5vw, 34px);
    color: rgba(246, 249, 255, .91);
    font-size: clamp(13px, 1.32vw, 18px);
    font-weight: 650;
    line-height: 1.42;
}

.simme-atlas-portal__description {
    display: block;
    margin-top: clamp(8px, .9vw, 13px);
    color: var(--sap-muted);
    font-size: clamp(12px, 1.18vw, 17px);
    font-weight: 450;
    line-height: 1.56;
    max-width: min(100%, 40ch);
}

/* Only this control is interactive. */
.simme-atlas-portal__cta,
.simme-atlas-portal__cta:link,
.simme-atlas-portal__cta:visited {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: min(100%, clamp(250px, 21vw, 340px));
    min-height: clamp(52px, 4.6vw, 66px);
    margin-top: clamp(18px, 2.1vw, 28px) !important;
    padding: 0 clamp(18px, 2.05vw, 28px) !important;
    overflow: hidden;
    gap: clamp(10px, 1.4vw, 18px);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(100deg, #158eff 0%, #4e69ff 49%, #cf2fe4 100%) !important;
    border: 1px solid rgba(209, 232, 255, .62) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 8px 22px rgba(15, 88, 255, .18),
        0 0 22px rgba(174, 49, 255, .12) !important;
    cursor: pointer;
    pointer-events: auto;
    font-size: clamp(11px, .94vw, 14px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateZ(0);
    transition:
        transform .55s cubic-bezier(.2,.72,.2,1),
        box-shadow .65s ease,
        border-color .55s ease,
        filter .55s ease;
    -webkit-tap-highlight-color: transparent;
}

.simme-atlas-portal__cta::before {
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -36%;
    width: 26%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    transform: skewX(-18deg);
    opacity: .72;
    animation: simme-atlas-portal-button-sheen 7s ease-in-out infinite;
    pointer-events: none;
}

.simme-atlas-portal__cta-arrow {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 1.28em;
    font-weight: 400;
    line-height: 1;
    transition: transform .68s cubic-bezier(.2,.72,.2,1);
}

.simme-atlas-portal__cta:hover,
.simme-atlas-portal__cta:focus-visible {
    color: #fff !important;
    border-color: rgba(232, 244, 255, .88) !important;
    filter: brightness(1.055) saturate(1.06);
    transform: translateY(-2px) scale(1.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        0 12px 34px rgba(13, 87, 255, .28),
        0 0 34px rgba(190, 56, 255, .24) !important;
}

.simme-atlas-portal__cta:focus-visible {
    outline: 3px solid rgba(120, 220, 255, .88);
    outline-offset: 4px;
}

.simme-atlas-portal__cta:hover .simme-atlas-portal__cta-arrow,
.simme-atlas-portal__cta:focus-visible .simme-atlas-portal__cta-arrow,
.simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__cta-arrow {
    transform: translateX(6px);
}

/* Button hover/focus zooms only the artwork; nothing happens when hovering
   over the rest of the panel. */
.simme-atlas-portal__card.is-cta-hover .simme-atlas-portal__scene,
.simme-atlas-portal__card:has(.simme-atlas-portal__cta:hover) .simme-atlas-portal__scene,
.simme-atlas-portal__card:has(.simme-atlas-portal__cta:focus-visible) .simme-atlas-portal__scene {
    transform: translate3d(-1.4%, -.2%, 0) scale(1.14);
    filter: saturate(1.08) brightness(1.04);
}

.simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__scene {
    transform: translate3d(-2.0%, -.4%, 0) scale(1.19);
    filter: saturate(1.14) brightness(1.07);
    transition-duration: 1.12s;
}

.simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__cta {
    transform: translateY(-1px) scale(.992);
    filter: brightness(1.09) saturate(1.08);
}

/* ------------------------------------------------------------------------
   BRAND HIERARCHY — EUCLID1 LEADS
   ------------------------------------------------------------------------ */

.simme-atlas-portal__brand {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: clamp(14px, 1.7vw, 22px);
    gap: 0;
    color: rgba(247, 250, 255, .90);
}

.simme-atlas-portal__brand-unit {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: clamp(8px, .85vw, 12px);
}

.simme-atlas-portal__brand-icon {
    display: block !important;
    width: clamp(27px, 2.45vw, 38px) !important;
    height: clamp(27px, 2.45vw, 38px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: .92;
    filter:
        drop-shadow(0 0 6px rgba(56, 184, 255, .20))
        drop-shadow(0 0 10px rgba(182, 64, 255, .12));
}

.simme-atlas-portal__brand-name {
    display: block;
    color: rgba(246, 249, 255, .78);
    font-size: clamp(10px, 1.02vw, 14px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: .20em;
    text-transform: uppercase;
    white-space: nowrap;
}

.simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-icon {
    width: clamp(34px, 2.9vw, 46px) !important;
    height: clamp(34px, 2.9vw, 46px) !important;
    opacity: 1;
    filter:
        drop-shadow(0 0 7px rgba(56, 184, 255, .30))
        drop-shadow(0 0 15px rgba(182, 64, 255, .21));
}

.simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-name {
    color: rgba(255, 255, 255, .96);
    font-size: clamp(12px, 1.18vw, 16px);
    font-weight: 800;
    letter-spacing: .23em;
}

.simme-atlas-portal__brand-unit--symsoul {
    opacity: .72;
    transform: none;
    transform-origin: left center;
}

.simme-atlas-portal__brand-join {
    color: rgba(213, 225, 245, .46);
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 1;
}

/* ------------------------------------------------------------------------
   WIDE TABLET / NARROW DESKTOP
   ------------------------------------------------------------------------ */

@media (max-width: 1220px) and (min-width: 761px) {
    /*
     * Content-driven height repair.
     * At these widths the portal can live inside a narrower Themify column than
     * the browser viewport, so a fixed 2:1 aspect ratio can become too shallow
     * even though the media query still sees a 1220px-wide screen. Let the
     * content define the height instead. This keeps the Euclid1 footer safely
     * inside the rounded panel without manufacturing a large empty lower area.
     */
    .simme-atlas-portal__card {
        aspect-ratio: auto;
        min-height: 0;
    }

    .simme-atlas-portal__copy {
        width: 55%;
        height: auto;
        min-height: 0;
        padding: clamp(36px, 4.2vw, 54px) clamp(32px, 4.4vw, 56px) clamp(24px, 2.6vw, 32px);
    }

    .simme-atlas-portal__title {
        max-width: 9.2em;
        font-size: clamp(33px, 4.2vw, 54px);
    }

    .simme-atlas-portal__facts {
        margin-top: clamp(16px, 1.8vw, 24px);
    }

    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta:link,
    .simme-atlas-portal__cta:visited {
        width: min(100%, 320px);
        min-height: 56px;
        margin-top: clamp(14px, 1.7vw, 22px) !important;
    }

    .simme-atlas-portal__brand {
        margin-top: clamp(12px, 1.5vw, 18px);
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media (max-width: 1050px) and (min-width: 761px) {
    .simme-atlas-portal__card {
        aspect-ratio: auto;
        min-height: 0;
    }

    .simme-atlas-portal__copy {
        width: 57%;
        height: auto;
        min-height: 0;
        padding: clamp(28px, 3.5vw, 38px) clamp(24px, 3.6vw, 34px) clamp(20px, 2.4vw, 26px);
    }

    .simme-atlas-portal__title {
        max-width: 9.6em;
        font-size: clamp(29px, 3.95vw, 44px);
        line-height: 1.06;
    }

    .simme-atlas-portal__facts {
        font-size: clamp(13px, 1.55vw, 16px);
        margin-top: 14px;
    }

    .simme-atlas-portal__description {
        font-size: clamp(12px, 1.45vw, 15px);
    }

    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta:link,
    .simme-atlas-portal__cta:visited {
        width: min(100%, 305px);
        min-height: 52px;
        margin-top: 14px !important;
        font-size: 12px;
    }

    .simme-atlas-portal__brand {
        margin-top: 12px;
        padding-top: 0;
        gap: 0;
    }
}

/* ------------------------------------------------------------------------
   MOBILE / NARROW
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
    .simme-atlas-portal {
        width: min(100%, 540px);
        padding: 12px;
    }

    .simme-atlas-portal__card {
        display: grid;
        grid-template-rows: clamp(210px, 57vw, 305px) auto;
        aspect-ratio: auto;
        min-height: 0;
        border-radius: 28px;
        background: linear-gradient(180deg, #07152f 0%, #030a1c 54%, #020715 100%);
    }

    .simme-atlas-portal__scene {
        position: relative;
        inset: auto;
        grid-row: 1;
        width: 100%;
        height: 100%;
        background-position: 70% 44%;
        background-size: cover;
        border-bottom: 1px solid rgba(118, 171, 255, .18);
        transform-origin: 76% 41.5%;
        transition-duration: 1.85s;
    }

    .simme-atlas-portal__card.is-cta-hover .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:hover) .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:focus-visible) .simme-atlas-portal__scene {
        transform: scale(1.09);
        filter: saturate(1.08) brightness(1.04);
    }

    .simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__scene {
        transform: scale(1.125);
        filter: saturate(1.13) brightness(1.06);
    }

    .simme-atlas-portal__scene::before {
        background:
            linear-gradient(180deg, rgba(0, 5, 19, .03), rgba(0, 6, 22, .08) 62%, rgba(2, 8, 24, .72) 100%),
            radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0, 5, 18, .18) 100%);
    }

    .simme-atlas-portal__scene::after {
        inset: -16%;
        background:
            radial-gradient(ellipse at 42% 55%, rgba(24, 213, 255, .20), transparent 45%),
            radial-gradient(ellipse at 79% 48%, rgba(205, 61, 255, .12), transparent 40%);
    }

    .simme-atlas-portal__copy {
        grid-row: 2;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 28px 28px 28px;
        background:
            radial-gradient(circle at 16% 0%, rgba(31, 137, 255, .10), transparent 34%),
            linear-gradient(180deg, rgba(5, 15, 38, .97), rgba(2, 8, 22, .995));
    }

    .simme-atlas-portal__title {
        max-width: 11.4em;
        font-size: clamp(26px, 7.6vw, 38px);
        line-height: 1.08;
    }

    .simme-atlas-portal__facts {
        margin-top: 20px;
        font-size: clamp(13px, 3.8vw, 16px);
    }

    .simme-atlas-portal__description {
        margin-top: 8px;
        font-size: clamp(12px, 3.45vw, 14px);
        line-height: 1.52;
    }

    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta:link,
    .simme-atlas-portal__cta:visited {
        width: 100%;
        min-height: 56px;
        margin-top: 18px !important;
        padding: 0 18px !important;
        font-size: clamp(10px, 3.02vw, 12px);
        letter-spacing: .055em;
    }

    .simme-atlas-portal__brand {
        width: 100%;
        margin-top: auto;
        padding-top: 14px;
        gap: 0;
        justify-content: flex-start;
    }

    .simme-atlas-portal__brand-unit {
        gap: 7px;
    }

    .simme-atlas-portal__brand-icon {
        width: 25px !important;
        height: 25px !important;
    }

    .simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-icon {
        width: 31px !important;
        height: 31px !important;
    }

    .simme-atlas-portal__brand-name {
        font-size: 9px;
        letter-spacing: .14em;
    }

    .simme-atlas-portal__brand-unit--euclid .simme-atlas-portal__brand-name {
        font-size: 11px;
        letter-spacing: .17em;
    }

    .simme-atlas-portal__brand-join {
        font-size: 14px;
    }

    .simme-atlas-portal__pulse {
        --sap-pulse-size: 4px;
    }

    /* Mobile crop remap for Atlas-Background-2.jpg */
    .simme-atlas-portal__pulse--01 { left: 57.2%; top: 31.8%; display: block; }
    .simme-atlas-portal__pulse--02 { left: 63.6%; top: 12.8%; display: block; }
    .simme-atlas-portal__pulse--03 { left: 68.2%; top: 17.4%; display: block; }
    .simme-atlas-portal__pulse--04 { left: 77.8%; top: 16.3%; display: block; }
    .simme-atlas-portal__pulse--05 { left: 83.2%; top: 26.9%; display: none; }
    .simme-atlas-portal__pulse--06 { left: 82.8%; top: 40.6%; display: none; }
    .simme-atlas-portal__pulse--07 { left: 76.1%; top: 45.8%; display: block; }
    .simme-atlas-portal__pulse--08 { left: 78.0%; top: 61.9%; display: none; }
    .simme-atlas-portal__pulse--09 { left: 68.9%; top: 68.1%; display: block; }
    .simme-atlas-portal__pulse--10 { left: 57.0%; top: 63.6%; display: block; }
    .simme-atlas-portal__pulse--11 { left: 50.9%; top: 47.1%; display: block; }
    .simme-atlas-portal__pulse--12 { left: 62.5%; top: 34.5%; display: block; }
    .simme-atlas-portal__pulse--13 { left: 65.2%; top: 58.1%; display: block; }
    .simme-atlas-portal__pulse--14 { left: 61.4%; top: 77.4%; display: none; }
}

@media (max-width: 420px) {
    .simme-atlas-portal__card {
        grid-template-rows: 198px auto;
        border-radius: 24px;
    }

    .simme-atlas-portal__copy {
        padding: 24px 22px 24px;
    }

    .simme-atlas-portal__title {
        font-size: clamp(25px, 9vw, 34px);
    }

    .simme-atlas-portal__brand {
        flex-wrap: wrap;
        row-gap: 9px;
    }
}

/* ------------------------------------------------------------------------
   MOTION
   ------------------------------------------------------------------------ */

@keyframes simme-atlas-portal-node-pulse {
    0%, 20%, 100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.66);
        filter: brightness(.96);
    }
    26% {
        opacity: .16;
        transform: translate3d(-50%, -50%, 0) scale(.82);
        filter: brightness(1.02);
    }
    31% {
        opacity: .94;
        transform: translate3d(-50%, -50%, 0) scale(1.12);
        filter: brightness(1.28);
    }
    36% {
        opacity: .24;
        transform: translate3d(-50%, -50%, 0) scale(.90);
        filter: brightness(1.05);
    }
    44%, 100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.68);
        filter: brightness(.96);
    }
}

@keyframes simme-atlas-portal-node-halo {
    0%, 22%, 100% {
        opacity: 0;
        transform: scale(.44);
    }
    31% {
        opacity: .42;
        transform: scale(1.18);
    }
    37% {
        opacity: 0;
        transform: scale(.60);
    }
}

@keyframes simme-atlas-portal-aurora {
    0%, 100% {
        opacity: .50;
        transform: translate3d(-1.2%, .2%, 0) scale(1.005);
        filter: blur(10px) saturate(1.02);
    }
    50% {
        opacity: .70;
        transform: translate3d(.8%, -.8%, 0) scale(1.028);
        filter: blur(12px) saturate(1.12);
    }
}

@keyframes simme-atlas-portal-button-sheen {
    0%, 60% { left: -36%; opacity: 0; }
    68% { opacity: .66; }
    84% { left: 112%; opacity: .38; }
    100% { left: 112%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .simme-atlas-portal__scene,
    .simme-atlas-portal__scene::after,
    .simme-atlas-portal__pulse,
    .simme-atlas-portal__pulse::after,
    .simme-atlas-portal__cta,
    .simme-atlas-portal__cta::before,
    .simme-atlas-portal__cta-arrow {
        animation: none !important;
        transition: none !important;
    }

    .simme-atlas-portal__pulse {
        opacity: .48;
        transform: translate3d(-50%, -50%, 0) scale(.86);
    }

    .simme-atlas-portal__scene::after {
        opacity: .60;
        transform: none;
    }

    .simme-atlas-portal__card.is-cta-hover .simme-atlas-portal__scene,
    .simme-atlas-portal__card.is-cta-activating .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:hover) .simme-atlas-portal__scene,
    .simme-atlas-portal__card:has(.simme-atlas-portal__cta:focus-visible) .simme-atlas-portal__scene {
        transform: none !important;
        filter: none !important;
    }
}



/* ========================================================================
   EUCLID1 NODE ATLAS V6.29 — HERO BACK HOME CONTROL
   2026-08-16
   - Adds a compact glass Back Home pill at the very top-left of the Atlas hero.
   - Includes hover, keyboard-focus and light-theme states.
   - Hero top padding is increased at each responsive breakpoint so the new
     control never collides with the Euclid1 logo or title content.
   ======================================================================== */


/* ========================================================================
   SIMME HOMEPAGE — COMPARISON RAIL V24 HEADING REMOVAL / GAP CLOSE
   17 AUGUST 2026
   ======================================================================== */

.sscr {
    padding-top: 0 !important;
}

.sscr__shell {
    margin-top: 0 !important;
}

/* V9 PHP no longer outputs this element. This defensive reset also prevents
   an old cached copy preserving the previous heading gap during deployment. */
.sscr__intro {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}



/* ========================================================================
   SIMME HOMEPAGE — COMPARISON RAIL V28 ATLAS-SYNCHRONISED GEOMETRY
   17 AUGUST 2026

   VIDEO-DIAGNOSED REPAIR
   ----------------------
   The comparison section now follows the exact outer-width system used by
   .simme-atlas-portal instead of using independent comparison breakpoints.

   Atlas contract copied deliberately:
   - desktop/wide: width min(1400px, 100%) + responsive 12–22px outer padding;
   - <=760px: width min(100%, 540px) + 12px outer padding;
   - <=760px also becomes the comparison's stacked breakpoint.

   This keeps the OUTSIDE EDGES of the green/red comparison area on the same
   page axis as the Atlas card below it at every responsive state.
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. EXACT ATLAS OUTER-WIDTH CONTRACT
   ------------------------------------------------------------------------ */

.sscr {
    position: relative !important;
    box-sizing: border-box !important;
    width: min(1400px, 100%) !important;
    max-width: 1400px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* Match .simme-atlas-portal exactly on the horizontal axis. */
    padding-left: clamp(12px, 1.35vw, 22px) !important;
    padding-right: clamp(12px, 1.35vw, 22px) !important;

    /* V24 removed the heading; keep the top closed. */
    padding-top: 0 !important;
}

/* Every comparison wrapper inherits one consistent inner edge. */
.sscr__shell,
.sscr__rail,
.sscr__stage,
.sscr__panel,
.sscr__compare {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* The cards must begin on the same inner edge as the Atlas card. */
.sscr__stage {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sscr__card {
    min-width: 0 !important;
    max-width: none !important;
}

/* ------------------------------------------------------------------------
   2. WIDE / TABLET: TWO BALANCED PANELS
   Atlas remains in its wide/tablet geometry above 760px, so comparison does
   the same. This overrides the legacy <=860px stacked rules.
   ------------------------------------------------------------------------ */

@media (min-width: 761px) {
    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            clamp(58px, 6.2vw, 88px)
            minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with,
    .sscr__card--without {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    .sscr__card--with {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .sscr__vs {
        order: 2 !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        z-index: 8 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: relative !important;
        z-index: 9 !important;
        left: auto !important;
        top: auto !important;
        width: clamp(76px, 6.6vw, 94px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        display: block !important;
    }

    .sscr__card--without {
        order: 3 !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
}

/* Narrow desktop / tablet: preserve two columns, but compact the card header
   rather than allowing the text to become crowded. */
@media (min-width: 761px) and (max-width: 980px) {
    .sscr__card--with,
    .sscr__card--without {
        padding: clamp(19px, 2.4vw, 25px) !important;
    }

    .sscr__card-top {
        grid-template-columns:
            clamp(70px, 8.4vw, 84px)
            minmax(0, 1fr) !important;
        align-items: start !important;
        gap: clamp(12px, 1.7vw, 16px) !important;
        margin-bottom: clamp(16px, 2vw, 21px) !important;
    }

    .sscr__badge {
        width: clamp(70px, 8.4vw, 84px) !important;
        height: clamp(70px, 8.4vw, 84px) !important;
        flex-basis: clamp(70px, 8.4vw, 84px) !important;
    }

    .sscr__label {
        margin-bottom: 8px !important;
        padding: 7px 11px !important;
        font-size: clamp(.68rem, 1.28vw, .77rem) !important;
    }

    .sscr__card-title {
        font-size: clamp(1rem, 2vw, 1.28rem) !important;
        line-height: 1.13 !important;
    }

    .sscr__points {
        gap: clamp(13px, 1.7vw, 17px) !important;
    }

    .sscr__points li {
        padding-left: 26px !important;
        font-size: clamp(.88rem, 1.55vw, 1rem) !important;
        line-height: 1.43 !important;
    }
}

/* ------------------------------------------------------------------------
   3. <=760px: MATCH THE ATLAS MOBILE ENVELOPE EXACTLY
   .simme-atlas-portal uses width:min(100%,540px) and padding:12px here.
   The comparison now uses the same geometry and intentionally stacks.
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
    .sscr {
        width: min(100%, 540px) !important;
        max-width: 540px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .sscr__shell,
    .sscr__rail,
    .sscr__stage,
    .sscr__panel,
    .sscr__compare {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sscr__stage {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sscr__compare {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto 0 auto !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: stretch !important;
    }

    .sscr__card--with,
    .sscr__card--without {
        width: 100% !important;
        min-width: 0 !important;
        padding: clamp(20px, 4.5vw, 26px) !important;
    }

    .sscr__card--with {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 0 8px !important;
    }

    .sscr__vs {
        order: 2 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        position: relative !important;
        z-index: 10 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .sscr__vs img {
        position: absolute !important;
        z-index: 11 !important;
        left: 50% !important;
        top: 50% !important;
        width: clamp(70px, 14vw, 82px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
    }

    .sscr__card--without {
        order: 3 !important;
        grid-column: 1 !important;
        grid-row: 3 !important;
        margin: 8px 0 0 !important;
    }

    /* Keep the mobile cards compact. The old <=640px rule stacked the
       mascot above the text and made each panel unnecessarily tall. */
    .sscr__card-top {
        grid-template-columns:
            clamp(76px, 16vw, 92px)
            minmax(0, 1fr) !important;
        align-items: center !important;
        gap: clamp(14px, 3vw, 19px) !important;
        margin-bottom: clamp(17px, 3.5vw, 22px) !important;
    }

    .sscr__badge {
        width: clamp(76px, 16vw, 92px) !important;
        height: clamp(76px, 16vw, 92px) !important;
        flex-basis: clamp(76px, 16vw, 92px) !important;
    }

    .sscr__label {
        margin-bottom: 8px !important;
        padding: 8px 12px !important;
        font-size: clamp(.72rem, 2.45vw, .82rem) !important;
    }

    .sscr__card-title {
        font-size: clamp(1.08rem, 4.05vw, 1.34rem) !important;
        line-height: 1.14 !important;
    }

    .sscr__points {
        gap: clamp(14px, 3.1vw, 18px) !important;
    }

    .sscr__points li {
        padding-left: 27px !important;
        font-size: clamp(.92rem, 3.15vw, 1.03rem) !important;
        line-height: 1.44 !important;
    }
}

/* True narrow handset fallback only. */
@media (max-width: 380px) {
    .sscr__card-top {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .sscr__badge {
        width: 68px !important;
        height: 68px !important;
        flex-basis: 68px !important;
    }

    .sscr__card-title {
        font-size: 1.04rem !important;
    }

    .sscr__points li {
        font-size: .9rem !important;
    }
}

/* =========================================================
   SIMME / SYMSOUL HOMEPAGE — JOURNEY EXPLORER V2.6
   Shortcode: [symsoul_journey_explorer]

   FINAL-DIRECTION DESIGN SYSTEM
   - dark-first Simme surface
   - bright fine-line icon language, not 3D artwork
   - two real homepage category families
   - quick preview drawer -> focused detail canvas
   - persistent routed guide-wire from selected tile to preview
   - smooth mobile bottom-sheet entrance
   - optional LIGHT READING SURFACE only; no separate light design
   - favourites / My SymSoul Journey
   - optional user-entered time + value estimator
   - PDF download + sharing controls supplied by PHP snippet

   ISOLATION:
   All component rules are scoped to .ssjx except the temporary body
   scroll lock used while a detail/journey modal is open.
   ========================================================= */

.ssjx,
.ssjx *,
.ssjx *::before,
.ssjx *::after {
    box-sizing: border-box;
}

.ssjx {
    --ssjx-bg: #03040a;
    --ssjx-bg-2: #070a14;
    --ssjx-panel: rgba(9, 12, 25, .88);
    --ssjx-panel-strong: #0a0d18;
    --ssjx-panel-soft: rgba(17, 21, 39, .76);
    --ssjx-line: rgba(163, 177, 222, .18);
    --ssjx-line-strong: rgba(197, 205, 235, .30);
    --ssjx-text: #f4f5fb;
    --ssjx-text-soft: #bbc1d4;
    --ssjx-muted: #7f879f;
    --ssjx-violet: #a978ff;
    --ssjx-violet-rgb: 169, 120, 255;
    --ssjx-pink: #ed76d5;
    --ssjx-pink-rgb: 237, 118, 213;
    --ssjx-blue: #83b2ff;
    --ssjx-blue-rgb: 131, 178, 255;
    --ssjx-green: #6bfa43;
    --ssjx-green-rgb: 107, 250, 67;
    --ssjx-green-soft: #c9ffb8;
    --ssjx-green-deep: #0a3512;
    --ssjx-radius: 24px;
    --ssjx-card-radius: 17px;
    --ssjx-ease: cubic-bezier(.16, .78, .20, 1);

    position: relative;
    isolation: isolate;
    width: min(1540px, 100%);
    margin: 0 auto;
    padding: clamp(18px, 2.5vw, 38px) clamp(12px, 2vw, 30px) clamp(38px, 4vw, 62px);
    overflow: hidden;
    color: var(--ssjx-text);
    background:
        radial-gradient(circle at 9% 0%, rgba(var(--ssjx-violet-rgb), .075), transparent 24%),
        radial-gradient(circle at 92% 8%, rgba(var(--ssjx-blue-rgb), .06), transparent 22%),
        linear-gradient(180deg, rgba(7, 9, 18, .78), rgba(2, 3, 8, .94));
    border: 1px solid rgba(167, 179, 221, .12);
    border-radius: clamp(24px, 2.3vw, 34px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 24px 70px rgba(0, 0, 0, .25);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ssjx__ambient {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ssjx__ambient::before,
.ssjx__ambient::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.ssjx__ambient::before {
    top: -52px;
    right: clamp(22px, 6vw, 110px);
    width: clamp(210px, 28vw, 440px);
    height: 170px;
    opacity: .52;
    background:
        linear-gradient(116deg, transparent 0 41%, rgba(var(--ssjx-blue-rgb), .55) 41.4% 41.7%, transparent 42.1%),
        linear-gradient(132deg, transparent 0 49%, rgba(var(--ssjx-violet-rgb), .68) 49.4% 49.7%, transparent 50.1%),
        linear-gradient(151deg, transparent 0 57%, rgba(var(--ssjx-pink-rgb), .46) 57.4% 57.7%, transparent 58.1%);
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-violet-rgb), .36));
    transform: rotate(-4deg);
}

.ssjx__ambient::after {
    left: 50%;
    bottom: -160px;
    width: 740px;
    height: 310px;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .12);
    border-radius: 50%;
    box-shadow:
        0 0 80px rgba(var(--ssjx-violet-rgb), .05),
        inset 0 0 60px rgba(var(--ssjx-blue-rgb), .035);
    transform: translateX(-50%) rotate(-5deg);
}

.ssjx button,
.ssjx input {
    font: inherit;
}

.ssjx button {
    -webkit-tap-highlight-color: transparent;
}

.ssjx button:focus-visible,
.ssjx input:focus-visible {
    outline: 2px solid rgba(205, 177, 255, .94);
    outline-offset: 3px;
}

body.ssjx-has-modal {
    overflow: hidden !important;
}

/* =========================================================
   INTRO + JOURNEY LAUNCHER
   ========================================================= */

.ssjx__intro {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(18px, 3vw, 40px);
    margin: 0 0 clamp(18px, 2vw, 30px);
    padding: clamp(4px, .6vw, 10px) clamp(2px, .4vw, 8px) 0;
}

.ssjx__intro-copy {
    max-width: 850px;
}

.ssjx__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #d8bcff;
    font-size: clamp(10px, .78vw, 12px);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ssjx__eyebrow::before {
    width: 24px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, var(--ssjx-pink), var(--ssjx-violet));
    box-shadow: 0 0 8px rgba(var(--ssjx-violet-rgb), .55);
}

.ssjx__title {
    max-width: 820px;
    margin: 0 !important;
    color: var(--ssjx-text) !important;
    font-size: clamp(31px, 3.6vw, 57px) !important;
    font-weight: 550 !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
}

.ssjx__title em {
    color: #cf9aff;
    font-style: normal;
    font-weight: 650;
    text-shadow: 0 0 24px rgba(var(--ssjx-violet-rgb), .22);
}

.ssjx__lede {
    max-width: 800px;
    margin: 16px 0 0 !important;
    color: var(--ssjx-text-soft) !important;
    font-size: clamp(14px, 1.05vw, 17px) !important;
    line-height: 1.58 !important;
}

.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    position: relative;
    display: grid;
    grid-template-columns: 42px auto 34px;
    align-items: center;
    min-width: 224px;
    margin: 0;
    padding: 11px 12px;
    gap: 10px;
    color: #f6f2ff !important;
    background:
        linear-gradient(145deg, rgba(19, 21, 40, .92), rgba(7, 9, 18, .96)) !important;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .40) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 24px rgba(0, 0, 0, .24),
        0 0 22px rgba(var(--ssjx-violet-rgb), .08) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.ssjx__journey-launch:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--ssjx-pink-rgb), .72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 12px 30px rgba(0, 0, 0, .28),
        0 0 28px rgba(var(--ssjx-violet-rgb), .17) !important;
}

.ssjx__journey-launch-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #d992ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .42);
    border-radius: 12px;
    box-shadow: inset 0 0 14px rgba(var(--ssjx-violet-rgb), .06);
}

.ssjx__journey-launch-icon svg {
    width: 23px;
    height: 23px;
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-violet-rgb), .45));
}

.ssjx__journey-launch-copy {
    display: grid;
    min-width: 0;
    text-align: left;
}

.ssjx__journey-launch-copy small {
    color: var(--ssjx-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ssjx__journey-launch-copy strong {
    margin-top: 2px;
    color: #f7f4ff;
    font-size: 15px;
    line-height: 1;
}

.ssjx__journey-count {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #0a0710;
    background: linear-gradient(145deg, #f398de, #a977ff);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(var(--ssjx-pink-rgb), .3);
    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   JOURNEY PROGRESS LINE — GREEN-LED / FULL-SYSTEM ACCENT
   Green is the Journey identity. Blue + violet flashes represent
   the two SymSoul content families travelling through the same path.
   ========================================================= */

.ssjx__progress-line {
    --ssjx-step-node: 36px;
    --ssjx-step-gap: 12px;
    --ssjx-step-line: linear-gradient(
        90deg,
        rgba(var(--ssjx-green-rgb), .30) 0%,
        #58dd36 10%,
        #6bfa43 42%,
        #7dff57 68%,
        #6bfa43 88%,
        rgba(var(--ssjx-green-rgb), .50) 100%
    );

    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    width: min(1040px, 100%);
    margin: 2px auto clamp(24px, 2.3vw, 34px);
    color: #aeb6ca;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.ssjx__progress-line span {
    --ssjx-step-label-width: 8ch;

    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--ssjx-step-gap);
    color: #a8b0c5;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(0, 0, 0, .92);
}

.ssjx__progress-line span:nth-child(2) {
    --ssjx-step-label-width: 7ch;
}

.ssjx__progress-line span:nth-child(3) {
    --ssjx-step-label-width: 4ch;
}

.ssjx__progress-line span:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: calc(var(--ssjx-step-node) + var(--ssjx-step-gap) + var(--ssjx-step-label-width) + 13px);
    right: 12px;
    height: 2px;
    content: "";
    background: var(--ssjx-step-line);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(var(--ssjx-green-rgb), .44),
        0 0 12px rgba(var(--ssjx-green-rgb), .24),
        0 0 18px rgba(var(--ssjx-green-rgb), .10);
    opacity: .74;
    transform: translateY(-50%);
    pointer-events: none;
}

.ssjx__progress-line i {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 0 0 var(--ssjx-step-node);
    width: var(--ssjx-step-node);
    height: var(--ssjx-step-node);
    min-width: var(--ssjx-step-node);
    min-height: var(--ssjx-step-node);
    margin: 0;
    padding: 0;
    color: #d8e2d5;
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--ssjx-green-rgb), .10), transparent 58%),
        #090d13;
    border: 2px solid rgba(var(--ssjx-green-rgb), .62);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .035),
        0 0 10px rgba(var(--ssjx-green-rgb), .20),
        0 0 18px rgba(var(--ssjx-green-rgb), .08);
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-indent: 0;
}

.ssjx__progress-line .is-active {
    color: #f3fff0;
    text-shadow:
        0 0 9px rgba(var(--ssjx-green-rgb), .22),
        0 0 14px rgba(0, 0, 0, .92);
}

.ssjx__progress-line .is-active i {
    color: #fff;
    background:
        radial-gradient(circle at 50% 42%, rgba(var(--ssjx-green-rgb), .20), transparent 58%),
        #09110d;
    border-color: #6bfa43;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .055),
        0 0 7px rgba(var(--ssjx-green-rgb), .62),
        0 0 18px rgba(var(--ssjx-green-rgb), .30),
        -4px 4px 11px rgba(var(--ssjx-violet-rgb), .14),
        4px -3px 11px rgba(var(--ssjx-blue-rgb), .14);
}

/* =========================================================
   CATEGORY GROUPS + GRID
   ========================================================= */

.ssjx__groups {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(22px, 2.15vw, 34px);
}

.ssjx__group {
    --ssjx-group-rgb: var(--ssjx-violet-rgb);
    --ssjx-group-accent: var(--ssjx-violet);
    position: relative;
    overflow: hidden;
    padding: clamp(14px, 1.5vw, 22px);
    background:
        linear-gradient(180deg, rgba(14, 17, 32, .88), rgba(5, 7, 15, .94));
    border: 1px solid rgba(var(--ssjx-group-rgb), .20);
    border-radius: var(--ssjx-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 14px 32px rgba(0, 0, 0, .16);
}

.ssjx__group::before {
    position: absolute;
    top: -1px;
    left: 8%;
    width: 36%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--ssjx-group-rgb), .78), transparent);
    box-shadow: 0 0 10px rgba(var(--ssjx-group-rgb), .42);
}

.ssjx__group--blue {
    --ssjx-group-rgb: var(--ssjx-blue-rgb);
    --ssjx-group-accent: var(--ssjx-blue);
}

.ssjx__group-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

.ssjx__group-symbol {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ssjx-group-accent);
    background: rgba(var(--ssjx-group-rgb), .045);
    border: 1px solid rgba(var(--ssjx-group-rgb), .32);
    border-radius: 13px;
    box-shadow: inset 0 0 16px rgba(var(--ssjx-group-rgb), .04);
}

.ssjx__group-symbol svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-group-rgb), .42));
}

.ssjx__group-head h3 {
    margin: 0 !important;
    color: #f4f5fb !important;
    font-size: clamp(17px, 1.28vw, 21px) !important;
    font-weight: 650 !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
}

.ssjx__group-head p {
    margin: 4px 0 0 !important;
    color: var(--ssjx-muted) !important;
    font-size: clamp(10px, .72vw, 12px) !important;
    line-height: 1.35 !important;
}

.ssjx__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(11px, .9vw, 14px);
}

.ssjx__card {
    position: relative;
    min-width: 0;
    min-height: clamp(112px, 9.8vw, 148px);
    overflow: hidden;
    background:
        linear-gradient(155deg, rgba(16, 19, 34, .91), rgba(7, 9, 17, .98));
    border: 1px solid rgba(159, 169, 205, .16);
    border-radius: var(--ssjx-card-radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 260ms ease,
        background 260ms ease;
}

.ssjx__card--last {
    grid-column: 1 / -1;
    min-height: 84px;
}

.ssjx__card::before {
    position: absolute;
    inset: -1px;
    content: "";
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .08), transparent 38% 70%, rgba(var(--ssjx-group-rgb), .035));
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.ssjx__card:hover,
.ssjx__card.is-active,
.ssjx__card.is-saved {
    transform: translateY(-2px);
    border-color: rgba(var(--ssjx-group-rgb), .52);
    box-shadow:
        0 0 0 1px rgba(var(--ssjx-group-rgb), .08),
        0 8px 22px rgba(0, 0, 0, .22),
        0 0 20px rgba(var(--ssjx-group-rgb), .10);
}

.ssjx__card.is-active {
    border-color: rgba(var(--ssjx-group-rgb), .86);
    box-shadow:
        0 0 0 1px rgba(var(--ssjx-group-rgb), .18),
        0 0 22px rgba(var(--ssjx-group-rgb), .20),
        inset 0 0 22px rgba(var(--ssjx-group-rgb), .045);
}

.ssjx__card:hover::before,
.ssjx__card.is-active::before,
.ssjx__card.is-saved::before {
    opacity: 1;
}

.ssjx__card-main,
.ssjx__card-main:hover,
.ssjx__card-main:focus,
.ssjx__card-main:active {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr) 28px;
    justify-items: center;
    align-content: center;
    width: 100%;
    min-height: inherit;
    margin: 0;
    padding: 15px 10px 11px;
    gap: 8px;
    color: #e7e9f3 !important;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__card--last .ssjx__card-main {
    grid-template-columns: 56px minmax(0, 1fr) 36px;
    grid-template-rows: 1fr;
    justify-items: start;
    align-items: center;
    min-height: 84px;
    padding: 10px 50px 10px 12px;
    text-align: left;
}

.ssjx__card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--ssjx-group-accent);
    border: 1px solid rgba(var(--ssjx-group-rgb), .20);
    border-radius: 12px;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.ssjx__card-icon svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .36));
}

.ssjx__card:hover .ssjx__card-icon,
.ssjx__card.is-active .ssjx__card-icon {
    border-color: rgba(var(--ssjx-group-rgb), .65);
    box-shadow:
        inset 0 0 12px rgba(var(--ssjx-group-rgb), .07),
        0 0 15px rgba(var(--ssjx-group-rgb), .17);
    transform: translateY(-1px);
}

.ssjx__card-title {
    align-self: start;
    max-width: 130px;
    color: #e9ebf4;
    font-size: clamp(10px, .74vw, 12px);
    font-weight: 650;
    line-height: 1.24;
    text-wrap: balance;
}

.ssjx__card--last .ssjx__card-title {
    align-self: center;
    max-width: none;
    font-size: clamp(12px, .92vw, 14px);
}

.ssjx__card-arrow {
    position: relative;
    align-self: end;
    display: grid;
    place-items: center;
    width: 34px;
    height: 24px;
    margin-bottom: 1px;
    color: rgba(var(--ssjx-group-rgb), .96);
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .14), rgba(var(--ssjx-group-rgb), .055));
    border: 1px solid rgba(var(--ssjx-group-rgb), .42);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 0 rgba(var(--ssjx-group-rgb), 0);
    opacity: .18;
    transform: translateX(-7px) scale(.92);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(.16, .78, .22, 1),
        color 180ms ease,
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ssjx__card-arrow::before {
    position: absolute;
    left: -9px;
    top: 50%;
    width: 10px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--ssjx-group-rgb), .8));
    box-shadow: 0 0 6px rgba(var(--ssjx-group-rgb), .28);
    opacity: 0;
    transform: translateY(-50%) scaleX(.45);
    transform-origin: 100% 50%;
    transition: opacity 180ms ease, transform 220ms ease;
    pointer-events: none;
}

.ssjx__card-arrow svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.15;
    filter: drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .30));
    transition: transform 220ms cubic-bezier(.16, .78, .22, 1), filter 220ms ease;
}

.ssjx__card--last .ssjx__card-arrow {
    align-self: center;
    justify-self: end;
    opacity: .52;
    transform: none;
}

.ssjx__card:hover .ssjx__card-arrow,
.ssjx__card:focus-within .ssjx__card-arrow,
.ssjx__card.is-active .ssjx__card-arrow {
    color: #f8f5ff;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .30), rgba(var(--ssjx-group-rgb), .12));
    border-color: rgba(var(--ssjx-group-rgb), .90);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .10),
        0 0 14px rgba(var(--ssjx-group-rgb), .28);
    opacity: 1;
    transform: translateX(0) scale(1);
}

.ssjx__card:hover .ssjx__card-arrow::before,
.ssjx__card:focus-within .ssjx__card-arrow::before,
.ssjx__card.is-active .ssjx__card-arrow::before {
    opacity: .9;
    transform: translateY(-50%) scaleX(1);
}

.ssjx__card:hover .ssjx__card-arrow svg,
.ssjx__card:focus-within .ssjx__card-arrow svg {
    transform: translateX(1.5px);
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-group-rgb), .46));
}

.ssjx__card.is-active .ssjx__card-arrow svg {
    animation: ssjx-card-arrow-arrive 420ms cubic-bezier(.16, .78, .22, 1) both;
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-group-rgb), .52));
}

.ssjx__card-main:active .ssjx__card-arrow {
    background:
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .38), rgba(var(--ssjx-group-rgb), .16));
    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, .20),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .14),
        0 0 16px rgba(var(--ssjx-group-rgb), .31);
}

@keyframes ssjx-card-arrow-arrive {
    0% { transform: translateX(-2px); opacity: .72; }
    58% { transform: translateX(3px); opacity: 1; }
    100% { transform: translateX(1.5px); opacity: 1; }
}

.ssjx__card-save,
.ssjx__card-save:hover,
.ssjx__card-save:focus,
.ssjx__card-save:active {
    position: absolute;
    z-index: 5;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    color: rgba(209, 214, 235, .56) !important;
    background: rgba(4, 6, 13, .72) !important;
    border: 1px solid rgba(170, 181, 217, .15) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: .68;
    -webkit-appearance: none;
    appearance: none;
    transition: color 180ms ease, opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ssjx__card-save svg {
    width: 14px;
    height: 14px;
}

.ssjx__card:hover .ssjx__card-save,
.ssjx__card-save:focus-visible,
.ssjx__card-save.is-saved {
    opacity: 1;
}

.ssjx__card-save.is-saved {
    color: #f08cdd !important;
    border-color: rgba(var(--ssjx-pink-rgb), .52) !important;
    box-shadow: 0 0 12px rgba(var(--ssjx-pink-rgb), .14) !important;
}

.ssjx__card-save.is-saved svg {
    fill: currentColor;
}


/* =========================================================
   SELECTED-CATEGORY GUIDE WIRE — V1.5 ROUTED / PERSISTENT
   ---------------------------------------------------------
   The selected tile grows a bright, rounded guide line towards
   the preview. On wide screens the line travels through the
   clear gutters between category tiles and then uses the central
   corridor between the two large category panels. On stacked
   tablet layouts it stays in the nearest safe internal gutter.

   V1.5 deliberately keeps the completed bright line visible.
   It no longer relies on a dash state that can leave only the
   dim ghost path visible after scrolling or re-layout.
   ========================================================= */

.ssjx__guide-wire {
    --ssjx-guide-rgb: var(--ssjx-violet-rgb);

    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.ssjx__guide-wire.is-visible {
    opacity: 1;
}

.ssjx__guide-wire-ghost,
.ssjx__guide-wire-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ssjx__guide-wire-ghost {
    stroke: rgba(var(--ssjx-guide-rgb), .20);
    stroke-width: 7;
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-guide-rgb), .12));
}

.ssjx__guide-wire-path {
    stroke: rgb(var(--ssjx-guide-rgb));
    stroke-width: 3;
    opacity: 1;
    filter:
        drop-shadow(0 0 3px rgba(var(--ssjx-guide-rgb), .98))
        drop-shadow(0 0 11px rgba(var(--ssjx-guide-rgb), .76))
        drop-shadow(0 0 24px rgba(var(--ssjx-guide-rgb), .28));
}

.ssjx__guide-wire.is-drawing .ssjx__guide-wire-path {
    filter:
        drop-shadow(0 0 4px rgba(var(--ssjx-guide-rgb), 1))
        drop-shadow(0 0 13px rgba(var(--ssjx-guide-rgb), .82))
        drop-shadow(0 0 26px rgba(var(--ssjx-guide-rgb), .30));
}

.ssjx__guide-wire-start,
.ssjx__guide-wire-end,
.ssjx__guide-wire-halo {
    fill: rgb(var(--ssjx-guide-rgb));
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
}

.ssjx__guide-wire-start {
    opacity: .95;
    filter: drop-shadow(0 0 8px rgba(var(--ssjx-guide-rgb), .74));
}

.ssjx__guide-wire-halo {
    opacity: 0;
    filter: blur(.25px) drop-shadow(0 0 12px rgba(var(--ssjx-guide-rgb), .70));
}

.ssjx__guide-wire-end {
    opacity: 0;
    filter:
        drop-shadow(0 0 5px rgba(var(--ssjx-guide-rgb), 1))
        drop-shadow(0 0 15px rgba(var(--ssjx-guide-rgb), .85))
        drop-shadow(0 0 28px rgba(var(--ssjx-guide-rgb), .40));
}

.ssjx__guide-wire.is-arrived .ssjx__guide-wire-end {
    opacity: 1;
    animation: ssjx-guide-end-pulse 2.35s ease-in-out infinite;
}

.ssjx__guide-wire.is-arrived .ssjx__guide-wire-halo {
    opacity: .18;
    animation: ssjx-guide-halo-pulse 2.35s ease-in-out infinite;
}

@keyframes ssjx-guide-end-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: .90;
    }

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

@keyframes ssjx-guide-halo-pulse {
    0%,
    100% {
        transform: scale(.76);
        opacity: .10;
    }

    50% {
        transform: scale(1.20);
        opacity: .27;
    }
}

@media (max-width: 720px) {
    .ssjx__guide-wire {
        display: none !important;
    }
}


/* V1.5: give the guide wire a real visual corridor between the category
 * panels and the preview instead of forcing it to sit on a panel edge. */
@media (min-width: 721px) {
    .ssjx__groups {
        margin-bottom: 2px;
    }

    .ssjx__group {
        overflow: visible;
    }
}

/* =========================================================
   PREVIEW DRAWER
   ========================================================= */

.ssjx__preview[hidden] {
    display: none !important;
}

.ssjx__preview {
    /*
     * V1.3: the preview inherits the colour family of the category that
     * opened it. Creative / Personal stays violet-pink; Where SymSoul Helps
     * switches to the same clean blue used by its category icons.
     */
    --ssjx-preview-rgb: var(--ssjx-violet-rgb);
    --ssjx-preview-accent: var(--ssjx-violet);
    --ssjx-preview-secondary-rgb: var(--ssjx-pink-rgb);
    --ssjx-preview-secondary: var(--ssjx-pink);
    --ssjx-preview-button-a: #7446d8;
    --ssjx-preview-button-b: #ad55df;
    --ssjx-preview-button-c: #e059c7;
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: clamp(110px, 12vw, 170px) minmax(0, 1fr);
    align-items: stretch;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 42%, rgba(var(--ssjx-preview-rgb), .13), transparent 20%),
        linear-gradient(135deg, rgba(15, 18, 34, .98), rgba(5, 7, 15, .99));
    border: 1px solid rgba(var(--ssjx-preview-rgb), .42);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 18px 45px rgba(0, 0, 0, .28),
        0 0 28px rgba(var(--ssjx-preview-rgb), .10);
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 400ms var(--ssjx-ease), margin-top 300ms ease, opacity 260ms ease, transform 360ms var(--ssjx-ease);
}

.ssjx__preview[data-ssjx-theme="blue"] {
    --ssjx-preview-rgb: var(--ssjx-blue-rgb);
    --ssjx-preview-accent: var(--ssjx-blue);
    --ssjx-preview-secondary-rgb: 103, 216, 255;
    --ssjx-preview-secondary: #67d8ff;
    --ssjx-preview-button-a: #315fc9;
    --ssjx-preview-button-b: #4d86ee;
    --ssjx-preview-button-c: #74b9ff;
}

.ssjx__preview.is-open {
    max-height: 620px;
    margin-top: 28px;
    opacity: 1;
    transform: translateY(0);
}

.ssjx__preview-icon {
    display: grid;
    place-items: center;
    min-height: 230px;
    color: var(--ssjx-preview-accent);
    border-right: 1px solid rgba(var(--ssjx-preview-rgb), .30);
    background:
        radial-gradient(circle at center, rgba(var(--ssjx-preview-rgb), .16), transparent 48%);
}

.ssjx__preview-icon svg {
    width: clamp(62px, 6vw, 88px);
    height: clamp(62px, 6vw, 88px);
    stroke-width: 1.25;
    filter:
        drop-shadow(0 0 8px rgba(var(--ssjx-preview-rgb), .62))
        drop-shadow(0 0 22px rgba(var(--ssjx-preview-secondary-rgb), .22));
}

.ssjx__preview-copy {
    position: relative;
    padding: clamp(18px, 2vw, 28px);
}

.ssjx__preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.ssjx__preview-meta > span {
    color: var(--ssjx-preview-accent);
    opacity: .82;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ssjx__preview-close,
.ssjx__preview-close:hover,
.ssjx__preview-close:focus,
.ssjx__preview-close:active {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    color: #9ca3b8 !important;
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(178, 188, 219, .13) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    cursor: pointer;
}

.ssjx__preview-close svg {
    width: 15px;
    height: 15px;
}

.ssjx__preview h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(22px, 2.1vw, 34px) !important;
    font-weight: 630 !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
}

.ssjx__preview-summary {
    max-width: 780px;
    margin: 9px 0 14px !important;
    color: #d9dce7 !important;
    font-size: clamp(14px, 1.02vw, 17px) !important;
    line-height: 1.45 !important;
}

.ssjx__preview-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 18px !important;
    padding: 0 !important;
    gap: 8px;
    list-style: none !important;
}

.ssjx__preview-points li {
    position: relative;
    min-height: 72px;
    margin: 0 !important;
    padding: 13px 13px 13px 30px;
    color: #abb2c6;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(174, 185, 217, .10);
    border-radius: 13px;
    font-size: clamp(11px, .76vw, 13px);
    line-height: 1.42;
}

.ssjx__preview-points li::before {
    position: absolute;
    top: 17px;
    left: 12px;
    width: 7px;
    height: 7px;
    content: "";
    border: 1px solid var(--ssjx-preview-accent);
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(var(--ssjx-preview-rgb), .58);
}

.ssjx__preview-actions,
.ssjx__journey-export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

@media (min-width: 721px) {
    .ssjx__preview-actions .ssjx__button--primary {
        min-width: 168px;
    }

    .ssjx__preview-actions .ssjx__button--ghost {
        min-width: 186px;
    }
}

.ssjx__button,
.ssjx__button:hover,
.ssjx__button:focus,
.ssjx__button:focus-visible,
.ssjx__button:active {
    /*
     * BUTTON GEOMETRY LOCK
     * Keep the exact same dimensions and typography in every interaction state.
     * This prevents theme/browser :active rules from shrinking the control or
     * changing the text metrics while it is being clicked.
     */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 19px !important;
    gap: 9px;
    overflow: hidden;
    color: #e9eaf3 !important;
    background: rgba(13, 16, 29, .90) !important;
    border: 1px solid rgba(171, 183, 217, .27) !important;
    border-radius: 13px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 7px 18px rgba(0, 0, 0, .12) !important;
    font-family: inherit !important;
    font-size: clamp(13px, .88vw, 15px) !important;
    font-style: normal !important;
    font-weight: 720 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-text-size-adjust: 100%;
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
    transition:
        color 180ms ease,
        border-color 190ms ease,
        box-shadow 220ms ease,
        background 220ms ease,
        filter 180ms ease !important;
}

/* A restrained travelling highlight gives rollover feedback without moving the button. */
.ssjx__button::before {
    position: absolute;
    z-index: 0;
    top: -35%;
    bottom: -35%;
    left: -42%;
    width: 30%;
    content: "";
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .17), transparent);
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
    transition: transform 520ms var(--ssjx-ease), opacity 180ms ease;
    pointer-events: none;
}

.ssjx__button > * {
    position: relative;
    z-index: 1;
}

.ssjx__button svg {
    flex: 0 0 auto;
    width: 17px !important;
    height: 17px !important;
    transform: none !important;
    transition: color 180ms ease, filter 180ms ease, opacity 180ms ease !important;
}

.ssjx__button:hover {
    filter: brightness(1.06);
}

.ssjx__button:hover::before {
    opacity: .86;
    transform: skewX(-18deg) translateX(510%);
}

/* Press feedback is produced inside the surface, never by shrinking the control. */
.ssjx__button:active {
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
    filter: brightness(.98) saturate(1.04);
    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 4px 12px rgba(0, 0, 0, .12) !important;
}

.ssjx__button--primary,
.ssjx__button--primary:hover,
.ssjx__button--primary:focus,
.ssjx__button--primary:focus-visible,
.ssjx__button--primary:active {
    color: #fff !important;
    background:
        linear-gradient(115deg, rgba(112, 67, 214, .99), rgba(175, 85, 223, .98) 56%, rgba(224, 89, 199, .96)) !important;
    border-color: rgba(220, 164, 255, .78) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .20),
        inset 0 -1px 0 rgba(60, 24, 105, .20),
        0 7px 18px rgba(0, 0, 0, .14),
        0 0 19px rgba(var(--ssjx-violet-rgb), .21) !important;
}

.ssjx__button--primary:hover {
    border-color: rgba(239, 196, 255, .94) !important;
    background:
        linear-gradient(115deg, rgba(123, 73, 230, 1), rgba(191, 91, 232, 1) 55%, rgba(237, 101, 209, .99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        inset 0 -1px 0 rgba(60, 24, 105, .16),
        0 8px 20px rgba(0, 0, 0, .16),
        0 0 28px rgba(var(--ssjx-pink-rgb), .31) !important;
}

.ssjx__button--primary:active {
    background:
        linear-gradient(115deg, rgba(99, 57, 197, .99), rgba(158, 72, 207, .99) 55%, rgba(205, 74, 179, .98)) !important;
    border-color: rgba(229, 181, 255, .86) !important;
    box-shadow:
        inset 0 3px 8px rgba(39, 13, 75, .34),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 4px 13px rgba(0, 0, 0, .16),
        0 0 20px rgba(var(--ssjx-violet-rgb), .22) !important;
}

/*
 * PREVIEW ACTION THEME
 * The preview actions now use the same colour family as the category grid.
 * This keeps a blue business selection blue all the way through the preview,
 * while Creative / Personal retains the violet-pink SymSoul treatment.
 */
.ssjx__preview .ssjx__button--primary,
.ssjx__preview .ssjx__button--primary:hover,
.ssjx__preview .ssjx__button--primary:focus,
.ssjx__preview .ssjx__button--primary:active {
    background:
        linear-gradient(
            115deg,
            var(--ssjx-preview-button-a),
            var(--ssjx-preview-button-b) 56%,
            var(--ssjx-preview-button-c)
        ) !important;
    border-color: rgba(var(--ssjx-preview-rgb), .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 20px rgba(var(--ssjx-preview-rgb), .28) !important;
}

.ssjx__preview .ssjx__button--primary:hover,
.ssjx__preview .ssjx__button--primary:focus-visible {
    border-color: rgba(var(--ssjx-preview-secondary-rgb), .98) !important;
    background:
        linear-gradient(
            115deg,
            color-mix(in srgb, var(--ssjx-preview-button-a) 90%, white 10%),
            color-mix(in srgb, var(--ssjx-preview-button-b) 90%, white 10%) 56%,
            color-mix(in srgb, var(--ssjx-preview-button-c) 90%, white 10%)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 8px 20px rgba(0, 0, 0, .14),
        0 0 29px rgba(var(--ssjx-preview-rgb), .40),
        0 0 17px rgba(var(--ssjx-preview-secondary-rgb), .22) !important;
}

.ssjx__preview .ssjx__button--primary:active {
    background:
        linear-gradient(
            115deg,
            color-mix(in srgb, var(--ssjx-preview-button-a) 84%, black 16%),
            color-mix(in srgb, var(--ssjx-preview-button-b) 84%, black 16%) 56%,
            color-mix(in srgb, var(--ssjx-preview-button-c) 84%, black 16%)
        ) !important;
    border-color: rgba(var(--ssjx-preview-rgb), .92) !important;
    box-shadow:
        inset 0 3px 9px rgba(1, 4, 12, .28),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 4px 12px rgba(0, 0, 0, .16),
        0 0 21px rgba(var(--ssjx-preview-rgb), .28) !important;
}

.ssjx__preview .ssjx__button--ghost,
.ssjx__preview .ssjx__button--ghost:hover,
.ssjx__preview .ssjx__button--ghost:focus,
.ssjx__preview .ssjx__button--ghost:active {
    border-color: rgba(var(--ssjx-preview-rgb), .48) !important;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-preview-rgb), .075), rgba(10, 13, 25, .92)) !important;
}

.ssjx__preview .ssjx__button--ghost svg {
    color: var(--ssjx-preview-accent);
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-preview-rgb), .34));
}

.ssjx__preview .ssjx__button--ghost:hover,
.ssjx__preview .ssjx__button--ghost:focus-visible {
    color: #fff !important;
    border-color: rgba(var(--ssjx-preview-rgb), .88) !important;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-preview-rgb), .19), rgba(15, 19, 35, .98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 7px 18px rgba(0, 0, 0, .12),
        0 0 21px rgba(var(--ssjx-preview-rgb), .18) !important;
}

.ssjx__preview .ssjx__button--ghost:active {
    color: #f5f7ff !important;
    border-color: rgba(var(--ssjx-preview-rgb), .80) !important;
    background:
        linear-gradient(135deg, rgba(var(--ssjx-preview-rgb), .13), rgba(8, 11, 23, .98)) !important;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 4px 12px rgba(0, 0, 0, .12),
        0 0 16px rgba(var(--ssjx-preview-rgb), .13) !important;
}

.ssjx__preview .ssjx__button--ghost.is-saved,
.ssjx__preview .ssjx__button--primary.is-saved {
    border-color: rgba(var(--ssjx-preview-rgb), .88) !important;
    box-shadow:
        inset 0 0 13px rgba(var(--ssjx-preview-rgb), .08),
        0 0 20px rgba(var(--ssjx-preview-rgb), .20) !important;
}

.ssjx__preview .ssjx__button--ghost.is-saved svg,
.ssjx__preview .ssjx__button--primary.is-saved svg {
    color: var(--ssjx-preview-accent);
    fill: currentColor;
}

.ssjx__button--ghost.is-saved,
.ssjx__button--primary.is-saved {
    border-color: rgba(var(--ssjx-pink-rgb), .60) !important;
    box-shadow: 0 0 18px rgba(var(--ssjx-pink-rgb), .12) !important;
}

.ssjx__button--ghost.is-saved svg,
.ssjx__button--primary.is-saved svg {
    fill: currentColor;
}

.ssjx__button--wide {
    width: 100%;
}

.ssjx__button:disabled,
.ssjx__socials button:disabled {
    opacity: .34 !important;
    cursor: default !important;
    filter: grayscale(.2);
    transform: none !important;
}

/* =========================================================
   VALUE STRIP
   ========================================================= */

.ssjx__value-strip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) repeat(4, minmax(0, 1fr));
    align-items: stretch;
    margin-top: clamp(18px, 2vw, 28px);
    overflow: hidden;
    background: rgba(7, 9, 17, .73);
    border: 1px solid rgba(164, 174, 207, .14);
    border-radius: 17px;
}

.ssjx__value-intro,
.ssjx__value-chip {
    min-width: 0;
    padding: 14px 16px;
}

.ssjx__value-intro {
    display: grid;
    align-content: center;
    border-right: 1px solid rgba(164, 174, 207, .12);
}

.ssjx__value-intro strong,
.ssjx__value-chip strong {
    color: #e8eaf3;
    font-size: 12px;
}

.ssjx__value-intro span,
.ssjx__value-chip small {
    margin-top: 4px;
    color: #7f879c;
    font-size: 9px;
    line-height: 1.35;
}

.ssjx__value-chip {
    position: relative;
    display: grid;
    align-content: center;
    padding-left: 44px;
    border-right: 1px solid rgba(164, 174, 207, .08);
}

.ssjx__value-chip:last-child {
    border-right: 0;
}

.ssjx__value-chip > span {
    position: absolute;
    top: 50%;
    left: 14px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    color: #b98bff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .33);
    border-radius: 7px;
    font-size: 8px;
    font-weight: 900;
    transform: translateY(-50%);
}

/* =========================================================
   MODALS — COMMON
   ========================================================= */

.ssjx__modal[hidden] {
    display: none !important;
}

.ssjx__modal {
    position: fixed;
    z-index: 1000010;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2vw, 26px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 0s linear 240ms;
}

.ssjx__modal.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.ssjx__modal-backdrop,
.ssjx__modal-backdrop:hover,
.ssjx__modal-backdrop:focus,
.ssjx__modal-backdrop:active {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgba(0, 2, 8, .80) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: default;
}

.ssjx__icon-button,
.ssjx__icon-button:hover,
.ssjx__icon-button:focus,
.ssjx__icon-button:active {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    color: inherit !important;
    background: transparent !important;
    border: 1px solid currentColor !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    opacity: .72;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__icon-button:hover {
    opacity: 1;
}

.ssjx__icon-button svg {
    width: 18px;
    height: 18px;
}

/* =========================================================
   DETAIL CANVAS — DARK FIRST / LIGHT READING ONLY
   ========================================================= */

.ssjx__detail-canvas {
    --detail-bg: #0b0e18;
    --detail-panel: #101522;
    --detail-panel-soft: #0e121e;
    --detail-text: #f5f6fb;
    --detail-soft: #b7bdce;
    --detail-muted: #7e879e;
    --detail-line: rgba(182, 192, 220, .15);
    --detail-chip: rgba(169, 120, 255, .08);
    --detail-shadow: rgba(0, 0, 0, .48);

    position: relative;
    z-index: 2;
    width: min(1080px, 100%);
    max-height: min(92vh, 900px);
    max-height: min(92dvh, 900px);
    overflow: auto;
    color: var(--detail-text);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-violet-rgb), .075), transparent 26%),
        var(--detail-bg);
    border: 1px solid rgba(var(--ssjx-violet-rgb), .24);
    border-radius: 25px;
    box-shadow:
        0 28px 90px var(--detail-shadow),
        0 0 0 1px rgba(255, 255, 255, .02),
        0 0 42px rgba(var(--ssjx-violet-rgb), .07);
    opacity: 0;
    transform: translateY(20px) scale(.975);
    transition: opacity 280ms ease, transform 360ms var(--ssjx-ease), background 250ms ease, color 250ms ease;
}

.ssjx__modal.is-open .ssjx__detail-canvas {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ssjx__detail-canvas[data-ssjx-reading="light"] {
    --detail-bg: #f8f8fc;
    --detail-panel: #ffffff;
    --detail-panel-soft: #f1f1f8;
    --detail-text: #171824;
    --detail-soft: #494d5f;
    --detail-muted: #737789;
    --detail-line: rgba(60, 66, 91, .13);
    --detail-chip: rgba(127, 74, 220, .07);
    --detail-shadow: rgba(0, 0, 0, .30);
    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-violet-rgb), .075), transparent 28%),
        var(--detail-bg);
    border-color: rgba(169, 120, 255, .28);
}

.ssjx__detail-toolbar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px clamp(14px, 2vw, 24px);
    background: color-mix(in srgb, var(--detail-bg) 90%, transparent);
    border-bottom: 1px solid var(--detail-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
    .ssjx__detail-toolbar {
        background: var(--detail-bg);
    }
}

.ssjx__detail-back,
.ssjx__detail-back:hover,
.ssjx__detail-back:focus,
.ssjx__detail-back:active,
.ssjx__reading-toggle,
.ssjx__reading-toggle:hover,
.ssjx__reading-toggle:focus,
.ssjx__reading-toggle:active {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 11px;
    gap: 7px;
    color: var(--detail-soft) !important;
    background: transparent !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__detail-back svg {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
}

.ssjx__reading-toggle svg {
    width: 16px;
    height: 16px;
    color: #c888ff;
}

.ssjx__detail-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--detail-muted);
}

.ssjx__detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
    gap: clamp(24px, 3vw, 42px);
    padding: clamp(24px, 3vw, 42px);
}

.ssjx__detail-heading {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}

.ssjx__detail-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #b276ff;
    background: var(--detail-chip);
    border: 1px solid rgba(var(--ssjx-violet-rgb), .28);
    border-radius: 18px;
    box-shadow:
        inset 0 0 18px rgba(var(--ssjx-violet-rgb), .05),
        0 0 16px rgba(var(--ssjx-violet-rgb), .08);
}

.ssjx__detail-icon svg {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-violet-rgb), .28));
}

.ssjx__detail-section,
.ssjx__detail-kicker,
.ssjx__detail-side-label {
    color: #9b6fe8;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ssjx__detail-heading h3 {
    margin: 5px 0 0 !important;
    color: var(--detail-text) !important;
    font-size: clamp(27px, 3vw, 42px) !important;
    font-weight: 650 !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
}

.ssjx__detail-summary {
    max-width: 690px;
    margin: 21px 0 13px !important;
    color: var(--detail-soft) !important;
    font-size: clamp(16px, 1.35vw, 20px) !important;
    line-height: 1.45 !important;
}

.ssjx__detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ssjx__detail-tags span {
    padding: 7px 10px;
    color: #a87ce9;
    background: var(--detail-chip);
    border: 1px solid rgba(var(--ssjx-violet-rgb), .17);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.ssjx__detail-block {
    margin-top: clamp(26px, 3vw, 38px);
    padding-top: 22px;
    border-top: 1px solid var(--detail-line);
}

.ssjx__detail-body {
    display: grid;
    gap: 13px;
    margin-top: 13px;
}

.ssjx__detail-body p {
    margin: 0 !important;
    color: var(--detail-soft) !important;
    font-size: clamp(14px, 1.03vw, 16px) !important;
    line-height: 1.63 !important;
}

.ssjx__detail-body p:first-child {
    color: var(--detail-text) !important;
    font-weight: 600;
}

.ssjx__detail-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.ssjx__detail-value-grid div {
    min-height: 96px;
    padding: 14px;
    background: var(--detail-panel-soft);
    border: 1px solid var(--detail-line);
    border-radius: 14px;
}

.ssjx__detail-value-grid strong {
    display: block;
    color: var(--detail-text);
    font-size: 12px;
}

.ssjx__detail-value-grid span {
    display: block;
    margin-top: 6px;
    color: var(--detail-muted);
    font-size: 10px;
    line-height: 1.45;
}

.ssjx__detail-side {
    display: grid;
    align-content: start;
    gap: 11px;
}

.ssjx__detail-side-card {
    padding: 18px;
    color: var(--detail-text);
    background: var(--detail-panel);
    border: 1px solid var(--detail-line);
    border-radius: 17px;
}

.ssjx__detail-side-card h4 {
    margin: 8px 0 8px !important;
    color: var(--detail-text) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
}

.ssjx__detail-side-card p {
    margin: 0 0 15px !important;
    color: var(--detail-muted) !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
}

.ssjx__detail-canvas[data-ssjx-reading="light"] .ssjx__button--ghost {
    color: #363746 !important;
    background: #fff !important;
    border-color: rgba(63, 66, 91, .16) !important;
}

/* =========================================================
   JOURNEY PANEL
   ========================================================= */

.ssjx__journey-panel {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    max-height: min(93vh, 930px);
    max-height: min(93dvh, 930px);
    overflow: auto;
    color: #f4f5fb;
    background:
        radial-gradient(circle at 8% 4%, rgba(var(--ssjx-violet-rgb), .10), transparent 25%),
        radial-gradient(circle at 93% 0%, rgba(var(--ssjx-blue-rgb), .07), transparent 21%),
        #080b14;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .24);
    border-radius: 25px;
    box-shadow:
        0 30px 100px rgba(0, 0, 0, .54),
        0 0 40px rgba(var(--ssjx-violet-rgb), .06);
    opacity: 0;
    transform: translateY(22px) scale(.975);
    transition: opacity 280ms ease, transform 360ms var(--ssjx-ease);
}

.ssjx__modal.is-open .ssjx__journey-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ssjx__journey-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding: clamp(22px, 3vw, 38px) clamp(22px, 3vw, 40px) 20px;
    border-bottom: 1px solid rgba(178, 188, 219, .11);
}

.ssjx__journey-head h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(28px, 3vw, 43px) !important;
    font-weight: 620 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
}

.ssjx__journey-head p {
    max-width: 700px;
    margin: 9px 0 0 !important;
    color: #8f96aa !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.ssjx__journey-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 720px;
    margin: 18px auto 0;
    padding: 0 28px;
    color: #727a90;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ssjx__journey-progress span {
    position: relative;
    display: grid;
    grid-template-columns: 15px 1fr;
    align-items: center;
    gap: 7px;
}

.ssjx__journey-progress span:not(:last-child)::after {
    position: absolute;
    left: 13px;
    right: 9px;
    top: 6px;
    height: 1px;
    content: "";
    background: rgba(150, 161, 195, .17);
}

.ssjx__journey-progress i {
    position: relative;
    z-index: 2;
    width: 12px;
    height: 12px;
    background: #0a0d16;
    border: 1px solid rgba(143, 153, 187, .35);
    border-radius: 50%;
}

.ssjx__journey-progress .is-done,
.ssjx__journey-progress .is-active {
    color: #cbb5ee;
}

.ssjx__journey-progress .is-done i,
.ssjx__journey-progress .is-active i {
    border-color: rgba(var(--ssjx-violet-rgb), .75);
    box-shadow: 0 0 8px rgba(var(--ssjx-violet-rgb), .25);
}

.ssjx__journey-progress .is-done i {
    background: var(--ssjx-violet);
}

.ssjx__journey-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
    gap: clamp(14px, 2vw, 22px);
    padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px);
}

.ssjx__journey-saved,
.ssjx__journey-value {
    min-width: 0;
    padding: clamp(16px, 2vw, 22px);
    background: rgba(13, 16, 29, .72);
    border: 1px solid rgba(171, 182, 215, .12);
    border-radius: 18px;
}

.ssjx__journey-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.ssjx__journey-section-head > div {
    display: grid;
}

.ssjx__journey-section-head span,
.ssjx__journey-value-head span,
.ssjx__journey-export-label {
    color: #8c76aa;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ssjx__journey-section-head strong,
.ssjx__journey-value-head strong {
    margin-top: 4px;
    color: #eef0f7;
    font-size: 14px;
}

.ssjx__journey-section-head button,
.ssjx__journey-section-head button:hover,
.ssjx__journey-section-head button:focus,
.ssjx__journey-section-head button:active {
    margin: 0;
    padding: 7px 9px;
    color: #777f94 !important;
    background: transparent !important;
    border: 1px solid rgba(151, 161, 194, .14) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 9px;
    cursor: pointer;
}

.ssjx__journey-empty {
    display: grid;
    place-items: center;
    min-height: 270px;
    padding: 24px;
    text-align: center;
    border: 1px dashed rgba(var(--ssjx-violet-rgb), .20);
    border-radius: 15px;
}

.ssjx__journey-empty[hidden] {
    display: none !important;
}

.ssjx__journey-empty > span {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    color: #bd82ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .30);
    border-radius: 18px;
    box-shadow: 0 0 20px rgba(var(--ssjx-violet-rgb), .08);
}

.ssjx__journey-empty > span svg {
    width: 31px;
    height: 31px;
}

.ssjx__journey-empty h4 {
    margin: 0 !important;
    color: #f1f2f8 !important;
    font-size: 17px !important;
}

.ssjx__journey-empty p {
    max-width: 390px;
    margin: 8px 0 16px !important;
    color: #7e879b !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
}

.ssjx__journey-list {
    display: grid;
    gap: 8px;
    max-height: 390px;
    overflow: auto;
    padding-right: 3px;
}

.ssjx__journey-list[hidden] {
    display: none !important;
}

.ssjx__journey-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 11px;
    padding: 10px;
    background: rgba(7, 9, 17, .80);
    border: 1px solid rgba(157, 169, 205, .12);
    border-radius: 13px;
}

.ssjx__journey-item-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #be83ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .24);
    border-radius: 11px;
}

.ssjx__journey-item-icon svg {
    width: 23px;
    height: 23px;
}

.ssjx__journey-item-copy {
    display: grid;
    min-width: 0;
}

.ssjx__journey-item-copy small {
    color: #746a86;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ssjx__journey-item-copy strong {
    margin-top: 2px;
    color: #e6e8f1;
    font-size: 11px;
    line-height: 1.2;
}

.ssjx__journey-item-copy > span {
    margin-top: 3px;
    color: #747d92;
    font-size: 9px;
    line-height: 1.32;
}

.ssjx__journey-item > button,
.ssjx__journey-item > button:hover,
.ssjx__journey-item > button:focus,
.ssjx__journey-item > button:active {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    color: #817e8d !important;
    background: transparent !important;
    border: 1px solid rgba(159, 169, 199, .14) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
}

.ssjx__journey-item > button svg {
    width: 14px;
    height: 14px;
}

.ssjx__journey-value-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.ssjx__journey-value-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #c084ff;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .27);
    border-radius: 13px;
}

.ssjx__journey-value-icon svg {
    width: 24px;
    height: 24px;
}

.ssjx__journey-value-copy {
    margin: 13px 0 15px !important;
    color: #80899d !important;
    font-size: 10px !important;
    line-height: 1.52 !important;
}

.ssjx__estimate-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ssjx__estimate-inputs label {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 11px;
    background: rgba(5, 7, 14, .70);
    border: 1px solid rgba(160, 171, 204, .11);
    border-radius: 12px;
}

.ssjx__estimate-inputs label > span {
    min-height: 28px;
    color: #838b9e;
    font-size: 9px;
    line-height: 1.35;
}

.ssjx__estimate-inputs label > div {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 10px;
    gap: 6px;
    background: #090c15;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .20);
    border-radius: 9px;
}

.ssjx__estimate-inputs input,
.ssjx__estimate-inputs input:hover,
.ssjx__estimate-inputs input:focus {
    min-width: 0;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0;
    color: #f4f5fb;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    font-size: 17px;
    font-weight: 750;
    -moz-appearance: textfield;
}

.ssjx__estimate-inputs input::-webkit-outer-spin-button,
.ssjx__estimate-inputs input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ssjx__estimate-inputs label > div small {
    color: #777f93;
    font-size: 9px;
}

.ssjx__estimate-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.ssjx__estimate-results > div {
    min-height: 86px;
    padding: 11px;
    background:
        linear-gradient(145deg, rgba(var(--ssjx-violet-rgb), .055), rgba(6, 8, 15, .74));
    border: 1px solid rgba(var(--ssjx-violet-rgb), .16);
    border-radius: 12px;
}

.ssjx__estimate-results span,
.ssjx__estimate-results small {
    display: block;
    color: #787f92;
    font-size: 8px;
}

.ssjx__estimate-results strong {
    display: block;
    margin: 6px 0 3px;
    color: #deb2ff;
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1;
}

.ssjx__estimate-note {
    margin-top: 9px;
    padding: 10px 11px;
    color: #6f778a;
    background: rgba(255, 255, 255, .018);
    border-left: 2px solid rgba(var(--ssjx-violet-rgb), .36);
    font-size: 8px;
    line-height: 1.45;
}

/* =========================================================
   PDF PREVIEW + SHARING
   ========================================================= */

.ssjx__journey-footer {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(310px, .72fr);
    align-items: center;
    gap: clamp(20px, 3vw, 42px);
    padding: 0 clamp(22px, 3vw, 40px) clamp(28px, 3vw, 40px);
}

.ssjx__journey-pdf-preview {
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    padding: 18px;
    gap: 15px;
    overflow: hidden;
    background: rgba(9, 12, 22, .64);
    border: 1px solid rgba(158, 170, 207, .11);
    border-radius: 18px;
}

.ssjx__journey-pdf-cover,
.ssjx__journey-pdf-page {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
    aspect-ratio: .707;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
}

.ssjx__journey-pdf-cover {
    padding: 13px 12px;
    color: #fff;
    background:
        radial-gradient(circle at 80% 18%, rgba(var(--ssjx-blue-rgb), .16), transparent 25%),
        #050817;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .28);
}

.ssjx__journey-pdf-cover::before,
.ssjx__journey-pdf-cover::after {
    position: absolute;
    width: 170px;
    height: 75px;
    content: "";
    border: 1px solid rgba(var(--ssjx-violet-rgb), .70);
    border-radius: 50%;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-violet-rgb), .35));
    transform: rotate(-23deg);
}

.ssjx__journey-pdf-cover::before {
    right: -58px;
    bottom: 35px;
}

.ssjx__journey-pdf-cover::after {
    right: -46px;
    bottom: 55px;
    border-color: rgba(var(--ssjx-pink-rgb), .48);
    transform: rotate(27deg);
}

.ssjx__journey-pdf-cover > span {
    color: #bea4e8;
    font-size: 7px;
    font-weight: 800;
}

.ssjx__journey-pdf-cover strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 22px;
    font-size: 18px;
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.04em;
}

.ssjx__journey-pdf-cover small {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    max-width: 78px;
    color: #868ca2;
    font-size: 5px;
    line-height: 1.35;
}

.ssjx__journey-pdf-page {
    width: 132px;
    padding: 14px 12px;
    color: #1c2030;
    background: #f8f8fc;
    border: 1px solid rgba(255, 255, 255, .8);
}

.ssjx__journey-pdf-page span,
.ssjx__journey-pdf-page strong {
    display: block;
    font-size: 7px;
}

.ssjx__journey-pdf-page i,
.ssjx__journey-pdf-page b {
    display: block;
    height: 5px;
    margin-top: 8px;
    background: #e7e4f2;
    border-radius: 2px;
}

.ssjx__journey-pdf-page i:nth-of-type(2) { width: 82%; }
.ssjx__journey-pdf-page i:nth-of-type(3) { width: 66%; }
.ssjx__journey-pdf-page i:nth-of-type(4) { width: 88%; }
.ssjx__journey-pdf-page strong { margin-top: 18px; color: #7b54c5; }
.ssjx__journey-pdf-page b { height: 18px; background: #f0ebfa; }

.ssjx__journey-export {
    display: grid;
    align-content: center;
    gap: 11px;
}

.ssjx__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ssjx__socials button,
.ssjx__socials button:hover,
.ssjx__socials button:focus,
.ssjx__socials button:active {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    color: #cda4ff !important;
    background: #0b0e19 !important;
    border: 1px solid rgba(var(--ssjx-violet-rgb), .28) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(var(--ssjx-violet-rgb), .06) !important;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssjx__socials button svg {
    width: 14px;
    height: 14px;
}

.ssjx__socials button:hover {
    border-color: rgba(var(--ssjx-pink-rgb), .60) !important;
    box-shadow: 0 0 16px rgba(var(--ssjx-pink-rgb), .13) !important;
}

.ssjx__share-status {
    min-height: 16px;
    color: #a88bcf;
    font-size: 9px;
}

/* =========================================================
   MOBILE BAR
   ========================================================= */

.ssjx__mobile-bar {
    display: none;
}

/* =========================================================
   V1.1 VISIBILITY + INTERACTION PASS
   Stronger structural borders for low-brightness displays and
   clearer hover / selected surfaces without turning the UI neon.
   ========================================================= */

/* Main module edge: visible even when the screen is dimmed. */
.ssjx {
    border-color: rgba(187, 199, 238, .30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 0 0 1px rgba(111, 128, 178, .035),
        0 0 0 1px rgba(var(--ssjx-violet-rgb), .035),
        0 24px 70px rgba(0, 0, 0, .30);
}

/* Major dark panels use a two-stage edge: a readable keyline plus a soft inner highlight. */
.ssjx__group,
.ssjx__value-strip,
.ssjx__preview,
.ssjx__detail-canvas,
.ssjx__journey-panel,
.ssjx__journey-saved,
.ssjx__journey-value,
.ssjx__journey-pdf-preview {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 0 0 1px rgba(198, 208, 238, .028),
        0 14px 34px rgba(0, 0, 0, .20);
}

.ssjx__group {
    border-color: rgba(var(--ssjx-group-rgb), .42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .065),
        inset 0 0 0 1px rgba(var(--ssjx-group-rgb), .055),
        0 14px 34px rgba(0, 0, 0, .20),
        0 0 24px rgba(var(--ssjx-group-rgb), .035);
}

.ssjx__group::before {
    height: 2px;
    opacity: .92;
    box-shadow: 0 0 13px rgba(var(--ssjx-group-rgb), .50);
}

.ssjx__group-symbol {
    background: rgba(var(--ssjx-group-rgb), .075);
    border-color: rgba(var(--ssjx-group-rgb), .56);
    box-shadow:
        inset 0 0 16px rgba(var(--ssjx-group-rgb), .075),
        0 0 12px rgba(var(--ssjx-group-rgb), .055);
}

/* Category tiles: stronger default separation. */
.ssjx__card {
    background:
        linear-gradient(155deg, rgba(18, 22, 39, .97), rgba(7, 9, 18, .995));
    border-color: rgba(176, 188, 224, .34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 0 0 1px rgba(109, 124, 168, .035),
        0 5px 14px rgba(0, 0, 0, .14);
}

.ssjx__card::before {
    background:
        radial-gradient(circle at 50% -8%, rgba(var(--ssjx-group-rgb), .22), transparent 58%),
        linear-gradient(135deg, rgba(var(--ssjx-group-rgb), .11), transparent 42% 68%, rgba(var(--ssjx-group-rgb), .055));
}

/* Hover is a true interior surface change, not only an outline. */
.ssjx__card:hover {
    background:
        radial-gradient(circle at 50% -10%, rgba(var(--ssjx-group-rgb), .19), transparent 61%),
        linear-gradient(155deg, rgba(27, 31, 51, .98), rgba(9, 12, 23, .995));
    border-color: rgba(var(--ssjx-group-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 0 24px rgba(var(--ssjx-group-rgb), .045),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .09),
        0 9px 24px rgba(0, 0, 0, .25),
        0 0 23px rgba(var(--ssjx-group-rgb), .14);
}

/* Selected / previewed card: unmistakable filled state. */
.ssjx__card.is-active {
    background:
        radial-gradient(circle at 50% -12%, rgba(var(--ssjx-group-rgb), .30), transparent 60%),
        linear-gradient(145deg, rgba(var(--ssjx-group-rgb), .14), rgba(18, 18, 37, .985) 45%, rgba(8, 10, 20, .995));
    border-color: rgba(var(--ssjx-group-rgb), .96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 0 30px rgba(var(--ssjx-group-rgb), .095),
        0 0 0 1px rgba(var(--ssjx-group-rgb), .22),
        0 0 26px rgba(var(--ssjx-group-rgb), .24),
        0 10px 26px rgba(0, 0, 0, .26);
}

/* Saved-but-not-current cards get a restrained pink tint so saved != selected. */
.ssjx__card.is-saved:not(.is-active) {
    background:
        radial-gradient(circle at 86% 8%, rgba(var(--ssjx-pink-rgb), .105), transparent 32%),
        linear-gradient(155deg, rgba(21, 22, 40, .97), rgba(7, 9, 18, .995));
    border-color: rgba(var(--ssjx-pink-rgb), .48);
}

.ssjx__card-icon {
    background: rgba(var(--ssjx-group-rgb), .045);
    border-color: rgba(var(--ssjx-group-rgb), .40);
    box-shadow: inset 0 0 12px rgba(var(--ssjx-group-rgb), .04);
}

.ssjx__card:hover .ssjx__card-icon {
    background: rgba(var(--ssjx-group-rgb), .10);
    border-color: rgba(var(--ssjx-group-rgb), .78);
    box-shadow:
        inset 0 0 15px rgba(var(--ssjx-group-rgb), .10),
        0 0 17px rgba(var(--ssjx-group-rgb), .18);
}

.ssjx__card.is-active .ssjx__card-icon {
    background: rgba(var(--ssjx-group-rgb), .16);
    border-color: rgba(var(--ssjx-group-rgb), .96);
    box-shadow:
        inset 0 0 18px rgba(var(--ssjx-group-rgb), .15),
        0 0 19px rgba(var(--ssjx-group-rgb), .24);
}

.ssjx__card-save,
.ssjx__card-save:hover,
.ssjx__card-save:focus,
.ssjx__card-save:active {
    background: rgba(5, 7, 15, .90) !important;
    border-color: rgba(183, 195, 229, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    opacity: .84;
}

.ssjx__card-save:hover,
.ssjx__card-save:focus-visible {
    color: #f0a0e1 !important;
    background: rgba(var(--ssjx-pink-rgb), .09) !important;
    border-color: rgba(var(--ssjx-pink-rgb), .70) !important;
    box-shadow: 0 0 14px rgba(var(--ssjx-pink-rgb), .16) !important;
}

.ssjx__card-save.is-saved {
    background: rgba(var(--ssjx-pink-rgb), .13) !important;
    border-color: rgba(var(--ssjx-pink-rgb), .82) !important;
    box-shadow:
        inset 0 0 11px rgba(var(--ssjx-pink-rgb), .08),
        0 0 15px rgba(var(--ssjx-pink-rgb), .19) !important;
}

/* Supporting controls and panels retain the same visual hierarchy. */
.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    border-color: rgba(var(--ssjx-violet-rgb), .58) !important;
}

.ssjx__journey-launch-icon,
.ssjx__value-chip > span,
.ssjx__detail-icon,
.ssjx__journey-empty > span,
.ssjx__journey-item-icon,
.ssjx__journey-value-icon {
    border-color: rgba(var(--ssjx-violet-rgb), .52);
}

.ssjx__preview {
    border-color: rgba(var(--ssjx-preview-rgb), .56);
}

.ssjx__preview-close,
.ssjx__preview-close:hover,
.ssjx__preview-close:focus,
.ssjx__preview-close:active,
.ssjx__journey-section-head button,
.ssjx__journey-section-head button:hover,
.ssjx__journey-section-head button:focus,
.ssjx__journey-section-head button:active,
.ssjx__journey-item > button,
.ssjx__journey-item > button:hover,
.ssjx__journey-item > button:focus,
.ssjx__journey-item > button:active {
    border-color: rgba(184, 195, 228, .32) !important;
}

.ssjx__preview-points li,
.ssjx__value-strip,
.ssjx__journey-saved,
.ssjx__journey-value,
.ssjx__journey-item,
.ssjx__estimate-inputs label,
.ssjx__journey-pdf-preview {
    border-color: rgba(177, 189, 224, .28);
}

/*
 * V1.6 BUTTON STATE SAFETY
 * Do not flatten primary/preview-specific shadows here. Only provide the
 * stronger default border to generic buttons; themed preview actions keep
 * their own colour-aware interaction states above.
 */
.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost),
.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost):focus,
.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost):active {
    border-color: rgba(185, 197, 231, .36) !important;
}

.ssjx__button:not(.ssjx__button--primary):not(.ssjx__button--ghost):hover {
    background: rgba(25, 29, 48, .96) !important;
    border-color: rgba(var(--ssjx-violet-rgb), .66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 16px rgba(var(--ssjx-violet-rgb), .10) !important;
}

.ssjx__detail-canvas {
    --detail-line: rgba(190, 201, 231, .28);
    border-color: rgba(var(--ssjx-violet-rgb), .46);
    box-shadow:
        0 28px 90px var(--detail-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 0 1px rgba(198, 208, 238, .035),
        0 0 42px rgba(var(--ssjx-violet-rgb), .10);
}

.ssjx__detail-canvas[data-ssjx-reading="light"] {
    --detail-line: rgba(60, 66, 91, .18);
    border-color: rgba(139, 91, 224, .40);
}

.ssjx__detail-tags span {
    border-color: rgba(var(--ssjx-violet-rgb), .38);
}

.ssjx__detail-value-grid div,
.ssjx__detail-side-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.ssjx__journey-panel {
    border-color: rgba(var(--ssjx-violet-rgb), .46);
    box-shadow:
        0 30px 100px rgba(0, 0, 0, .56),
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 0 0 1px rgba(192, 202, 235, .028),
        0 0 42px rgba(var(--ssjx-violet-rgb), .09);
}

.ssjx__journey-head {
    border-bottom-color: rgba(183, 194, 226, .24);
}

.ssjx__journey-empty {
    border-color: rgba(var(--ssjx-violet-rgb), .38);
}

.ssjx__estimate-inputs label > div {
    border-color: rgba(var(--ssjx-violet-rgb), .40);
}

.ssjx__estimate-results > div {
    border-color: rgba(var(--ssjx-violet-rgb), .34);
}

.ssjx__journey-pdf-cover,
.ssjx__socials button,
.ssjx__socials button:hover,
.ssjx__socials button:focus,
.ssjx__socials button:active {
    border-color: rgba(var(--ssjx-violet-rgb), .46) !important;
}

/* Keyboard selection gets the same filled feedback as pointer interaction. */
.ssjx__card:focus-within {
    border-color: rgba(var(--ssjx-group-rgb), .84);
}

@media (hover: none), (pointer: coarse) {
    /* Touch screens still show the persistent selected state, without relying on hover. */
    .ssjx__card.is-active {
        background:
            radial-gradient(circle at 50% -12%, rgba(var(--ssjx-group-rgb), .30), transparent 60%),
            linear-gradient(145deg, rgba(var(--ssjx-group-rgb), .14), rgba(18, 18, 37, .985) 45%, rgba(8, 10, 20, .995));
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {
    .ssjx__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ssjx__card--last {
        grid-column: 1 / -1;
    }

    .ssjx__card-title {
        font-size: 11px;
    }

    .ssjx__value-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ssjx__value-intro {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 1px solid rgba(164, 174, 207, .12);
    }

    .ssjx__journey-layout {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-list {
        max-height: 300px;
    }
}

@media (max-width: 920px) {
    .ssjx__groups {
        grid-template-columns: 1fr;
    }

    .ssjx__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ssjx__detail-layout {
        grid-template-columns: 1fr;
    }

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

    .ssjx__journey-footer {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-pdf-preview {
        min-height: 185px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {
    .ssjx {
        margin: 0 auto;
        padding: 20px 11px 88px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .ssjx__intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
    }

    .ssjx__intro-actions {
        display: none;
    }

    .ssjx__title {
        font-size: clamp(31px, 9.6vw, 43px) !important;
    }

    .ssjx__lede {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .ssjx__progress-line {
        --ssjx-step-node: 25px;
        --ssjx-step-gap: 6px;
        width: 100%;
        margin-bottom: 19px;
        font-size: 8px;
        letter-spacing: .055em;
    }

    .ssjx__progress-line span {
        gap: var(--ssjx-step-gap);
    }

    .ssjx__progress-line span:not(:last-child)::after {
        left: calc(var(--ssjx-step-node) + var(--ssjx-step-gap) + var(--ssjx-step-label-width) + 7px);
        right: 6px;
        height: 1.5px;
    }

    .ssjx__progress-line i {
        width: var(--ssjx-step-node);
        height: var(--ssjx-step-node);
        min-width: var(--ssjx-step-node);
        min-height: var(--ssjx-step-node);
        font-size: 9px;
    }

    .ssjx__group {
        padding: 12px;
        border-radius: 20px;
    }

    .ssjx__group-head {
        grid-template-columns: 40px minmax(0, 1fr);
        margin-bottom: 11px;
    }

    .ssjx__group-symbol {
        width: 40px;
        height: 40px;
    }

    .ssjx__group-head h3 {
        font-size: 17px !important;
    }

    .ssjx__group-head p {
        font-size: 9px !important;
    }

    .ssjx__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .ssjx__card {
        min-height: 116px;
        border-radius: 15px;
    }

    .ssjx__card--last {
        min-height: 76px;
    }

    .ssjx__card-main {
        grid-template-rows: 40px minmax(0, 1fr);
        gap: 7px;
        padding: 13px 8px 10px;
    }

    .ssjx__card-main .ssjx__card-arrow {
        display: none;
    }

    .ssjx__card--last .ssjx__card-main {
        grid-template-columns: 48px minmax(0, 1fr) 24px;
        grid-template-rows: 1fr;
        min-height: 76px;
        padding: 9px 44px 9px 10px;
    }

    .ssjx__card-icon {
        width: 40px;
        height: 40px;
    }

    .ssjx__card-title {
        max-width: 150px;
        font-size: 10.5px;
        line-height: 1.22;
    }

    .ssjx__card-save {
        top: 6px;
        right: 6px;
    }

    /* Mobile preview becomes a deliberate bottom sheet. */
    .ssjx__preview {
        position: fixed;
        z-index: 1000008;
        left: 7px;
        right: 7px;
        bottom: max(7px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        max-height: min(74vh, 620px) !important;
        margin: 0 !important;
        overflow: auto;
        border-radius: 20px;
        opacity: 0;
        transform: translate3d(0, calc(100% + 24px), 0) scale(.985);
        transform-origin: 50% 100%;
        transition:
            opacity 300ms ease,
            transform 520ms cubic-bezier(.16, .78, .20, 1),
            box-shadow 420ms ease;
        will-change: transform, opacity;
    }

    .ssjx__preview.is-open {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .055),
            0 -8px 38px rgba(0, 0, 0, .38),
            0 0 34px rgba(var(--ssjx-preview-rgb), .14);
    }

    .ssjx__preview-icon {
        min-height: 100%;
    }

    .ssjx__preview-icon svg {
        width: 44px;
        height: 44px;
    }

    .ssjx__preview-copy {
        padding: 16px 13px 16px;
    }

    .ssjx__preview h3 {
        font-size: 22px !important;
    }

    .ssjx__preview-summary {
        font-size: 12.5px !important;
    }

    .ssjx__preview-points {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ssjx__preview-points li {
        min-height: 0;
        font-size: 10px;
    }

    .ssjx__preview-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ssjx__value-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 0;
    }

    .ssjx__value-chip {
        min-height: 78px;
        border-bottom: 1px solid rgba(164, 174, 207, .08);
    }

    .ssjx__modal {
        align-items: end;
        padding: 0;
    }

    .ssjx__modal-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ssjx__detail-canvas,
    .ssjx__journey-panel {
        width: 100%;
        max-height: 96vh;
        max-height: 96dvh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }

    .ssjx__modal.is-open .ssjx__detail-canvas,
    .ssjx__modal.is-open .ssjx__journey-panel {
        transform: translateY(0);
    }

    .ssjx__detail-toolbar {
        padding: 10px 11px;
    }

    .ssjx__detail-back span,
    .ssjx__reading-toggle span {
        display: none;
    }

    .ssjx__detail-back,
    .ssjx__reading-toggle {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .ssjx__detail-layout {
        padding: 20px 15px 28px;
        gap: 20px;
    }

    .ssjx__detail-heading {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 12px;
    }

    .ssjx__detail-icon {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

    .ssjx__detail-icon svg {
        width: 28px;
        height: 28px;
    }

    .ssjx__detail-heading h3 {
        font-size: clamp(26px, 8vw, 35px) !important;
    }

    .ssjx__detail-summary {
        margin-top: 17px !important;
        font-size: 15px !important;
    }

    .ssjx__detail-side {
        grid-template-columns: 1fr;
    }

    .ssjx__detail-value-grid {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-head {
        padding: 20px 15px 16px;
    }

    .ssjx__journey-head h3 {
        font-size: 30px !important;
    }

    .ssjx__journey-progress {
        padding: 0 15px;
        font-size: 7px;
    }

    .ssjx__journey-layout {
        padding: 18px 12px;
    }

    .ssjx__estimate-inputs,
    .ssjx__estimate-results {
        grid-template-columns: 1fr 1fr;
    }

    .ssjx__journey-footer {
        padding: 0 12px 24px;
    }

    .ssjx__journey-pdf-preview {
        min-height: 175px;
        justify-content: center;
    }

    .ssjx__journey-export-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ssjx__mobile-bar {
        position: fixed;
        z-index: 1000005;
        left: 50%;
        bottom: max(8px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(2, 92px);
        width: auto;
        padding: 5px;
        gap: 4px;
        background: rgba(7, 9, 17, .92);
        border: 1px solid rgba(167, 178, 213, .18);
        border-radius: 17px;
        box-shadow: 0 10px 35px rgba(0, 0, 0, .48), 0 0 18px rgba(var(--ssjx-violet-rgb), .07);
        backdrop-filter: blur(13px);
        -webkit-backdrop-filter: blur(13px);
        transform: translateX(-50%);
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        position: relative;
        display: grid;
        grid-template-columns: 22px auto;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0;
        padding: 6px 8px;
        gap: 5px;
        color: #8c94a8 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .ssjx__mobile-bar button.is-active,
    .ssjx__mobile-bar button:last-child {
        color: #cba1ff !important;
        background: rgba(var(--ssjx-violet-rgb), .07) !important;
    }

    .ssjx__mobile-bar span,
    .ssjx__mobile-bar span svg {
        width: 19px;
        height: 19px;
    }

    .ssjx__mobile-bar small {
        font-size: 9px;
        font-weight: 800;
    }

    .ssjx__mobile-bar b {
        position: absolute;
        top: 3px;
        right: 5px;
        display: grid;
        place-items: center;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        color: #09060d;
        background: #dc8fff;
        border-radius: 999px;
        font-size: 8px;
    }
}

@media (max-width: 430px) {
    .ssjx__title {
        font-size: clamp(29px, 10.4vw, 38px) !important;
    }

    .ssjx__progress-line span {
        font-size: 7px;
        letter-spacing: .04em;
    }

    .ssjx__card {
        min-height: 109px;
    }

    .ssjx__card-title {
        font-size: 9.7px;
    }

    .ssjx__value-strip {
        grid-template-columns: 1fr;
    }

    .ssjx__value-chip {
        border-right: 0;
    }

    .ssjx__estimate-inputs,
    .ssjx__estimate-results {
        grid-template-columns: 1fr;
    }

    .ssjx__journey-item {
        grid-template-columns: 38px minmax(0, 1fr) 28px;
    }

    .ssjx__journey-item-icon {
        width: 38px;
        height: 38px;
    }

    .ssjx__journey-pdf-cover {
        width: 108px;
    }

    .ssjx__journey-pdf-page {
        width: 118px;
    }
}


/* =========================================================
   V1.8 — GREEN JOURNEY IDENTITY + CONTEXTUAL FLOATING DOCK

   - My Journey now has its own green identity (#6BFA43).
   - supplied Simme WebP artwork replaces the generic group / dock glyphs.
   - the Explore / Journey dock is available on every viewport size but
     appears only while the Journey Explorer section is actually in view.
   ========================================================= */

/* ---------- Supplied category-family artwork ---------- */
.ssjx__group-head {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 13px;
}

.ssjx__group-symbol.ssjx__group-symbol--asset {
    width: 60px;
    height: 60px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 48%, rgba(var(--ssjx-group-rgb), .13), transparent 68%),
        rgba(7, 10, 20, .58);
    border-color: rgba(var(--ssjx-group-rgb), .58);
    border-radius: 17px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 0 18px rgba(var(--ssjx-group-rgb), .065),
        0 0 18px rgba(var(--ssjx-group-rgb), .085);
}

.ssjx__group-symbol.ssjx__group-symbol--asset img {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .34))
        drop-shadow(0 0 13px rgba(var(--ssjx-group-rgb), .14));
    transform: translateZ(0);
}

/* ---------- My Journey launch card: green profile ---------- */
.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    grid-template-columns: 52px auto 38px;
    min-width: 244px;
    padding: 10px 12px 10px 10px;
    gap: 11px;
    background:
        radial-gradient(circle at 10% 50%, rgba(var(--ssjx-green-rgb), .10), transparent 34%),
        linear-gradient(145deg, rgba(14, 26, 22, .96), rgba(5, 10, 12, .98)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .045),
        0 10px 26px rgba(0, 0, 0, .28),
        0 0 24px rgba(var(--ssjx-green-rgb), .075) !important;
}

.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus-visible {
    border-color: rgba(var(--ssjx-green-rgb), .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 0 20px rgba(var(--ssjx-green-rgb), .045),
        0 12px 30px rgba(0, 0, 0, .30),
        0 0 30px rgba(var(--ssjx-green-rgb), .16) !important;
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset {
    width: 52px;
    height: 52px;
    overflow: visible;
    color: var(--ssjx-green);
    background: rgba(var(--ssjx-green-rgb), .055);
    border-color: rgba(var(--ssjx-green-rgb), .52);
    border-radius: 14px;
    box-shadow:
        inset 0 0 15px rgba(var(--ssjx-green-rgb), .055),
        0 0 14px rgba(var(--ssjx-green-rgb), .06);
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-green-rgb), .28));
}

.ssjx__journey-launch-copy small {
    color: #8baa88;
}

.ssjx__journey-launch-copy strong {
    color: #f4fff0;
}

.ssjx__journey-count {
    width: 36px;
    height: 36px;
    color: #041006;
    background: linear-gradient(145deg, #d7ffc7 0%, var(--ssjx-green) 72%, #54d833 100%);
    border: 1px solid rgba(222, 255, 209, .74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .52),
        0 0 18px rgba(var(--ssjx-green-rgb), .30);
}

/* ---------- Journey modal: one coherent green visual family ---------- */
.ssjx__journey-panel {
    background:
        radial-gradient(circle at 8% 4%, rgba(var(--ssjx-green-rgb), .105), transparent 25%),
        radial-gradient(circle at 92% 2%, rgba(99, 214, 255, .055), transparent 22%),
        #080c12;
    border-color: rgba(var(--ssjx-green-rgb), .46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 30px 100px rgba(0, 0, 0, .56),
        0 0 42px rgba(var(--ssjx-green-rgb), .075);
}

.ssjx__journey-head {
    border-bottom-color: rgba(var(--ssjx-green-rgb), .16);
}

.ssjx__journey-head .ssjx__eyebrow,
.ssjx__journey-section-head span,
.ssjx__journey-value-head span,
.ssjx__journey-export-label {
    color: #a8df99;
}

.ssjx__journey-head .ssjx__eyebrow::before {
    background: linear-gradient(90deg, #4bd52c, var(--ssjx-green), #c9ffb8);
    box-shadow: 0 0 9px rgba(var(--ssjx-green-rgb), .52);
}

.ssjx__journey-head .ssjx__icon-button,
.ssjx__journey-head .ssjx__icon-button:hover,
.ssjx__journey-head .ssjx__icon-button:focus,
.ssjx__journey-head .ssjx__icon-button:active {
    color: #bfffb0 !important;
    border-color: rgba(var(--ssjx-green-rgb), .34) !important;
}

.ssjx__journey-progress .is-done,
.ssjx__journey-progress .is-active {
    color: #b8e9aa;
}

.ssjx__journey-progress .is-done i,
.ssjx__journey-progress .is-active i {
    border-color: rgba(var(--ssjx-green-rgb), .82);
    box-shadow: 0 0 9px rgba(var(--ssjx-green-rgb), .26);
}

.ssjx__journey-progress .is-done i {
    background: var(--ssjx-green);
}

/* Carry the same whole-system Journey language into the saved Journey modal. */
.ssjx__journey-progress span:not(:last-child)::after {
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(var(--ssjx-green-rgb), .28) 0%,
        #59de38 16%,
        #6bfa43 50%,
        #80ff60 82%,
        rgba(var(--ssjx-green-rgb), .56) 100%
    );
    border-radius: 999px;
    box-shadow:
        0 0 7px rgba(var(--ssjx-green-rgb), .22),
        0 0 12px rgba(var(--ssjx-green-rgb), .08);
}

.ssjx__journey-progress i {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    box-shadow:
        0 0 5px rgba(var(--ssjx-green-rgb), .12),
        0 0 10px rgba(var(--ssjx-green-rgb), .06);
}

.ssjx__journey-saved,
.ssjx__journey-value,
.ssjx__journey-pdf-preview {
    border-color: rgba(var(--ssjx-green-rgb), .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .026),
        0 14px 34px rgba(0, 0, 0, .22);
}

.ssjx__journey-empty {
    border-color: rgba(var(--ssjx-green-rgb), .34);
}

.ssjx__journey-empty > span.ssjx__journey-empty-art {
    width: 76px;
    height: 76px;
    overflow: visible;
    color: var(--ssjx-green);
    background: rgba(var(--ssjx-green-rgb), .045);
    border-color: rgba(var(--ssjx-green-rgb), .42);
    border-radius: 20px;
    box-shadow: 0 0 24px rgba(var(--ssjx-green-rgb), .09);
}

.ssjx__journey-empty > span.ssjx__journey-empty-art img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .28));
}

.ssjx__journey-item {
    border-color: rgba(var(--ssjx-green-rgb), .16);
}

.ssjx__journey-item-icon,
.ssjx__journey-value-icon {
    color: #93ff74;
    background: rgba(var(--ssjx-green-rgb), .035);
    border-color: rgba(var(--ssjx-green-rgb), .34);
    box-shadow: inset 0 0 13px rgba(var(--ssjx-green-rgb), .035);
}

.ssjx__journey-item-copy small {
    color: #789373;
}

.ssjx__estimate-inputs label > div {
    border-color: rgba(var(--ssjx-green-rgb), .28);
}

.ssjx__estimate-inputs label:focus-within > div {
    border-color: rgba(var(--ssjx-green-rgb), .72);
    box-shadow: 0 0 0 2px rgba(var(--ssjx-green-rgb), .055), 0 0 16px rgba(var(--ssjx-green-rgb), .08);
}

.ssjx__estimate-results > div {
    background:
        linear-gradient(145deg, rgba(var(--ssjx-green-rgb), .070), rgba(6, 11, 12, .78));
    border-color: rgba(var(--ssjx-green-rgb), .24);
}

.ssjx__estimate-results strong {
    color: #a7ff8d;
}

.ssjx__estimate-note {
    border-left-color: rgba(var(--ssjx-green-rgb), .62);
}

.ssjx__journey-panel .ssjx__button--primary,
.ssjx__journey-panel .ssjx__button--primary:hover,
.ssjx__journey-panel .ssjx__button--primary:focus,
.ssjx__journey-panel .ssjx__button--primary:active {
    color: #061008 !important;
    background:
        linear-gradient(110deg, #d6ffc7 0%, #8dff6d 35%, var(--ssjx-green) 68%, #4fd832 100%) !important;
    border-color: rgba(222, 255, 210, .86) !important;
    text-shadow: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .50),
        0 0 0 1px rgba(31, 105, 18, .38),
        0 7px 20px rgba(0, 0, 0, .23),
        0 0 20px rgba(var(--ssjx-green-rgb), .18) !important;
}

.ssjx__journey-panel .ssjx__button--primary:hover,
.ssjx__journey-panel .ssjx__button--primary:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .58),
        inset 0 0 18px rgba(255, 255, 255, .10),
        0 0 0 1px rgba(99, 232, 66, .50),
        0 8px 22px rgba(0, 0, 0, .24),
        0 0 28px rgba(var(--ssjx-green-rgb), .28) !important;
}

.ssjx__journey-panel .ssjx__button--ghost,
.ssjx__journey-panel .ssjx__button--ghost:hover,
.ssjx__journey-panel .ssjx__button--ghost:focus,
.ssjx__journey-panel .ssjx__button--ghost:active {
    color: #d4ffca !important;
    border-color: rgba(var(--ssjx-green-rgb), .46) !important;
    background: rgba(var(--ssjx-green-rgb), .035) !important;
}

.ssjx__journey-panel .ssjx__button--ghost:hover,
.ssjx__journey-panel .ssjx__button--ghost:focus-visible {
    border-color: rgba(var(--ssjx-green-rgb), .82) !important;
    background: rgba(var(--ssjx-green-rgb), .075) !important;
    box-shadow: 0 0 18px rgba(var(--ssjx-green-rgb), .10) !important;
}

.ssjx__journey-pdf-cover {
    background:
        radial-gradient(circle at 80% 18%, rgba(83, 228, 55, .14), transparent 26%),
        radial-gradient(circle at 12% 82%, rgba(70, 205, 255, .065), transparent 24%),
        #050b0a;
    border-color: rgba(var(--ssjx-green-rgb), .42);
}

.ssjx__journey-pdf-cover::before {
    border-color: rgba(var(--ssjx-green-rgb), .82);
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .34));
}

.ssjx__journey-pdf-cover::after {
    border-color: rgba(112, 229, 80, .42);
    filter: drop-shadow(0 0 6px rgba(var(--ssjx-green-rgb), .18));
}

.ssjx__journey-pdf-cover > span {
    color: #a7e998;
}

.ssjx__journey-pdf-page strong {
    color: #4a9d35;
}

.ssjx__journey-pdf-page b {
    background: #e8f6e4;
}

.ssjx__socials button,
.ssjx__socials button:hover,
.ssjx__socials button:focus,
.ssjx__socials button:active {
    color: #bdfcaf !important;
    border-color: rgba(var(--ssjx-green-rgb), .32) !important;
    box-shadow: 0 0 10px rgba(var(--ssjx-green-rgb), .045) !important;
}

.ssjx__socials button:hover,
.ssjx__socials button:focus-visible {
    border-color: rgba(var(--ssjx-green-rgb), .74) !important;
    box-shadow: 0 0 17px rgba(var(--ssjx-green-rgb), .12) !important;
}

.ssjx__share-status {
    color: #92c887;
}

/* ---------- Contextual Explore / Journey floating dock ---------- */
.ssjx__mobile-bar {
    position: fixed;
    z-index: 1000005;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, minmax(132px, auto));
    width: auto;
    max-width: calc(100vw - 22px);
    padding: 6px;
    gap: 5px;
    color: #d8ffd0;
    background:
        radial-gradient(circle at 50% 120%, rgba(var(--ssjx-green-rgb), .11), transparent 56%),
        rgba(5, 11, 13, .93);
    border: 1px solid rgba(var(--ssjx-green-rgb), .40);
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .075),
        inset 0 0 0 1px rgba(var(--ssjx-green-rgb), .035),
        0 14px 42px rgba(0, 0, 0, .52),
        0 0 26px rgba(var(--ssjx-green-rgb), .105);
    backdrop-filter: blur(15px) saturate(1.1);
    -webkit-backdrop-filter: blur(15px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 20px, 0) scale(.96);
    transform-origin: 50% 100%;
    transition:
        opacity 260ms ease,
        visibility 0s linear 300ms,
        transform 360ms var(--ssjx-ease),
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ssjx__mobile-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1);
    transition-delay: 0s;
}

body.ssjx-has-modal .ssjx__mobile-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%, 16px, 0) scale(.97) !important;
}

.ssjx__mobile-bar button,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus,
.ssjx__mobile-bar button:active {
    position: relative;
    display: grid;
    grid-template-columns: 38px auto;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 52px;
    margin: 0;
    padding: 6px 14px 6px 10px;
    gap: 7px;
    color: #b7f6a8 !important;
    background: rgba(var(--ssjx-green-rgb), .026) !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    cursor: pointer;
    transform: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ssjx__mobile-bar button.is-active,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus-visible {
    color: #e0ffd8 !important;
    background:
        linear-gradient(145deg, rgba(var(--ssjx-green-rgb), .115), rgba(var(--ssjx-green-rgb), .045)) !important;
    border-color: rgba(var(--ssjx-green-rgb), .26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 16px rgba(var(--ssjx-green-rgb), .07) !important;
}

.ssjx__mobile-bar-art {
    display: grid !important;
    place-items: center;
    width: 38px !important;
    height: 38px !important;
}

.ssjx__mobile-bar-art img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(var(--ssjx-green-rgb), .26));
}

.ssjx__mobile-bar small {
    color: currentColor;
    font-size: 11px;
    font-weight: 820;
    letter-spacing: .01em;
}

.ssjx__mobile-bar b {
    position: absolute;
    top: 4px;
    right: 5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    color: #041006;
    background: linear-gradient(145deg, #d8ffc9, var(--ssjx-green));
    border: 1px solid rgba(232, 255, 224, .76);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(var(--ssjx-green-rgb), .22);
    font-size: 8px;
    font-weight: 900;
}

@media (max-width: 720px) {
    .ssjx__group-head {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 11px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset img {
        width: 49px;
        height: 49px;
    }

    .ssjx__mobile-bar {
        bottom: max(8px, env(safe-area-inset-bottom));
        grid-template-columns: repeat(2, minmax(104px, auto));
        max-width: calc(100vw - 14px);
        padding: 5px;
        border-radius: 18px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        grid-template-columns: 30px auto;
        min-width: 104px;
        min-height: 46px;
        padding: 5px 10px 5px 7px;
        gap: 5px;
        border-radius: 13px !important;
    }

    .ssjx__mobile-bar-art {
        width: 30px !important;
        height: 30px !important;
    }

    .ssjx__mobile-bar-art img {
        width: 29px;
        height: 29px;
    }

    .ssjx__mobile-bar small {
        font-size: 9.5px;
    }

    .ssjx__mobile-bar b {
        top: 3px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        font-size: 7.5px;
    }
}

@media (max-width: 380px) {
    .ssjx__mobile-bar {
        grid-template-columns: repeat(2, minmax(94px, auto));
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        min-width: 94px;
        padding-right: 7px;
    }
}



/* =========================================================
   V1.9 — TOP-LAYER FLOATING DOCK + SPACING / COUNT ALIGNMENT

   The contextual Explore / Journey dock is portalled to <body> by the
   shortcode JavaScript while it is active. This lets it escape the
   Journey Explorer's isolated stacking context and overflow clipping, so
   later homepage sections cannot paint over it during scroll.
   ========================================================= */

.ssjx__mobile-bar {
    /* Re-declare component tokens because V1.9 moves this element to body. */
    --ssjx-green: #6bfa43;
    --ssjx-green-rgb: 107, 250, 67;
    --ssjx-ease: cubic-bezier(.16, .78, .20, 1);

    z-index: 2147483000 !important;
    grid-template-columns: repeat(2, minmax(150px, auto));
    max-width: calc(100vw - 28px);
    padding: 9px;
    gap: 8px;
    border-width: 1px;
    border-radius: 24px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    isolation: isolate;
}

.ssjx__mobile-bar,
.ssjx__mobile-bar *,
.ssjx__mobile-bar *::before,
.ssjx__mobile-bar *::after {
    box-sizing: border-box;
}

.ssjx__mobile-bar button,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus,
.ssjx__mobile-bar button:active {
    grid-template-columns: 42px auto;
    min-width: 150px;
    min-height: 62px;
    padding: 9px 19px 9px 12px;
    gap: 10px;
    border-radius: 18px !important;
    line-height: 1;
}

.ssjx__mobile-bar-art {
    width: 42px !important;
    height: 42px !important;
}

.ssjx__mobile-bar-art img {
    width: 40px;
    height: 40px;
}

.ssjx__mobile-bar small {
    font-size: 11.5px;
    line-height: 1.1;
}

/* Fixed-size badge: the numeral is geometrically centred in the circle. */
.ssjx__mobile-bar b,
.ssjx__mobile-bar button b {
    top: 7px;
    right: 7px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    transform: none !important;
}

@media (max-width: 720px) {
    .ssjx__mobile-bar {
        bottom: max(9px, env(safe-area-inset-bottom));
        grid-template-columns: repeat(2, minmax(112px, auto));
        max-width: calc(100vw - 16px);
        padding: 7px;
        gap: 7px;
        border-radius: 21px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        grid-template-columns: 34px auto;
        min-width: 112px;
        min-height: 52px;
        padding: 7px 13px 7px 9px;
        gap: 7px;
        border-radius: 15px !important;
    }

    .ssjx__mobile-bar-art {
        width: 34px !important;
        height: 34px !important;
    }

    .ssjx__mobile-bar-art img {
        width: 33px;
        height: 33px;
    }

    .ssjx__mobile-bar small {
        font-size: 10px;
    }

    .ssjx__mobile-bar b,
    .ssjx__mobile-bar button b {
        top: 5px;
        right: 5px;
        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 380px) {
    .ssjx__mobile-bar {
        grid-template-columns: repeat(2, minmax(102px, auto));
        padding: 6px;
        gap: 6px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        min-width: 102px;
        padding-right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssjx__mobile-bar,
    .ssjx__mobile-bar * {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (hover: none), (pointer: coarse) {
    .ssjx__card:hover,
    .ssjx__button:hover,
    .ssjx__journey-launch:hover {
        transform: none;
    }

    .ssjx__card-arrow {
        opacity: .42;
        transform: none;
    }

    .ssjx__card.is-active .ssjx__card-arrow,
    .ssjx__card:focus-within .ssjx__card-arrow {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssjx *,
    .ssjx *::before,
    .ssjx *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   V2.0 — UNFRAMED HERO ASSETS / STRONGER VISUAL EMPHASIS

   The supplied SymSoul artwork is intentionally allowed to breathe.
   Decorative icon wells are removed from the large family markers and
   My Journey artwork so the illustrations sit directly in their parent
   surfaces. The artwork is also enlarged and given a restrained ambient
   glow so these markers read as important anchors, not small UI glyphs.
   ========================================================= */

/* ---------- Creative / Where SymSoul Helps family artwork ---------- */
.ssjx__group-head {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 17px;
    margin-bottom: 16px;
}

.ssjx__group-symbol.ssjx__group-symbol--asset {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: -5px 0 -5px -3px;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.ssjx__group-symbol.ssjx__group-symbol--asset img {
    display: block;
    width: 82px;
    height: 82px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 7px rgba(var(--ssjx-group-rgb), .44))
        drop-shadow(0 0 19px rgba(var(--ssjx-group-rgb), .18));
    transform: translateZ(0) scale(1.025);
    transform-origin: 50% 50%;
}

/* ---------- My Journey launcher artwork ---------- */
.ssjx__journey-launch,
.ssjx__journey-launch:hover,
.ssjx__journey-launch:focus,
.ssjx__journey-launch:active {
    grid-template-columns: 74px auto 38px;
    min-width: 270px;
    min-height: 92px;
    padding: 10px 14px 10px 12px;
    gap: 13px;
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: -2px 0 -2px -2px;
    padding: 0;
    overflow: visible;
    color: var(--ssjx-green);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset img {
    display: block;
    width: 70px;
    height: 70px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(var(--ssjx-green-rgb), .42))
        drop-shadow(0 0 20px rgba(var(--ssjx-green-rgb), .17));
    transform: translateZ(0) scale(1.025);
}

/* ---------- Floating Explore / Journey dock artwork ---------- */
.ssjx__mobile-bar button,
.ssjx__mobile-bar button:hover,
.ssjx__mobile-bar button:focus,
.ssjx__mobile-bar button:active {
    grid-template-columns: 56px auto;
    min-width: 166px;
    min-height: 72px;
    padding: 8px 20px 8px 11px;
    gap: 11px;
}

.ssjx__mobile-bar-art,
.ssjx__mobile-bar button .ssjx__mobile-bar-art {
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.ssjx__mobile-bar-art img,
.ssjx__mobile-bar button .ssjx__mobile-bar-art img {
    display: block;
    width: 54px !important;
    height: 54px !important;
    max-width: none !important;
    object-fit: contain;
    filter:
        drop-shadow(0 0 7px rgba(var(--ssjx-green-rgb), .40))
        drop-shadow(0 0 17px rgba(var(--ssjx-green-rgb), .14));
    transform: translateZ(0) scale(1.02);
}

.ssjx__mobile-bar small {
    font-size: 12px;
    font-weight: 850;
}

/* ---------- Tablet / phone scaling: still prominent, never cramped ---------- */
@media (max-width: 720px) {
    .ssjx__group-head {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 13px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset {
        width: 68px;
        height: 68px;
        margin: -3px 0 -3px -2px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset img {
        width: 66px;
        height: 66px;
    }

    .ssjx__journey-launch,
    .ssjx__journey-launch:hover,
    .ssjx__journey-launch:focus,
    .ssjx__journey-launch:active {
        grid-template-columns: 62px auto 34px;
        min-width: 0;
        min-height: 80px;
        padding: 9px 11px 9px 9px;
        gap: 10px;
    }

    .ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset {
        width: 62px;
        height: 62px;
        margin-left: -1px;
    }

    .ssjx__journey-launch-icon.ssjx__journey-launch-icon--asset img {
        width: 59px;
        height: 59px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        grid-template-columns: 42px auto;
        min-width: 122px;
        min-height: 58px;
        padding: 6px 13px 6px 8px;
        gap: 7px;
    }

    .ssjx__mobile-bar-art,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .ssjx__mobile-bar-art img,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art img {
        width: 41px !important;
        height: 41px !important;
    }

    .ssjx__mobile-bar small {
        font-size: 10.5px;
    }
}

@media (max-width: 380px) {
    .ssjx__group-head {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 11px;
    }

    .ssjx__group-symbol.ssjx__group-symbol--asset,
    .ssjx__group-symbol.ssjx__group-symbol--asset img {
        width: 60px;
        height: 60px;
    }

    .ssjx__mobile-bar button,
    .ssjx__mobile-bar button:hover,
    .ssjx__mobile-bar button:focus,
    .ssjx__mobile-bar button:active {
        min-width: 108px;
        grid-template-columns: 38px auto;
        padding-right: 9px;
    }

    .ssjx__mobile-bar-art,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .ssjx__mobile-bar-art img,
    .ssjx__mobile-bar button .ssjx__mobile-bar-art img {
        width: 37px !important;
        height: 37px !important;
    }
}


/* =========================================================
   V2.2 — WHERE SYMSOUL HELPS: SUPPLIED CATEGORY ARTWORK

   The 13 business/professional categories now use the supplied
   WebP assets instead of the previous generic line SVGs. The
   artwork is deliberately allowed to breathe: no extra icon-well
   border, larger visual footprint, and the same asset follows the
   category into Preview, Detail and My Journey.
   ========================================================= */

.ssjx__group--blue .ssjx__card-icon--asset,
.ssjx__group--blue .ssjx__card:hover .ssjx__card-icon--asset,
.ssjx__group--blue .ssjx__card.is-active .ssjx__card-icon--asset {
    width: 48px;
    height: 48px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.ssjx__group--blue .ssjx__card-icon--asset img {
    display: block;
    width: 48px;
    height: 48px;
    max-width: none;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(0 0 5px rgba(90, 177, 255, .36))
        drop-shadow(0 0 12px rgba(68, 137, 255, .14));
    transform: translateZ(0) scale(1);
    transform-origin: 50% 50%;
    transition:
        transform 220ms cubic-bezier(.16, .78, .22, 1),
        filter 220ms ease;
}

.ssjx__group--blue .ssjx__card:hover .ssjx__card-icon--asset img,
.ssjx__group--blue .ssjx__card:focus-within .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 7px rgba(110, 194, 255, .62))
        drop-shadow(0 0 18px rgba(69, 143, 255, .24));
    transform: translateZ(0) scale(1.085);
}

.ssjx__group--blue .ssjx__card.is-active .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 8px rgba(130, 208, 255, .78))
        drop-shadow(0 0 22px rgba(65, 139, 255, .34));
    transform: translateZ(0) scale(1.11);
}

/* Large preview destination: use the supplied artwork as the hero mark. */
.ssjx__preview-icon.is-asset-icon {
    overflow: visible;
    background:
        radial-gradient(circle at center, rgba(72, 164, 255, .18), transparent 48%);
}

.ssjx__preview-icon.is-asset-icon img {
    display: block;
    width: clamp(92px, 8vw, 124px);
    height: clamp(92px, 8vw, 124px);
    max-width: 78%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 9px rgba(105, 192, 255, .54))
        drop-shadow(0 0 28px rgba(62, 137, 255, .22));
}

/* Focused detail canvas: unframed asset, larger than the old SVG glyph. */
.ssjx__detail-icon.is-asset-icon {
    width: 74px;
    height: 74px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ssjx__detail-icon.is-asset-icon img {
    display: block;
    width: 72px;
    height: 72px;
    max-width: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 7px rgba(104, 190, 255, .44))
        drop-shadow(0 0 18px rgba(56, 129, 255, .18));
}

/* Saved Journey rows keep the real category artwork recognisable. */
.ssjx__journey-item-icon.is-asset-icon {
    width: 46px;
    height: 46px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ssjx__journey-item-icon.is-asset-icon img {
    display: block;
    width: 44px;
    height: 44px;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(95, 183, 255, .34));
}

@media (max-width: 720px) {
    .ssjx__group--blue .ssjx__card-icon--asset,
    .ssjx__group--blue .ssjx__card:hover .ssjx__card-icon--asset,
    .ssjx__group--blue .ssjx__card.is-active .ssjx__card-icon--asset {
        width: 45px;
        height: 45px;
    }

    .ssjx__group--blue .ssjx__card-icon--asset img {
        width: 45px;
        height: 45px;
    }

    .ssjx__preview-icon.is-asset-icon img {
        width: 94px;
        height: 94px;
        max-width: none;
    }

    .ssjx__detail-icon.is-asset-icon,
    .ssjx__detail-icon.is-asset-icon img {
        width: 62px;
        height: 62px;
    }

    .ssjx__journey-item-icon.is-asset-icon,
    .ssjx__journey-item-icon.is-asset-icon img {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 380px) {
    .ssjx__group--blue .ssjx__card-icon--asset,
    .ssjx__group--blue .ssjx__card-icon--asset img {
        width: 42px;
        height: 42px;
    }
}




/* =========================================================
   V2.5 — INTERACTION STABILITY / DYNAMIC ASSET / MODAL LAYER FIX

   1. Buttons keep exactly the same geometry in every state. Pressing moves
      the complete control down 2px instead of shrinking it.
   2. Dynamic business artwork is given explicit image geometry in Preview,
      Detail and Journey surfaces.
   3. Detail / Journey overlays are lifted above the site's fixed header.
   ========================================================= */

/* ---------- Buttons: no size or typography changes between states ---------- */
.ssjx__button,
.ssjx__button:hover,
.ssjx__button:focus,
.ssjx__button:focus-visible,
.ssjx__button:active {
    box-sizing: border-box !important;
    min-height: 56px !important;
    max-height: 56px !important;
    height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 1px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
    transform-origin: 50% 50% !important;
}

/* Hover only changes illumination; it never changes the footprint. */
.ssjx__button:hover,
.ssjx__button:focus-visible {
    transform: translate3d(0, 0, 0) !important;
    scale: 1 !important;
}

/* Press feedback is movement, not scaling. */
.ssjx__button:active {
    transform: translate3d(0, 2px, 0) !important;
    scale: 1 !important;
}

/* Keep the two Preview controls dimensionally fixed on inline/desktop views. */
@media (min-width: 721px) {
    .ssjx__preview-actions .ssjx__button--primary,
    .ssjx__preview-actions .ssjx__button--primary:hover,
    .ssjx__preview-actions .ssjx__button--primary:focus,
    .ssjx__preview-actions .ssjx__button--primary:active {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }

    .ssjx__preview-actions .ssjx__button--ghost,
    .ssjx__preview-actions .ssjx__button--ghost:hover,
    .ssjx__preview-actions .ssjx__button--ghost:focus,
    .ssjx__preview-actions .ssjx__button--ghost:active {
        width: 212px !important;
        min-width: 212px !important;
        max-width: 212px !important;
    }
}

/* Saved / pressed states keep the same outer glow so they do not appear to shrink. */
.ssjx__preview .ssjx__button--primary:active {
    box-shadow:
        inset 0 3px 9px rgba(1, 4, 12, .28),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 7px 18px rgba(0, 0, 0, .14),
        0 0 20px rgba(var(--ssjx-preview-rgb), .28) !important;
}

.ssjx__preview .ssjx__button--ghost:active {
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 7px 18px rgba(0, 0, 0, .12),
        0 0 18px rgba(var(--ssjx-preview-rgb), .16) !important;
}

.ssjx__detail-side .ssjx__button--wide,
.ssjx__detail-side .ssjx__button--wide:hover,
.ssjx__detail-side .ssjx__button--wide:focus,
.ssjx__detail-side .ssjx__button--wide:active {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 720px) {
    .ssjx__button,
    .ssjx__button:hover,
    .ssjx__button:focus,
    .ssjx__button:active {
        min-height: 52px !important;
        max-height: 52px !important;
        height: 52px !important;
        font-size: 14px !important;
    }

    .ssjx__preview-actions .ssjx__button {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- Dynamic supplied artwork: always visible outside the grid ---------- */
.ssjx__preview-icon.is-asset-icon,
.ssjx__detail-icon.is-asset-icon,
.ssjx__journey-item-icon.is-asset-icon {
    contain: none !important;
}

.ssjx__preview-icon.is-asset-icon img,
.ssjx__detail-icon.is-asset-icon img,
.ssjx__journey-item-icon.is-asset-icon img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: none !important;
    max-height: none !important;
}

.ssjx__preview-icon.is-asset-icon img {
    width: clamp(96px, 8vw, 128px) !important;
    height: clamp(96px, 8vw, 128px) !important;
}

.ssjx__detail-icon.is-asset-icon,
.ssjx__detail-icon.is-asset-icon img {
    width: 76px !important;
    height: 76px !important;
}

.ssjx__journey-item-icon.is-asset-icon,
.ssjx__journey-item-icon.is-asset-icon img {
    width: 46px !important;
    height: 46px !important;
}

/* ---------- Full detail / Journey must sit above the fixed Simme header ---------- */
body.ssjx-has-modal .ssjx {
    isolation: auto !important;
    overflow: visible !important;
    z-index: 2147482900 !important;
}

body.ssjx-has-modal .ssjx__modal {
    z-index: 2147483000 !important;
}

body.ssjx-has-modal .ssjx__detail-canvas,
body.ssjx-has-modal .ssjx__journey-panel {
    position: relative;
    z-index: 2;
}

/* Keep the toolbar visible at the very top of the focused surface. */
.ssjx__detail-toolbar {
    top: 0 !important;
    z-index: 50 !important;
}

@media (max-width: 720px) {
    .ssjx__detail-icon.is-asset-icon,
    .ssjx__detail-icon.is-asset-icon img {
        width: 64px !important;
        height: 64px !important;
    }

    .ssjx__journey-item-icon.is-asset-icon,
    .ssjx__journey-item-icon.is-asset-icon img {
        width: 42px !important;
        height: 42px !important;
    }
}



/* =========================================================
   V2.6 — CLEAN CATEGORY ASSETS / THEMED DETAIL SURFACE / MOBILE FIT

   - Removes the redundant top My Journey launcher (markup removed in PHP).
   - Removes decorative wells from ALL supplied category artwork, including Creative.
   - Carries violet vs blue category identity into the full Detail canvas.
   - Keeps the mobile Preview artwork inside its own column and above the sticky dock.
   - Restores a continuous visible border around mobile Preview / Detail surfaces.
   ========================================================= */

/* ---------- Intro now has no secondary Journey launcher ---------- */
.ssjx__intro {
    grid-template-columns: minmax(0, 1fr) !important;
}

.ssjx__intro-copy {
    max-width: 930px;
}

/* ---------- ALL supplied category artwork is unframed ---------- */
.ssjx__card-icon--asset,
.ssjx__card:hover .ssjx__card-icon--asset,
.ssjx__card:focus-within .ssjx__card-icon--asset,
.ssjx__card.is-active .ssjx__card-icon--asset {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
}

.ssjx__card-icon--asset img {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    filter:
        drop-shadow(0 0 5px rgba(var(--ssjx-group-rgb), .38))
        drop-shadow(0 0 13px rgba(var(--ssjx-group-rgb), .15)) !important;
    transform: translateZ(0) scale(1) !important;
    transform-origin: 50% 50% !important;
    transition: transform 220ms var(--ssjx-ease), filter 220ms ease !important;
}

.ssjx__card:hover .ssjx__card-icon--asset img,
.ssjx__card:focus-within .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 7px rgba(var(--ssjx-group-rgb), .66))
        drop-shadow(0 0 19px rgba(var(--ssjx-group-rgb), .25)) !important;
    transform: translateZ(0) scale(1.075) !important;
}

.ssjx__card.is-active .ssjx__card-icon--asset img {
    filter:
        drop-shadow(0 0 9px rgba(var(--ssjx-group-rgb), .82))
        drop-shadow(0 0 24px rgba(var(--ssjx-group-rgb), .34)) !important;
    transform: translateZ(0) scale(1.10) !important;
}

/* ---------- Full Detail inherits the selected category family ---------- */
.ssjx__detail-canvas {
    --ssjx-detail-rgb: var(--ssjx-violet-rgb);
    --ssjx-detail-accent: var(--ssjx-violet);
    --ssjx-detail-accent-soft: #d7baff;
    --ssjx-detail-button-a: #7446d8;
    --ssjx-detail-button-b: #ad55df;
    --ssjx-detail-button-c: #e059c7;
    --detail-chip: rgba(var(--ssjx-detail-rgb), .085);

    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-detail-rgb), .105), transparent 27%),
        var(--detail-bg) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .58) !important;
    outline: 1px solid rgba(var(--ssjx-detail-rgb), .26);
    outline-offset: -1px;
    box-shadow:
        inset 0 0 0 1px rgba(var(--ssjx-detail-rgb), .08),
        0 28px 90px var(--detail-shadow),
        0 0 42px rgba(var(--ssjx-detail-rgb), .12) !important;
}

.ssjx__detail-canvas[data-ssjx-theme="blue"] {
    --ssjx-detail-rgb: var(--ssjx-blue-rgb);
    --ssjx-detail-accent: var(--ssjx-blue);
    --ssjx-detail-accent-soft: #c9e3ff;
    --ssjx-detail-button-a: #315fc9;
    --ssjx-detail-button-b: #4d86ee;
    --ssjx-detail-button-c: #74b9ff;
}

.ssjx__detail-canvas[data-ssjx-reading="light"] {
    background:
        radial-gradient(circle at 0 0, rgba(var(--ssjx-detail-rgb), .085), transparent 29%),
        var(--detail-bg) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .48) !important;
}

.ssjx__detail-section,
.ssjx__detail-kicker,
.ssjx__detail-side-label,
.ssjx__detail-tags span {
    color: var(--ssjx-detail-accent) !important;
}

.ssjx__detail-tags span {
    background: rgba(var(--ssjx-detail-rgb), .075) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .25) !important;
}

.ssjx__reading-toggle svg,
.ssjx__detail-icon {
    color: var(--ssjx-detail-accent) !important;
}

.ssjx__detail-icon:not(.is-asset-icon) {
    background: rgba(var(--ssjx-detail-rgb), .075) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .34) !important;
    box-shadow:
        inset 0 0 18px rgba(var(--ssjx-detail-rgb), .055),
        0 0 18px rgba(var(--ssjx-detail-rgb), .11) !important;
}

.ssjx__detail-icon svg {
    filter: drop-shadow(0 0 7px rgba(var(--ssjx-detail-rgb), .36)) !important;
}

.ssjx__detail-icon.is-asset-icon img {
    filter:
        drop-shadow(0 0 8px rgba(var(--ssjx-detail-rgb), .52))
        drop-shadow(0 0 22px rgba(var(--ssjx-detail-rgb), .20)) !important;
}

.ssjx__detail-value-grid div,
.ssjx__detail-side-card {
    border-color: rgba(var(--ssjx-detail-rgb), .22) !important;
}

.ssjx__detail-back,
.ssjx__reading-toggle,
.ssjx__detail-toolbar .ssjx__icon-button {
    border-color: rgba(var(--ssjx-detail-rgb), .28) !important;
}

.ssjx__detail-canvas .ssjx__button--primary,
.ssjx__detail-canvas .ssjx__button--primary:hover,
.ssjx__detail-canvas .ssjx__button--primary:focus,
.ssjx__detail-canvas .ssjx__button--primary:focus-visible,
.ssjx__detail-canvas .ssjx__button--primary:active {
    background:
        linear-gradient(
            115deg,
            var(--ssjx-detail-button-a),
            var(--ssjx-detail-button-b) 56%,
            var(--ssjx-detail-button-c)
        ) !important;
    border-color: rgba(var(--ssjx-detail-rgb), .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 22px rgba(var(--ssjx-detail-rgb), .29) !important;
}

.ssjx__detail-canvas .ssjx__button--primary:hover,
.ssjx__detail-canvas .ssjx__button--primary:focus-visible {
    filter: brightness(1.08) saturate(1.06);
    border-color: rgba(var(--ssjx-detail-rgb), 1) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 0 30px rgba(var(--ssjx-detail-rgb), .39) !important;
}

.ssjx__detail-canvas .ssjx__button--primary:active {
    filter: brightness(.96) saturate(1.03);
    box-shadow:
        inset 0 3px 9px rgba(0, 0, 0, .27),
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 20px rgba(var(--ssjx-detail-rgb), .25) !important;
}

/* ---------- Mobile Preview: artwork stays in its lane, dock stays clear ---------- */
@media (max-width: 720px) {
    .ssjx.is-preview-open {
        isolation: auto !important;
        overflow: visible !important;
        z-index: 2147482800 !important;
    }

    .ssjx__preview {
        left: 12px !important;
        right: 12px !important;
        bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px)) !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        max-height: min(calc(100dvh - 112px), 610px) !important;
        border: 1px solid rgba(var(--ssjx-preview-rgb), .72) !important;
        border-radius: 21px !important;
        outline: 1px solid rgba(var(--ssjx-preview-rgb), .16);
        outline-offset: -1px;
        box-shadow:
            inset 0 0 0 1px rgba(var(--ssjx-preview-rgb), .06),
            0 -8px 38px rgba(0, 0, 0, .38),
            0 0 34px rgba(var(--ssjx-preview-rgb), .16) !important;
    }

    .ssjx__preview-icon,
    .ssjx__preview-icon.is-asset-icon {
        min-width: 82px !important;
        width: 82px !important;
        min-height: 100% !important;
        overflow: hidden !important;
        border-right: 1px solid rgba(var(--ssjx-preview-rgb), .30) !important;
    }

    .ssjx__preview-icon.is-asset-icon img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        object-fit: contain !important;
    }

    .ssjx__preview-copy {
        min-width: 0;
        padding: 16px 13px 17px !important;
    }

    /* Mobile Detail / Journey surfaces retain a complete visible frame. */
    .ssjx__modal {
        padding:
            max(7px, env(safe-area-inset-top))
            7px
            max(7px, env(safe-area-inset-bottom)) !important;
    }

    .ssjx__detail-canvas,
    .ssjx__journey-panel {
        width: 100% !important;
        max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom))) !important;
        border: 1px solid rgba(var(--ssjx-detail-rgb, var(--ssjx-violet-rgb)), .62) !important;
        border-radius: 22px !important;
        outline-offset: -1px;
    }

    .ssjx__journey-panel {
        border-color: rgba(var(--ssjx-green-rgb), .62) !important;
    }

    .ssjx__card-icon--asset,
    .ssjx__card:hover .ssjx__card-icon--asset,
    .ssjx__card:focus-within .ssjx__card-icon--asset,
    .ssjx__card.is-active .ssjx__card-icon--asset,
    .ssjx__card-icon--asset img {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
    }
}

@media (max-width: 380px) {
    .ssjx__preview {
        left: 8px !important;
        right: 8px !important;
        grid-template-columns: 74px minmax(0, 1fr) !important;
    }

    .ssjx__preview-icon,
    .ssjx__preview-icon.is-asset-icon {
        width: 74px !important;
        min-width: 74px !important;
    }

    .ssjx__preview-icon.is-asset-icon img {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .ssjx__card-icon--asset,
    .ssjx__card-icon--asset img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
}