/* Solex | Paso a paso – isolated visual composition.
   Does not modify #guide-atlas's background, textures or decorative layers. */

.sx-public #guide-atlas {
    padding-block: 62px 46px;
}

#guide-atlas .atlas-shell.atlas-journey-layout {
    width: min(1272px, calc(100% - 74px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 334px;
    grid-template-rows: 215px 298px auto;
    column-gap: 0;
    row-gap: 0;
    align-items: initial;
    gap: 0;
    position: relative;
    z-index: 1;
}

#guide-atlas .atlas-journey-intro {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    position: relative;
    z-index: 3;
    padding: 0 0 0 8px;
}

#guide-atlas .atlas-journey-intro .atlas-kicker {
    margin: 0 0 11px;
    color: #09e9db;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    line-height: 1.2;
}

#guide-atlas .atlas-journey-intro .atlas-kicker::after {
    background: linear-gradient(90deg, rgba(9, 233, 219, .95), transparent);
    width: 58px;
}

.sx-public #guide-atlas .atlas-journey-intro h2 {
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: #ebfbf6;
    font-family: "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(41px, 4.36vw, 59px);
    font-weight: 800;
    letter-spacing: -.059em;
    line-height: 1.075;
    text-wrap: initial;
}

body.sx-public #guide-atlas .atlas-journey-intro h2 span {
    color: #0de2d5 !important;
    -webkit-text-fill-color: #0de2d5 !important;
}

.sx-public #guide-atlas .atlas-journey-intro .atlas-lead {
    margin: 10px 0 0;
    max-width: 650px;
    color: #adbdc1;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
}

/* Gently ascending path and four individual glass instruction cards. */
#guide-atlas .atlas-process {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    min-width: 0;
    height: 298px;
    z-index: 1;
    overflow: visible;
}

#guide-atlas .atlas-journey-curve {
    display: block;
    position: absolute;
    left: -8px;
    top: 0;
    width: calc(100% + 16px);
    height: 298px;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

#guide-atlas .atlas-curve-trail {
    fill: none;
    stroke: #08b8ae;
    stroke-width: 1.2;
    stroke-dasharray: 7 9;
    opacity: .22;
}

#guide-atlas .atlas-curve-halo {
    fill: none;
    stroke: #03ffeb;
    stroke-width: 11;
    stroke-linecap: round;
    opacity: .54;
    filter: url(#atlas-route-glow);
}

#guide-atlas .atlas-curve-line {
    fill: none;
    stroke: url(#atlas-route-gradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#guide-atlas .atlas-curve-arrow {
    fill: #1ef3e4;
    filter: drop-shadow(0 0 8px rgba(14, 255, 232, .72));
}

#guide-atlas .atlas-steps {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 2;
    overflow: visible;
}

#guide-atlas .atlas-steps::before,
#guide-atlas .atlas-steps::after {
    content: none;
    display: none;
}

#guide-atlas .atlas-steps > li {
    --card-height: 158px;
    --marker-gap: 22px;
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    min-height: 0;
    height: var(--card-height);
    width: 180px;
    text-align: left;
    z-index: 2;
    transform: none;
}

#guide-atlas .atlas-steps > li:nth-child(1) {
    left: 4.2%;
    top: 42px;
    width: 182px;
    --card-height: 154px;
    --marker-gap: 29px;
}

#guide-atlas .atlas-steps > li:nth-child(2) {
    left: 30.6%;
    top: 13px;
    width: 184px;
    --card-height: 158px;
    --marker-gap: 22px;
}

#guide-atlas .atlas-steps > li:nth-child(3) {
    left: 55.7%;
    top: -20px;
    width: 181px;
    --card-height: 164px;
    --marker-gap: 19px;
}

#guide-atlas .atlas-steps > li:nth-child(4) {
    left: 80.2%;
    top: -58px;
    width: 153px;
    --card-height: 156px;
    --marker-gap: 21px;
}

#guide-atlas .atlas-step-card {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 15px 20px 17px;
    border: 1px solid rgba(12, 214, 201, .52);
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(0, 43, 46, .84), rgba(1, 17, 24, .86) 78%);
    box-shadow: inset 0 1px 0 rgba(29, 245, 226, .08), inset 0 0 30px rgba(6, 157, 150, .05), 0 18px 36px rgba(0, 0, 0, .17), 0 0 18px rgba(0, 236, 214, .04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#guide-atlas .atlas-step-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 15px;
    height: 15px;
    border-right: 1px solid rgba(12, 214, 201, .4);
    border-bottom: 1px solid rgba(12, 214, 201, .4);
    background: rgba(1, 29, 34, .93);
    transform: translateX(-50%) rotate(45deg);
}

#guide-atlas .atlas-step-top {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 54px;
    margin: 0 0 8px;
}

#guide-atlas .atlas-step-number {
    display: block;
    font: 800 17px/1 "Manrope", "Plus Jakarta Sans", sans-serif;
    color: #59f5e8;
    letter-spacing: -.02em;
}

#guide-atlas .atlas-steps .atlas-step-icon,
.sx-public #guide-atlas .atlas-steps .atlas-step-icon {
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #06e6db;
    border-radius: 50%;
    background: rgba(0, 21, 29, .92);
    color: #06f6e5 !important;
    font-size: inherit;
    box-shadow: 0 0 20px rgba(0, 240, 216, .19), inset 0 0 10px rgba(0, 231, 216, .045);
    transform: none !important;
}

#guide-atlas .atlas-step-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

#guide-atlas .atlas-step-card strong,
#guide-atlas .atlas-steps li:nth-child(n) strong {
    display: block;
    min-height: 0;
    margin: 0 0 9px;
    color: #edf8f7;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.2;
    white-space: nowrap;
    transform: none !important;
}

#guide-atlas .atlas-step-description,
#guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description {
    display: block;
    max-width: initial;
    margin: 0;
    color: #afc1c6;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.32;
    text-align: left;
    transform: none !important;
}

#guide-atlas .atlas-step-marker {
    position: absolute;
    left: 50%;
    top: calc(var(--card-height) + var(--marker-gap));
    z-index: 4;
    width: 23px;
    height: 23px;
    border: 5px solid #00e9d8;
    border-radius: 50%;
    background: #b5fff7;
    box-shadow: 0 0 0 5px rgba(2, 219, 206, .13), 0 0 19px 7px rgba(0, 242, 225, .6);
    transform: translate(-50%, -50%);
}

#guide-atlas .atlas-step-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--marker-gap) + 5px);
    width: 1px;
    height: max(0px, calc(var(--marker-gap) - 10px));
    background: linear-gradient(180deg, rgba(12, 214, 201, .06), rgba(0, 241, 223, .46));
    transform: translateX(-50%);
}

/* Single-rotation glass device, aligned with the raised end of the path. */
#guide-atlas .atlas-phone-wrap {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    top: -4px;
    justify-self: end;
    align-self: start;
    display: block;
    width: 322px;
    min-height: 0;
    height: 548px;
    margin: 0 -12px 0 0;
    z-index: 3;
    transform: none !important;
}

#guide-atlas .atlas-phone-wrap::before {
    content: "";
    position: absolute;
    inset: 40px 12px 32px -20px;
    background: radial-gradient(circle at 35% 45%, rgba(9, 255, 231, .24), transparent 52%), radial-gradient(circle at 70% 75%, rgba(3, 204, 189, .15), transparent 44%);
    filter: blur(18px);
    pointer-events: none;
}

#guide-atlas .atlas-phone-wrap::after {
    content: "";
    position: absolute;
    left: -22px;
    right: -6px;
    bottom: -2px;
    width: auto;
    height: 54px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(3, 220, 204, .16), transparent 70%);
    filter: blur(13px);
}

#guide-atlas .atlas-phone {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 322px;
    height: 548px;
    min-height: 0;
    margin: 0;
    padding: 37px 11px 17px;
    border: 3px solid transparent;
    border-radius: 50px;
    background:
        linear-gradient(128deg, #07121a 0%, #02090f 78%, #09252a 100%) padding-box,
        linear-gradient(112deg, #bfd6d5 0%, #63858b 18%, #21393f 54%, #90bab9 82%, #253b40 100%) border-box;
    box-shadow: 0 42px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(72, 221, 211, .20), inset 0 0 0 2px rgba(9, 24, 30, .96), inset 0 0 22px rgba(160, 255, 242, .04), 0 0 40px rgba(0, 236, 214, .12);
    transform: rotate(5deg) !important;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

#guide-atlas .atlas-phone::before {
    content: "";
    position: absolute;
    top: 92px;
    right: 1px;
    bottom: auto;
    width: 3px;
    height: 124px;
    border-radius: 4px;
    background: linear-gradient(#8badaf, #143039 60%, #34595e);
    opacity: .8;
    z-index: 6;
}

#guide-atlas .atlas-phone::after {
    content: "";
    position: absolute;
    inset: 5px;
    pointer-events: none;
    border: 1px solid rgba(177, 223, 219, .10);
    border-radius: 43px;
    z-index: 4;
}

#guide-atlas .atlas-phone .atlas-chat-body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, .04) 0%, transparent 32%, transparent 100%);
    pointer-events: none;
}

#guide-atlas .atlas-phone-island {
    position: absolute;
    z-index: 5;
    top: 10px;
    left: 50%;
    width: 92px;
    height: 22px;
    margin: 0;
    border-radius: 14px;
    background: #000409;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 3px 8px rgba(0, 0, 0, .45);
    transform: translateX(-50%);
}

#guide-atlas .atlas-chat-head {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
    min-height: 68px;
    padding: 7px 9px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    background: rgba(4, 15, 22, .79);
}

#guide-atlas .atlas-chat-head img {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
}

#guide-atlas .atlas-chat-head > div {
    flex: 1;
    min-width: 0;
}

#guide-atlas .atlas-chat-head strong {
    color: #edf9f5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.035em;
    white-space: nowrap;
}

#guide-atlas .atlas-chat-head span {
    color: #10eee0;
    font-size: 10.5px;
    font-weight: 700;
}

#guide-atlas .atlas-chat-head .atlas-chat-call {
    display: block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    margin: 0 1px 0 0;
    color: #07f3e1;
}

#guide-atlas .atlas-chat-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 13px;
    min-height: 0;
    padding: 16px 9px 62px;
    background: linear-gradient(155deg, #0b1d26, #06121a);
    position: relative;
}

#guide-atlas .atlas-chat-body p {
    flex: 0 0 auto;
    max-width: 87%;
    margin: 0;
    padding: 12px 13px 9px;
    border-radius: 14px 14px 14px 5px;
    background: linear-gradient(180deg, #202f3a, #182933);
    color: #eef8f7;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 11.4px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.035em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .13);
}

#guide-atlas .atlas-chat-body p.is-sent {
    align-self: flex-end;
    border-radius: 14px 14px 5px 14px;
    background: linear-gradient(135deg, #0a8f87, #04675d);
    color: #f1fffb;
    box-shadow: 0 8px 20px rgba(0, 245, 214, .07);
}

#guide-atlas .atlas-chat-body p small {
    display: block;
    margin-top: 5px;
    color: rgba(218, 245, 243, .47);
    font-size: 8px;
    text-align: right;
}

#guide-atlas .atlas-chat-input {
    display: flex;
    align-items: center;
    gap: 9px;
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 14px;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .04);
    border-radius: 19px;
    background: linear-gradient(180deg, #152934, #12232d);
    color: #617580;
    font-size: 12px;
}

#guide-atlas .atlas-chat-input span { flex: 1; }
#guide-atlas .atlas-chat-input .atlas-chat-smile { display: block; width: 16px; height: 16px; color: #6b8087; }
#guide-atlas .atlas-chat-input .atlas-chat-mic { display: block; width: 18px; height: 18px; color: #07edd9; }

/* Three full-width benefit panels with layered dimensional icon tiles. */
#guide-atlas .atlas-benefits {
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    width: 100%;
    align-items: stretch;
}

.sx-public #guide-atlas .atlas-benefits article {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 146px;
    margin: 0;
    padding: 14px 20px 14px 18px;
    border: 1px solid rgba(8, 215, 205, .38) !important;
    border-radius: 13px;
    background: linear-gradient(120deg, rgba(1, 33, 36, .79), rgba(1, 20, 28, .88)) !important;
    box-shadow: inset 0 1px 0 rgba(15, 255, 233, .035), 0 16px 38px rgba(0, 0, 0, .12) !important;
    overflow: hidden;
}

#guide-atlas .atlas-benefit-art {
    position: relative;
    flex: 0 0 126px;
    width: 126px;
    height: 113px;
    isolation: isolate;
}

#guide-atlas .atlas-art-layer {
    position: absolute;
    left: 22px;
    top: 13px;
    width: 83px;
    height: 88px;
    border: 1px solid rgba(10, 226, 207, .18);
    border-radius: 17px;
    transform-origin: center;
}

#guide-atlas .atlas-art-layer--back {
    z-index: 0;
    transform: rotate(-17deg) translate(-9px, 3px);
    background: linear-gradient(150deg, rgba(6, 115, 111, .33), rgba(4, 31, 37, .24));
    box-shadow: inset 0 0 20px rgba(2, 249, 211, .05);
}

#guide-atlas .atlas-art-layer--mid {
    z-index: 1;
    transform: rotate(16deg) translate(7px, 1px);
    background: linear-gradient(145deg, rgba(0, 154, 139, .32), rgba(4, 24, 31, .48));
    box-shadow: 0 13px 19px rgba(0, 0, 0, .16);
}

#guide-atlas .atlas-art-layer--front {
    z-index: 2;
    display: grid;
    place-items: center;
    transform: rotate(-4deg);
    background: linear-gradient(150deg, #006a67 0%, #004044 47%, #01282e 100%);
    box-shadow: inset 0 1px 2px rgba(68, 255, 227, .22), inset -7px -8px 17px rgba(0, 0, 0, .3), 0 8px 21px rgba(0, 0, 0, .22), 0 0 24px rgba(0, 228, 209, .10);
}

#guide-atlas .atlas-art-layer--front svg {
    display: block;
    width: 45px;
    height: 45px;
    color: #12e1cb;
    filter: drop-shadow(0 0 6px rgba(9, 232, 206, .30));
}

#guide-atlas .atlas-benefit-copy {
    position: relative;
    z-index: 3;
    flex: 1;
    min-width: 0;
}

.sx-public #guide-atlas .atlas-benefit-copy h3 {
    margin: 0 0 10px;
    color: #e9f9f4;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1.28;
}

.sx-public #guide-atlas .atlas-benefit-copy p {
    margin: 0;
    max-width: 225px;
    color: #b0c2c5;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.48;
}

@media (hover: hover) and (pointer: fine) {
    .sx-public #guide-atlas .atlas-benefits article {
        transition: transform .28s cubic-bezier(.2, .7, .3, 1), border-color .28s ease, box-shadow .28s ease;
    }

    .sx-public #guide-atlas .atlas-benefits article:hover {
        transform: translateY(-4px);
        border-color: rgba(22, 239, 216, .62) !important;
        box-shadow: inset 0 1px 0 rgba(15, 255, 233, .06), 0 20px 40px rgba(0, 0, 0, .22), 0 0 24px rgba(0, 226, 205, .08) !important;
    }
}

@media (min-width: 1400px) {
    .sx-public #guide-atlas { padding-block: 67px 49px; }
}

@media (max-width: 1160px) and (min-width: 861px) {
    #guide-atlas .atlas-shell.atlas-journey-layout {
        width: calc(100% - 56px);
        grid-template-columns: minmax(0, 1fr) 265px;
        grid-template-rows: 218px 283px auto;
    }

    .sx-public #guide-atlas .atlas-journey-intro h2 {
        font-size: clamp(39px, 4.55vw, 53px);
    }

    #guide-atlas .atlas-steps > li {
        width: 151px;
    }

    #guide-atlas .atlas-steps > li:nth-child(3) { width: 153px; }
    #guide-atlas .atlas-steps > li:nth-child(4) { width: 138px; }
    #guide-atlas .atlas-step-card { padding-inline: 14px; }
    #guide-atlas .atlas-step-top { gap: 15px; }
    #guide-atlas .atlas-step-card strong { font-size: 13px; }
    #guide-atlas .atlas-step-description { font-size: 11px; }
    #guide-atlas .atlas-step-marker { width: 21px; height: 21px; }
    #guide-atlas .atlas-phone-wrap { width: 257px; height: 477px; margin-right: 0; top: 19px; }
    #guide-atlas .atlas-phone { width: 257px; height: 477px; border-radius: 41px; }
    #guide-atlas .atlas-chat-body { gap: 10px; padding: 12px 6px 56px; }
    #guide-atlas .atlas-chat-body p { font-size: 10px; padding: 9px; }
    #guide-atlas .atlas-benefits { gap: 12px; }
    .sx-public #guide-atlas .atlas-benefits article { padding-inline: 11px; gap: 4px; }
    #guide-atlas .atlas-benefit-art { flex-basis: 98px; width: 98px; }
    #guide-atlas .atlas-art-layer { left: 13px; width: 75px; height: 80px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size: 14px; }
    .sx-public #guide-atlas .atlas-benefit-copy p { font-size: 12px; }
}

@media (max-width: 860px) {
    .sx-public #guide-atlas { padding-block: 64px 64px; }

    #guide-atlas .atlas-shell.atlas-journey-layout {
        width: min(720px, calc(100% - 44px));
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        gap: 0;
    }

    #guide-atlas .atlas-journey-intro {
        grid-column: 1;
        grid-row: 1;
        padding: 0;
    }

    .sx-public #guide-atlas .atlas-journey-intro h2 {
        width: auto;
        max-width: 100%;
        font-size: clamp(41px, 6.8vw, 56px);
    }

    #guide-atlas .atlas-process {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 308px;
        margin-top: 94px;
    }

    #guide-atlas .atlas-journey-curve { height: 300px; }

    #guide-atlas .atlas-steps > li { width: 160px; }
    #guide-atlas .atlas-steps > li:nth-child(1) { left: 1%; }
    #guide-atlas .atlas-steps > li:nth-child(2) { left: 26%; --marker-gap: 38px; }
    #guide-atlas .atlas-steps > li:nth-child(3) { left: 51%; width: 160px; --marker-gap: 24px; }
    #guide-atlas .atlas-steps > li:nth-child(4) { left: 76%; width: 148px; }
    #guide-atlas .atlas-step-card { padding-inline: 15px; }
    #guide-atlas .atlas-step-top { gap: 16px; }
    #guide-atlas .atlas-step-card strong { font-size: 13px; }
    #guide-atlas .atlas-step-description { font-size: 11.5px; }

    #guide-atlas .atlas-phone-wrap {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        top: 0;
        width: 292px;
        height: 508px;
        margin: 0 0 38px;
    }

    #guide-atlas .atlas-phone { width: 292px; height: 507px; }

    #guide-atlas .atlas-benefits {
        grid-column: 1;
        grid-row: 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    #guide-atlas .atlas-benefits article:last-child { grid-column: 1 / -1; }
    .sx-public #guide-atlas .atlas-benefits article { min-height: 135px; }
    #guide-atlas .atlas-benefit-art { flex-basis: 105px; width: 105px; }
    #guide-atlas .atlas-art-layer { left: 15px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size: 15px; }
}

@media (max-width: 610px) {
    .sx-public #guide-atlas { padding-block: 56px 62px; }

    #guide-atlas .atlas-shell.atlas-journey-layout {
        width: calc(100% - 38px);
    }

    #guide-atlas .atlas-journey-intro .atlas-kicker {
        font-size: 10px;
        letter-spacing: .15em;
        margin-bottom: 15px;
    }

    .sx-public #guide-atlas .atlas-journey-intro h2 {
        font-size: clamp(32px, 8.25vw, 43px);
        letter-spacing: -.055em;
        line-height: 1.12;
    }

    .sx-public #guide-atlas .atlas-journey-intro h2 br { display: none; }

    .sx-public #guide-atlas .atlas-journey-intro .atlas-lead {
        margin-top: 15px;
        font-size: 15px;
    }

    #guide-atlas .atlas-process {
        height: auto;
        margin-top: 37px;
        margin-bottom: 32px;
    }

    #guide-atlas .atlas-journey-curve { display: none; }

    #guide-atlas .atlas-steps {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
        padding-left: 25px;
    }

    #guide-atlas .atlas-steps::before {
        content: "";
        display: block;
        position: absolute;
        top: 28px;
        bottom: 28px;
        left: 9px;
        right: auto;
        height: auto;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(#009d9a, #1af5dc 45%, #18c5b9);
        box-shadow: 0 0 12px rgba(0, 240, 222, .45);
    }

    #guide-atlas .atlas-steps > li,
    #guide-atlas .atlas-steps > li:nth-child(n) {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        transform: none;
    }

    #guide-atlas .atlas-step-card {
        min-height: 132px;
        height: auto;
        padding: 15px 18px 18px;
        border-radius: 12px;
    }

    #guide-atlas .atlas-step-card::after { display: none; }
    #guide-atlas .atlas-step-top { gap: 22px; margin-bottom: 6px; }
    #guide-atlas .atlas-step-card strong,
    #guide-atlas .atlas-steps li:nth-child(n) strong { font-size: 15px; }
    #guide-atlas .atlas-step-description,
    #guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description { font-size: 13px; }

    #guide-atlas .atlas-step-marker {
        left: -16px;
        top: 51%;
        width: 19px;
        height: 19px;
        border-width: 4px;
    }

    #guide-atlas .atlas-step-marker::before { display: none; }

    #guide-atlas .atlas-phone-wrap {
        width: min(283px, calc(100% - 30px));
        height: 489px;
        margin: 0 0 35px;
    }

    #guide-atlas .atlas-phone {
        width: 100%;
        height: 488px;
        border-radius: 42px;
        transform: rotate(4deg) !important;
    }

    #guide-atlas .atlas-chat-body { gap: 10px; }

    #guide-atlas .atlas-benefits {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    #guide-atlas .atlas-benefits article:last-child { grid-column: auto; }
    .sx-public #guide-atlas .atlas-benefits article { min-height: 135px; padding-inline: 15px; gap: 14px; }
    #guide-atlas .atlas-benefit-art { flex-basis: 108px; width: 108px; }
    #guide-atlas .atlas-art-layer { left: 14px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size: 15px; margin-bottom: 8px; }
    .sx-public #guide-atlas .atlas-benefit-copy p { font-size: 12px; }
}

