/* Homepage opening art: the person at the center, every Chip In area connected around them.
   Shares the V4 hero shell (.v4-home-refresh) so both carousel slides keep one look. All timelines are CSS;
   V4Motion owns play, pause, visibility and reduced motion. One 28s cycle lights eight areas for 3.5s each. */
.yo-home .v4-home-copy { max-width: 32rem; }
.yo-home .v4-home-copy > .fs-lg { max-width: 30rem; }
.yo-proof { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.15rem 0 1.5rem; padding: 0; list-style: none; }
.yo-proof li { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .35rem .75rem; border: 1px solid color-mix(in srgb, var(--cp-accent) 18%, var(--cp-border)); border-radius: 999px; background: color-mix(in srgb, var(--cp-surface) 72%, transparent); color: var(--cp-text); font-size: .74rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.yo-proof i { color: var(--cp-accent); font-size: 1rem; }
.yo-home-areas { margin-top: 1.35rem; }
.yo-orbit { max-width: 36rem; margin-inline: auto; }

/* Stage geometry: a square container; every element is placed from the center in container units. */
.yo-stage { --yo-step: 3.5s; --yo-cycle: 28s; --yo-r: 32cqw; --yo-cy: 50%; --yo-tone: var(--cp-accent); --yo-line: color-mix(in srgb, var(--cp-accent) 9%, transparent); position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 1 / .95; }
.yo-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-position: 50% var(--yo-cy); background-image: linear-gradient(var(--yo-line) 1px, transparent 1px), linear-gradient(90deg, var(--yo-line) 1px, transparent 1px); background-size: 6cqw 6cqw; mask-image: radial-gradient(62% 62% at 50% var(--yo-cy), #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(62% 62% at 50% var(--yo-cy), #000 30%, transparent 100%); }
.yo-aura { position: absolute; inset: 8% 10%; border-radius: 50%; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--cp-accent) 24%, transparent), transparent 62%), radial-gradient(ellipse at 66% 70%, #65caae1c, transparent 55%); filter: blur(2cqw); animation: v4-orbit-breathe 12s ease-in-out infinite; }
.yo-ring { position: absolute; left: 50%; top: var(--yo-cy); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.yo-ring.is-inner { width: calc(var(--yo-r) * 2); height: calc(var(--yo-r) * 2); border: 1px dashed color-mix(in srgb, var(--cp-accent) 38%, var(--cp-border)); animation: yo-spin-centered 90s linear infinite; }
.yo-ring.is-outer { width: 84cqw; height: 84cqw; border: 1px dotted color-mix(in srgb, var(--cp-accent) 26%, var(--cp-border)); animation: yo-spin-centered 150s linear infinite reverse; }

/* Institutions: generic bank, card, brokerage, crypto, wallet and savings symbols on the outer ring, kept upright. */
.yo-institutions { position: absolute; left: 50%; top: var(--yo-cy); width: 0; height: 0; animation: yo-spin 120s linear infinite; }
.yo-inst { --a: 0deg; position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a)) translate(42cqw); }
.yo-inst > span { position: absolute; display: grid; place-items: center; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border: 1px solid var(--cp-border); border-radius: 50%; background: var(--cp-surface); color: var(--cp-text-muted); font-size: 2.1cqw; box-shadow: 0 .6cqw 1.4cqw -.6cqw #26234633; animation: yo-upright 120s linear infinite; }

/* Beams carry a pulse from each area toward the person. The inner fifth stays clear so the avatar reads cleanly. */
.yo-beam { --a: 0deg; --i: 0; position: absolute; left: 50%; top: var(--yo-cy); width: var(--yo-r); height: 2px; margin-top: -1px; transform-origin: 0 50%; transform: rotate(var(--a)); background: linear-gradient(90deg, transparent 0 20%, color-mix(in srgb, var(--yo-tone) 48%, transparent) 60%, color-mix(in srgb, var(--yo-tone) 78%, transparent) 100%); }
.yo-beam > i { position: absolute; left: 0; top: 50%; width: 1.3cqw; height: 1.3cqw; margin-top: -.65cqw; border-radius: 50%; background: var(--yo-tone); box-shadow: 0 0 1.2cqw var(--yo-tone); opacity: 0; animation: yo-travel 4.2s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--i) * -.52s); }

/* Area nodes: compact tiles on the ring with a short label beneath. The live one scales up with a halo. */
.yo-node { --a: 0deg; --i: 0; position: absolute; left: 50%; top: var(--yo-cy); display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; width: 16cqw; margin: -3.7cqw 0 0 -8cqw; transform: rotate(var(--a)) translate(var(--yo-r)) rotate(calc(-1 * var(--a))); }
.yo-tile { position: relative; display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border: 1px solid color-mix(in srgb, var(--yo-tone) 30%, var(--cp-border)); border-radius: 2.1cqw; background: linear-gradient(155deg, color-mix(in srgb, var(--yo-tone) 13%, var(--cp-surface)), var(--cp-surface) 80%); color: var(--yo-tone); font-size: 3.6cqw; box-shadow: 0 1.4cqw 2.4cqw -1.2cqw #26234633, inset 0 1px 0 #ffffff50; animation: yo-node-live var(--yo-cycle) ease-in-out infinite; animation-delay: calc(var(--i) * var(--yo-step)); }
.yo-tile::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--yo-tone); opacity: 0; animation: yo-node-ping var(--yo-cycle) ease-out infinite; animation-delay: calc(var(--i) * var(--yo-step)); }
.yo-label { font-size: clamp(.5rem, 1.65cqw, .74rem); font-weight: 800; letter-spacing: .01em; line-height: 1; color: var(--cp-text-muted); white-space: nowrap; animation: yo-label-live var(--yo-cycle) ease-in-out infinite; animation-delay: calc(var(--i) * var(--yo-step)); }