@media (max-width: 370px) {
    .sx-public #guide-atlas .atlas-journey-intro h2 { font-size: 30px; }
    .sx-public #guide-atlas .atlas-benefits article { gap: 6px; padding-inline: 9px; }
    #guide-atlas .atlas-benefit-art { flex-basis: 83px; width: 83px; }
    #guide-atlas .atlas-art-layer { left: 6px; width: 69px; height: 76px; top: 17px; }
    #guide-atlas .atlas-art-layer--front svg { width: 39px; height: 39px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size: 14px; }
    .sx-public #guide-atlas .atlas-benefit-copy p { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .sx-public #guide-atlas .atlas-benefits article { transition: none; }
}

/* ===================================================================
   SOLEX GUIDE — Reference fidelity pass (v3)
   New planet/rock scene is an independent decorative layer. We intentionally
   do not override the original section's background from hero-language.css.
   The section stays semantic and fully responsive, with live DOM text.
   =================================================================== */

.sx-public #guide-atlas {
    padding-block: 64px 38px;
}

#guide-atlas .atlas-shell.atlas-journey-layout {
    width: min(1208px, calc(100% - 104px));
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: 230px 284px auto;
    gap: 0;
    align-items: initial;
    position: relative;
    z-index: 2;
}

/* Planet, ridge, and soft reflected light; section background remains intact. */
#guide-atlas .atlas-journey-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    isolation: isolate;
}

#guide-atlas .atlas-journey-planet {
    position: absolute;
    width: clamp(800px, 80vw, 1080px);
    height: clamp(800px, 80vw, 1080px);
    right: -38%;
    top: -350px;
    border-radius: 50%;
    border: 1.8px solid transparent;
    background:
        radial-gradient(ellipse at 32% 71%, rgba(1, 68, 69, .17), transparent 56%) padding-box,
        radial-gradient(ellipse at 36% 24%, rgba(1, 106, 98, .53) 0%, rgba(1, 58, 58, .42) 34%, rgba(1, 33, 39, .72) 63%, rgba(0, 15, 26, .82) 100%) padding-box,
        linear-gradient(142deg, rgba(53, 255, 240, .98), rgba(31, 237, 217, .9) 27%, rgba(1, 92, 93, .42) 65%, transparent 92%) border-box;
    box-shadow:
        -7px -6px 27px rgba(0, 249, 220, .26),
        -34px -24px 86px rgba(0, 221, 208, .075),
        inset 26px 10px 57px rgba(3, 192, 177, .16),
        inset 88px 35px 100px rgba(0, 16, 22, .24);
    transform: rotate(-9deg);
    opacity: .96;
}

#guide-atlas .atlas-journey-planet::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border-left: 1px solid rgba(37, 255, 240, .96);
    border-top: 1px solid rgba(47, 245, 225, .74);
    box-shadow: -2px 0 18px rgba(0, 245, 223, .34), inset 10px 6px 26px rgba(0, 227, 205, .14);
    mask-image: linear-gradient(112deg, #000, #000 52%, transparent 76%);
}

#guide-atlas .atlas-journey-planet::after {
    content: "";
    position: absolute;
    inset: 8% 0 0 13%;
    border-radius: inherit;
    background: radial-gradient(ellipse at 24% 48%, transparent 12%, rgba(1, 32, 37, .45) 62%, rgba(0, 7, 15, .48) 95%);
    filter: blur(37px);
}

#guide-atlas .atlas-journey-terrain {
    position: absolute;
    display: block;
    right: -7%;
    bottom: 85px;
    width: 77%;
    height: 420px;
    opacity: .78;
    mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.34) 15%, #000 44%),
                linear-gradient(to bottom, transparent, #000 35%, #000 80%, transparent);
    mask-composite: intersect;
    filter: drop-shadow(-25px 12px 38px rgba(0,0,0,.3));
}

#guide-atlas .atlas-journey-intro {
    padding-left: 0;
    grid-column: 1;
    grid-row: 1;
    z-index: 3;
}

#guide-atlas .atlas-journey-intro .atlas-kicker {
    margin-bottom: 12px;
    color: #16f8eb;
    font-size: 11.5px;
    letter-spacing: .22em;
}

.sx-public #guide-atlas .atlas-journey-intro h2 {
    width: max-content;
    max-width: 100%;
    font-size: clamp(42px, 4.38vw, 59px);
    line-height: 1.075;
    letter-spacing: -.057em;
    color: #f0fff9;
    text-shadow: 0 1px 10px rgba(200,255,252,.035);
}

body.sx-public #guide-atlas .atlas-journey-intro h2 span {
    color: #05e9e1 !important;
    -webkit-text-fill-color: #05e9e1 !important;
}

.sx-public #guide-atlas .atlas-journey-intro .atlas-lead {
    margin-top: 13px;
    font-size: 19px;
    color: #b9c9ce;
}

#guide-atlas .atlas-process {
    height: 284px;
    grid-column: 1;
    grid-row: 2;
    overflow: visible;
    z-index: 2;
}

#guide-atlas .atlas-journey-curve {
    left: 0;
    top: 0;
    width: 100%;
    height: 284px;
    overflow: visible;
}

#guide-atlas .atlas-curve-line { stroke-width: 2.9; }
#guide-atlas .atlas-curve-halo { stroke-width: 12; opacity: .53; }
#guide-atlas .atlas-curve-trail { opacity: .38; stroke-dasharray: 7 10; }
#guide-atlas .atlas-curve-arrow {
    fill: #22ffed;
    filter: drop-shadow(0 0 11px rgba(17, 255, 233, .95));
}

#guide-atlas .atlas-journey-origin {
    position: absolute;
    left: -24px;
    top: 218px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    z-index: 2;
    background: radial-gradient(circle at 30% 25%, #7dffe7, #0c9c92 33%, #045852 70%, #04322f);
    box-shadow: inset -6px -7px 13px rgba(0, 16, 23, .55), 0 0 17px rgba(0, 239, 216, .28);
}

#guide-atlas .atlas-steps > li:nth-child(1) {
    left: 4.2%; top: 54px; width: 186px;
    --card-height: 150px; --marker-gap: 29px;
}
#guide-atlas .atlas-steps > li:nth-child(2) {
    left: 29%; top: 20px; width: 186px;
    --card-height: 154px; --marker-gap: 20px;
}
#guide-atlas .atlas-steps > li:nth-child(3) {
    left: 53.1%; top: -20px; width: 187px;
    --card-height: 158px; --marker-gap: 22px;
}
#guide-atlas .atlas-steps > li:nth-child(4) {
    left: 75.8%; top: -58px; width: 153px;
    --card-height: 163px; --marker-gap: 12px;
}

#guide-atlas .atlas-step-card {
    border-color: rgba(4, 224, 214, .67);
    border-radius: 15px;
    padding: 16px 19px 17px;
    background: linear-gradient(145deg, rgba(0, 55, 53, .77), rgba(1, 24, 29, .78) 77%, rgba(0, 16, 24, .88));
    box-shadow:
        inset 0 1px 0 rgba(97, 255, 237, .08),
        inset 0 0 34px rgba(4, 144, 144, .045),
        0 16px 36px rgba(0, 0, 0, .16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#guide-atlas .atlas-step-card::after {
    width: 13px; height: 13px; bottom: -7px;
    background: #034044;
    border-color: rgba(13,239,215,.36);
    filter: drop-shadow(0 1px 6px rgba(0, 237, 219, .09));
}

#guide-atlas .atlas-step-top { gap: 21px; min-height: 49px; margin-bottom: 9px; }
#guide-atlas .atlas-step-number { font-size: 17px; color: #5ffef1; }
#guide-atlas .atlas-steps .atlas-step-icon,
.sx-public #guide-atlas .atlas-steps .atlas-step-icon {
    flex-basis: 50px;
    width: 50px; height: 50px;
    border-color: #0affed;
    border-width: 1.65px;
    background: radial-gradient(circle at 50% 45%, #063b3d, #001b25 72%);
    box-shadow: 0 0 18px rgba(3, 247, 227, .27), inset 0 0 15px rgba(0, 255, 236, .045);
}
#guide-atlas .atlas-step-icon svg { width: 26px; height: 26px; }
#guide-atlas .atlas-step-card strong,
#guide-atlas .atlas-steps li:nth-child(n) strong {
    font-size: 15.2px; margin-bottom: 7px;
    font-weight: 800; letter-spacing: -.032em;
}
#guide-atlas .atlas-step-description,
#guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description {
    font-size: 13px; line-height: 1.39; letter-spacing: -.022em;
    color: #c4d3d6;
}
#guide-atlas .atlas-step-marker {
    width: 22px; height: 22px;
    border: 5px solid #00f3df;
    background: #e4fff9;
    box-shadow: 0 0 0 6px rgba(0, 228, 210, .12), 0 0 20px 6px rgba(0, 255, 236, .62);
}

/* Physical handset: a metal underframe, curved rim, dark display, and chat. */
#guide-atlas .atlas-phone-wrap {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    width: 300px;
    height: 505px;
    top: 14px;
    margin: 0 28px 0 0;
    justify-self: end;
    align-self: start;
    z-index: 3;
    transform: none !important;
}

#guide-atlas .atlas-phone-wrap::before {
    inset: 20px -20px -15px -28px;
    background: radial-gradient(ellipse at 52% 57%, rgba(0, 246, 216, .2), transparent 70%);
    filter: blur(28px);
}
#guide-atlas .atlas-phone-wrap::after {
    bottom: -12px; left: 4%; right: 2%; height: 35px;
    background: radial-gradient(ellipse, rgba(0, 209, 195, .19), transparent 70%);
    filter: blur(12px);
}

#guide-atlas .atlas-phone-depth {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 48px;
    transform: rotate(5.5deg) translate(9px, 2px);
    background: linear-gradient(90deg, #263e40 0%, #719898 72%, #a6c7c0 82%, #233b3f 100%);
    border: 1px solid rgba(193, 236, 229, .3);
    box-shadow: 6px 22px 38px rgba(0,0,0,.49), 2px 0 16px rgba(42,212,196,.15);
    z-index: 0;
}

#guide-atlas .atlas-phone {
    width: 300px;
    height: 505px;
    margin: 0;
    padding: 36px 10px 14px;
    border-width: 3px;
    border-radius: 48px;
    position: relative;
    z-index: 2;
    background:
        linear-gradient(140deg, #08121b 0%, #030c15 63%, #0b2029 100%) padding-box,
        linear-gradient(108deg, #8fbbb8, #475d64 27%, #172c36 61%, #e1eeea 80%, #405d63 96%) border-box;
    box-shadow:
        0 29px 68px rgba(0,0,0,.59),
        0 0 0 1px rgba(111,245,223,.16),
        inset 0 0 0 2px rgba(1,11,19,.96),
        0 0 26px rgba(1,255,216,.09);
    transform: rotate(5.5deg) !important;
    transform-origin: 50% 50%;
}

#guide-atlas .atlas-phone::before {
    top: 94px; right: 0; height: 119px; width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg,#d4eee3, #3a6269 21%, #0e222a 68%,#b4d8d1);
    opacity: .88;
    box-shadow: 1px 0 1px rgba(0,0,0,.7);
}
#guide-atlas .atlas-phone::after {
    inset: 5px;
    border-radius: 40px;
    border: 1px solid rgba(213,255,247,.1);
    box-shadow: inset 1px 0 1px rgba(255,255,255,.075);
}
#guide-atlas .atlas-phone-island {
    width: 96px; height: 21px; top: 10px;
    border: 1px solid rgba(200,223,231,.08);
    background: linear-gradient(180deg,#00060c,#010408);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.4);
}
#guide-atlas .atlas-chat-head {
    min-height: 70px;
    padding: 7px 9px 12px;
    gap: 8px;
    background: linear-gradient(180deg,rgba(4,15,23,.96),rgba(5,15,23,.88));
    border-bottom: 1px solid rgba(20,231,209,.04);
}
#guide-atlas .atlas-chat-head img {
    width: 36px; height: 36px; object-fit: contain;
    border-radius: 50%;
    background: rgba(0,27,35,.8);
    box-shadow: 0 0 0 1px rgba(19,247,210,.17), 0 0 18px rgba(5,244,220,.18);
}
#guide-atlas .atlas-chat-head strong { font-size: 11.4px; line-height: 1.22; }
#guide-atlas .atlas-chat-head span { font-size: 10px; margin-top: 2px; }
#guide-atlas .atlas-chat-call { width: 15px; height: 15px; flex: 0 0 15px; color: #09f3dc; margin-right: 3px; }
#guide-atlas .atlas-chat-body {
    position: relative;
    background: linear-gradient(155deg, #0b1b24, #06141d 84%);
    gap: 12px;
    padding: 16px 10px 61px;
}
#guide-atlas .atlas-chat-body p {
    max-width: 88%;
    font-size: 11.8px;
    letter-spacing: -.026em;
    line-height: 1.43;
    padding: 11px 11px 9px;
    border-radius: 12px 12px 12px 4px;
    background: linear-gradient(145deg, #1f323f, #182a36);
    box-shadow: 0 5px 13px rgba(0,0,0,.15);
}
#guide-atlas .atlas-chat-body p.is-sent {
    border-radius: 12px 12px 4px 12px;
    background: linear-gradient(130deg, #0a988e, #05746e);
    box-shadow: 0 3px 13px rgba(0,225,206,.12);
}
#guide-atlas .atlas-chat-body p small { font-size: 8px; margin-top: 6px; }
#guide-atlas .atlas-chat-input {
    left: 10px; right: 10px; bottom: 12px;
    min-height: 46px;
    border-radius: 18px;
    padding: 10px 13px;
    background: linear-gradient(155deg,#172b35,#152630);
    border: 1px solid rgba(231, 255, 255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
#guide-atlas .atlas-chat-input .atlas-chat-smile {
    display: block; width: 17px; height: 17px; flex: 0 0 17px; color: #77919a;
}
#guide-atlas .atlas-chat-input .atlas-chat-mic {
    display: block; width: 21px; height: 21px; flex: 0 0 21px; color: #08efd7;
}

/* Full width feature panels: large translucent dimensional pictograms. */
#guide-atlas .atlas-benefits {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 16px;
    width: 100%;
    z-index: 4;
}
.sx-public #guide-atlas .atlas-benefits article {
    min-height: 154px;
    gap: 10px;
    padding: 15px 18px 15px 18px;
    border-radius: 13px;
    border-color: rgba(8, 216, 207, .45) !important;
    background: linear-gradient(120deg, rgba(0,45,46,.82),rgba(0,22,31,.9) 87%) !important;
    box-shadow: inset 0 1px 0 rgba(96,255,243,.07), 0 17px 44px rgba(0,0,0,.17) !important;
}
#guide-atlas .atlas-benefit-art { flex: 0 0 133px; width: 133px; height: 125px; }
#guide-atlas .atlas-art-layer {
    left: 25px; top: 14px;
    width: 91px; height: 96px;
    border-radius: 17px;
}
#guide-atlas .atlas-art-layer--back {
    transform: rotate(-20deg) translate(-13px, 4px);
    background: linear-gradient(138deg,rgba(2,151,141,.29),rgba(4,41,46,.44));
}
#guide-atlas .atlas-art-layer--mid {
    transform: rotate(18deg) translate(7px,2px);
    background: linear-gradient(137deg,rgba(0,170,155,.37),rgba(4,38,45,.47));
}
#guide-atlas .atlas-art-layer--front {
    transform: rotate(-3deg);
    background: linear-gradient(148deg,#008581 0%,#005058 44%,#012731 100%);
    box-shadow: inset 1px 1px 3px rgba(96,255,227,.32), inset -8px -8px 22px rgba(0,0,0,.39), 0 11px 21px rgba(0,0,0,.25), 0 0 23px rgba(0,235,213,.15);
}
#guide-atlas .atlas-art-layer--front svg {
    width: 50px; height: 50px;
    color: #15f4de;
    filter: drop-shadow(0 0 8px rgba(28,245,218,.32));
}
.sx-public #guide-atlas .atlas-benefit-copy h3 {
    margin-bottom: 12px;
    font-size: 16.8px;
    letter-spacing: -.049em;
}
.sx-public #guide-atlas .atlas-benefit-copy p {
    color: #c1d0d2;
    max-width: 239px;
    font-size: 13.5px;
    line-height: 1.46;
}

/* Medium desktop: keep the same rhythm, avoid crowding at 861–1160px. */
@media (min-width: 861px) and (max-width: 1160px) {
    .sx-public #guide-atlas { padding-block: 58px 38px; }
    #guide-atlas .atlas-shell.atlas-journey-layout {
        width: calc(100% - 96px);
        grid-template-columns: minmax(0,1fr) 245px;
        grid-template-rows: 211px 266px auto;
    }
    #guide-atlas .atlas-journey-planet { top: -300px; }
    #guide-atlas .atlas-journey-terrain { height: 330px; bottom: 75px; }
    .sx-public #guide-atlas .atlas-journey-intro h2 { font-size: clamp(39px,4.5vw,51px); }
    .sx-public #guide-atlas .atlas-journey-intro .atlas-lead { font-size: 17px; }
    #guide-atlas .atlas-process { height: 266px; }
    #guide-atlas .atlas-journey-curve { height: 266px; width: calc(100% + 10px); left: 0; }
    #guide-atlas .atlas-journey-origin { left: -16px; top: 204px; width: 29px; height: 29px; }
    #guide-atlas .atlas-steps > li:nth-child(1) { left: 3%; top: 52px; width: 151px; --card-height: 148px; --marker-gap: 16px; }
    #guide-atlas .atlas-steps > li:nth-child(2) { left: 27.5%; top: 20px; width: 151px; --card-height: 150px; --marker-gap: 10px; }
    #guide-atlas .atlas-steps > li:nth-child(3) { left: 52%; top: -14px; width: 151px; --card-height: 157px; --marker-gap: 10px; }
    #guide-atlas .atlas-steps > li:nth-child(4) { left: 75.7%; top: -47px; width: 134px; --card-height: 160px; --marker-gap: 8px; }
    #guide-atlas .atlas-step-card { padding: 12px 13px 12px; border-radius: 12px; }
    #guide-atlas .atlas-step-top { gap: 14px; min-height: 42px; margin-bottom: 6px; }
    #guide-atlas .atlas-step-number { font-size: 14.5px; }
    #guide-atlas .atlas-steps .atlas-step-icon, .sx-public #guide-atlas .atlas-steps .atlas-step-icon { width: 41px; height: 41px; flex-basis: 41px; }
    #guide-atlas .atlas-step-icon svg { width: 23px; height: 23px; }
    #guide-atlas .atlas-steps li:nth-child(n) strong { font-size: 12.5px; }
    #guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description { font-size: 11px; line-height: 1.36; }
    #guide-atlas .atlas-step-marker { width: 19px; height: 19px; border-width: 4px; }
    #guide-atlas .atlas-phone-wrap { top: 18px; width: 242px; height: 451px; margin-right: 12px; }
    #guide-atlas .atlas-phone-depth { border-radius: 42px; }
    #guide-atlas .atlas-phone { width: 242px; height: 451px; border-radius: 42px; padding: 32px 7px 13px; }
    #guide-atlas .atlas-phone::after { border-radius: 35px; }
    #guide-atlas .atlas-phone-island { width: 79px; height: 17px; top: 9px; }
    #guide-atlas .atlas-chat-head { padding: 4px 7px 9px; min-height: 56px; }
    #guide-atlas .atlas-chat-head img { width: 33px; height: 33px; }
    #guide-atlas .atlas-chat-head strong { font-size: 9.6px; }
    #guide-atlas .atlas-chat-head span { font-size: 9px; }
    #guide-atlas .atlas-chat-call { flex-basis: 13px; width: 13px; height: 13px; }
    #guide-atlas .atlas-chat-body { gap: 10px; padding: 12px 6px 57px; }
    #guide-atlas .atlas-chat-body p { font-size: 10.5px; padding: 9px; }
    #guide-atlas .atlas-chat-input { min-height: 42px; bottom: 10px; }
    #guide-atlas .atlas-benefits { gap: 14px; }
    .sx-public #guide-atlas .atlas-benefits article { min-height: 143px; padding-inline: 11px; gap: 4px; }
    #guide-atlas .atlas-benefit-art { flex-basis: 100px; width: 100px; height: 105px; }
    #guide-atlas .atlas-art-layer { left: 16px; top: 10px; width: 73px; height: 83px; }
    #guide-atlas .atlas-art-layer--front svg { width: 43px; height: 43px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size: 13.8px; margin-bottom: 8px; }
    .sx-public #guide-atlas .atlas-benefit-copy p { font-size: 11.7px; }
}

@media (max-width: 860px) {
    /* Use the existing stacked guide layout, and keep the scene understated. */
    .sx-public #guide-atlas { padding-block: 60px 60px; }
    #guide-atlas .atlas-shell.atlas-journey-layout {
        width: min(720px, calc(100% - 44px));
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto auto auto;
    }
    #guide-atlas .atlas-journey-planet {
        width: 680px; height: 680px; right: -360px; top: 310px;
        opacity: .34;
    }
    #guide-atlas .atlas-journey-terrain { display: none; }
    #guide-atlas .atlas-journey-intro { padding: 0; }
    .sx-public #guide-atlas .atlas-journey-intro h2 { font-size: clamp(39px,6.5vw,55px); }
    #guide-atlas .atlas-process { height: 308px; margin-top: 90px; }
    #guide-atlas .atlas-journey-curve { height: 300px; }
    #guide-atlas .atlas-journey-origin { display:none; }
    #guide-atlas .atlas-steps > li:nth-child(1) { left: 1%; top: 48px; width: 160px; --card-height: 154px; --marker-gap: 27px; }
    #guide-atlas .atlas-steps > li:nth-child(2) { left: 26%; top: 15px; width: 160px; --card-height: 154px; --marker-gap: 34px; }
    #guide-atlas .atlas-steps > li:nth-child(3) { left: 51%; top: -20px; width: 160px; --card-height: 156px; --marker-gap: 21px; }
    #guide-atlas .atlas-steps > li:nth-child(4) { left: 76%; top: -59px; width: 148px; --card-height: 159px; --marker-gap: 17px; }
    #guide-atlas .atlas-step-card { padding-inline: 15px; }
    #guide-atlas .atlas-steps li:nth-child(n) strong { font-size: 13.5px; }
    #guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description { font-size: 11.3px; }
    #guide-atlas .atlas-phone-wrap {
        width: 296px; height: 506px; margin: 8px auto 36px; top: 0;
        justify-self: center; grid-column: 1; grid-row: 3;
    }
    #guide-atlas .atlas-phone { width: 296px; height: 506px; }
    #guide-atlas .atlas-benefits { grid-column:1; grid-row:4; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    #guide-atlas .atlas-benefits article:last-child { grid-column: 1 / -1; }
    .sx-public #guide-atlas .atlas-benefits article { min-height:145px; padding:12px; gap:4px; }
    #guide-atlas .atlas-benefit-art { flex-basis:112px; width:112px; height:113px; }
    #guide-atlas .atlas-art-layer { left:17px; top:12px; width:80px; height:86px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size:15px; margin-bottom:8px; }
    .sx-public #guide-atlas .atlas-benefit-copy p { font-size:12px; }
}

@media (max-width: 610px) {
    .sx-public #guide-atlas { padding-block: 56px 58px; }
    #guide-atlas .atlas-shell.atlas-journey-layout { width: calc(100% - 38px); }
    #guide-atlas .atlas-journey-planet { width: 560px; height: 560px; right: -355px; top: 560px; opacity: .22; }
    .sx-public #guide-atlas .atlas-journey-intro h2 {
        width:auto; font-size: clamp(31px,8.3vw,43px); line-height:1.13;
    }
    .sx-public #guide-atlas .atlas-journey-intro h2 br { display:none; }
    .sx-public #guide-atlas .atlas-journey-intro .atlas-lead { font-size:15px; }
    #guide-atlas .atlas-process { height:auto; margin-top: 38px; margin-bottom: 32px; }
    #guide-atlas .atlas-journey-curve { display:none; }
    #guide-atlas .atlas-steps > li:nth-child(n) { position:relative; top:auto; left:auto; width:100%; height:auto; }
    #guide-atlas .atlas-step-card { height:auto; min-height:132px; padding:16px 18px; }
    #guide-atlas .atlas-step-card::after { display:none; }
    #guide-atlas .atlas-step-top { min-height:49px; }
    #guide-atlas .atlas-steps li:nth-child(n) strong { font-size:15px; }
    #guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description { font-size:13px; }
    #guide-atlas .atlas-phone-wrap {
        width:min(276px,calc(100% - 30px)); height:487px; margin: 4px auto 38px;
    }
    #guide-atlas .atlas-phone { width:100%; height:487px; transform:rotate(4deg) !important; }
    #guide-atlas .atlas-phone-depth { transform:rotate(4deg) translate(8px,2px); }
    #guide-atlas .atlas-chat-body { gap: 11px; }
    #guide-atlas .atlas-benefits { grid-template-columns:minmax(0,1fr); gap:14px; }
    #guide-atlas .atlas-benefits article:last-child { grid-column:auto; }
    .sx-public #guide-atlas .atlas-benefits article { min-height:143px; padding:13px 14px; gap:9px; }
    #guide-atlas .atlas-benefit-art { flex-basis:111px; width:111px; height:113px; }
    #guide-atlas .atlas-art-layer { left:18px; top:12px; width:81px; height:88px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size:15px; }
    .sx-public #guide-atlas .atlas-benefit-copy p { font-size:12px; }
}

@media (max-width: 370px) {
    .sx-public #guide-atlas .atlas-journey-intro h2 { font-size: 30px; }
    .sx-public #guide-atlas .atlas-benefits article { gap:5px; padding-inline:9px; }
    #guide-atlas .atlas-benefit-art { flex-basis:90px; width:90px; }
    #guide-atlas .atlas-art-layer { left:11px; width:70px; height:80px; top:16px; }
    #guide-atlas .atlas-art-layer--front svg { width:42px; height:42px; }
    .sx-public #guide-atlas .atlas-benefit-copy h3 { font-size:14px; }
    .sx-public #guide-atlas .atlas-benefit-copy p { font-size:11.5px; }
}

@media (prefers-reduced-motion:reduce) {
    #guide-atlas .atlas-journey-planet, #guide-atlas .atlas-phone, #guide-atlas .atlas-benefits article { animation:none; transition:none; }
}

/* Final optical corrections against the approved reference. */
#guide-atlas .atlas-journey-planet {
    background:
        radial-gradient(ellipse at 19% 19%, rgba(13,143,130,.17), transparent 42%) padding-box,
        radial-gradient(ellipse at 44% 38%, #07373a 0%, #052c32 36%, #03202b 67%, #00121d 100%) padding-box,
        linear-gradient(142deg, #5dfff1 0%, #1df5e5 24%, rgba(7,104,110,.47) 65%, transparent 96%) border-box;
    box-shadow:
        -6px -5px 25px rgba(4,246,221,.29),
        -31px -23px 92px rgba(0,221,208,.095),
        inset 28px 11px 58px rgba(3,192,177,.13),
        inset 90px 38px 115px rgba(0,9,17,.22);
}
#guide-atlas .atlas-journey-terrain {
    background: url("../img/guide-rock-surface.png") center bottom / 100% 100% no-repeat;
    width: 80%;
    height: 410px;
    right: -6%;
    bottom: 96px;
    opacity: .86;
    mask-image: linear-gradient(90deg, transparent 1%, #000 36%, #000 100%);
    filter: drop-shadow(-20px 12px 31px rgba(0,0,0,.3));
}
@media (min-width: 1161px) {
    #guide-atlas .atlas-phone-wrap {
        width: 284px;
        height: 480px;
        margin-right: 0;
        top: 16px;
    }
    #guide-atlas .atlas-phone {
        width: 284px;
        height: 480px;
    }
    #guide-atlas .atlas-chat-head { min-height: 66px; }
    #guide-atlas .atlas-chat-body { gap: 10px; padding: 14px 8px 60px; }
    #guide-atlas .atlas-chat-body p { font-size: 11.7px; padding: 10px 11px 8px; }
}
@media (min-width: 861px) and (max-width: 1160px) {
    .sx-public #guide-atlas { padding-block: 40px 37px; }
    #guide-atlas .atlas-shell.atlas-journey-layout {
        grid-template-columns: minmax(0, 1fr) 245px;
        grid-template-rows: 160px 236px auto;
    }
    #guide-atlas .atlas-journey-intro .atlas-kicker { margin-bottom: 9px; }
    .sx-public #guide-atlas .atlas-journey-intro .atlas-lead { margin-top: 8px; }
    #guide-atlas .atlas-journey-planet { top: -333px; }
    #guide-atlas .atlas-journey-terrain { height: 315px; bottom: 83px; }
    #guide-atlas .atlas-process { height: 236px; }
    #guide-atlas .atlas-journey-curve { height: 224px; }
    #guide-atlas .atlas-journey-origin { top: 176px; }
    #guide-atlas .atlas-steps > li:nth-child(1) { left: 3%; top: 45px; width: 145px; --card-height: 120px; --marker-gap: 22px; }
    #guide-atlas .atlas-steps > li:nth-child(2) { left: 27.5%; top: 15px; width: 143px; --card-height: 120px; --marker-gap: 20px; }
    #guide-atlas .atlas-steps > li:nth-child(3) { left: 52%; top: -19px; width: 143px; --card-height: 128px; --marker-gap: 13px; }
    #guide-atlas .atlas-steps > li:nth-child(4) { left: 75.7%; top: -53px; width: 128px; --card-height: 126px; --marker-gap: 14px; }
    #guide-atlas .atlas-step-card { padding: 10px 12px 10px; }
    #guide-atlas .atlas-step-top { min-height:36px; margin-bottom: 4px; gap:14px; }
    #guide-atlas .atlas-steps .atlas-step-icon, .sx-public #guide-atlas .atlas-steps .atlas-step-icon {
        width: 38px; height: 38px; flex-basis: 38px;
    }
    #guide-atlas .atlas-step-icon svg { width: 21px; height: 21px; }
    #guide-atlas .atlas-steps li:nth-child(n) strong { font-size: 12.2px; margin-bottom: 4px; }
    #guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description { font-size: 10.4px; line-height: 1.29; }
    #guide-atlas .atlas-phone-wrap {
        width: 224px; height: 388px;
        margin-right: -12px; top: -1px;
    }
    #guide-atlas .atlas-phone { width: 224px; height: 388px; border-radius: 40px; padding: 30px 7px 12px; }
    #guide-atlas .atlas-phone-depth { border-radius: 40px; }
    #guide-atlas .atlas-phone::after { border-radius: 32px; }
    #guide-atlas .atlas-phone-island { width: 76px; height: 16px; }
    #guide-atlas .atlas-chat-head { min-height: 50px; padding: 5px 6px 7px; gap:6px; }
    #guide-atlas .atlas-chat-head img { width: 29px; height: 29px; }
    #guide-atlas .atlas-chat-head strong { font-size: 9.2px; }
    #guide-atlas .atlas-chat-head span { font-size: 8.6px; }
    #guide-atlas .atlas-chat-call { flex-basis: 12px; width: 12px; height: 12px; }
    #guide-atlas .atlas-chat-body { gap: 8px; padding: 10px 6px 50px; }
    #guide-atlas .atlas-chat-body p { font-size: 9.7px; padding: 7px 8px; line-height: 1.34; }
    #guide-atlas .atlas-chat-body p small { font-size:7px; margin-top:4px; }
    #guide-atlas .atlas-chat-input { left:8px; right:8px; bottom:9px; min-height: 37px; padding:8px 10px; font-size:10px; }
    #guide-atlas .atlas-chat-input .atlas-chat-mic { width:17px; height:17px; }
    #guide-atlas .atlas-chat-input .atlas-chat-smile { width:14px; height:14px; }
    #guide-atlas .atlas-benefits article { min-height: 128px; }
    .sx-public #guide-atlas .atlas-benefits article { min-height: 128px; padding-block: 9px; }
    #guide-atlas .atlas-benefit-art { height: 103px; }
}
@media (max-width: 860px) {
    #guide-atlas .atlas-journey-terrain { display: none; }
}

/* Line up all four connection nodes on compact laptop screens. */
#guide-atlas .atlas-journey-curve--compact { display: none; }
@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-journey-curve--wide { display: none; }
    #guide-atlas .atlas-journey-curve--compact { display: block; }
    #guide-atlas .atlas-steps > li:nth-child(1) { left: 6%; }
    #guide-atlas .atlas-steps > li:nth-child(2) { left: 32.5%; }
    #guide-atlas .atlas-steps > li:nth-child(3) { left: 57.5%; width: 137px; }
    #guide-atlas .atlas-steps > li:nth-child(4) { left: 81.2%; width: 118px; }
    #guide-atlas .atlas-step-top { gap: 11px; }
    #guide-atlas .atlas-steps > li:nth-child(4) .atlas-step-top { gap: 8px; }
    #guide-atlas .atlas-steps > li:nth-child(4) .atlas-step-card { padding-inline: 11px; }
}
@media (max-width: 610px) {
    #guide-atlas .atlas-journey-curve--compact { display: none !important; }
}

@media (min-width: 861px) and (max-width: 1160px) {
    /* Gradients in a display:none SVG cannot be referenced by a second SVG. */
    #guide-atlas .atlas-journey-curve--compact .atlas-curve-line { stroke: #10f5e6; }
    #guide-atlas .atlas-journey-curve--compact .atlas-curve-halo { filter: blur(4px); opacity: .5; }
    #guide-atlas .atlas-journey-origin { top: 160px; }
}

/* Let the subtle stone relief remain visible behind the glass cards. */
#guide-atlas .atlas-journey-terrain {
    opacity: .96;
    filter: brightness(1.36) contrast(1.12) drop-shadow(-20px 12px 31px rgba(0,0,0,.3));
}

/* Reference screenshot at 1056px uses a compact 115px feature strip. */
@media (min-width: 861px) and (max-width: 1160px) {
    .sx-public #guide-atlas { padding-bottom: 19px; }
    .sx-public #guide-atlas .atlas-benefits article {
        min-height: 115px;
        height: 115px;
        padding: 8px 11px;
        gap: 12px;
    }
    #guide-atlas .atlas-benefit-art { height: 95px; }
}

@media (min-width: 1161px) and (max-width: 1240px) {
    /* Guard against an overlap during the desktop width transition. */
    #guide-atlas .atlas-steps > li:nth-child(1),
    #guide-atlas .atlas-steps > li:nth-child(2),
    #guide-atlas .atlas-steps > li:nth-child(3) { width: 164px; }
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-benefit-art { height: 94px; }
    #guide-atlas .atlas-art-layer { top: 8px; width: 72px; height: 76px; }
}

/* =========================================================
   V4 — Dedicated premium phone + premium surface assets
   This override replaces the CSS-drawn phone/terrain with
   image assets generated to better match the reference.
   ========================================================= */

#guide-atlas .atlas-shell.atlas-journey-layout {
    position: relative;
    z-index: 2;
}

#guide-atlas .atlas-journey-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#guide-atlas .atlas-journey-planet {
    position: absolute;
    right: -158px;
    top: -176px;
    width: 690px;
    height: 690px;
    border-radius: 50%;
    background: none;
    border: 2px solid rgba(55, 248, 233, .62);
    box-shadow:
        0 0 32px rgba(23, 250, 230, .28),
        0 0 95px rgba(7, 210, 194, .18),
        inset 0 0 160px rgba(0, 0, 0, .18);
    opacity: .98;
}

#guide-atlas .atlas-journey-planet::before,
#guide-atlas .atlas-journey-planet::after {
    content: "";
    position: absolute;
    border-radius: inherit;
}

#guide-atlas .atlas-journey-planet::before {
    inset: 18px;
    background:
        radial-gradient(circle at 39% 34%, rgba(9, 255, 235, .13), rgba(9, 255, 235, 0) 34%),
        radial-gradient(circle at 52% 56%, rgba(0, 10, 18, .08), rgba(0, 10, 18, 0) 55%),
        radial-gradient(circle at 55% 52%, rgba(1, 11, 19, .88) 0 57%, rgba(1, 11, 19, .38) 66%, rgba(1, 11, 19, 0) 72%);
    filter: blur(2px);
}

#guide-atlas .atlas-journey-planet::after {
    inset: -10px;
    border: 1px solid rgba(30, 231, 217, .14);
    box-shadow: 0 0 120px rgba(14, 244, 226, .18);
}

#guide-atlas .atlas-journey-surface {
    position: absolute;
    right: -40px;
    bottom: -8px;
    width: min(60vw, 760px);
    max-width: none;
    height: auto;
    opacity: .98;
    filter: drop-shadow(-28px 22px 34px rgba(0, 0, 0, .42));
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;
}

#guide-atlas .atlas-journey-terrain,
#guide-atlas .atlas-phone {
    display: none !important;
}

#guide-atlas .atlas-phone-wrap {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    justify-self: end;
    align-self: start;
    top: -4px;
    width: 345px;
    height: 595px;
    margin: 0 -18px 0 0;
    z-index: 3;
    pointer-events: none;
}

#guide-atlas .atlas-phone-depth {
    position: absolute;
    inset: 52px 18px 36px -8px;
    border-radius: 54px;
    background:
        radial-gradient(circle at 26% 28%, rgba(7, 255, 231, .24), rgba(7, 255, 231, 0) 40%),
        radial-gradient(circle at 78% 74%, rgba(3, 198, 188, .16), rgba(3, 198, 188, 0) 36%),
        linear-gradient(145deg, rgba(5, 25, 34, .2), rgba(5, 25, 34, 0));
    filter: blur(20px);
    opacity: .92;
}

#guide-atlas .atlas-phone-art {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 30px 42px rgba(0, 0, 0, .48))
        drop-shadow(0 0 28px rgba(13, 240, 220, .12));
}

@media (min-width: 1161px) and (max-width: 1320px) {
    #guide-atlas .atlas-phone-wrap {
        width: 318px;
        height: 552px;
        margin-right: -12px;
        top: 4px;
    }

    #guide-atlas .atlas-journey-surface {
        width: min(57vw, 690px);
        right: -54px;
    }

    #guide-atlas .atlas-journey-planet {
        width: 630px;
        height: 630px;
        right: -164px;
        top: -162px;
    }
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 272px;
        height: 470px;
        margin-right: -6px;
        top: 14px;
    }

    #guide-atlas .atlas-journey-surface {
        width: min(62vw, 575px);
        right: -72px;
        bottom: -2px;
        opacity: .95;
    }

    #guide-atlas .atlas-journey-planet {
        width: 545px;
        height: 545px;
        right: -188px;
        top: -126px;
        opacity: .90;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-journey-surface,
    #guide-atlas .atlas-journey-planet {
        display: none;
    }

    #guide-atlas .atlas-phone-wrap {
        width: min(330px, calc(100% - 20px));
        height: auto;
        margin: 6px auto 28px;
        top: 0;
    }

    #guide-atlas .atlas-phone-depth {
        inset: 24px 18px 16px;
        border-radius: 44px;
    }
}

/* =========================================================
   V5 — Positioning corrections + Americas globe background
   ========================================================= */

#guide-atlas {
    overflow: hidden;
}

#guide-atlas .atlas-shell.atlas-journey-layout {
    width: min(1238px, calc(100% - 72px));
    grid-template-columns: minmax(0, 1fr) 318px;
    grid-template-rows: 214px 296px auto;
    column-gap: 28px;
    row-gap: 12px;
}

#guide-atlas .atlas-journey-intro,
#guide-atlas .atlas-process,
#guide-atlas .atlas-phone-wrap,
#guide-atlas .atlas-benefits {
    position: relative;
    z-index: 3;
}

#guide-atlas .atlas-process {
    height: 296px;
}

#guide-atlas .atlas-steps > li:nth-child(1) {
    left: 5.2%;
}

#guide-atlas .atlas-steps > li:nth-child(2) {
    left: 29.8%;
}

#guide-atlas .atlas-steps > li:nth-child(3) {
    left: 54.2%;
}

#guide-atlas .atlas-steps > li:nth-child(4) {
    left: 74.6%;
    top: -72px;
}

#guide-atlas .atlas-journey-scene {
    z-index: 1;
}

#guide-atlas .atlas-journey-planet {
    right: -98px;
    top: -142px;
    width: 618px;
    height: 618px;
    border: none;
    box-shadow: none;
    opacity: 1;
}

#guide-atlas .atlas-journey-planet::before,
#guide-atlas .atlas-journey-planet::after {
    display: none;
}

#guide-atlas .atlas-globe-svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 26px rgba(15, 244, 225, .12)) drop-shadow(0 0 96px rgba(12, 206, 192, .12));
}

#guide-atlas .atlas-globe-grid {
    fill: none;
    stroke: rgba(46, 236, 221, .11);
    stroke-width: 1.8;
}

#guide-atlas .atlas-globe-land--shadow {
    fill: rgba(4, 72, 78, .46);
    transform: translate(14px, 14px);
    filter: blur(6px);
}

#guide-atlas .atlas-globe-land {
    fill: rgba(19, 255, 229, .10);
    stroke: rgba(45, 250, 229, .30);
    stroke-width: 2;
}

#guide-atlas .atlas-globe-highlight {
    fill: none;
    stroke: rgba(94, 255, 240, .26);
    stroke-width: 4;
    stroke-linecap: round;
    filter: blur(.2px);
}

#guide-atlas .atlas-globe-ring {
    fill: none;
}

#guide-atlas .atlas-globe-ring--inner {
    stroke: rgba(55, 248, 233, .56);
    stroke-width: 3;
}

#guide-atlas .atlas-globe-ring--outer {
    stroke: rgba(55, 248, 233, .16);
    stroke-width: 2;
}

#guide-atlas .atlas-phone-wrap {
    width: 306px;
    height: 528px;
    top: 20px;
    margin: 0 8px 0 0;
    align-self: start;
}

#guide-atlas .atlas-phone-depth {
    inset: 54px 16px 38px -6px;
    border-radius: 56px;
    opacity: .74;
}

#guide-atlas .atlas-phone-art {
    width: 100%;
    max-width: 100%;
    filter: drop-shadow(0 34px 42px rgba(0, 0, 0, .48)) drop-shadow(0 0 24px rgba(13, 240, 220, .10));
}

#guide-atlas .atlas-journey-surface {
    right: -54px;
    bottom: -24px;
    width: min(47vw, 640px);
    opacity: .90;
    filter: brightness(.93) contrast(1.08) drop-shadow(-22px 16px 26px rgba(0, 0, 0, .32));
    z-index: 1;
}

#guide-atlas .atlas-benefits {
    gap: 18px;
    margin-top: 4px;
}

.sx-public #guide-atlas .atlas-benefits article {
    min-height: 126px;
    padding: 12px 18px;
}

@media (min-width: 1161px) and (max-width: 1320px) {
    #guide-atlas .atlas-shell.atlas-journey-layout {
        width: min(1160px, calc(100% - 56px));
        grid-template-columns: minmax(0, 1fr) 292px;
    }

    #guide-atlas .atlas-steps > li:nth-child(4) {
        left: 75.2%;
        top: -64px;
    }

    #guide-atlas .atlas-journey-planet {
        width: 560px;
        height: 560px;
        right: -112px;
        top: -126px;
    }

    #guide-atlas .atlas-phone-wrap {
        width: 284px;
        height: 492px;
        top: 20px;
        margin-right: 2px;
    }

    #guide-atlas .atlas-journey-surface {
        width: min(44vw, 560px);
        right: -56px;
        bottom: -16px;
    }
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-shell.atlas-journey-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
        grid-template-rows: 210px 258px auto;
        width: min(1000px, calc(100% - 40px));
        column-gap: 16px;
    }

    #guide-atlas .atlas-process {
        height: 258px;
    }

    #guide-atlas .atlas-steps > li:nth-child(1) { left: 6%; }
    #guide-atlas .atlas-steps > li:nth-child(2) { left: 31%; }
    #guide-atlas .atlas-steps > li:nth-child(3) { left: 55%; }
    #guide-atlas .atlas-steps > li:nth-child(4) { left: 75.6%; top: -52px; }

    #guide-atlas .atlas-journey-planet {
        width: 468px;
        height: 468px;
        right: -132px;
        top: -88px;
        opacity: .96;
    }

    #guide-atlas .atlas-phone-wrap {
        width: 236px;
        height: 408px;
        top: 18px;
        margin-right: 0;
    }

    #guide-atlas .atlas-phone-depth {
        inset: 38px 12px 28px 0;
        border-radius: 44px;
    }

    #guide-atlas .atlas-journey-surface {
        width: min(45vw, 470px);
        right: -72px;
        bottom: -12px;
        opacity: .86;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-journey-planet,
    #guide-atlas .atlas-journey-surface {
        display: none;
    }
}