/* The person. A partner avatar with a lock sits on the shoulder: shared by choice. */
.yo-you { position: absolute; left: 50%; top: calc(var(--yo-cy) - 2.5cqw); z-index: 3; display: grid; place-items: center; align-content: center; gap: .15cqw; width: 17cqw; height: 17cqw; margin: -8.5cqw 0 0 -8.5cqw; border-radius: 50%; color: #fff; background: radial-gradient(circle at 36% 30%, #b9adff, var(--cp-accent) 56%, #3a2cae 100%); box-shadow: 0 0 0 .9cqw color-mix(in srgb, var(--cp-accent) 18%, transparent), 0 0 0 1.9cqw color-mix(in srgb, var(--cp-accent) 8%, transparent), 0 2cqw 4cqw -1cqw color-mix(in srgb, var(--cp-accent) 55%, transparent); animation: yo-breathe 7s ease-in-out infinite; }
.yo-you::before { content: ""; position: absolute; inset: -.4cqw; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cp-accent) 70%, transparent); opacity: 0; animation: yo-ping var(--yo-step) ease-out infinite; }
.yo-you > i { font-size: 6.4cqw; line-height: 1; filter: drop-shadow(0 .4cqw .6cqw #00000033); }
.yo-you > b { font-size: clamp(.5rem, 1.55cqw, .7rem); font-weight: 800; letter-spacing: .3em; padding-left: .3em; line-height: 1; }
.yo-partner { position: absolute; right: -1.4cqw; bottom: -.4cqw; display: grid; place-items: center; width: 6.6cqw; height: 6.6cqw; border: .45cqw solid var(--cp-surface); border-radius: 50%; background: linear-gradient(145deg, #fbbf24, #d97706); color: #fff; font-size: 3cqw; box-shadow: 0 1cqw 2cqw -.8cqw #26234655; }
.yo-partner > em { position: absolute; right: -.9cqw; bottom: -.6cqw; display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border: .3cqw solid var(--cp-surface); border-radius: 50%; background: var(--cp-text); color: var(--cp-surface); font-size: 1.3cqw; font-style: normal; }

/* Spotlight: one card per area stacked beneath the avatar, each shown during its area's window. */
.yo-spotlight { position: absolute; left: 50%; top: calc(var(--yo-cy) + 7.6cqw); z-index: 4; display: grid; width: 31cqw; transform: translateX(-50%); }
.yo-spot { grid-area: 1 / 1; padding: 1.5cqw 1.7cqw 1.6cqw; border: 1px solid color-mix(in srgb, var(--yo-tone) 30%, var(--cp-border)); border-radius: 2cqw; background: color-mix(in srgb, var(--cp-surface) 93%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 .4cqw .2cqw -.2cqw color-mix(in srgb, var(--yo-tone) 28%, var(--cp-surface)), 0 2cqw 3cqw -1.3cqw #26234633, inset 0 1px 0 #ffffff50; opacity: 0; transform: translateY(1.2cqw) scale(.97); animation: yo-spot-live var(--yo-cycle) ease-in-out infinite; animation-delay: calc(var(--i) * var(--yo-step)); }
.yo-spot-head { display: flex; align-items: center; gap: .75cqw; margin-bottom: .8cqw; color: var(--yo-tone); }
.yo-spot-head > i { flex: none; display: grid; place-items: center; width: 3.3cqw; height: 3.3cqw; border-radius: .95cqw; background: color-mix(in srgb, var(--yo-tone) 12%, var(--cp-surface)); font-size: 2cqw; }
.yo-spot-head > span { font-size: clamp(.42rem, 1.1cqw, .55rem); font-weight: 800; letter-spacing: .07em; line-height: 1.3; }
.yo-spot > b { display: block; color: var(--cp-text); font-size: clamp(.62rem, 1.85cqw, .9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.yo-spot > small { display: block; margin-top: .5cqw; color: var(--cp-text-muted); font-size: clamp(.5rem, 1.35cqw, .68rem); line-height: 1.45; }

/* One hue per area, light and dark tuned separately. */
.yo-stage [data-area="accounts"] { --yo-tone: #0d9488; }
.yo-stage [data-area="transactions"] { --yo-tone: #2563eb; }
.yo-stage [data-area="bills"] { --yo-tone: #b45309; }
.yo-stage [data-area="credit"] { --yo-tone: #ef4444; }
.yo-stage [data-area="investments"] { --yo-tone: #16a34a; }
.yo-stage [data-area="reports"] { --yo-tone: #4f46e5; }
.yo-stage [data-area="partner"] { --yo-tone: #7c3aed; }
.yo-stage [data-area="intelligence"] { --yo-tone: var(--cp-accent); }
[data-bs-theme="dark"] .yo-stage [data-area="accounts"] { --yo-tone: #2dd4bf; }
[data-bs-theme="dark"] .yo-stage [data-area="transactions"] { --yo-tone: #60a5fa; }
[data-bs-theme="dark"] .yo-stage [data-area="bills"] { --yo-tone: #f2b557; }
[data-bs-theme="dark"] .yo-stage [data-area="credit"] { --yo-tone: #f87171; }
[data-bs-theme="dark"] .yo-stage [data-area="investments"] { --yo-tone: #34d399; }
[data-bs-theme="dark"] .yo-stage [data-area="reports"] { --yo-tone: #a5b4fc; }
[data-bs-theme="dark"] .yo-stage [data-area="partner"] { --yo-tone: #c4b5fd; }
[data-bs-theme="dark"] .yo-stage { --yo-line: color-mix(in srgb, var(--cp-accent) 13%, transparent); }
[data-bs-theme="dark"] .yo-tile, [data-bs-theme="dark"] .yo-spot { box-shadow: 0 1.4cqw 2.4cqw -1.2cqw #00000066, inset 0 1px 0 #ffffff14; }
[data-bs-theme="dark"] .yo-inst > span { box-shadow: 0 .6cqw 1.4cqw -.6cqw #00000066; }
[data-bs-theme="dark"] .yo-you { background: radial-gradient(circle at 36% 30%, #c3b8ff, #7c6af2 56%, #4b3bc4 100%); }

/* Before motion starts (and for reduced motion) the first area is lit and its card is shown. */
.v4-motion[data-motion="still"] .yo-spot.is-1 { opacity: 1; transform: none; }
.v4-motion[data-motion="still"] .yo-node.is-1 .yo-tile { transform: scale(1.14); border-color: var(--yo-tone); box-shadow: 0 0 0 .6cqw color-mix(in srgb, var(--yo-tone) 16%, transparent), 0 2cqw 3cqw -1cqw color-mix(in srgb, var(--yo-tone) 45%, transparent); }
.v4-motion[data-motion="still"] .yo-node.is-1 .yo-label { color: var(--cp-text); }

@keyframes yo-spin { to { transform: rotate(360deg); } }
@keyframes yo-spin-centered { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes yo-upright { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes yo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes yo-ping { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes yo-travel { 0% { transform: translateX(calc(var(--yo-r) - 4.5cqw)); opacity: 0; } 12% { opacity: 1; } 72% { opacity: 1; } 88%, 100% { transform: translateX(6cqw); opacity: 0; } }
@keyframes yo-node-live { 0%, .4%, 13.2%, 100% { transform: scale(1); border-color: color-mix(in srgb, var(--yo-tone) 30%, var(--cp-border)); box-shadow: 0 1.4cqw 2.4cqw -1.2cqw #26234633, inset 0 1px 0 #ffffff50; } 2%, 11.4% { transform: scale(1.14); border-color: var(--yo-tone); box-shadow: 0 0 0 .6cqw color-mix(in srgb, var(--yo-tone) 16%, transparent), 0 2cqw 3cqw -1cqw color-mix(in srgb, var(--yo-tone) 45%, transparent); } }
@keyframes yo-node-ping { 0%, .4% { opacity: 0; transform: scale(1); } 1.2% { opacity: .9; } 6%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes yo-label-live { 0%, .4%, 13.2%, 100% { color: var(--cp-text-muted); } 2%, 11.4% { color: var(--cp-text); } }
@keyframes yo-spot-live { 0%, 13.5%, 100% { opacity: 0; transform: translateY(1.2cqw) scale(.97); } 1.6%, 11.6% { opacity: 1; transform: none; } }

@media (max-width: 1199.98px) { .yo-proof li { font-size: .7rem; } }
@media (max-width: 991.98px) { .yo-proof { justify-content: center; } .yo-orbit { max-width: 34rem; } .yo-home .v4-home-copy > .fs-lg { margin-inline: auto; } }
/* Small screens: icons stay, labels go; the spotlight card carries each area's name. */
@media (max-width: 575.98px) {
    .yo-stage { --yo-r: 32cqw; --yo-cy: 42cqw; aspect-ratio: 1 / 1.2; }
    .yo-home .v4-home-title { font-size: clamp(1.9rem, 9vw, 2.2rem); }
    .yo-aura { inset: 2% 10% 24%; }
    .yo-label { display: none; }
    .yo-node { margin-top: -4.5cqw; }
    .yo-tile { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; font-size: 4.6cqw; }
    .yo-you { width: 20cqw; height: 20cqw; margin: -10cqw 0 0 -10cqw; top: calc(50% - 4cqw); }
    .yo-you > i { font-size: 7.6cqw; }
    .yo-partner { width: 7.6cqw; height: 7.6cqw; font-size: 3.6cqw; }
    .yo-spotlight { width: 72cqw; top: auto; bottom: 7.5cqw; }
    .yo-spot { transform: translateY(1.2cqw) scale(.985); }
    .yo-spot { padding: 2cqw 2.2cqw; border-radius: 2.6cqw; }
    .yo-spot-head > i { width: 4.4cqw; height: 4.4cqw; font-size: 2.7cqw; border-radius: 1.3cqw; }
    .yo-spot-head > span { font-size: clamp(.42rem, 1.7cqw, .55rem); }
    .yo-spot > b { font-size: clamp(.62rem, 2.6cqw, .85rem); }
    .yo-spot > small { font-size: clamp(.5rem, 2cqw, .68rem); }
    .yo-inst > span { width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; font-size: 2.7cqw; }
    .yo-proof li { font-size: .68rem; padding-inline: .6rem; }
}