/* =========================================================
   V6 — Final fitting and crisp phone integration
   ========================================================= */

#guide-atlas .atlas-journey-planet {
    right: -62px;
    top: -118px;
    width: 566px;
    height: 566px;
}

#guide-atlas .atlas-phone-wrap {
    width: 332px;
    height: 570px;
    top: 34px;
    margin: 0 -4px 0 0;
}

#guide-atlas .atlas-phone-depth {
    inset: 54px 18px 42px 6px;
    border-radius: 52px;
    opacity: .54;
    filter: blur(18px);
}

#guide-atlas .atlas-phone-art {
    width: 100%;
    height: auto;
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
    filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .42));
}

#guide-atlas .atlas-journey-surface {
    right: -78px;
    bottom: -58px;
    width: min(40vw, 540px);
    opacity: .84;
    filter: brightness(.94) contrast(1.05) drop-shadow(-18px 12px 22px rgba(0, 0, 0, .24));
}

#guide-atlas .atlas-benefits {
    position: relative;
    z-index: 4;
}

/* =========================================================
   V7 — One clear story: steps → live conversation
   ========================================================= */
.sx-public #guide-atlas {
    padding-block: 66px 68px;
}

#guide-atlas .atlas-shell.atlas-journey-layout {
    width: min(1238px, calc(100% - 72px));
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: 196px 308px;
    column-gap: 26px;
    row-gap: 0;
}

#guide-atlas .atlas-journey-intro {
    padding-left: 0;
    align-self: start;
}

.sx-public #guide-atlas .atlas-journey-intro h2 {
    font-size: clamp(42px, 4.15vw, 57px);
    letter-spacing: -.06em;
    line-height: 1.06;
}

.sx-public #guide-atlas .atlas-journey-intro .atlas-lead {
    max-width: 470px;
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.45;
}

#guide-atlas .atlas-process {
    height: 308px;
}

#guide-atlas .atlas-journey-curve {
    height: 308px;
}

#guide-atlas .atlas-curve-trail {
    opacity: .16;
}

#guide-atlas .atlas-curve-halo {
    stroke-width: 8px;
    opacity: .34;
}

#guide-atlas .atlas-curve-line {
    stroke-width: 2.6px;
}

#guide-atlas .atlas-curve-arrow {
    filter: drop-shadow(0 0 5px rgba(14, 255, 232, .48));
}

#guide-atlas .atlas-steps > li {
    width: 174px;
    --card-height: 140px;
    --marker-gap: 17px;
}

#guide-atlas .atlas-steps > li:nth-child(1) {
    left: 4%;
    top: 82px;
    width: 174px;
    --card-height: 140px;
}

#guide-atlas .atlas-steps > li:nth-child(2) {
    left: 29.2%;
    top: 48px;
    width: 178px;
    --card-height: 144px;
}

#guide-atlas .atlas-steps > li:nth-child(3) {
    left: 54%;
    top: 18px;
    width: 176px;
    --card-height: 146px;
}

#guide-atlas .atlas-steps > li:nth-child(4) {
    left: 77.4%;
    top: -12px;
    width: 152px;
    --card-height: 142px;
}

#guide-atlas .atlas-step-card {
    padding: 14px 16px 15px;
    border-color: rgba(35, 220, 207, .33);
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(3, 40, 47, .70), rgba(1, 18, 27, .78) 78%);
    box-shadow: inset 0 1px 0 rgba(56, 245, 225, .055), 0 12px 26px rgba(0, 0, 0, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#guide-atlas .atlas-step-card::after {
    width: 11px;
    height: 11px;
    bottom: -6px;
    border-color: rgba(35, 220, 207, .27);
    background: rgba(2, 29, 35, .78);
}

#guide-atlas .atlas-step-top {
    min-height: 42px;
    gap: 14px;
    margin-bottom: 7px;
}

#guide-atlas .atlas-step-number {
    font-size: 14px;
    color: #57e5dc;
}

#guide-atlas .atlas-steps .atlas-step-icon,
.sx-public #guide-atlas .atlas-steps .atlas-step-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-color: rgba(14, 230, 218, .72);
    background: rgba(0, 26, 34, .68);
    box-shadow: inset 0 0 9px rgba(0, 231, 216, .035);
}

#guide-atlas .atlas-step-icon svg {
    width: 21px;
    height: 21px;
}

#guide-atlas .atlas-step-card strong,
#guide-atlas .atlas-steps li:nth-child(n) strong {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.18;
}

#guide-atlas .atlas-step-description,
#guide-atlas .atlas-steps li:nth-child(n) .atlas-step-description {
    color: #b7c8ca;
    font-size: 12px;
    line-height: 1.31;
}

#guide-atlas .atlas-step-marker {
    width: 17px;
    height: 17px;
    border-width: 4px;
    box-shadow: 0 0 0 4px rgba(2, 219, 206, .10), 0 0 13px 4px rgba(0, 242, 225, .33);
}

#guide-atlas .atlas-step-marker::before {
    background: linear-gradient(180deg, rgba(12, 214, 201, .03), rgba(0, 241, 223, .30));
}

/* The phone sits at the route's end instead of hovering independently. */
#guide-atlas .atlas-phone-wrap {
    width: 310px;
    height: 496px;
    top: 0;
    margin: 0 8px 2px 0;
    align-self: end;
}

#guide-atlas .atlas-phone-wrap::before {
    z-index: 0;
    inset: auto auto 87px -112px;
    width: 154px;
    height: 2px;
    background: linear-gradient(90deg, rgba(21, 234, 220, 0), rgba(21, 234, 220, .58) 56%, rgba(21, 234, 220, 0));
    box-shadow: 0 0 10px rgba(21, 234, 220, .26);
    filter: none;
    transform: rotate(-14deg);
}

#guide-atlas .atlas-phone-wrap::after {
    z-index: 0;
    left: 50%;
    right: auto;
    bottom: 0;
    width: 228px;
    height: 38px;
    background: radial-gradient(ellipse, rgba(9, 222, 204, .16), rgba(4, 113, 119, .055) 42%, transparent 72%);
    filter: blur(8px);
    transform: translateX(-50%);
}

#guide-atlas .atlas-phone-depth {
    z-index: 0;
    inset: 50px 18px 27px 7px;
    opacity: .34;
    filter: blur(15px);
}

#guide-atlas .atlas-phone-art {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .44));
}

/* Remove the disconnected rock illustration and turn the globe into a readable network. */
#guide-atlas .atlas-journey-surface {
    display: none;
}

#guide-atlas .atlas-journey-planet {
    right: -96px;
    top: -126px;
    width: 648px;
    height: 648px;
    opacity: 1;
}

#guide-atlas .atlas-globe-svg {
    filter: drop-shadow(0 0 20px rgba(15, 244, 225, .13)) drop-shadow(0 0 66px rgba(12, 206, 192, .10));
}

#guide-atlas .atlas-globe-core {
    fill: rgba(2, 22, 33, .88);
}

#guide-atlas .atlas-globe-grid {
    stroke: rgba(69, 240, 223, .16);
    stroke-width: 1.45;
}

#guide-atlas .atlas-globe-land--shadow {
    fill: rgba(0, 88, 94, .42);
    transform: translate(10px, 12px);
    filter: blur(7px);
}

#guide-atlas .atlas-globe-land {
    fill: url(#atlas-land-fill);
    stroke: rgba(91, 255, 235, .56);
    stroke-width: 2.35;
    stroke-linejoin: round;
}

#guide-atlas .atlas-globe-network path {
    fill: none;
    stroke: rgba(105, 255, 237, .78);
    stroke-width: 2.2;
    stroke-dasharray: 4 12;
    stroke-linecap: round;
}

#guide-atlas .atlas-globe-network circle {
    fill: #a6fff3;
    stroke: #0de2d5;
    stroke-width: 4;
}

#guide-atlas .atlas-globe-highlight {
    stroke: rgba(113, 255, 240, .38);
    stroke-width: 3;
}

#guide-atlas .atlas-globe-ring--inner {
    stroke: rgba(55, 248, 233, .64);
    stroke-width: 3.4;
}

#guide-atlas .atlas-globe-ring--outer {
    stroke: rgba(55, 248, 233, .20);
}

/* The assurances stay in the content flow, not as a second competing card row. */
#guide-atlas .atlas-benefits {
    display: none !important;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-shell.atlas-journey-layout {
        width: min(1000px, calc(100% - 40px));
        grid-template-columns: minmax(0, 1fr) 250px;
        grid-template-rows: 190px 270px;
        column-gap: 16px;
    }

    #guide-atlas .atlas-process,
    #guide-atlas .atlas-journey-curve {
        height: 270px;
    }

    #guide-atlas .atlas-steps > li:nth-child(1) { left: 4%; top: 74px; width: 145px; }
    #guide-atlas .atlas-steps > li:nth-child(2) { left: 29%; top: 45px; width: 148px; }
    #guide-atlas .atlas-steps > li:nth-child(3) { left: 53.5%; top: 20px; width: 145px; }
    #guide-atlas .atlas-steps > li:nth-child(4) { left: 75%; top: -4px; width: 130px; }

    #guide-atlas .atlas-step-card { padding: 12px; }
    #guide-atlas .atlas-step-top { gap: 9px; }
    #guide-atlas .atlas-step-description { font-size: 11px; }

    #guide-atlas .atlas-phone-wrap { width: 244px; height: 390px; }
    #guide-atlas .atlas-journey-planet { width: 500px; height: 500px; right: -124px; top: -94px; }
}

@media (max-width: 860px) {
    .sx-public #guide-atlas { padding-block: 56px; }

    #guide-atlas .atlas-shell.atlas-journey-layout {
        display: block;
        width: min(100% - 32px, 560px);
    }

    #guide-atlas .atlas-journey-intro { padding: 0; }

    .sx-public #guide-atlas .atlas-journey-intro h2 {
        width: auto;
        font-size: clamp(37px, 11vw, 49px);
    }

    #guide-atlas .atlas-process { height: auto; margin-top: 38px; }
    #guide-atlas .atlas-journey-curve,
    #guide-atlas .atlas-journey-origin,
    #guide-atlas .atlas-step-marker { display: none; }

    #guide-atlas .atlas-steps {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #guide-atlas .atlas-steps > li,
    #guide-atlas .atlas-steps > li:nth-child(n) {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        min-height: 142px;
    }

    #guide-atlas .atlas-step-card { height: 100%; }
    #guide-atlas .atlas-step-card::after { display: none; }

    #guide-atlas .atlas-phone-wrap {
        width: min(286px, 82vw);
        height: auto;
        margin: 34px auto 0;
    }

    #guide-atlas .atlas-phone-wrap::before { display: none; }
    #guide-atlas .atlas-phone-wrap::after { bottom: -7px; }
}

/* =========================================================
   V8 — Continuous grounded base + high-definition chat phone
   ========================================================= */
#guide-atlas .atlas-journey-surface {
    display: block;
    position: absolute;
    z-index: 1;
    left: 50%;
    right: auto;
    bottom: -22px;
    width: max(100%, 1280px);
    height: 236px;
    object-fit: cover;
    object-position: center 88%;
    opacity: .72;
    filter: brightness(.80) saturate(.84) contrast(1.04);
    transform: translateX(-50%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
}

#guide-atlas .atlas-phone-wrap {
    z-index: 5;
    width: 292px;
    height: 438px;
    margin: 0 16px 22px 0;
}

#guide-atlas .atlas-phone-wrap::before {
    bottom: 310px;
    left: -122px;
    width: 166px;
    opacity: .84;
}

#guide-atlas .atlas-phone-wrap::after {
    bottom: -9px;
    width: 238px;
    height: 42px;
    background: radial-gradient(ellipse, rgba(8, 235, 215, .19), rgba(4, 113, 119, .07) 45%, transparent 74%);
}

#guide-atlas .atlas-phone-depth {
    inset: 42px 16px 18px 8px;
    opacity: .40;
}

#guide-atlas .atlas-phone-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .5));
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-journey-surface {
        height: 204px;
        opacity: .62;
    }

    #guide-atlas .atlas-phone-wrap {
        width: 240px;
        height: 360px;
        margin-right: 8px;
        margin-bottom: 18px;
    }

    #guide-atlas .atlas-phone-wrap::before {
        bottom: 250px;
        left: -94px;
        width: 132px;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-journey-surface {
        display: block;
        left: 50%;
        bottom: -16px;
        width: 920px;
        height: 176px;
        opacity: .55;
        object-position: center bottom;
    }

    #guide-atlas .atlas-phone-wrap {
        width: min(284px, 82vw);
        height: auto;
        aspect-ratio: 2 / 3;
        margin-bottom: 10px;
    }

    #guide-atlas .atlas-phone-art {
        height: auto;
        aspect-ratio: 2 / 3;
    }
}

@media (min-width: 1161px) and (max-width: 1320px) {
    #guide-atlas .atlas-journey-planet {
        right: -70px;
        top: -102px;
        width: 518px;
        height: 518px;
    }

    #guide-atlas .atlas-phone-wrap {
        width: 316px;
        height: 542px;
        top: 34px;
        margin-right: 4px;
    }

    #guide-atlas .atlas-phone-depth {
        inset: 52px 14px 36px 6px;
    }

    #guide-atlas .atlas-journey-surface {
        width: min(37vw, 470px);
        right: -84px;
        bottom: -52px;
        opacity: .82;
    }
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-journey-planet {
        right: -98px;
        top: -72px;
        width: 420px;
        height: 420px;
    }

    #guide-atlas .atlas-phone-wrap {
        width: 252px;
        height: 432px;
        top: 28px;
    }

    #guide-atlas .atlas-phone-depth {
        inset: 40px 12px 30px 6px;
        opacity: .48;
    }

    #guide-atlas .atlas-journey-surface {
        width: min(38vw, 360px);
        right: -68px;
        bottom: -42px;
        opacity: .78;
    }
}

/* =========================================================
   V9 — Grounded phone; no background globe
   ========================================================= */
#guide-atlas .atlas-journey-planet {
    display: none !important;
}

.sx-public #guide-atlas {
    padding-bottom: 68px;
}

#guide-atlas .atlas-shell.atlas-journey-layout {
    grid-template-rows: 196px 340px;
}

#guide-atlas .atlas-process,
#guide-atlas .atlas-journey-curve {
    height: 340px;
}

#guide-atlas .atlas-journey-surface {
    display: block;
    z-index: 1;
    left: 50%;
    right: auto;
    bottom: -22px;
    width: max(100%, 1280px);
    height: 262px;
    object-fit: cover;
    object-position: center 88%;
    opacity: .72;
    transform: translateX(-50%);
}

#guide-atlas .atlas-phone-wrap {
    grid-column: 2;
    grid-row: 1 / 3;
    z-index: 5;
    align-self: end;
    justify-self: center;
    width: 272px;
    height: 408px;
    top: 0 !important;
    margin: 0 5px 2px 0;
}

#guide-atlas .atlas-phone-wrap::before {
    bottom: 364px;
    left: -112px;
    width: 150px;
    opacity: .62;
}

#guide-atlas .atlas-phone-wrap::after {
    bottom: -8px;
    width: 230px;
    height: 36px;
    opacity: .9;
}

#guide-atlas .atlas-phone-depth {
    inset: 38px 14px 16px 8px;
    opacity: .34;
}

#guide-atlas .atlas-phone-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .52));
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-shell.atlas-journey-layout {
        grid-template-rows: 190px 318px;
    }

    #guide-atlas .atlas-process,
    #guide-atlas .atlas-journey-curve {
        height: 318px;
    }

    #guide-atlas .atlas-journey-surface {
        left: 50%;
        right: auto;
        bottom: -18px;
        width: max(100%, 1080px);
        height: 226px;
        opacity: .66;
        transform: translateX(-50%);
    }

    #guide-atlas .atlas-phone-wrap {
        width: 230px;
        height: 345px;
        top: 0 !important;
        margin: 0 2px 1px 0;
    }

    #guide-atlas .atlas-phone-wrap::before {
        bottom: 304px;
        left: -96px;
        width: 128px;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-journey-surface {
        display: block;
        bottom: -16px;
        width: 920px;
        height: 176px;
    }

    #guide-atlas .atlas-phone-wrap {
        width: min(284px, 82vw);
        height: auto;
        margin: 34px auto 8px;
    }
}

/* =========================================================
   V10 — Phone as the destination of step four
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    justify-self: start;
    width: 300px;
    height: 450px;
    margin: 0;
    transform: translate(-24px, 16px) !important;
}

#guide-atlas .atlas-phone-wrap::before {
    left: -112px;
    bottom: calc(100% - 32px);
    width: 156px;
    height: 2px;
    opacity: .86;
    background: linear-gradient(90deg, rgba(21, 234, 220, 0), rgba(21, 234, 220, .78) 62%, rgba(21, 234, 220, .28));
    box-shadow: 0 0 12px rgba(21, 234, 220, .36);
    transform: rotate(-10deg);
}

#guide-atlas .atlas-phone-wrap::after {
    bottom: -18px;
    width: 268px;
    height: 48px;
    opacity: 1;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, .76) 0 26%, rgba(0, 0, 0, .42) 44%, transparent 72%),
        radial-gradient(ellipse at center, rgba(13, 229, 211, .20) 0 8%, transparent 58%);
    filter: blur(7px);
}

#guide-atlas .atlas-phone-depth {
    inset: 46px 18px 15px 9px;
    opacity: .42;
}

#guide-atlas .atlas-phone-art {
    filter:
        drop-shadow(0 18px 18px rgba(0, 0, 0, .62))
        drop-shadow(0 0 12px rgba(13, 226, 207, .08));
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 250px;
        height: 375px;
        transform: translate(-22px, 14px) !important;
    }

    #guide-atlas .atlas-phone-wrap::before {
        left: -94px;
        width: 132px;
        bottom: calc(100% - 29px);
    }

    #guide-atlas .atlas-phone-wrap::after {
        width: 224px;
        height: 40px;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        justify-self: auto;
        transform: none !important;
    }
}

/* =========================================================
   V11 — Unified digital platform and route-facing phone
   ========================================================= */
#guide-atlas .atlas-journey-surface {
    display: none !important;
}

#guide-atlas .atlas-journey-scene::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto -7vw -1px;
    height: 248px;
    pointer-events: none;
    clip-path: polygon(0 35%, 18% 26%, 41% 29%, 63% 17%, 83% 25%, 100% 13%, 100% 100%, 0 100%);
    border-top: 1px solid rgba(45, 230, 214, .26);
    background:
        radial-gradient(ellipse 30% 54% at 75% 18%, rgba(11, 184, 170, .18), transparent 70%),
        linear-gradient(118deg, transparent 0 35%, rgba(28, 216, 199, .10) 35.15% 35.35%, transparent 35.5% 62%, rgba(28, 216, 199, .08) 62.15% 62.35%, transparent 62.5%),
        repeating-linear-gradient(90deg, rgba(46, 225, 211, .045) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(46, 225, 211, .035) 0 1px, transparent 1px 36px),
        linear-gradient(180deg, rgba(7, 69, 77, .38), rgba(2, 23, 34, .93) 34%, #010c15 100%);
    box-shadow: inset 0 42px 50px rgba(2, 11, 19, .28), 0 -16px 34px rgba(11, 220, 203, .045);
}

#guide-atlas .atlas-phone-wrap {
    justify-self: start;
    width: 320px;
    height: 480px;
    margin: 0;
    transform: translate(-40px, 18px) !important;
}

#guide-atlas .atlas-phone-wrap::before {
    z-index: 0;
    left: -80px;
    bottom: calc(100% - 35px);
    width: 112px;
    height: 2px;
    opacity: .9;
    background: linear-gradient(90deg, rgba(21, 234, 220, .04), rgba(21, 234, 220, .82) 72%, rgba(21, 234, 220, .38));
    box-shadow: 0 0 10px rgba(21, 234, 220, .42);
    transform: rotate(-6deg);
}

#guide-atlas .atlas-phone-wrap::after {
    z-index: 0;
    bottom: -21px;
    width: 282px;
    height: 44px;
    border: 1px solid rgba(42, 226, 209, .20);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, .78) 0 29%, rgba(0, 0, 0, .48) 47%, transparent 73%),
        linear-gradient(90deg, transparent, rgba(29, 221, 205, .24), transparent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .58), 0 0 16px rgba(16, 218, 201, .14);
    filter: blur(3px);
}

#guide-atlas .atlas-phone-depth {
    inset: 48px 20px 15px 9px;
    opacity: .38;
}

#guide-atlas .atlas-phone-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 19px 19px rgba(0, 0, 0, .66))
        drop-shadow(0 0 12px rgba(13, 226, 207, .10));
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-journey-scene::after {
        height: 222px;
    }

    #guide-atlas .atlas-phone-wrap {
        width: 270px;
        height: 405px;
        transform: translate(-48px, 16px) !important;
    }

    #guide-atlas .atlas-phone-wrap::before {
        left: -65px;
        width: 94px;
        bottom: calc(100% - 31px);
    }

    #guide-atlas .atlas-phone-wrap::after {
        width: 240px;
        height: 38px;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-journey-scene::after {
        height: 150px;
        clip-path: polygon(0 28%, 100% 15%, 100% 100%, 0 100%);
    }

    #guide-atlas .atlas-phone-wrap {
        width: min(290px, 84vw);
        height: auto;
        transform: none !important;
    }
}

/* =========================================================
   V12 — Terrain integrated into the digital floor
   ========================================================= */
#guide-atlas .atlas-journey-surface {
    display: block !important;
    z-index: 2;
    left: 50%;
    right: auto;
    bottom: -20px;
    width: max(100%, 1280px);
    height: 272px;
    object-fit: cover;
    object-position: center 74%;
    opacity: .54;
    filter: brightness(.70) saturate(.80) contrast(1.07);
    transform: translateX(-50%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .58) 29%, #000 60%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .58) 29%, #000 60%);
}

#guide-atlas .atlas-phone-wrap {
    transform: translate(-40px, 2px) !important;
}

#guide-atlas .atlas-phone-wrap::after {
    bottom: -17px;
    border: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .72) 0 30%, rgba(0, 0, 0, .32) 52%, transparent 74%);
    box-shadow: 0 11px 21px rgba(0, 0, 0, .56), 0 0 12px rgba(16, 218, 201, .08);
    filter: blur(7px);
}

#guide-atlas .atlas-phone-depth {
    opacity: .28;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-journey-surface {
        left: 50%;
        right: auto;
        bottom: -16px;
        width: max(100%, 1080px);
        height: 238px;
        object-position: center 74%;
        opacity: .52;
        transform: translateX(-50%);
    }

    #guide-atlas .atlas-phone-wrap {
        transform: translate(-48px, 0) !important;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-journey-surface {
        display: block !important;
        bottom: -14px;
        width: 920px;
        height: 180px;
        object-position: center 76%;
        opacity: .46;
    }
}

/* Remove the retired digital grid plane beneath the route. */
#guide-atlas .atlas-journey-scene::after {
    display: none;
}

/* =========================================================
   V14 — Vector chat device: crisp at every display size
   ========================================================= */
#guide-atlas .atlas-phone-art {
    display: none;
}

#guide-atlas .atlas-phone-ui {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 7px;
    overflow: hidden;
    border: 1px solid rgba(150, 206, 207, .58);
    border-radius: 38px;
    background:
        linear-gradient(112deg, rgba(210, 241, 239, .80), rgba(66, 90, 98, .92) 7%, #111f27 17%, #02090e 58%, #253e46 100%) border-box,
        #02080d padding-box;
    box-shadow:
        7px 10px 0 rgba(0, 0, 0, .42),
        0 20px 26px rgba(0, 0, 0, .56),
        inset 1px 1px 0 rgba(255, 255, 255, .22),
        inset -2px -3px 8px rgba(0, 0, 0, .72),
        0 0 16px rgba(13, 226, 207, .12);
}

#guide-atlas .atlas-phone-ui::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 11%;
    right: -4px;
    width: 5px;
    height: 34%;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(#8aa6aa, #263b42 18%, #10191f 82%, #6d898e);
    box-shadow: 1px 0 2px rgba(0, 0, 0, .8);
}

#guide-atlas .atlas-phone-ui__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 22px 8px 8px;
    border: 1px solid rgba(167, 225, 220, .13);
    border-radius: 31px;
    background:
        radial-gradient(circle at 14% 9%, rgba(15, 226, 207, .11), transparent 25%),
        linear-gradient(152deg, #10242c 0%, #06141c 38%, #02080d 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 12px 24px rgba(99, 244, 230, .025);
}

#guide-atlas .atlas-phone-ui__island {
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 50%;
    width: 31%;
    height: 10px;
    border-radius: 999px;
    background: #000509;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08);
    transform: translateX(-50%);
}

#guide-atlas .atlas-phone-ui__header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 3px 7px;
    border-bottom: 1px solid rgba(155, 226, 219, .08);
    color: #effdfb;
    font-family: "Manrope", system-ui, sans-serif;
}

#guide-atlas .atlas-phone-ui__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(64, 240, 219, .75);
    border-radius: 50%;
    background: linear-gradient(145deg, #49dbcf, #056d72);
    color: #021317;
    font-size: 9px;
    font-weight: 900;
}

#guide-atlas .atlas-phone-ui__contact {
    display: grid;
    gap: 0;
    min-width: 0;
    line-height: 1.05;
}

#guide-atlas .atlas-phone-ui__contact b {
    font-size: 9px;
    font-weight: 800;
}

#guide-atlas .atlas-phone-ui__contact small {
    color: #70b5b3;
    font-size: 7px;
    font-weight: 600;
}

#guide-atlas .atlas-phone-ui__call {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: #1ee9d9;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    transform: rotate(-35deg);
}

#guide-atlas .atlas-phone-ui__messages {
    display: grid;
    align-content: start;
    gap: 7px;
    flex: 1 1 auto;
    padding: 11px 2px 7px;
    font-family: "Manrope", system-ui, sans-serif;
}

#guide-atlas .atlas-message {
    max-width: 84%;
    margin: 0;
    padding: 7px 8px;
    border-radius: 10px;
    color: #f1fbfa;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.32;
    text-wrap: balance;
}

#guide-atlas .atlas-message--out {
    justify-self: end;
    border-top-right-radius: 3px;
    background: linear-gradient(135deg, #16bfb6, #087d80);
    box-shadow: inset 0 1px 0 rgba(209, 255, 249, .18);
}

#guide-atlas .atlas-message--in {
    justify-self: start;
    border-top-left-radius: 3px;
    background: linear-gradient(135deg, #243640, #14232c);
    box-shadow: inset 0 1px 0 rgba(229, 255, 252, .045);
}

#guide-atlas .atlas-phone-ui__composer {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 0 6px;
    border: 1px solid rgba(147, 224, 216, .12);
    border-radius: 999px;
    background: rgba(16, 31, 39, .94);
    color: #93aaa9;
    font-family: "Manrope", system-ui, sans-serif;
}

#guide-atlas .atlas-phone-ui__composer > span {
    color: #94c8c5;
    font-size: 14px;
    line-height: 1;
}

#guide-atlas .atlas-phone-ui__composer small {
    overflow: hidden;
    color: #8ca4a4;
    font-size: 7px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#guide-atlas .atlas-phone-ui__composer b {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: auto;
    border-radius: 50%;
    background: #10d9ce;
    color: #01292b;
    font-size: 11px;
    line-height: 1;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-message { font-size: 8.5px; }
    #guide-atlas .atlas-phone-ui__messages { gap: 6px; padding-top: 9px; }
}

/* =========================================================
   V15 — High-definition product phone with live chat content
   The rendered titanium shell supplies material depth; the UI stays DOM text
   so it remains sharp at every display density.
   ========================================================= */
#guide-atlas .atlas-phone-ui,
#guide-atlas .atlas-phone-art,
#guide-atlas .atlas-phone-depth {
    display: none !important;
}

#guide-atlas .atlas-phone-wrap {
    z-index: 4;
    width: 365px;
    height: 548px;
    margin: 0;
    transform: translate(-54px, -18px) !important;
}

#guide-atlas .atlas-phone-wrap::before {
    display: none;
}

#guide-atlas .atlas-phone-wrap::after {
    z-index: 0;
    bottom: 2px;
    left: 17%;
    width: 66%;
    height: 26px;
    border: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .66) 0 26%, rgba(0, 0, 0, .33) 52%, transparent 74%);
    box-shadow: 0 11px 22px rgba(0, 0, 0, .52), 0 0 17px rgba(14, 230, 208, .07);
    filter: blur(7px);
    transform: none;
}

#guide-atlas .atlas-phone-pro {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
    isolation: isolate;
}

#guide-atlas .atlas-phone-pro__shell {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(10px 21px 19px rgba(0, 0, 0, .58)) drop-shadow(0 0 13px rgba(20, 228, 209, .08));
    user-select: none;
    -webkit-user-drag: none;
}

#guide-atlas .atlas-phone-pro__screen {
    position: absolute;
    z-index: 2;
    top: 6.45%;
    left: 20.15%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 59.7%;
    height: 86.35%;
    overflow: hidden;
    padding: 24px 7px 7px;
    border-radius: 29px;
    background:
        radial-gradient(circle at 10% 4%, rgba(20, 231, 212, .08), transparent 27%),
        linear-gradient(158deg, #102832 0%, #07161d 46%, #02080d 100%);
    box-shadow: inset 0 0 0 1px rgba(155, 231, 224, .05), inset 0 18px 25px rgba(0, 0, 0, .16);
    font-family: "Manrope", system-ui, sans-serif;
}

#guide-atlas .atlas-phone-pro__screen::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 50%;
    width: 33%;
    height: 10px;
    border-radius: 999px;
    background: #010409;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07);
    transform: translateX(-50%);
}

#guide-atlas .atlas-phone-pro__header {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 21px;
    padding: 0 1px 5px;
    border-bottom: 1px solid rgba(151, 225, 218, .09);
    color: #effefd;
    line-height: 1.05;
}

#guide-atlas .atlas-phone-pro__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(77, 235, 219, .72);
    border-radius: 50%;
    background: linear-gradient(145deg, #62dcd1, #075f67);
    color: #021417;
    font-size: 7px;
    font-weight: 900;
}

#guide-atlas .atlas-phone-pro__contact {
    display: grid;
    min-width: 0;
    line-height: 1.04;
}

#guide-atlas .atlas-phone-pro__contact b {
    color: #f2ffff;
    font-size: 7px;
    font-weight: 800;
}

#guide-atlas .atlas-phone-pro__contact small {
    color: #72b9b5;
    font-size: 5.7px;
    font-weight: 700;
}

#guide-atlas .atlas-phone-pro__call {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #17e0d3;
    font-size: 12px;
    font-weight: 900;
    transform: rotate(-35deg);
}

#guide-atlas .atlas-phone-pro__thread {
    display: grid;
    align-content: start;
    gap: 4px;
    flex: 1 1 auto;
    padding: 7px 1px 5px;
    overflow: hidden;
}

#guide-atlas .atlas-pro-message {
    max-width: 88%;
    margin: 0;
    padding: 5px 6px;
    border-radius: 8px;
    color: #e9f9f7;
    font-size: 6.85px;
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.26;
    overflow-wrap: anywhere;
}

#guide-atlas .atlas-pro-message b {
    display: block;
    margin-bottom: 2px;
    color: #a9f4ec;
    font-size: 6.1px;
    font-weight: 900;
    letter-spacing: .01em;
}

#guide-atlas .atlas-pro-message strong {
    color: #e4fffa;
    font-weight: 800;
}

#guide-atlas .atlas-pro-message--client {
    justify-self: end;
    border-top-right-radius: 3px;
    background: linear-gradient(138deg, #129d9b, #076d73);
    box-shadow: inset 0 1px 0 rgba(215, 255, 250, .13);
}

#guide-atlas .atlas-pro-message--advisor {
    justify-self: start;
    border-top-left-radius: 3px;
    background: linear-gradient(138deg, #253b45, #14242d);
    box-shadow: inset 0 1px 0 rgba(232, 255, 252, .05);
}

#guide-atlas .atlas-phone-pro__composer {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 21px;
    padding: 0 5px;
    border: 1px solid rgba(142, 222, 214, .13);
    border-radius: 999px;
    background: rgba(14, 29, 37, .94);
    color: #8fa8a7;
    line-height: 1;
}

#guide-atlas .atlas-phone-pro__composer > span {
    color: #a6ceca;
    font-size: 12px;
}

#guide-atlas .atlas-phone-pro__composer small {
    overflow: hidden;
    color: #8ea6a6;
    font-size: 5.8px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#guide-atlas .atlas-phone-pro__composer b {
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    margin-left: auto;
    border-radius: 50%;
    background: #0ed8cc;
    color: #012c2d;
    font-size: 9px;
    font-weight: 900;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 340px;
        height: 510px;
        transform: translate(-53px, -10px) !important;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(340px, 88vw);
        height: auto;
        margin: 4px auto 28px;
        transform: none !important;
    }

    #guide-atlas .atlas-phone-pro {
        height: auto;
    }
}

/* =========================================================
   V16 — WhatsApp conversation: readable, native and route-facing
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    width: 405px;
    height: 608px;
    transform: translate(-67px, -34px) !important;
}

#guide-atlas .atlas-phone-pro {
    transform: rotate(-4.5deg);
    transform-origin: 52% 88%;
}

#guide-atlas .atlas-phone-pro__screen {
    padding: 24px 7px 7px;
    background-color: #0b141a;
    background-image:
        radial-gradient(circle at 12% 15%, rgba(60, 83, 91, .14) 0 1px, transparent 1.5px),
        radial-gradient(circle at 84% 36%, rgba(57, 82, 90, .12) 0 1px, transparent 1.5px),
        radial-gradient(circle at 42% 68%, rgba(63, 84, 91, .10) 0 1px, transparent 1.5px),
        linear-gradient(145deg, rgba(26, 45, 51, .26), transparent 42%);
    background-size: 26px 31px, 31px 35px, 37px 29px, auto;
    box-shadow: inset 0 0 0 1px rgba(239, 255, 251, .035);
}

#guide-atlas .atlas-phone-pro__header {
    min-height: 25px;
    margin: 0 -2px;
    padding: 0 3px 5px;
    border-bottom-color: rgba(227, 245, 241, .09);
    color: #e9edef;
}

#guide-atlas .atlas-phone-pro__avatar {
    overflow: hidden;
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    border-color: rgba(82, 213, 189, .72);
    background: #101c22;
    box-shadow: 0 0 0 1px rgba(4, 102, 84, .4);
}

#guide-atlas .atlas-phone-pro__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.16);
}

#guide-atlas .atlas-phone-pro__contact b {
    color: #f3f7f8;
    font-size: 8px;
    letter-spacing: -.02em;
}

#guide-atlas .atlas-phone-pro__contact b i {
    color: #54bdeb;
    font-size: 6px;
    font-style: normal;
}

#guide-atlas .atlas-phone-pro__contact small {
    color: #99aaa9;
    font-size: 6.5px;
    letter-spacing: 0;
}

#guide-atlas .atlas-phone-pro__call {
    width: 14px;
    height: 18px;
    color: #c8d4d2;
    font-size: 15px;
    line-height: .65;
    transform: none;
}

#guide-atlas .atlas-phone-pro__thread {
    gap: 4px;
    padding: 8px 1px 6px;
}

#guide-atlas .atlas-pro-message {
    max-width: 94%;
    padding: 6px 7px;
    border-radius: 7px;
    color: #e9edef;
    font-size: 8.1px;
    font-weight: 500;
    letter-spacing: -.024em;
    line-height: 1.24;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
}

#guide-atlas .atlas-pro-message b {
    display: none;
}

#guide-atlas .atlas-pro-message strong {
    color: inherit;
    font-weight: 750;
}

#guide-atlas .atlas-pro-message--client {
    border-top-right-radius: 2px;
    background: #005c4b;
}

#guide-atlas .atlas-pro-message--advisor {
    border-top-left-radius: 2px;
    background: #202c33;
}

#guide-atlas .atlas-phone-pro__composer {
    min-height: 24px;
    padding: 0 6px;
    border-color: transparent;
    background: #202c33;
    color: #aebac0;
}

#guide-atlas .atlas-phone-pro__composer > span {
    color: #aebac0;
    font-size: 14px;
}

#guide-atlas .atlas-phone-pro__composer small {
    color: #aebac0;
    font-size: 6.8px;
    font-weight: 500;
}

#guide-atlas .atlas-phone-pro__composer b {
    width: 15px;
    height: 15px;
    background: #00a884;
    color: #073b32;
    font-size: 10px;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 370px;
        height: 555px;
        transform: translate(-65px, -23px) !important;
    }

    #guide-atlas .atlas-pro-message {
        font-size: 7.75px;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(370px, 90vw);
        height: auto;
        margin: 4px auto 28px;
        transform: none !important;
    }

    #guide-atlas .atlas-phone-pro {
        transform: rotate(-3deg);
    }

    #guide-atlas .atlas-pro-message {
        font-size: 7.7px;
    }
}

/* =========================================================
   V17 — 17 Pro scale and a purposeful three-dimensional turn
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    width: 372px;
    height: 558px;
    transform: translate(-59px, -18px) !important;
}

#guide-atlas .atlas-phone-pro {
    /* Shell and interface turn together toward the route arrow. */
    transform: perspective(1100px) rotateY(-12deg) rotateZ(-7deg);
    transform-origin: 50% 88%;
}

#guide-atlas .atlas-pro-message {
    font-size: 8.7px;
    line-height: 1.22;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 350px;
        height: 525px;
        transform: translate(-58px, -13px) !important;
    }

    #guide-atlas .atlas-pro-message {
        font-size: 8.3px;
        line-height: 1.22;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(350px, 88vw);
    }

    #guide-atlas .atlas-phone-pro {
        transform: perspective(950px) rotateY(-8deg) rotateZ(-5deg);
    }

    #guide-atlas .atlas-pro-message {
        font-size: 8px;
        line-height: 1.22;
    }
}

/* =========================================================
   V18 — Grounded 17 Pro, readable conversation, coherent route target
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    width: 360px;
    height: 540px;
    transform: translate(-86px, 7px) !important;
}

#guide-atlas .atlas-phone-wrap::after {
    z-index: 1;
    bottom: 1px;
    left: 13%;
    width: 74%;
    height: 31px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .78) 0 28%, rgba(0, 0, 0, .40) 52%, transparent 75%);
    box-shadow: 0 10px 19px rgba(0, 0, 0, .58), 0 0 16px rgba(12, 226, 208, .09);
    filter: blur(5px);
}

#guide-atlas .atlas-phone-pro {
    z-index: 3;
    /* The device turns as a single object toward the route arrow, without a falling tilt. */
    transform: perspective(1200px) rotateY(-15deg) rotateZ(-2.5deg);
    transform-origin: 50% 90%;
}

#guide-atlas .atlas-phone-pro::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 6.5%;
    left: 18.5%;
    width: 63%;
    height: 87%;
    border: 1px solid rgba(117, 150, 157, .4);
    border-radius: 34px;
    background: linear-gradient(112deg, #03080c, #1f3038 48%, #070d12 100%);
    box-shadow: 12px 9px 14px rgba(0, 0, 0, .52), inset -2px 0 3px rgba(222, 247, 244, .13);
    transform: translate(10px, 7px) skewY(-1deg);
}

#guide-atlas .atlas-phone-pro__shell {
    z-index: 2;
    filter: drop-shadow(12px 23px 18px rgba(0, 0, 0, .62)) drop-shadow(-3px 0 10px rgba(28, 235, 216, .14));
}

#guide-atlas .atlas-phone-pro__screen {
    z-index: 3;
    padding: 25px 8px 8px;
}

#guide-atlas .atlas-phone-pro__header {
    min-height: 28px;
    padding-bottom: 6px;
}

#guide-atlas .atlas-phone-pro__avatar {
    flex-basis: 23px;
    width: 23px;
    height: 23px;
}

#guide-atlas .atlas-phone-pro__contact b {
    font-size: 8.8px;
}

#guide-atlas .atlas-phone-pro__contact small {
    font-size: 7px;
}

#guide-atlas .atlas-phone-pro__thread {
    align-content: space-between;
    gap: 0;
    min-height: 0;
    padding: 9px 1px 7px;
}

#guide-atlas .atlas-pro-message {
    max-width: 95%;
    padding: 6px 8px;
    font-size: 10.4px;
    letter-spacing: -.035em;
    line-height: 1.18;
}

#guide-atlas .atlas-phone-pro__composer {
    min-height: 25px;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 340px;
        height: 510px;
        transform: translate(-82px, 3px) !important;
    }

    #guide-atlas .atlas-pro-message {
        font-size: 9.8px;
        line-height: 1.18;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(340px, 88vw);
        transform: none !important;
    }

    #guide-atlas .atlas-phone-pro {
        transform: perspective(950px) rotateY(-9deg) rotateZ(-2deg);
    }

    #guide-atlas .atlas-pro-message {
        font-size: 8.6px;
        line-height: 1.2;
    }
}

/* =========================================================
   V19 — Native WhatsApp details and one integrated phone body
   ========================================================= */
#guide-atlas .atlas-phone-pro {
    /* One physical device: remove the previous artificial back copy. */
    transform: perspective(1200px) rotateY(-10deg) rotateZ(-1.5deg);
}

#guide-atlas .atlas-phone-pro::before {
    display: none;
}

#guide-atlas .atlas-phone-wrap::after {
    z-index: 1;
    bottom: 3px;
    left: 18%;
    width: 64%;
    height: 24px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .82) 0 30%, rgba(0, 0, 0, .38) 60%, transparent 77%);
    box-shadow: 0 8px 15px rgba(0, 0, 0, .68), 0 0 11px rgba(23, 218, 201, .08);
    filter: blur(4px);
}

#guide-atlas .atlas-phone-pro__shell {
    filter: drop-shadow(8px 17px 15px rgba(0, 0, 0, .66)) drop-shadow(-2px 0 8px rgba(31, 234, 216, .11));
}

#guide-atlas .atlas-phone-pro__screen {
    background-color: #0b141a;
    background-image:
        radial-gradient(circle at 14% 21%, rgba(101, 123, 128, .14) 0 1px, transparent 1.4px),
        radial-gradient(circle at 76% 39%, rgba(101, 123, 128, .12) 0 1px, transparent 1.4px),
        radial-gradient(circle at 41% 72%, rgba(101, 123, 128, .10) 0 1px, transparent 1.4px),
        linear-gradient(145deg, rgba(34, 54, 59, .18), transparent 46%);
    background-size: 23px 29px, 31px 37px, 35px 31px, auto;
}

#guide-atlas .atlas-phone-pro__status {
    position: absolute;
    z-index: 4;
    top: 7px;
    left: 9px;
    right: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e9edef;
    font-size: 5.9px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    pointer-events: none;
}

#guide-atlas .atlas-phone-pro__status > span:last-child {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 35%;
}

#guide-atlas .atlas-phone-pro__status i {
    color: #e9edef;
    font-size: 5.2px;
    font-style: normal;
    letter-spacing: -.18em;
}

#guide-atlas .atlas-phone-pro__header {
    position: relative;
    gap: 4px;
    min-height: 27px;
    margin: 0 -5px;
    padding: 0 5px 6px;
    border-bottom-color: rgba(233, 237, 239, .075);
    background: linear-gradient(180deg, rgba(17, 27, 33, .96), rgba(17, 27, 33, .84));
}

#guide-atlas .atlas-phone-pro__back {
    display: grid;
    place-items: center;
    flex: 0 0 10px;
    width: 10px;
    color: #d8e5e2;
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 300;
    line-height: 1;
}

#guide-atlas .atlas-phone-pro__avatar {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    border-color: rgba(47, 184, 153, .74);
    box-shadow: 0 0 0 1px rgba(4, 102, 84, .5);
}

#guide-atlas .atlas-phone-pro__contact b {
    font-size: 8.5px;
}

#guide-atlas .atlas-phone-pro__contact small {
    color: #b0c0bd;
    font-size: 6.6px;
}

#guide-atlas .atlas-phone-pro__actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #d8e5e2;
}

#guide-atlas .atlas-phone-pro__actions i {
    display: block;
    color: inherit;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

#guide-atlas .atlas-phone-pro__thread {
    padding-top: 8px;
    padding-bottom: 7px;
}

#guide-atlas .atlas-pro-message {
    position: relative;
    padding: 6px 7px 5px;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .24);
}

#guide-atlas .atlas-pro-message::before {
    content: "";
    position: absolute;
    top: 0;
    width: 7px;
    height: 8px;
    background: inherit;
}

#guide-atlas .atlas-pro-message--advisor::before {
    left: -4px;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

#guide-atlas .atlas-pro-message--client::before {
    right: -4px;
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

#guide-atlas .atlas-pro-message--client {
    background: #005c4b;
}

#guide-atlas .atlas-pro-message--advisor {
    background: #202c33;
}

#guide-atlas .atlas-pro-meta {
    display: block;
    clear: both;
    margin-top: 2px;
    color: rgba(222, 236, 232, .64);
    font-size: .69em;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-align: right;
}

#guide-atlas .atlas-pro-meta i {
    color: #54bdeb;
    font-size: 1.05em;
    font-style: normal;
    letter-spacing: -.22em;
}

#guide-atlas .atlas-phone-pro__composer {
    min-height: 25px;
    padding-inline: 7px;
    border-radius: 999px;
    background: #202c33;
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro {
        transform: perspective(950px) rotateY(-6deg) rotateZ(-1deg);
    }
}

/* =========================================================
   V20 — Bespoke titanium Solex device shell
   ========================================================= */
#guide-atlas .atlas-phone-pro {
    /* The asset carries the physical 3/4 turn; only a quiet route-aligned lean remains. */
    transform: rotateZ(-1.25deg);
    transform-origin: 50% 90%;
}

#guide-atlas .atlas-phone-pro__shell {
    filter: drop-shadow(8px 18px 16px rgba(0, 0, 0, .68)) drop-shadow(-3px 0 10px rgba(25, 229, 212, .16));
}

#guide-atlas .atlas-phone-pro__screen {
    top: 4.1%;
    left: 26.2%;
    width: 53.3%;
    height: 90.4%;
    border-radius: 28px;
}

#guide-atlas .atlas-phone-pro__screen::before {
    width: 29%;
    height: 9px;
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro {
        transform: rotateZ(-1deg);
    }
}

/* =========================================================
   V24 — Final visible turn toward the process cards
   This stays at the true end of the cascade so the device
   and the WhatsApp glass share the same perspective.
   ========================================================= */
#guide-atlas .atlas-phone-pro {
    transform: perspective(760px) rotateY(-16deg) rotateZ(-1.4deg);
    transform-style: preserve-3d;
    transform-origin: 50% 90%;
}

/* A narrow integrated titanium edge: depth, not a second device. */
#guide-atlas .atlas-phone-pro::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 6.4%;
    left: 79.3%;
    width: 6.2%;
    height: 86.5%;
    border: 1px solid rgba(181, 203, 205, .38);
    border-left-color: rgba(60, 87, 91, .68);
    border-radius: 0 24px 24px 0;
    background: linear-gradient(90deg, #111c22 0%, #52676a 44%, #1c2b30 74%, #070e12 100%);
    box-shadow: 7px 4px 10px rgba(0, 0, 0, .52), inset 1px 0 1px rgba(234, 255, 250, .18);
    transform: translateX(8px) skewY(-.5deg);
    transform-origin: left center;
    pointer-events: none;
}

#guide-atlas .atlas-phone-pro__shell {
    transform: translateZ(1px);
    backface-visibility: hidden;
}

#guide-atlas .atlas-phone-pro__screen {
    transform: translateZ(3px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro {
        transform: perspective(760px) rotateY(-10deg) rotateZ(-1deg);
    }

    #guide-atlas .atlas-phone-pro::after {
        width: 5%;
        transform: translateX(4px) skewY(-.5deg);
    }
}

/* =========================================================
   V23 — Visible right bezel; ordered after every earlier phone override
   ========================================================= */
#guide-atlas .atlas-phone-pro {
    transform: perspective(760px) rotateY(-16deg) rotateZ(-1.4deg);
    transform-style: preserve-3d;
    transform-origin: 50% 90%;
}

#guide-atlas .atlas-phone-pro::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 6.4%;
    left: 79.3%;
    width: 6.2%;
    height: 86.5%;
    border: 1px solid rgba(181, 203, 205, .38);
    border-left-color: rgba(60, 87, 91, .68);
    border-radius: 0 24px 24px 0;
    background: linear-gradient(90deg, #111c22 0%, #52676a 44%, #1c2b30 74%, #070e12 100%);
    box-shadow: 7px 4px 10px rgba(0, 0, 0, .52), inset 1px 0 1px rgba(234, 255, 250, .18);
    transform: translateX(8px) skewY(-.5deg);
    transform-origin: left center;
    pointer-events: none;
}

#guide-atlas .atlas-phone-pro__shell {
    transform: translateZ(1px);
}

#guide-atlas .atlas-phone-pro__screen {
    transform: translateZ(3px);
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro {
        transform: perspective(760px) rotateY(-10deg) rotateZ(-1deg);
    }

    #guide-atlas .atlas-phone-pro::after {
        width: 5%;
        transform: translateX(4px) skewY(-.5deg);
    }
}

/* =========================================================
   V22 — Subtle left-facing product turn toward the four steps
   ========================================================= */
#guide-atlas .atlas-phone-pro {
    transform: perspective(1350px) rotateY(-8deg) rotateZ(-1.7deg);
    transform-style: preserve-3d;
    transform-origin: 50% 90%;
}

#guide-atlas .atlas-phone-pro__shell {
    transform: translateZ(0);
    backface-visibility: hidden;
}

#guide-atlas .atlas-phone-pro__screen {
    /* The chat turns with the phone glass, so it never reads as an overlaid flat card. */
    transform: translateZ(2px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro {
        transform: perspective(1050px) rotateY(-5deg) rotateZ(-1deg);
    }
}

/* =========================================================
   V21 — Front glass alignment and route-to-device composition
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    width: 360px;
    height: 540px;
    transform: translate(-110px, 24px) !important;
}

#guide-atlas .atlas-phone-wrap::after {
    z-index: 1;
    bottom: 7px;
    left: 18%;
    width: 64%;
    height: 22px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .84) 0 30%, rgba(1, 11, 15, .48) 57%, transparent 78%);
    box-shadow: 0 7px 13px rgba(0, 0, 0, .72), 0 0 12px rgba(12, 230, 212, .10);
    filter: blur(4px);
}

#guide-atlas .atlas-phone-pro {
    /* The planar glass keeps the entire WhatsApp UI on the same perspective as the body. */
    transform: rotateZ(-1.7deg);
    transform-origin: 50% 90%;
}

#guide-atlas .atlas-phone-pro__shell {
    filter: drop-shadow(7px 15px 14px rgba(0, 0, 0, .70)) drop-shadow(-2px 0 9px rgba(17, 233, 214, .16));
}

#guide-atlas .atlas-phone-pro__screen {
    top: 5.05%;
    left: 20.25%;
    width: 59.55%;
    height: 88.65%;
    border-radius: 30px;
}

#guide-atlas .atlas-phone-pro__screen::before {
    width: 29%;
    height: 9px;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 340px;
        height: 510px;
        transform: translate(-106px, 17px) !important;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(340px, 88vw);
        transform: none !important;
    }

    #guide-atlas .atlas-phone-pro {
        transform: rotateZ(-1deg);
    }
}

/* =========================================================
   V25 — Cascade terminator: visibly turn the complete device
   ========================================================= */
#guide-atlas .atlas-phone-pro {
    transform: perspective(760px) rotateY(-16deg) rotateZ(-1.4deg);
    transform-style: preserve-3d;
    transform-origin: 50% 90%;
}

/* Slim titanium sidewall integrated behind the real handset shell. */
#guide-atlas .atlas-phone-pro::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 6.4%;
    left: 79.3%;
    width: 6.2%;
    height: 86.5%;
    border: 1px solid rgba(181, 203, 205, .38);
    border-left-color: rgba(60, 87, 91, .68);
    border-radius: 0 24px 24px 0;
    background: linear-gradient(90deg, #111c22 0%, #52676a 44%, #1c2b30 74%, #070e12 100%);
    box-shadow: 7px 4px 10px rgba(0, 0, 0, .52), inset 1px 0 1px rgba(234, 255, 250, .18);
    transform: translateX(8px) skewY(-.5deg);
    transform-origin: left center;
    pointer-events: none;
}

#guide-atlas .atlas-phone-pro__shell {
    transform: translateZ(1px);
    backface-visibility: hidden;
}

#guide-atlas .atlas-phone-pro__screen {
    transform: translateZ(3px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro {
        transform: perspective(760px) rotateY(-10deg) rotateZ(-1deg);
    }

    #guide-atlas .atlas-phone-pro::after {
        width: 5%;
        transform: translateX(4px) skewY(-.5deg);
    }
}

/* =========================================================
   V26 — One coherent handset, with a restrained physical turn
   ========================================================= */
#guide-atlas .atlas-phone-pro {
    /* The screen faces the four process steps without creating a second silhouette. */
    transform: perspective(1180px) rotateY(-10deg) rotateZ(-1.1deg);
    transform-style: preserve-3d;
    transform-origin: 50% 90%;
}

#guide-atlas .atlas-phone-pro::after {
    /* Removed: the former sidewall read as a second phone behind the device. */
    display: none;
}

#guide-atlas .atlas-phone-pro__shell {
    transform: translateZ(1px);
    filter: drop-shadow(8px 16px 15px rgba(0, 0, 0, .66)) drop-shadow(-2px 0 8px rgba(17, 233, 214, .14));
}

#guide-atlas .atlas-phone-pro__screen {
    transform: translateZ(3px);
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro {
        transform: perspective(1080px) rotateY(-6deg) rotateZ(-.8deg);
    }
}

/* =========================================================
   V27 — New single-piece titanium phone, aimed toward the arrow
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    width: 360px;
    height: 540px;
    perspective: 1300px;
    transform: translate(-98px, 13px) !important;
}

#guide-atlas .atlas-phone-wrap::after {
    bottom: 8px;
    left: 22%;
    width: 56%;
    height: 18px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .74) 0 28%, rgba(0, 0, 0, .32) 55%, transparent 78%);
    box-shadow: 0 9px 17px rgba(0, 0, 0, .52);
    filter: blur(5px);
}

#guide-atlas .atlas-phone-pro {
    /* The rendered handset already exposes its real right-hand edge.
       This small turn makes the complete device look toward the route arrow. */
    transform: rotateY(-4deg) rotateZ(-3.3deg);
    transform-origin: 50% 90%;
    transform-style: preserve-3d;
}

#guide-atlas .atlas-phone-pro::after {
    display: none;
}

#guide-atlas .atlas-phone-pro__shell {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(9px 17px 16px rgba(0, 0, 0, .70)) drop-shadow(0 0 10px rgba(12, 227, 210, .12));
}

/* The HTML WhatsApp chat is placed inside the blank display of the new handset. */
#guide-atlas .atlas-phone-pro__screen {
    top: 8.15%;
    left: 23.1%;
    width: 54.1%;
    height: 83.3%;
    padding: 23px 7px 7px;
    border-radius: 28px;
    background: linear-gradient(160deg, #0c252b 0%, #07161b 43%, #03080b 100%);
    box-shadow: inset 0 0 0 1px rgba(151, 235, 225, .06), inset 0 17px 23px rgba(0, 0, 0, .19);
    transform: translateZ(3px);
}

/* The real handset already has its top island; keep only one. */
#guide-atlas .atlas-phone-pro__screen::before {
    display: none;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 338px;
        height: 507px;
        transform: translate(-92px, 11px) !important;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(340px, 88vw);
        height: auto;
        transform: none !important;
    }

    #guide-atlas .atlas-phone-pro {
        transform: rotateY(-2deg) rotateZ(-1.4deg);
    }
}

/* =========================================================
   V28 — Match the WhatsApp glass to the rendered screen plane
   ========================================================= */
#guide-atlas .atlas-phone-pro__screen {
    top: 8.65%;
    left: 23.75%;
    width: 52.85%;
    height: 81.95%;
    padding: 24px 7px 7px;
    border-radius: 27px 25px 27px 25px;
    clip-path: polygon(1.7% 1.1%, 97.5% 0, 100% 98.8%, 2.3% 100%);
    transform: translateZ(4px) rotateZ(-.75deg) skewY(-.18deg);
    transform-origin: 50% 50%;
}

#guide-atlas .atlas-phone-pro__thread {
    padding-top: 7px;
    padding-bottom: 5px;
}

#guide-atlas .atlas-phone-pro__composer {
    margin: 0 1px;
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-pro__screen {
        transform: translateZ(4px) rotateZ(-.5deg) skewY(-.12deg);
    }
}

/* =========================================================
   V29 — One native 3D device: frame, glass and chat share one plane
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    width: 350px;
    height: 525px;
    transform: translate(-92px, 14px) !important;
}

#guide-atlas .atlas-phone-wrap::after {
    bottom: 4px;
    left: 24%;
    width: 49%;
    height: 17px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .76) 0 26%, rgba(0, 0, 0, .32) 56%, transparent 80%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .54);
    filter: blur(5px);
}

#guide-atlas .atlas-phone-pro {
    position: absolute;
    z-index: 2;
    top: 2.5%;
    left: 17.5%;
    width: 65%;
    height: 94%;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid rgba(204, 221, 220, .68);
    border-radius: 42px;
    background:
        linear-gradient(90deg, #101719 0%, #697477 4%, #1c282a 8%, #0a0e0f 14%, #0c1112 79%, #778184 95%, #151b1d 100%);
    box-shadow:
        0 18px 23px rgba(0, 0, 0, .68),
        -4px 1px 7px rgba(16, 232, 211, .18),
        inset 1px 0 1px rgba(241, 255, 253, .42),
        inset -2px 0 3px rgba(0, 0, 0, .54),
        inset 0 1px 1px rgba(255, 255, 255, .22);
    transform: perspective(1050px) rotateY(-17deg) rotateZ(-3.1deg);
    transform-origin: 50% 90%;
    transform-style: preserve-3d;
}

#guide-atlas .atlas-phone-pro__shell {
    display: none;
}

#guide-atlas .atlas-phone-pro__screen {
    position: absolute;
    z-index: 1;
    top: 2.25%;
    left: 3.2%;
    width: 93.6%;
    height: 95.5%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 25px 7px 7px;
    border: 1px solid rgba(0, 0, 0, .95);
    border-radius: 36px;
    clip-path: none;
    background:
        radial-gradient(circle at 12% 2%, rgba(38, 224, 207, .10), transparent 25%),
        linear-gradient(160deg, #0a262b 0%, #07181d 46%, #03080b 100%);
    box-shadow: inset 0 0 0 1px rgba(178, 246, 238, .05), inset 0 15px 20px rgba(0, 0, 0, .25);
    transform: translateZ(2px);
    transform-origin: center;
}

#guide-atlas .atlas-phone-pro__screen::before {
    display: block;
    top: 7px;
    width: 31%;
    height: 9px;
    background: #010407;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08);
}

#guide-atlas .atlas-phone-pro__header {
    min-height: 21px;
}

#guide-atlas .atlas-phone-pro__thread {
    gap: 4px;
    padding-top: 7px;
    padding-bottom: 5px;
}

#guide-atlas .atlas-phone-pro__composer {
    margin: 0;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 328px;
        height: 492px;
        transform: translate(-86px, 13px) !important;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(330px, 86vw);
        height: 495px;
        transform: none !important;
    }

    #guide-atlas .atlas-phone-pro {
        transform: perspective(1000px) rotateY(-11deg) rotateZ(-1.4deg);
    }
}

/* =========================================================
   V30 — Seat the conversation behind a real, even phone bezel
   ========================================================= */
#guide-atlas .atlas-phone-pro__screen {
    top: 3.35%;
    left: 5%;
    width: 90%;
    height: 93.3%;
    padding: 25px 7px 7px;
    border: 1px solid rgba(2, 6, 7, .98);
    border-radius: 34px;
    background:
        radial-gradient(circle at 13% 2%, rgba(35, 229, 211, .08), transparent 25%),
        linear-gradient(160deg, #09242a 0%, #07171c 46%, #03080b 100%);
    box-shadow:
        0 0 0 1px rgba(125, 148, 148, .20),
        inset 0 0 0 1px rgba(176, 240, 232, .045),
        inset 0 15px 20px rgba(0, 0, 0, .28);
    transform: translateZ(2px);
}

#guide-atlas .atlas-phone-pro__screen::before {
    top: 7px;
    width: 31%;
    height: 9px;
}

/* =========================================================
   V31 — Single rendered phone: titanium body and chat are one asset
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    width: 360px;
    height: 540px;
    transform: translate(-98px, 10px) !important;
}

#guide-atlas .atlas-phone-wrap::after,
#guide-atlas .atlas-phone-pro::before,
#guide-atlas .atlas-phone-pro::after {
    display: none;
}

#guide-atlas .atlas-phone-pro {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: rotateZ(-1.6deg);
    transform-origin: 50% 90%;
}

#guide-atlas .atlas-phone-pro__shell {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(10px 17px 17px rgba(0, 0, 0, .64)) drop-shadow(-2px 0 10px rgba(13, 226, 211, .13));
    transform: none;
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 340px;
        height: 510px;
        transform: translate(-92px, 11px) !important;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        width: min(340px, 88vw);
        height: auto;
        transform: none !important;
    }

    #guide-atlas .atlas-phone-pro {
        transform: rotateZ(-.7deg);
    }
}

/* =========================================================
   V32 — Sharp integrated chat, Solex identity and ground contact
   ========================================================= */
#guide-atlas .atlas-phone-wrap {
    transform: translate(-101px, 18px) !important;
}

#guide-atlas .atlas-phone-wrap::after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 1.5%;
    left: 19%;
    display: block;
    width: 63%;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, .72) 0 26%, rgba(0, 0, 0, .37) 50%, transparent 76%),
        radial-gradient(ellipse at center, rgba(14, 224, 208, .14) 0 8%, transparent 59%);
    box-shadow: 0 10px 19px rgba(0, 0, 0, .50), 0 3px 16px rgba(12, 224, 208, .09);
    filter: blur(4px);
    transform: none;
}

#guide-atlas .atlas-phone-pro {
    z-index: 2;
}

#guide-atlas .atlas-phone-pro__shell {
    filter: drop-shadow(9px 16px 15px rgba(0, 0, 0, .63)) drop-shadow(-1px 0 10px rgba(13, 226, 211, .16));
}

/* The actual Solex mark sits in the chat avatar, replacing the generated placeholder. */
#guide-atlas .atlas-phone-pro__brand-avatar {
    position: absolute;
    z-index: 3;
    top: 12%;
    left: 26.35%;
    display: block;
    width: 8.55%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(88, 230, 209, .72);
    border-radius: 50%;
    background: #07151a;
    box-shadow: 0 0 0 1px rgba(3, 7, 9, .88), 0 0 8px rgba(23, 223, 207, .24);
}

#guide-atlas .atlas-phone-pro__brand-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        transform: translate(-94px, 16px) !important;
    }
}

@media (max-width: 860px) {
    #guide-atlas .atlas-phone-wrap {
        transform: none !important;
    }
}

/* =========================================================
   V33 — Solex avatar alignment and a route locked to all four markers
   ========================================================= */
#guide-atlas .atlas-phone-pro__brand-avatar {
    top: 12.25%;
    left: 26.25%;
    width: 7.6%;
    border: 0;
    background: #0a181c;
    box-shadow: 0 0 0 1px rgba(8, 22, 25, .88), 0 0 5px rgba(23, 223, 207, .16);
}

#guide-atlas .atlas-phone-pro__brand-avatar img {
    transform: scale(1.04);
}

/* Each card has the same measured connection to the curve. */
#guide-atlas .atlas-steps > li {
    --marker-gap: 18px;
}

#guide-atlas .atlas-step-marker {
    z-index: 5;
    width: 18px;
    height: 18px;
    border-width: 4px;
    box-shadow: 0 0 0 4px rgba(2, 219, 206, .10), 0 0 13px 3px rgba(0, 242, 225, .31);
}

#guide-atlas .atlas-step-marker::before {
    top: calc(-1 * var(--marker-gap) + 4px);
    height: max(0px, calc(var(--marker-gap) - 9px));
    background: linear-gradient(180deg, rgba(12, 214, 201, .08), rgba(0, 241, 223, .42));
}

#guide-atlas .atlas-curve-line {
    stroke-width: 2.8px;
}

#guide-atlas .atlas-curve-halo {
    stroke-width: 8px;
    opacity: .32;
}

/* =========================================================
   V34 — Markers centered directly on their local route position
   ========================================================= */
#guide-atlas .atlas-steps > li:nth-child(1) { --marker-gap: 47px; }
#guide-atlas .atlas-steps > li:nth-child(2) { --marker-gap: 60px; }
#guide-atlas .atlas-steps > li:nth-child(3) { --marker-gap: 58px; }
#guide-atlas .atlas-steps > li:nth-child(4) { --marker-gap: 60px; }

#guide-atlas .atlas-step-marker::before {
    top: calc(-1 * var(--marker-gap) + 4px);
    height: max(0px, calc(var(--marker-gap) - 9px));
}

/* =========================================================
   V35 — Route markers and a clear destination arrow
   ========================================================= */
/* Values are measured against the rendered SVG path, not the card bottoms. */
#guide-atlas .atlas-steps > li:nth-child(1) { --marker-gap: 68px; }
#guide-atlas .atlas-steps > li:nth-child(2) { --marker-gap: 61px; }
#guide-atlas .atlas-steps > li:nth-child(3) { --marker-gap: 54px; }
#guide-atlas .atlas-steps > li:nth-child(4) { --marker-gap: 48px; }

/* The decorative origin no longer communicates a step, so the route starts cleanly. */
#guide-atlas .atlas-journey-origin {
    display: none;
}

/* Replace the clipped SVG tip with an explicit arrow that points to the device. */
#guide-atlas .atlas-curve-arrow {
    display: none;
}

#guide-atlas .atlas-phone-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: auto;
    top: 39%;
    left: -62px;
    display: block;
    width: 54px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, #08cfc4 0%, #1ffbec 78%);
    clip-path: polygon(0 35%, 67% 35%, 67% 0, 100% 50%, 67% 100%, 67% 65%, 0 65%);
    box-shadow: none;
    filter: drop-shadow(0 0 7px rgba(20, 246, 229, .72));
    transform: rotate(-38deg);
    transform-origin: 100% 50%;
    pointer-events: none;
}

/* =========================================================
   V36 — Arrow settled into the free space before the handset
   ========================================================= */
#guide-atlas .atlas-phone-wrap::before {
    top: 25%;
    left: -14px;
    width: 45px;
    height: 24px;
    transform: rotate(-35deg);
}

/* =========================================================
   V37 — One continuous route, ending at a smaller handset
   ========================================================= */
#guide-atlas .atlas-phone-wrap::before {
    display: none !important;
}

#guide-atlas .atlas-curve-arrow {
    display: block;
}

@media (min-width: 1161px) {
    #guide-atlas .atlas-phone-wrap {
        width: 320px;
        height: 480px;
        transform: translate(-16px, 26px) !important;
    }
}

@media (min-width: 861px) and (max-width: 1160px) {
    #guide-atlas .atlas-phone-wrap {
        width: 290px;
        height: 435px;
        transform: translate(-30px, 23px) !important;
    }
}

/* =========================================================
   V38 — A restrained route tip at the device edge
   ========================================================= */
#guide-atlas .atlas-curve-arrow {
    fill: none;
    stroke: #1be4d8;
    stroke-width: 2.4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .86;
    filter: drop-shadow(0 0 4px rgba(20, 246, 229, .48));
}

/* =========================================================
   V41 — Minimal terminal: route first, arrow second
   ========================================================= */
#guide-atlas .atlas-curve-arrow {
    fill: #20dacf;
    stroke: none;
    opacity: .52;
    filter: none;
}

/* =========================================================
   V42 — A clear, calm destination and three platform signals
   ========================================================= */
#guide-atlas .atlas-curve-arrow {
    fill: #16e3d6;
    opacity: .82;
    filter: drop-shadow(0 0 3px rgba(18, 235, 219, .30));
}

#atlas-network .atlas-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 558px;
    margin-top: 32px;
}

#atlas-network .atlas-pillars > div {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 13px 14px 13px 16px;
    overflow: hidden;
    border: 1px solid rgba(48, 220, 210, .22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 0 0, rgba(20, 216, 209, .12), transparent 54%),
        linear-gradient(135deg, rgba(8, 43, 53, .74), rgba(3, 21, 31, .78)) !important;
    box-shadow: inset 0 1px 0 rgba(226, 255, 248, .055), 0 13px 28px rgba(0, 0, 0, .16) !important;
    color: #ebfaf6;
}

#atlas-network .atlas-pillars > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 2px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(#0de8db, rgba(13, 232, 219, .22));
    box-shadow: 0 0 12px rgba(13, 232, 219, .42);
}

#atlas-network .atlas-pillars > div::after { display: none; }

#atlas-network .atlas-pillars i {
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid rgba(22, 227, 214, .65);
    border-radius: 50%;
    color: #21e5d9 !important;
    background: rgba(1, 24, 33, .74);
    box-shadow: inset 0 0 0 4px rgba(9, 202, 191, .045), 0 0 16px rgba(13, 229, 216, .14);
}

#atlas-network .atlas-pillars span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    color: #ecfaf8;
    line-height: 1.08;
}

#atlas-network .atlas-pillars span b {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.015em;
}

#atlas-network .atlas-pillars span small {
    color: rgba(174, 210, 210, .82);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
}

#atlas-network .atlas-pillars > div:nth-child(2)::before {
    background: linear-gradient(#6ee7b7, rgba(110, 231, 183, .20));
    box-shadow: 0 0 12px rgba(110, 231, 183, .34);
}

#atlas-network .atlas-pillars > div:nth-child(2) i {
    border-color: rgba(110, 231, 183, .62);
    color: #91f3c9 !important;
}

@media (hover: hover) and (pointer: fine) {
    #atlas-network .atlas-pillars > div:hover {
        transform: translateY(-2px);
        border-color: rgba(38, 239, 224, .42) !important;
        background:
            radial-gradient(circle at 0 0, rgba(20, 216, 209, .17), transparent 56%),
            linear-gradient(135deg, rgba(9, 57, 64, .82), rgba(3, 27, 36, .85)) !important;
        box-shadow: inset 0 1px 0 rgba(226, 255, 248, .09), 0 17px 32px rgba(0, 0, 0, .21) !important;
    }
}

@media (max-width: 620px) {
    #atlas-network .atlas-pillars {
        grid-template-columns: 1fr;
        max-width: 320px;
        gap: 10px;
    }

    #atlas-network .atlas-pillars > div { min-height: 70px; }
}

/* =========================================================
   V43 — Arrowhead follows the exact exit tangent
   ========================================================= */
#guide-atlas .atlas-curve-arrow {
    fill: url(#atlas-route-gradient);
    opacity: .94;
    filter: drop-shadow(0 0 2px rgba(17, 236, 221, .38));
}

/* =========================================================
   V44 — Offer cards: one visual system, less display noise
   ========================================================= */
.sx-public .availability-card,
.sx-public .availability-card--clp,
.sx-public .availability-card--paypal {
    --accent: #19d9cf;
    --accent-soft: rgba(25, 217, 207, .20);
    border-color: rgba(64, 219, 207, .42) !important;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(24, 187, 174, .08), transparent 46%),
        linear-gradient(160deg, rgba(5, 28, 39, .84), rgba(1, 15, 24, .88)) !important;
    box-shadow:
        inset 0 1px 0 rgba(222, 255, 248, .055),
        inset 0 0 22px rgba(25, 188, 162, .025),
        0 12px 25px rgba(0, 0, 0, .22),
        0 0 13px rgba(25, 217, 207, .09) !important;
}

.sx-public .availability-card__halo {
    opacity: .18 !important;
    box-shadow: inset 0 0 18px rgba(92, 239, 229, .05), 0 0 7px rgba(25, 217, 207, .08) !important;
}

.sx-public .availability-card__waves {
    top: 57px !important;
    opacity: .25 !important;
}

.sx-public .availability-card__waves::before { opacity: .22 !important; }
.sx-public .availability-card__waves::after { opacity: .08 !important; }

.sx-public .availability-card__status,
.sx-public .availability-card__signal { display: none !important; }

.sx-public .availability-card__kind {
    position: absolute;
    z-index: 3;
    top: 17px;
    left: 19px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(184, 227, 223, .84);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1;
    text-transform: uppercase;
}

.sx-public .availability-card__kind::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1ce4d8;
    box-shadow: 0 0 8px rgba(28, 228, 216, .55);
}

.sx-public .availability-card__coin,
.sx-public .availability-card--clp .availability-card__coin,
.sx-public .availability-card--paypal .availability-card__coin {
    top: 55px;
    width: 126px;
    height: 126px;
    border: 2px solid rgba(173, 242, 235, .62);
    background: radial-gradient(circle at 32% 22%, rgba(97, 234, 225, .20), transparent 42%), #062a38;
    box-shadow:
        0 13px 21px rgba(0, 5, 11, .34),
        inset 0 0 0 5px rgba(233, 255, 251, .07),
        0 0 0 4px rgba(25, 217, 207, .07),
        0 0 18px rgba(25, 217, 207, .15);
}

.sx-public .availability-card__coin::after {
    inset: 5px;
    border-color: rgba(226, 255, 251, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
}

.sx-public .availability-card--paypal .availability-card__coin img {
    width: 56%;
    height: 72%;
    margin: 14% auto 0;
    object-fit: contain;
}

.sx-public .availability-card__action {
    width: 204px;
    border-color: rgba(55, 224, 212, .58) !important;
    background: rgba(2, 27, 36, .74) !important;
    box-shadow: inset 0 1px 0 rgba(227, 255, 251, .07), 0 8px 16px rgba(0, 0, 0, .15) !important;
    color: #edfdf9 !important;
}

.sx-public .availability-card__action i {
    width: 30px;
    height: 30px;
    background: #1bded2 !important;
    box-shadow: 0 0 11px rgba(27, 222, 210, .38) !important;
    color: #043038 !important;
    font-size: 17px;
}

@media (hover: hover) and (pointer: fine) {
    .sx-public .availability-card:hover,
    .sx-public .availability-card:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(104, 241, 229, .70) !important;
        box-shadow:
            inset 0 1px 0 rgba(222, 255, 248, .10),
            inset 0 0 24px rgba(25, 188, 162, .04),
            0 16px 30px rgba(0, 0, 0, .27),
            0 0 18px rgba(25, 217, 207, .14) !important;
    }
}

/* =========================================================
   V45 — Verified public operations ledger
   ========================================================= */
#history-atlas {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(ellipse at 80% 6%, rgba(23, 210, 193, .10), transparent 34%),
        linear-gradient(180deg, #02131d 0%, #031923 100%) !important;
}

#history-atlas .atlas-shell { position: relative; }

#history-atlas .atlas-history-heading {
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 34px;
}

#history-atlas .atlas-history-heading h2 {
    max-width: 720px;
    margin: 8px 0 0;
}

#history-atlas .atlas-history-copy {
    max-width: 510px;
    margin: 17px 0 0;
    color: rgba(191, 221, 218, .78);
    font-size: 15px;
    font-weight: 550;
    line-height: 1.48;
}

#history-atlas .atlas-operations {
    border: 1px solid rgba(87, 222, 207, .22) !important;
    border-radius: 20px !important;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(11, 43, 52, .54), rgba(2, 18, 28, .84)) !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 250, .055),
        0 24px 56px rgba(0, 0, 0, .22) !important;
}

#history-atlas .atlas-operation {
    display: grid;
    grid-template-columns: minmax(180px, 1.05fr) minmax(240px, 1.25fr) minmax(150px, .7fr) minmax(165px, .85fr);
    align-items: center;
    gap: 20px;
    min-height: 102px;
    padding: 18px 26px;
    border-bottom-color: rgba(133, 232, 215, .11) !important;
}

#history-atlas .atlas-operation--head {
    min-height: 50px;
    padding-block: 15px;
    background: rgba(117, 235, 213, .045) !important;
    color: rgba(182, 222, 217, .78) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .13em;
    text-transform: uppercase;
}

#history-atlas .atlas-operations.is-empty .atlas-operation--head { display: none; }

#history-atlas .atlas-operation--data {
    position: relative;
    transition: background .2s ease;
}

#history-atlas .atlas-operation--data::before {
    content: "";
    position: absolute;
    inset: 18px auto 18px 0;
    width: 2px;
    border-radius: 0 99px 99px 0;
    background: linear-gradient(180deg, transparent, rgba(105, 241, 208, .78), transparent);
    opacity: 0;
    transition: opacity .2s ease;
}

#history-atlas .atlas-route-pair {
    gap: 9px;
    color: #effcf7;
}

#history-atlas .atlas-route-pair img {
    width: 29px;
    height: 29px;
    border: 1px solid rgba(209, 255, 244, .28);
    border-radius: 50%;
    background: #092b35;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .18);
    object-fit: cover;
}

#history-atlas .atlas-route-pair strong {
    color: #f2fffb;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.018em;
}

#history-atlas .atlas-route-pair i {
    margin: 0 2px;
    color: #56e4cf !important;
    font-size: 11px;
}

#history-atlas .atlas-operation-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#history-atlas .atlas-operation-amount {
    min-width: 0;
}

#history-atlas .atlas-operation-amount + .atlas-operation-amount {
    padding-left: 16px;
    border-left: 1px solid rgba(145, 229, 215, .12);
}

#history-atlas .atlas-operation-amount span,
#history-atlas .atlas-operation-state small,
#history-atlas .atlas-operation-record > span,
#history-atlas .atlas-operation-record small {
    display: block;
    color: rgba(161, 201, 198, .68);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    line-height: 1.25;
    text-transform: uppercase;
}

#history-atlas .atlas-operation-amount strong {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: #e8fbf5;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#history-atlas .atlas-operation-amount:last-child strong { color: #7aebc1; }

#history-atlas .atlas-operation-state {
    display: grid;
    justify-items: start;
    gap: 7px;
}

#history-atlas .atlas-status {
    width: fit-content;
    padding: 6px 10px;
    border-color: rgba(92, 232, 184, .27) !important;
    background: rgba(71, 218, 169, .08) !important;
    color: #81f0c2 !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

#history-atlas .atlas-status::before {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 8px currentColor;
}

#history-atlas .atlas-status.is-pending {
    border-color: rgba(249, 193, 87, .28) !important;
    background: rgba(249, 193, 87, .08) !important;
    color: #f8c15c !important;
}

#history-atlas .atlas-operation-record {
    min-width: 0;
}

#history-atlas .atlas-operation-record strong {
    display: block;
    overflow: hidden;
    margin: 5px 0 4px;
    color: #dff8ef;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#history-atlas .atlas-operation-record small {
    color: rgba(179, 214, 210, .82);
    font-size: 9px;
    letter-spacing: .025em;
    text-transform: none;
}

#history-atlas .atlas-empty--operations {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 146px;
    padding: 29px 32px;
    color: rgba(191, 221, 218, .84);
}

#history-atlas .atlas-empty--operations > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(105, 237, 210, .27);
    border-radius: 13px;
    background: rgba(15, 93, 91, .16);
    color: #70eac3;
    font-size: 17px;
}

#history-atlas .atlas-empty--operations strong {
    display: block;
    margin-bottom: 5px;
    color: #edfff9;
    font-size: 15px;
    font-weight: 750;
}

#history-atlas .atlas-empty--operations p {
    max-width: 530px;
    margin: 0;
    color: rgba(180, 211, 208, .72);
    font-size: 13px;
    line-height: 1.45;
}

#history-atlas .atlas-operations-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
}

#history-atlas .atlas-operations-pagination[hidden] { display: none; }

#history-atlas .atlas-operations-page {
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(119, 226, 211, .2);
    border-radius: 10px;
    background: rgba(6, 35, 42, .56);
    color: rgba(213, 241, 235, .78);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

#history-atlas .atlas-operations-page:hover:not(:disabled),
#history-atlas .atlas-operations-page.is-current {
    border-color: rgba(78, 232, 197, .72);
    background: rgba(50, 208, 172, .16);
    color: #eafff8;
}

#history-atlas .atlas-operations-page:hover:not(:disabled) { transform: translateY(-1px); }
#history-atlas .atlas-operations-page:focus-visible { outline: 2px solid #64efd0; outline-offset: 3px; }
#history-atlas .atlas-operations-page:disabled { opacity: .35; cursor: not-allowed; }

@media (hover: hover) and (pointer: fine) {
    #history-atlas .atlas-operation--data:hover {
        background: linear-gradient(90deg, rgba(61, 220, 195, .07), transparent 56%);
    }

    #history-atlas .atlas-operation--data:hover::before { opacity: 1; }
}

@media (max-width: 980px) {
    #history-atlas .atlas-operation {
        grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.1fr) minmax(150px, .7fr);
    }

    #history-atlas .atlas-operation-record { display: none; }
    #history-atlas .atlas-operation--head > :last-child { display: none; }
}

@media (max-width: 680px) {
    #history-atlas .atlas-history-heading { align-items: flex-start; }
    #history-atlas .atlas-operations { border-radius: 16px !important; }
    #history-atlas .atlas-operation--head { display: none; }
    #history-atlas .atlas-operation--data {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 16px;
        min-height: 0;
        padding: 20px;
    }

    #history-atlas .atlas-operation-details {
        grid-column: 1 / -1;
        gap: 12px;
        padding-top: 14px;
        border-top: 1px solid rgba(145, 229, 215, .10);
    }

    #history-atlas .atlas-operation-state { align-self: start; }
    #history-atlas .atlas-operation-state small { display: none; }
    #history-atlas .atlas-empty--operations { padding: 24px 20px; }
}

@media (max-width: 470px) {
    #history-atlas .atlas-history-heading { display: block; }
    #history-atlas .atlas-history-copy { font-size: 14px; }
    #history-atlas .atlas-route-pair img { width: 26px; height: 26px; }
    #history-atlas .atlas-route-pair strong { font-size: 14px; }
    #history-atlas .atlas-status { font-size: 10px; }
}

/* Registro público: carga percibida y lectura directa en pantallas pequeñas. */
#history-atlas .atlas-operations-skeleton {
    display: grid;
}

#history-atlas .atlas-operation-skeleton {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(210px, 1.1fr) minmax(130px, .72fr) minmax(150px, .8fr);
    align-items: center;
    gap: 24px;
    min-height: 82px;
    padding: 17px 28px;
    border-bottom: 1px solid rgba(145, 229, 215, .10);
}

#history-atlas .atlas-operation-skeleton:last-child { border-bottom: 0; }

#history-atlas .atlas-operation-skeleton > span {
    display: block;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(145, 229, 215, .08), rgba(145, 229, 215, .2), rgba(145, 229, 215, .08));
    background-size: 220% 100%;
    animation: atlas-operation-loading 1.35s ease-in-out infinite;
}

#history-atlas .atlas-operation-skeleton > span:nth-child(1) { width: 76%; }
#history-atlas .atlas-operation-skeleton > span:nth-child(2) { width: 92%; }
#history-atlas .atlas-operation-skeleton > span:nth-child(3) { width: 80%; }
#history-atlas .atlas-operation-skeleton > span:nth-child(4) { width: 88%; }

@keyframes atlas-operation-loading {
    0% { background-position: 100% 0; opacity: .68; }
    50% { opacity: 1; }
    100% { background-position: -120% 0; opacity: .68; }
}

@media (max-width: 680px) {
    #history-atlas .atlas-operations {
        overflow: visible;
    }

    #history-atlas .atlas-operation,
    #history-atlas .atlas-operation--data {
        min-width: 0 !important;
    }

    #history-atlas .atlas-operation--data {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        padding: 18px 16px;
    }

    #history-atlas .atlas-route-pair {
        gap: 7px;
    }

    #history-atlas .atlas-route-pair strong {
        font-size: 13px;
    }

    #history-atlas .atlas-operation-details {
        display: grid !important;
        grid-column: 1 / -1;
        gap: 10px;
        padding: 13px 0;
    }

    #history-atlas .atlas-operation-amount + .atlas-operation-amount {
        padding-left: 12px;
    }

    #history-atlas .atlas-operation-amount strong {
        overflow: visible;
        font-size: 13px;
        white-space: normal;
    }

    #history-atlas .atlas-operation-record {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding-top: 2px;
    }

    #history-atlas .atlas-operation-record > span { display: none; }
    #history-atlas .atlas-operation-record strong {
        min-width: 0;
        margin: 0;
        font-size: 10px;
    }
    #history-atlas .atlas-operation-record small {
        margin-left: auto;
        flex: 0 0 auto;
        font-size: 9px;
    }

    #history-atlas .atlas-operations-pagination {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 2px 4px;
    }

    #history-atlas .atlas-operation-skeleton {
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 15px;
        min-height: 150px;
        padding: 18px 16px;
    }

    #history-atlas .atlas-operation-skeleton > span:nth-child(1) { width: 72%; }
    #history-atlas .atlas-operation-skeleton > span:nth-child(2) { width: 100%; }
    #history-atlas .atlas-operation-skeleton > span:nth-child(3) { width: 76%; }
    #history-atlas .atlas-operation-skeleton > span:nth-child(4) { width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
    #history-atlas .atlas-operation-skeleton > span { animation: none; }
}

/* SOLEX CLUB — voluntary account invitation beneath the quote experience. */
.solex-club-invite {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: clamp(20px, 4vw, 58px) 24px clamp(52px, 7vw, 88px);
    background:
        radial-gradient(circle at 78% 5%, rgba(38, 212, 188, .14), transparent 29%),
        linear-gradient(180deg, rgba(1, 15, 24, .05), rgba(1, 16, 24, .84));
}

.solex-club-invite::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .38;
    background-image:
        linear-gradient(rgba(70, 211, 192, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70, 211, 192, .09) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.solex-club-invite__shell {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 68px) 27px;
    overflow: hidden;
    border: 1px solid rgba(71, 222, 199, .39);
    border-radius: 28px;
    background: linear-gradient(110deg, rgba(3, 25, 37, .98), rgba(2, 24, 34, .91) 62%, rgba(6, 56, 62, .58));
    box-shadow: inset 0 1px 0 rgba(226, 255, 247, .08), 0 20px 55px rgba(0, 0, 0, .20), 0 0 35px rgba(30, 225, 194, .08);
}

.solex-club-invite__shell::after {
    position: absolute;
    right: -140px;
    bottom: -190px;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(82, 238, 207, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(70, 226, 196, .035), 0 0 0 78px rgba(70, 226, 196, .02);
    content: "";
    pointer-events: none;
}

.solex-club-invite__topline,
.solex-club-invite__intro,
.solex-club-invite__benefits,
.solex-club-invite__note { position: relative; z-index: 1; }

.solex-club-invite__topline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 23px;
}

.solex-club-invite__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #50e7ca;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.solex-club-invite__brand i { font-size: 10px; }

.solex-club-invite__optional {
    padding: 6px 11px;
    border: 1px solid rgba(162, 206, 204, .15);
    border-radius: 999px;
    color: rgba(190, 219, 215, .75);
    background: rgba(145, 194, 190, .07);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.solex-club-invite__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 44px;
}

.solex-club-invite h2 {
    max-width: 820px;
    margin: 0;
    color: #effdf8;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(31px, 4.3vw, 58px);
    font-weight: 750;
    letter-spacing: -.065em;
    line-height: .98;
}

.solex-club-invite h2 span {
    color: #58e7bc;
}

.solex-club-invite__intro p {
    max-width: 685px;
    margin: 16px 0 0;
    color: rgba(187, 216, 214, .85);
    font-size: clamp(14px, 1.45vw, 17px);
    font-weight: 500;
    line-height: 1.5;
}

.solex-club-invite__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-width: 222px;
    min-height: 58px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    color: #032029;
    background: linear-gradient(104deg, #a6f6cd, #40e5c8);
    box-shadow: 0 12px 28px rgba(22, 213, 176, .22);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.solex-club-invite__cta:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(22, 213, 176, .31);
}

.solex-club-invite__cta:focus-visible {
    outline: 3px solid #e4fff6;
    outline-offset: 4px;
}

.solex-club-invite__cta i { transition: transform .2s ease; }
.solex-club-invite__cta:hover i { transform: translateX(3px); }

.solex-club-invite__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(29px, 4vw, 43px) 0 0;
    padding: 22px 0 21px;
    border-top: 1px solid rgba(131, 229, 212, .14);
    border-bottom: 1px solid rgba(131, 229, 212, .14);
    list-style: none;
}

.solex-club-invite__benefits li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0 clamp(18px, 2.7vw, 39px);
}

.solex-club-invite__benefits li:first-child { padding-left: 0; }
.solex-club-invite__benefits li + li { border-left: 1px solid rgba(131, 229, 212, .14); }

.solex-club-invite__icon {
    display: grid;
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(76, 231, 203, .64);
    border-radius: 14px;
    color: #56e6ca;
    background: rgba(29, 183, 166, .08);
    box-shadow: inset 0 1px 0 rgba(208, 255, 246, .06);
    font-size: 17px;
}

.solex-club-invite__benefits span > b,
.solex-club-invite__benefits span > small { display: block; }

.solex-club-invite__benefits b {
    color: #edfff8;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.solex-club-invite__benefits small {
    margin-top: 4px;
    color: rgba(177, 209, 207, .73);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.solex-club-invite__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 17px 0 0;
    color: rgba(180, 213, 210, .78);
    font-size: 12px;
    font-weight: 600;
}

.solex-club-invite__note i { color: #5ae5c2; font-size: 13px; }

@media (max-width: 860px) {
    .solex-club-invite { padding: 10px 18px 54px; }
    .solex-club-invite__shell { border-radius: 23px; }
    .solex-club-invite__intro { grid-template-columns: 1fr; gap: 26px; }
    .solex-club-invite__cta { width: fit-content; }
    .solex-club-invite__benefits { grid-template-columns: 1fr; gap: 0; padding: 5px 0; }
    .solex-club-invite__benefits li,
    .solex-club-invite__benefits li:first-child { padding: 17px 0; }
    .solex-club-invite__benefits li + li { border-top: 1px solid rgba(131, 229, 212, .14); border-left: 0; }
}

@media (max-width: 520px) {
    .solex-club-invite { padding-right: 14px; padding-left: 14px; }
    .solex-club-invite__shell { padding: 25px 20px 21px; border-radius: 20px; }
    .solex-club-invite__topline { gap: 9px; margin-bottom: 20px; }
    .solex-club-invite__brand { font-size: 10px; }
    .solex-club-invite__optional { padding: 5px 8px; font-size: 9px; }
    .solex-club-invite h2 { font-size: 34px; letter-spacing: -.06em; }
    .solex-club-invite__intro p { margin-top: 13px; font-size: 14px; }
    .solex-club-invite__cta { width: 100%; min-height: 54px; }
    .solex-club-invite__benefits { margin-top: 27px; }
    .solex-club-invite__benefits li,
    .solex-club-invite__benefits li:first-child { gap: 12px; padding: 15px 0; }
    .solex-club-invite__icon { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
    .solex-club-invite__benefits small { font-size: 11px; }
    .solex-club-invite__note { margin-top: 15px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .solex-club-invite__cta,
    .solex-club-invite__cta i { transition: none; }
}

/* Compact account invitation: a supporting note inside the existing conversion hero. */
#hero .solex-club-invite {
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    width: min(100%, 720px);
    margin: 0;
    padding: 12px 13px;
    overflow: visible;
    border: 1px solid rgba(88, 223, 199, .23);
    border-radius: 17px;
    background: linear-gradient(100deg, rgba(5, 34, 45, .74), rgba(8, 55, 61, .48));
    box-shadow: inset 0 1px 0 rgba(227, 255, 248, .04), 0 13px 28px rgba(0, 0, 0, .10);
}

#hero .solex-club-invite::before,
#hero .solex-club-invite__shell::after { content: none; display: none; }

#hero .solex-club-invite__icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid rgba(89, 230, 202, .42);
    border-radius: 12px;
    color: #63e6c5;
    background: rgba(37, 181, 163, .10);
    box-shadow: none;
    font-size: 15px;
}

#hero .solex-club-invite__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0;
    color: inherit;
}

#hero .solex-club-invite__copy span {
    color: #60e3c5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

#hero .solex-club-invite__copy b {
    overflow: hidden;
    color: #f0fff9;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -.018em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#hero .solex-club-invite__copy small {
    overflow: hidden;
    color: rgba(179, 211, 207, .78);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#hero .solex-club-invite__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: auto;
    min-height: 39px;
    padding: 9px 13px;
    border: 1px solid rgba(155, 255, 218, .50);
    border-radius: 11px;
    color: #05262d;
    background: #8ff0c1;
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

#hero .solex-club-invite__cta:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(57, 230, 179, .17);
}

#hero .solex-club-invite__cta i { font-size: 10px; }

@media (max-width: 680px) {
    #hero .solex-club-invite {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 11px;
        padding: 11px;
    }

    #hero .solex-club-invite__icon { width: 36px; height: 36px; font-size: 14px; }
    #hero .solex-club-invite__cta { grid-column: 2; justify-self: start; margin-top: 2px; }
}

@media (max-width: 420px) {
    #hero .solex-club-invite__copy b,
    #hero .solex-club-invite__copy small { white-space: normal; }
    #hero .solex-club-invite__cta { width: 100%; }
}

/* Solex Club is deliberately a quiet, full-width footnote to the hero—not a second conversion action. */
#hero .solex-club-invite {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 34px minmax(0, 1fr) auto auto 16px;
    align-items: center;
    gap: 12px 16px;
    width: 100%;
    margin: -18px 0 0;
    padding: 12px 4px;
    overflow: visible;
    border: 0;
    border-top: 1px solid rgba(92, 227, 202, .17);
    border-bottom: 1px solid rgba(92, 227, 202, .11);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(14, 72, 75, .20), rgba(14, 72, 75, .035) 72%, transparent);
    box-shadow: none;
    cursor: default;
    transition: padding .22s ease, border-color .22s ease, background .22s ease;
}

#hero .solex-club-invite::before { content: none; display: none; }

#hero .solex-club-invite__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(89, 230, 202, .28);
    border-radius: 10px;
    color: #65e5c8;
    background: rgba(37, 181, 163, .08);
    box-shadow: none;
    font-size: 13px;
}

#hero .solex-club-invite__message {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

#hero .solex-club-invite__message strong {
    flex: 0 0 auto;
    color: #77e7d0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

#hero .solex-club-invite__message p,
#hero .solex-club-invite__note {
    margin: 0;
    color: rgba(184, 215, 212, .76);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

#hero .solex-club-invite__boost {
    display: grid;
    min-width: 102px;
    padding: 4px 11px 5px;
    border: 1px solid rgba(106, 234, 192, .30);
    border-radius: 10px;
    background: rgba(61, 224, 164, .08);
    line-height: 1.05;
}

#hero .solex-club-invite__boost b {
    color: #8bf1c3;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: -.035em;
}

#hero .solex-club-invite__boost small {
    margin-top: 2px;
    color: rgba(191, 238, 222, .68);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .04em;
}

#hero .solex-club-invite__note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: rgba(181, 216, 211, .63);
    font-size: 10px;
    white-space: nowrap;
}

#hero .solex-club-invite__note i {
    color: #63e3c5;
    font-size: 11px;
}

#hero .solex-club-invite__signal {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: rgba(117, 229, 207, .62);
    font-size: 10px;
}

#hero .solex-club-invite__signal i { transition: transform .22s ease, color .22s ease; }

#hero .solex-club-invite__details {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
    gap: 10px 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color: rgba(194, 224, 220, .78);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.35;
    transform: translateY(-4px);
    transition: max-height .28s ease, opacity .18s ease, transform .28s ease, padding .28s ease;
}

#hero .solex-club-invite__details span {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding-right: 18px;
    border-right: 1px solid rgba(116, 230, 205, .15);
}

#hero .solex-club-invite__details small {
    color: rgba(198, 224, 220, .66);
    font-size: 10px;
    font-weight: 650;
}

#hero .solex-club-invite__details b {
    color: #8bf1c3;
    font-size: 12px;
    font-weight: 850;
}

#hero .solex-club-invite__details p {
    margin: 0;
    align-self: center;
    color: rgba(194, 224, 220, .68);
    font-size: 10px;
    font-weight: 600;
}

#hero .solex-club-invite:is(:hover, .is-expanded) {
    padding-top: 14px;
    padding-bottom: 15px;
    border-color: rgba(92, 227, 202, .29);
    background: linear-gradient(90deg, rgba(14, 72, 75, .31), rgba(14, 72, 75, .06) 72%, transparent);
    outline: none;
}

#hero .solex-club-invite:focus-visible { box-shadow: 0 0 0 2px rgba(114, 237, 211, .46); }

#hero .solex-club-invite:is(:hover, .is-expanded) .solex-club-invite__details {
    max-height: 48px;
    padding-top: 5px;
    opacity: 1;
    transform: translateY(0);
}

#hero .solex-club-invite:is(:hover, .is-expanded) .solex-club-invite__signal i {
    color: #77e7d0;
    transform: rotate(180deg);
}

@media (max-width: 900px) {
    #hero .solex-club-invite {
        grid-template-columns: 34px minmax(0, 1fr) auto 16px;
        margin-top: 0;
        padding: 13px 2px;
    }

    #hero .solex-club-invite__note {
        grid-column: 2 / -1;
        justify-content: flex-start;
        white-space: normal;
    }

    #hero .solex-club-invite__signal { grid-column: 4; grid-row: 1; }
    #hero .solex-club-invite__details { grid-column: 2 / -1; }
}

@media (max-width: 520px) {
    #hero .solex-club-invite__message {
        display: grid;
        gap: 2px;
    }

    #hero .solex-club-invite__message p { font-size: 10px; }

    #hero .solex-club-invite__details {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    #hero .solex-club-invite__details span { padding-right: 0; border-right: 0; }
    #hero .solex-club-invite__details p { margin-top: 3px; }

    #hero .solex-club-invite:is(:hover, .is-expanded) .solex-club-invite__details { max-height: 112px; }
}

/* The adviser photo is the identity marker; never add generated initials over it. */
#hero img[src*="img/premium/asesor.png"] + div::before,
#hero div:has(> img[src*="img/premium/asesor.png"])::before {
    content: none !important;
    display: none !important;
}

/* Bring the operation guide into the same mint-green typography system as the rest of Solex. */
#guide-atlas .atlas-journey-intro .atlas-kicker { color: #5de3bb; }

#guide-atlas .atlas-journey-intro .atlas-kicker::after {
    background: linear-gradient(90deg, rgba(93, 227, 187, .92), transparent);
}

.sx-public #guide-atlas .atlas-journey-intro h2 { color: #f0fff9; }

body.sx-public #guide-atlas .atlas-journey-intro h2 span {
    color: #58e7bc !important;
    -webkit-text-fill-color: #58e7bc !important;
}

.sx-public #guide-atlas .atlas-journey-intro .atlas-lead { color: #b7ccc5; }

#guide-atlas .atlas-curve-trail { stroke: #219c72; }

#guide-atlas .atlas-curve-halo {
    stroke: #45dc9a;
    opacity: .27;
}

#guide-atlas .atlas-curve-arrow {
    fill: url(#atlas-route-gradient);
    filter: drop-shadow(0 0 4px rgba(83, 226, 157, .40));
}

/* Country hover cards describe the local payment methods Solex accepts to start an operation. */
#atlas-network .atlas-country-card {
    width: min(276px, calc(100% - 24px)) !important;
    min-width: 0 !important;
    padding: 15px 16px 14px !important;
    border-color: rgba(91, 231, 188, .38) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(5, 37, 47, .98), rgba(2, 17, 28, .97)) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .38), 0 0 28px rgba(79, 227, 177, .11);
}

#atlas-network .atlas-country-card__eyebrow,
#atlas-network .atlas-country-card__method-label {
    display: block;
    color: rgba(174, 216, 207, .76);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
}

#atlas-network .atlas-country-card__eyebrow { margin-bottom: 3px; }

#atlas-network .atlas-country-card strong {
    margin-bottom: 12px;
    color: #f0fff9;
    font-size: 19px;
    line-height: 1.1;
}

#atlas-network .atlas-country-card__method-label { color: #6ee6bf; }

#atlas-network .atlas-country-methods {
    gap: 6px;
    margin-top: 8px;
}

#atlas-network .atlas-country-method {
    min-height: 30px;
    padding: 4px 8px 4px 5px;
    border-color: rgba(94, 230, 190, .2);
    color: #eafff8;
    background: linear-gradient(135deg, rgba(86, 228, 182, .13), rgba(255, 255, 255, .025));
    font-size: 11px;
    font-weight: 700;
}

#atlas-network .atlas-country-method img { width: 20px; height: 20px; }

#atlas-network .atlas-country-card__summary {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid rgba(116, 226, 203, .14);
    color: rgba(196, 223, 218, .8);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

@media (max-width: 700px) {
    #atlas-network .atlas-country-card {
        width: min(258px, calc(100% - 20px)) !important;
        padding: 13px 14px !important;
    }
}

/* Direct routes through the landing, with one quiet marker for the section in view. */
#main-nav .solex-nav-links {
    gap: clamp(14px, 1.7vw, 26px);
    margin-inline: auto;
}

#main-nav .solex-nav-link {
    position: relative;
    padding: 10px 0;
    color: rgba(177, 207, 203, .76);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1;
    white-space: nowrap;
    transition: color 180ms ease;
}

#main-nav .solex-nav-link::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #72e6ba 18%, #72e6ba 82%, transparent);
    content: "";
    opacity: 0;
    transform: scaleX(.45);
    transition: opacity 180ms ease, transform 180ms ease;
}

#main-nav .solex-nav-link:hover,
#main-nav .solex-nav-link:focus-visible,
#main-nav .solex-nav-link.is-active { color: #f0fff9; }

#main-nav .solex-nav-link.is-active::after,
#main-nav .solex-nav-link:hover::after,
#main-nav .solex-nav-link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.solex-mobile-nav-link.is-active { color: #76e9bf !important; }

#commercial,
#atlas-network,
#guide-atlas,
#history-atlas { scroll-margin-top: 124px; }

@media (max-width: 1120px) {
    #main-nav .solex-nav-links { gap: 14px; }
    #main-nav .solex-nav-link { font-size: 9px; letter-spacing: .09em; }
}

/* Keep the registration label comfortably readable instead of allowing flex compression. */
#auth-buttons-desktop > button { flex-shrink: 0; }

#auth-buttons-desktop > button:first-child {
    min-width: 146px;
    padding-inline: 24px;
}

/* Footer: practical support copy and links that remain legible at a glance. */
.sx-public .atlas-footer-main p {
    color: rgba(206, 230, 225, .8);
    font-size: 12px;
    line-height: 1.5;
}

.sx-public .atlas-footer-main p strong {
    color: #effff8;
    font-size: 14px;
}

.sx-public .atlas-footer-links {
    gap: 30px;
    padding-top: 25px;
}

.sx-public .atlas-footer-links > div { gap: 7px; }

.sx-public .atlas-footer-links strong {
    margin-bottom: 3px;
    color: #eafff7;
    font-size: 11px;
}

.sx-public .atlas-footer-links a,
.sx-public .atlas-footer-links > span {
    color: #b3cfcc;
    font-size: 11px;
    line-height: 1.45;
}

.sx-public .atlas-footer-links > span {
    align-self: end;
    color: rgba(179, 207, 204, .76);
}

@media (max-width: 760px) {
    .sx-public .atlas-footer-links { gap: 22px; }
}

/* Testimonios: una pieza editorial navegable, con todos los testimonios publicados. */
#testimonials-atlas {
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(64px, 8vw, 110px);
    background:
        radial-gradient(ellipse 45% 80% at 88% 52%, rgba(52, 230, 174, .11), transparent 70%),
        linear-gradient(112deg, #03131e 0%, #041923 54%, #062029 100%);
}

#testimonials-atlas .atlas-testimonials-layout {
    grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr);
    align-items: stretch;
    gap: clamp(36px, 6vw, 96px);
}

#testimonials-atlas .atlas-testimonials-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#testimonials-atlas .atlas-testimonials-copy {
    max-width: 28ch;
    margin: 23px 0 0;
    color: rgba(198, 221, 218, .76);
    font-size: 15px;
    line-height: 1.6;
}

#testimonials-atlas .atlas-testimonials-summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 25px 0 0;
    padding: 0 12px;
    border: 1px solid rgba(91, 237, 194, .28);
    border-radius: 999px;
    color: #8ff3cc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

#testimonials-atlas .atlas-quotes {
    display: grid;
    min-height: 350px;
    padding: 1px;
    border: 1px solid rgba(119, 236, 205, .25);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(130, 250, 215, .12), rgba(6, 29, 39, .1) 42%, rgba(2, 13, 23, .28));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .16);
}

#testimonials-atlas .atlas-quote--featured {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 348px;
    margin: 0;
    padding: clamp(28px, 4vw, 46px);
    overflow: hidden;
    border: 0;
    border-radius: 25px 25px 0 0;
    background:
        linear-gradient(112deg, rgba(7, 38, 48, .96), rgba(3, 21, 31, .97)),
        #041a23;
}

#testimonials-atlas .atlas-quote--featured::before {
    content: none;
}

#testimonials-atlas .atlas-quote--featured::after {
    content: '';
    position: absolute;
    right: -90px;
    bottom: -160px;
    width: 370px;
    aspect-ratio: 1;
    border: 1px solid rgba(97, 241, 197, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(97, 241, 197, .025), 0 0 0 116px rgba(97, 241, 197, .018);
    pointer-events: none;
}

#testimonials-atlas .atlas-quote__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#testimonials-atlas .atlas-quote__mark {
    color: #19ddd1;
    font-family: Georgia, serif;
    font-size: 68px;
    line-height: .58;
}

#testimonials-atlas .atlas-quote__rating {
    display: inline-flex;
    gap: 4px;
    color: #8df2c9;
    font-size: 12px;
}

#testimonials-atlas .atlas-quote blockquote {
    position: relative;
    z-index: 1;
    max-width: 24ch;
    margin: clamp(28px, 4vw, 42px) 0 28px;
    color: #f1fff9;
    font-family: "Outfit", sans-serif;
    font-size: clamp(23px, 2.45vw, 35px);
    font-style: normal;
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.16;
    text-wrap: balance;
}

#testimonials-atlas .atlas-quote__author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

#testimonials-atlas .atlas-quote__avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(118, 239, 206, .45);
    border-radius: 50%;
    background: #082c36;
    color: #a9f6d7;
    font-size: 12px;
    font-weight: 800;
    object-fit: cover;
}

#testimonials-atlas .atlas-quote__author strong,
#testimonials-atlas .atlas-quote__author span:not(.atlas-quote__avatar) {
    display: block;
}

#testimonials-atlas .atlas-quote__author strong {
    color: #effff8;
    font-size: 14px;
    line-height: 1.2;
}

#testimonials-atlas .atlas-quote__author span:not(.atlas-quote__avatar) {
    margin-top: 3px;
    color: rgba(176, 209, 204, .8);
    font-size: 12px;
    line-height: 1.3;
}

#testimonials-atlas .atlas-testimonial-controls {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 16px;
    border-radius: 0 0 25px 25px;
    background: rgba(1, 15, 24, .72);
}

#testimonials-atlas .atlas-testimonial-arrow {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(113, 238, 205, .34);
    border-radius: 50%;
    background: transparent;
    color: #baffdf;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

#testimonials-atlas .atlas-testimonial-arrow:hover,
#testimonials-atlas .atlas-testimonial-arrow:focus-visible {
    border-color: #71edc2;
    background: rgba(82, 226, 179, .14);
    outline: 0;
    transform: translateX(-1px);
}

#testimonials-atlas .atlas-testimonial-arrow:last-child:hover,
#testimonials-atlas .atlas-testimonial-arrow:last-child:focus-visible { transform: translateX(1px); }

#testimonials-atlas .atlas-testimonial-position {
    min-width: 57px;
    margin-left: 13px;
    color: #d8f5eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

#testimonials-atlas .atlas-testimonial-dots {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    padding: 0 16px;
}

#testimonials-atlas .atlas-testimonial-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(167, 223, 208, .28);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

#testimonials-atlas .atlas-testimonial-dot.is-active {
    width: 24px;
    background: #64ebc0;
}

#testimonials-atlas .atlas-testimonial-dot:focus-visible { outline: 2px solid #eafff7; outline-offset: 3px; }

#testimonials-atlas .atlas-testimonial-loading {
    display: grid;
    align-content: center;
    gap: 17px;
    padding: 42px;
}

#testimonials-atlas .atlas-testimonial-loading span {
    display: block;
    height: 15px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(119, 237, 205, .06), rgba(119, 237, 205, .18), rgba(119, 237, 205, .06));
    background-size: 220% 100%;
    animation: atlas-testimonial-shimmer 1.35s ease-in-out infinite;
}

#testimonials-atlas .atlas-testimonial-loading span:nth-child(1) { width: 38%; }
#testimonials-atlas .atlas-testimonial-loading span:nth-child(2) { width: 90%; height: 25px; }
#testimonials-atlas .atlas-testimonial-loading span:nth-child(3) { width: 55%; }

@keyframes atlas-testimonial-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@media (max-width: 760px) {
    #testimonials-atlas { padding-block: 60px; }
    #testimonials-atlas .atlas-testimonials-layout { grid-template-columns: 1fr; gap: 30px; }
    #testimonials-atlas .atlas-testimonials-copy { margin-top: 16px; }
    #testimonials-atlas .atlas-testimonials-summary { margin-top: 17px; }
    #testimonials-atlas .atlas-quotes { min-height: 342px; border-radius: 22px; }
    #testimonials-atlas .atlas-quote--featured { min-height: 290px; padding: 28px 23px; border-radius: 21px 21px 0 0; }
    #testimonials-atlas .atlas-quote blockquote { max-width: none; margin-block: 29px 24px; font-size: clamp(22px, 7vw, 30px); }
    #testimonials-atlas .atlas-testimonial-controls { min-height: 58px; border-radius: 0 0 21px 21px; }
}

@media (max-width: 430px) {
    #testimonials-atlas .atlas-testimonial-dots { gap: 5px; padding-inline: 10px; overflow: hidden; }
    #testimonials-atlas .atlas-testimonial-dot { flex: 0 0 6px; width: 6px; height: 6px; }
    #testimonials-atlas .atlas-testimonial-dot.is-active { width: 18px; flex-basis: 18px; }
    #testimonials-atlas .atlas-testimonial-position { min-width: 50px; margin-left: 9px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    #testimonials-atlas .atlas-testimonial-arrow,
    #testimonials-atlas .atlas-testimonial-dot { transition: none; }
    #testimonials-atlas .atlas-testimonial-loading span { animation: none; }
}