/* After the close: the wallet, the commissions, the dashboard. Static and readable first; pinned and animated when the motion layer starts. */
.ac { padding: 90px var(--gut) 60px; position: relative; overflow: hidden; }
.ac-head { max-width: 980px; margin: 0 auto 38px; text-align: center; }
.ac h2 { font-size: clamp(30px, 4.8vw, 62px); }
.ac-steps { list-style: none; margin: 18px 0 0; padding: 0; display: none; justify-content: center; gap: 8px; }
.ac-steps li { padding: 6px 14px; border-radius: 999px; font: 500 13px var(--font-sans); border: 1px solid currentColor; opacity: .55; transition: opacity .25s, background .25s, color .25s; }
.ac-steps li.on { opacity: 1; background: var(--zw-lime-500); border-color: var(--zw-lime-500); color: var(--zw-navy-900); }
.ac-time { margin: 0 0 6px; font: 600 12px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.ac-sample { margin: 30px 0 0; text-align: center; font-size: 12px; opacity: .7; }
.ac-note { text-align: center; font-size: 13px; opacity: .75; margin: 14px 0 0; }
.ac-beats { max-width: 1240px; margin: 0 auto; display: grid; gap: 70px; }
.ac-beat { display: grid; gap: 24px; align-items: center; }
.ac-copy h3 { font-size: clamp(26px, 3vw, 42px); line-height: 1.1; margin: 0 0 12px; }
.ac-copy p { font-size: 17px; max-width: 46ch; }
@media (min-width: 900px) { .ac-beat:not(.wide) { grid-template-columns: 5fr 7fr; gap: 48px; } }

/* Shared */
.mk { white-space: nowrap; display: inline-block; padding: 2px 9px; border-radius: 99px; font: 600 11px var(--font-sans); background: var(--zw-navy-050); color: var(--zw-navy-700); }
.up { color: #2f7d32; }
.bar { height: 8px; border-radius: 8px; background: rgba(129,149,181,.35); overflow: hidden; } .bar i { display: block; height: 100%; width: var(--p, 37%); border-radius: 8px; background: var(--zw-lime-500); }
.r-bg, .r-fg { fill: none; stroke-width: 7; } .r-bg { stroke: rgba(129,149,181,.35); } .r-fg { stroke: var(--zw-lime-500); stroke-linecap: round; stroke-dasharray: var(--k, 75) 100; }
.ring { position: relative; width: 84px; height: 84px; flex: none; } .ring svg { transform: rotate(-90deg); } .ring b { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; font: 300 22px var(--font-display); }
.av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(140deg, var(--zw-navy-500), var(--zw-navy-300)); display: inline-block; position: relative; flex: none; } .av::after { content: ""; position: absolute; left: 13px; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 15px 0 3px rgba(255,255,255,.85); }

/* 1 · The wallet (navy) */
.wl, .db { background: var(--gradient-navy); color: #DDE3EC; } .wl h2, .db h2, .wl h3, .db h3 { color: #fff; }
.wl .zw-eyebrow, .db .zw-eyebrow, .wl .ac-time { color: var(--zw-lime-500); } .wl .st-lede, .db .st-lede { color: #DDE3EC; } .wl .ac-copy p { color: #DDE3EC; }
.wl-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: center; padding: 16px 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.2); margin-bottom: 18px; }
.wl-sum .who { display: flex; gap: 12px; align-items: center; } .wl-sum .who b { display: block; color: #fff; font: 600 15px var(--font-sans); } .wl-sum .who span, .wl-sum .m span { font-size: 12px; color: #B9C4D4; }
.wl-sum .m b { display: block; font: 300 clamp(24px, 2.6vw, 34px)/1.1 var(--font-display); color: #fff; } .wl-sum .m b small { font: 400 12px var(--font-sans); color: #B9C4D4; } .wl-sum .m b.up { color: var(--zw-lime-500); }
.wl-deck { overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 18px; } .wl-track { display: flex; gap: 18px; width: max-content; padding: 0 4px; perspective: 1200px; }
.pcard { scroll-snap-align: center; flex: 0 0 min(78vw, 300px); border-radius: 24px; background: #fff; color: var(--zw-navy-800); padding: 14px 14px 16px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.65); display: grid; gap: 6px; transition: transform .35s var(--ease); position: relative; overflow: hidden; }
.pcard:hover { transform: translateY(-8px) rotateX(3deg); } .pcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-120%); animation: shine 6s ease-in-out infinite; pointer-events: none; } .pcard:nth-child(2)::after { animation-delay: 1.2s; } .pcard:nth-child(3)::after { animation-delay: 2.4s; } .pcard:nth-child(4)::after { animation-delay: 3.6s; }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.pc-top { height: 108px; border-radius: 16px; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--zw-navy-600), var(--zw-navy-800)); }
.pcard[style*="--tone:2"] .pc-top { background: linear-gradient(160deg, var(--zw-navy-500), var(--zw-navy-900)); } .pcard[style*="--tone:3"] .pc-top { background: linear-gradient(160deg, #3b5f93, var(--zw-navy-700)); } .pcard[style*="--tone:4"] .pc-top { background: linear-gradient(160deg, var(--zw-navy-400), var(--zw-navy-700)); }
.sky { position: absolute; left: 12px; right: 12px; bottom: 0; display: flex; align-items: flex-end; gap: 6px; } .sky u { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.1)); } .sky u:nth-child(1) { height: 48px; } .sky u:nth-child(2) { height: 78px; } .sky u:nth-child(3) { height: 60px; } .sky u:nth-child(4) { height: 92px; background: linear-gradient(180deg, var(--zw-lime-500), rgba(216,242,63,.15)); } .sky u:nth-child(5) { height: 54px; }
.pc-badge { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--zw-navy-800); font: 600 11px var(--font-sans); }
.pcard h3 { color: var(--zw-navy-800); font: 500 17px var(--font-sans); margin: 4px 0 0; } .pc-area { margin: 0; font-size: 12.5px; color: var(--zw-navy-400); }
.pc-val b { font: 300 30px var(--font-display); } .pc-val small { font-size: 12px; color: var(--zw-navy-400); }
.pc-bar { height: 8px; border-radius: 8px; background: var(--zw-lime-500); overflow: hidden; } .pc-bar i { display: block; height: 100%; width: var(--bs); background: var(--zw-navy-700); }
.pcard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 6px 0 2px; } .pcard dt { font-size: 11px; color: var(--zw-navy-400); } .pcard dd { margin: 0; font: 600 13px var(--font-sans); } .pcard dd.up { color: #2f7d32; }
.chip { justify-self: start; padding: 4px 10px; border-radius: 99px; background: var(--zw-lime-200); color: var(--zw-navy-800); font: 600 11.5px var(--font-sans); }
.sw { display: inline-flex; margin-top: 16px; padding: 4px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.sw button { min-height: 44px; padding: 0 18px; border-radius: 99px; border: 0; background: transparent; color: #DDE3EC; font: 600 14px var(--font-sans); cursor: pointer; } .sw button[aria-selected="true"] { background: var(--zw-lime-500); color: var(--zw-navy-900); }
.wl-share { border-radius: 24px; background: #fff; color: var(--zw-navy-800); padding: 18px 20px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.65); display: grid; gap: 2px; max-width: 560px; justify-self: center; width: 100%; }
.ws-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--zw-navy-100); } .ws-h b { font: 500 17px var(--font-sans); } .who-tag { padding: 3px 12px; border-radius: 99px; background: var(--zw-navy-800); color: #fff; font: 600 11.5px var(--font-sans); }
.wl-share .row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--zw-navy-050); position: relative; } .wl-share .row span { color: var(--zw-navy-400); font-size: 14px; } .wl-share .row b { font: 600 14px var(--font-sans); text-align: right; }
.lock { position: absolute; inset: 0; display: none; place-items: center; background: repeating-linear-gradient(135deg, var(--zw-navy-050), var(--zw-navy-050) 8px, #fff 8px, #fff 16px); color: var(--zw-navy-700); font: 600 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.wl-share[data-view="client"] .lock { display: grid; } .wl-share[data-view="client"] .who-tag { background: var(--zw-lime-500); color: var(--zw-navy-900); }
.wl-rem { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .wl-rem { grid-template-columns: 1fr; } }
.rm { padding: 18px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.2); display: grid; gap: 6px; align-content: start; } .rm b { color: #fff; font: 500 17px var(--font-sans); } .rm span { font-size: 14px; color: #DDE3EC; } .rm.go { background: linear-gradient(160deg, rgba(216,242,63,.22), rgba(216,242,63,.05)); border-color: rgba(216,242,63,.5); } .rm .btn { justify-self: start; margin-top: 6px; pointer-events: none; }

/* 2 · The commissions (light) */
.cm { background: var(--surface-app); color: var(--text-body-color); } .cm .ac-time { color: var(--zw-navy-400); }
.cm-grid { max-width: 1240px; margin: 0 auto; display: grid; gap: 26px; align-items: start; } @media (min-width: 1000px) { .cm-grid { grid-template-columns: 3fr 9fr; gap: 36px; } }
.cm-story h3 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; margin: 0 0 10px; } .cm-story p { font-size: 16px; max-width: 40ch; }
.cm-stage { border-radius: 24px; background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); padding: 16px; display: grid; gap: 14px; }
.cm-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: stretch; }
.kp { padding: 12px 14px; border-radius: 16px; background: var(--zw-navy-050); display: grid; gap: 2px; align-content: center; } .kp span { font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--zw-navy-400); } .kp b { font: 300 26px/1.1 var(--font-display); color: var(--zw-navy-800); } .kp small { font-size: 11.5px; color: var(--zw-navy-400); }
.kp.tg .bar { margin: 6px 0 2px; background: var(--zw-navy-100); }
.vsw { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--zw-navy-050); align-self: center; justify-self: end; } .vsw button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; font: 600 13px var(--font-sans); color: var(--zw-navy-700); cursor: pointer; } .vsw button[aria-pressed="true"] { background: var(--zw-navy-800); color: #fff; }
.cb { overflow-x: auto; } .cb-cols { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 8px; min-width: 780px; } .cb-cols span { padding: 8px 10px; border-radius: 12px; background: var(--zw-navy-050); font: 600 12px var(--font-sans); color: var(--zw-navy-700); text-align: center; }
.cb-lane { --rowh: 118px; position: relative; min-width: 780px; height: calc(4 * var(--rowh)); margin-top: 8px; }
.cc { --col: var(--end); position: absolute; left: calc(var(--col) * 20% + 4px); top: calc(var(--row) * var(--rowh)); width: calc(20% - 8px); min-height: calc(var(--rowh) - 8px); }
.cm-stage[data-view="list"] .cb { display: none; } .cm-stage[data-view="board"] .cl { display: none; }
.cl { overflow-x: auto; } .cl table { width: 100%; border-collapse: collapse; min-width: 640px; } .cl th { text-align: left; padding: 8px 10px; font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--zw-navy-400); border-bottom: 1px solid var(--zw-navy-100); } .cl td { padding: 12px 10px; border-bottom: 1px solid var(--zw-navy-050); font-size: 14px; } .cl .am { font-weight: 600; } .cl small { color: var(--zw-navy-400); font-weight: 400; } .cl .stg { font-weight: 600; color: var(--zw-navy-700); } .cl tr.rec .stg { color: #2f7d32; }
.cc { border-radius: 14px; background: #fff; border: 1px solid var(--zw-navy-100); box-shadow: var(--shadow-md); padding: 10px 12px; display: grid; gap: 6px; } .cc.off .mk { background: var(--zw-lime-200); } .cc-h { display: flex; justify-content: space-between; gap: 6px; align-items: start; } .cc-h b { font: 600 12.5px var(--font-sans); color: var(--zw-navy-800); }
.cc-amt b { font: 300 21px/1.1 var(--font-display); color: var(--zw-navy-800); } .cc-amt small { display: block; font-size: 10.5px; color: var(--zw-navy-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .cc-steps li { flex: 1; height: 6px; border-radius: 6px; background: var(--zw-navy-100); } .cc[data-step="1"] .cc-steps li:nth-child(-n+1), .cc[data-step="2"] .cc-steps li:nth-child(-n+2), .cc[data-step="3"] .cc-steps li:nth-child(-n+3), .cc[data-step="4"] .cc-steps li:nth-child(-n+4), .cc[data-step="5"] .cc-steps li { background: var(--zw-navy-700); } .cc[data-step="5"] .cc-steps li { background: #2f9e44; }
.cc-next { margin: 0; font-size: 11.5px; color: var(--zw-navy-500); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cc[data-done] .cc-next { color: #2f7d32; font-weight: 600; }


/* 3 · The dashboard (navy) */
.db-frame { max-width: 1240px; margin: 0 auto; display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); transform-origin: 20% 20%; }
.dbw { border-radius: 22px; padding: 16px 18px; background: #fff; color: var(--zw-navy-800); box-shadow: 0 40px 70px -35px rgba(0,0,0,.65); display: grid; gap: 6px; align-content: start; grid-column: span 12; min-width: 0; } .dbw em { font-style: normal; font-size: 12px; color: var(--zw-navy-400); } .dbw .w-label { font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--zw-navy-400); } .dbw small { font-size: 12px; color: var(--zw-navy-400); }
.ac u { text-decoration: none; }
@media (min-width: 900px) { .hello { grid-column: span 4; } .tri { grid-column: span 4; } .kpi { grid-column: span 2; } .acts { grid-column: span 5; } .view { grid-column: span 4; } .src { grid-column: span 3; } .dpipe { grid-column: span 5; } .tgt { grid-column: span 3; } .feed { grid-column: span 4; } }
.hello { background: var(--zw-navy-800); color: #fff; border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; gap: 16px; } .hello .g { display: block; font: 300 28px var(--font-display); color: #fff; } .hello .w-label, .hello small { color: #B9C4D4; }
.tri { grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; } .tri b { display: block; font: 300 44px/1 var(--font-display); } .tri span { font-size: 12px; color: var(--zw-navy-400); } .tri .miss b { color: #b3261e; }
.kpi b { font: 300 28px/1.1 var(--font-display); } .kpi small { font-size: 12px; } .kpi.dk { background: var(--zw-navy-800); color: #fff; border: 1px solid rgba(255,255,255,.16); } .kpi.dk b, .kpi.dk span { color: #fff; } .kpi.dk em { color: #B9C4D4; } .kpi span { font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--zw-navy-400); } .kpi.dk span { color: #B9C4D4; }
.gb { display: flex; align-items: flex-end; gap: 8px; height: 110px; } .gb i { flex: 1; position: relative; height: 100%; } .gb i::before, .gb i::after { content: ""; position: absolute; bottom: 0; width: 46%; border-radius: 5px 5px 0 0; transform-origin: bottom; transform: scaleY(var(--k, 1)); } .gb i::before { left: 0; height: var(--b); background: var(--zw-navy-100); } .gb i::after { right: 0; height: var(--a); background: var(--zw-lime-600); }
.vb { display: flex; align-items: flex-end; gap: 6px; height: 110px; } .vb i { flex: 1; height: calc(var(--h) * var(--k, 1)); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--zw-navy-500), var(--zw-navy-700)); } .vb i:last-child { background: var(--zw-lime-500); }
.dn { display: flex; align-items: center; gap: 14px; } .dn svg { width: 96px; height: 96px; transform: rotate(-90deg); flex: none; } .dn circle { fill: none; stroke-width: 7; } .dn .s1 { stroke: var(--zw-navy-700); stroke-dasharray: calc(38 * var(--k, 1)) 100; } .dn .s2 { stroke: var(--zw-lime-500); stroke-dasharray: calc(24 * var(--k, 1)) 100; stroke-dashoffset: -38; } .dn .s3 { stroke: var(--zw-navy-300); stroke-dasharray: calc(20 * var(--k, 1)) 100; stroke-dashoffset: -62; } .dn .s4 { stroke: var(--zw-navy-100); stroke-dasharray: calc(18 * var(--k, 1)) 100; stroke-dashoffset: -82; }
.dn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; } .dn li { display: flex; align-items: center; gap: 6px; } .dn li i { width: 9px; height: 9px; border-radius: 3px; } .dn li:nth-child(1) i { background: var(--zw-navy-700); } .dn li:nth-child(2) i { background: var(--zw-lime-500); } .dn li:nth-child(3) i { background: var(--zw-navy-300); } .dn li:nth-child(4) i { background: var(--zw-navy-100); }
.ph { display: grid; grid-template-columns: 96px 1fr 22px; align-items: center; gap: 8px; font-size: 12.5px; } .ph i { height: 8px; border-radius: 8px; background: var(--zw-navy-700); width: calc(var(--w) * var(--k, 1)); } .ph b { font: 600 13px var(--font-sans); text-align: right; }
.tgt .bar { margin: 10px 0 2px; background: var(--zw-navy-100); } .tgt .bar i { width: calc(var(--p, 37%) * var(--k, 1)); }
.feed p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--zw-navy-050); } .feed p i { width: 9px; height: 9px; border-radius: 50%; background: var(--zw-navy-300); flex: none; } .feed p.done i { background: var(--zw-lime-500); box-shadow: 0 0 0 4px rgba(216,242,63,.4); } .feed em { margin-left: auto; font-weight: 600; color: #2f7d32; }

/* Motion layer: pinned beats */
.ac-pin { height: 100vh; padding-top: 84px; padding-bottom: 12px; display: flex; flex-direction: column; }
.ac-pin .ac-head { margin-bottom: 14px; } .ac-pin h2 { font-size: clamp(24px, 2.8vw, 38px); } .ac-pin .st-lede { display: none; }
.ac-pin .ac-steps { display: flex; margin-top: 10px; }
.ac-pin .ac-beats { position: relative; flex: 1; width: 100%; display: block; min-height: 0; } .ac-pin .ac-beat { position: absolute; inset: 0; align-content: center; }
.ac-pin .wl-deck { overflow: visible; margin-top: 6px; } .ac-pin .wl-track { justify-content: center; } .ac-pin .pcard { flex: 0 0 310px; } .ac-pin .ac-note { display: none; } .ac-pin .ac-beat.wide { align-content: start; padding-top: 6px; } .ac-pin .ac-sample { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; }
.cm-pin .cm-grid { flex: 1; min-height: 0; align-content: center; }
.db-pin .db-frame { flex: 1; min-height: 0; align-content: center; }
@media (prefers-reduced-motion: reduce) { .pcard::after { animation: none; } }

@media (max-height: 860px) { .cm-pin .cm-stage { zoom: .84; } .ac-pin .pcard { zoom: .9; } }


/* The real dashboard, inside a shadow root. */
.db-frame { display: block; max-width: 1180px; width: 100%; grid-template-columns: none; }
.real-host { display: block; width: 100%; }
.db-pin .db-frame { height: calc(100vh - 150px); overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(transparent 0, #000 28px, #000 calc(100% - 28px), transparent); }
.db-pin .ac-head { overflow: hidden; }
.db-frame { background: #F4F1EC; border-radius: 28px; padding: 18px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.2); }
.db-pin .db-frame { -webkit-mask-image: none; mask-image: none; }

/* Wallet: a real client, real properties, a cover-flow. */
.wl-hd { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 20px; align-items: center; padding: 14px 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.32); max-width: 1180px; margin: 0 auto 8px; width: 100%; }
.wl-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--zw-lime-500); }
.wl-id b { display: block; color: #fff; font: 500 20px var(--font-sans); } .wl-id span { display: block; font-size: 13px; color: #B9C4D4; } .wl-id small { font-size: 11px; color: #8195B5; }
.wl-tot { text-align: right; } .wl-tot span, .wl-kp span { display: block; font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #B9C4D4; } .wl-tot b { font: 300 clamp(28px, 3.4vw, 44px)/1.1 var(--font-display); color: #fff; } .wl-tot b small { font: 400 13px var(--font-sans); color: #B9C4D4; } .wl-tot em { display: block; font-style: normal; font-size: 12px; color: var(--zw-lime-500); }
.wl-kp { grid-column: auto; } .wl-kp b { color: #fff; font: 400 16px var(--font-sans); } .wl-kp b.up { color: var(--zw-lime-500); }
.wl-hd { grid-template-columns: auto 1fr auto auto auto auto; } @media (max-width: 899px) { .wl-hd { grid-template-columns: auto 1fr; } .wl-tot { text-align: left; grid-column: 1 / -1; } }
.wl-deck { overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 20px; }
.wl-track { display: flex; gap: 16px; width: max-content; padding: 0 4px; }
.wc { scroll-snap-align: center; flex: 0 0 min(80vw, 300px); border-radius: 22px; background: #FBFAF7; color: var(--zw-navy-800); overflow: hidden; box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.6); position: relative; transition: box-shadow .3s; outline: none; }
.wc:focus-visible { box-shadow: 0 0 0 3px var(--zw-lime-500), 0 40px 70px -30px rgba(0,0,0,.7); }
.wc-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--zw-navy-700); } .wc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .wc.on .wc-img img { transform: scale(1.08); }
.wc-badge { position: absolute; left: 10px; top: 10px; padding: 3px 11px; border-radius: 99px; background: rgba(255,255,255,.94); font: 600 11px var(--font-sans); } .wc-badge.vac { background: #fff3cd; }
.wc-body { padding: 12px 14px 14px; display: grid; gap: 4px; } .wc-body h3 { font: 500 16.5px var(--font-sans); color: var(--zw-navy-800); margin: 0; } .wc-area { margin: 0; font-size: 12.5px; color: var(--zw-navy-400); }
.wc-val b { font: 300 30px var(--font-display); } .wc-val small { font-size: 12px; color: var(--zw-navy-400); }
.wc dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 4px 0 2px; } .wc dt { font-size: 11px; color: var(--zw-navy-400); } .wc dd { margin: 0; font: 600 12.5px var(--font-sans); } .wc dd.up { color: #2f7d32; }
.wc .chip { justify-self: start; }
.wl-pin .wl-deck { overflow: visible; perspective: 1500px; height: min(58vh, 520px); } .wl-pin .wl-track { position: relative; width: 100%; height: 100%; padding: 0; display: block; transform-style: preserve-3d; }
.wl-pin .wc { position: absolute; left: 50%; top: 4%; width: 300px; margin-left: -150px; will-change: transform; }
.ac-pin .ac-beat.wide { align-content: start; }

/* The orbit */
.orbit { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: center; }
.ob-ring { position: absolute; inset: 0; width: 100%; height: 100%; } .ob-track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-dasharray: 3 7; } .ob-glow { fill: none; stroke: var(--zw-lime-500); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 82; transform-origin: 200px 200px; animation: ob-spin 14s linear infinite; filter: drop-shadow(0 0 8px rgba(216,242,63,.8)); }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-core { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; align-content: center; text-align: center; padding: 6px; }
.ob-core img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--zw-lime-500); } .ob-core b { color: #fff; font: 500 13px var(--font-sans); margin-top: 6px; } .ob-core span { font-size: 11px; color: #B9C4D4; }
.ob-node { position: absolute; left: calc(50% + var(--x) * 1%); top: calc(50% + var(--y) * 1%); width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: var(--zw-navy-800); color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; transition: background .25s, border-color .25s, box-shadow .25s, color .25s; font: inherit; padding: 0; }
@media (max-width: 440px) { .ob-node { width: 62px; height: 62px; margin: -31px 0 0 -31px; } }
.ob-node svg { width: 24px; height: 24px; } .ob-node span { font: 600 9.5px var(--font-sans); line-height: 1.1; text-align: center; max-width: 64px; }
.ob-node.on, .ob-node:hover { background: var(--zw-lime-500); border-color: var(--zw-lime-500); color: var(--zw-navy-900); box-shadow: 0 0 0 8px rgba(216,242,63,.2), 0 0 30px rgba(216,242,63,.6); } .ob-node:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ob-run { display: none; }
.ob-read { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); max-width: 46ch; } .ob-read b { display: block; color: var(--zw-lime-500); font: 600 14px var(--font-sans); margin-bottom: 4px; } .ob-read span { font-size: 15px; color: #DDE3EC; }
@media (prefers-reduced-motion: reduce) { .ob-glow { animation: none; } }

/* Real commissions board */
.cm-story { max-width: 1180px; margin: 0 auto 10px; text-align: left; } .cm-story h3 { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 4px; } .cm-story p { font-size: 15px; max-width: 70ch; margin: 0; }
.cm-frame { max-width: 1180px; margin: 0 auto; width: 100%; background: #F4F1EC; border-radius: 28px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); overflow: hidden; padding: 18px; height: calc(var(--hh, 600px) + 36px); }
.cm-pin .cm-frame { height: calc(100vh - 290px); }
.cm-host { display: block; }

.real-listings { padding: 14px; background: #F4F1EC; height: 600px; overflow: hidden; position: relative; } .lst-host { display: block; } .real-listings::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, #F4F1EC); pointer-events: none; }

/* Commissions on navy, for contrast; the cream frame holds the real screens. */
.cm { background: var(--gradient-navy); color: #DDE3EC; } .cm h2, .cm .cm-story h3 { color: #fff; } .cm .zw-eyebrow, .cm .ac-time { color: var(--zw-lime-500); } .cm .st-lede, .cm .cm-story p { color: #DDE3EC; } .cm .ac-sample { color: #8195B5; opacity: 1; }
.cm-frame { position: relative; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14); }
.cm-list { position: absolute; left: 18px; top: 18px; }
.cm-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; overflow: hidden; background: #FBFAF7; box-shadow: -30px 0 60px -20px rgba(0,0,0,.45); border-left: 1px solid var(--border-subtle); border-radius: 28px 0 0 28px; padding: 0; }
.cm-drawer-host { display: block; }


/* Phones, with motion: the same pinned scenes, laid out for a narrow screen. */
@media (max-width: 899px) {
  .ac-pin { padding-top: 70px; } .ac-pin .ac-head { margin-bottom: 8px; } .ac-pin h2 { font-size: clamp(22px, 6.5vw, 28px); } .ac-pin .ac-steps { margin-top: 8px; } .ac-pin .ac-steps li { padding: 5px 11px; font-size: 12px; }
  .ac-pin .ac-beat { align-content: start; padding-top: 6px; gap: 12px; }
  .ac-pin .ac-copy h3 { font-size: clamp(22px, 6.4vw, 28px); margin: 0 0 6px; } .ac-pin .ac-copy p { font-size: 14.5px; line-height: 1.45; }
  .ac-pin .wl-hd { grid-template-columns: auto 1fr; padding: 10px 14px; gap: 4px 12px; } .ac-pin .wl-photo { width: 48px; height: 48px; } .ac-pin .wl-id b { font-size: 17px; } .ac-pin .wl-id small, .ac-pin .wl-kp { display: none; } .ac-pin .wl-tot { grid-column: 1 / -1; text-align: left; } .ac-pin .wl-tot b { font-size: 26px; }
  .wl-pin .wl-deck { height: 400px; } .wl-pin .wc { zoom: .86; }
  .ac-pin .wl-share { padding: 12px 14px; } .ac-pin .wl-share .row { padding: 8px 0; } .ac-pin .sw { margin-top: 10px; }
  .ac-pin .ac-copy .ob-read { margin-top: 10px; padding: 10px 12px; } .ac-pin .ob-read span { font-size: 13.5px; }
  .ac-pin .orbit { width: min(100%, 290px); } .ac-pin .ob-node { width: 56px; height: 56px; margin: -28px 0 0 -28px; } .ac-pin .ob-node span { font-size: 8.5px; }
  .ac-pin .ac-sample { display: none; }
  .cm-pin .cm-story { margin-bottom: 6px; } .cm-pin .cm-story h3 { font-size: 20px; } .cm-pin .cm-story p { font-size: 13px; }
  .cm-pin .cm-frame { height: calc(100svh - 250px); padding: 10px; border-radius: 20px; overflow: hidden; } .cm-pin .cm-host, .cm-pin .cm-list { position: absolute; left: 10px; top: 10px; }
  .cm-pin .cm-list, .cm-pin .cm-drawer { display: block; } .cm-pin .cm-drawer { width: 100%; border-radius: 0; }
  .db-pin .db-frame { height: calc(100svh - 190px); padding: 8px; border-radius: 20px; }
}

@media (max-width: 899px) { .real-listings { height: 480px; padding: 8px; } .lst-host { width: 1100px; zoom: .33; } .db-pin .dash-host { will-change: transform; } .db-frame .real-host { width: 1180px; } }

/* The real wallet */
.wl-cap { text-align: center; margin: 0 0 8px; font-size: 14px; color: #DDE3EC; min-height: 1.4em; }
.wl-real { position: relative; max-width: 1180px; margin: 0 auto; width: 100%; background: #F4F1EC; border-radius: 28px; padding: 8px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14); height: 60vh; min-height: 380px; }
.wl-host-b { position: absolute; left: 8px; top: 8px; } .wl-host-a, .wl-host-b { display: block; }
.wl-pin .wl-real { height: calc(100vh - 235px); }
@media (max-width: 899px) { .wl-pin .wl-real { height: calc(100svh - 215px); border-radius: 20px; } }
/* Keep the sample caption clear of the frames. */
@media (min-width: 900px) {
  .ac-pin .ac-sample { bottom: 4px; font-size: 11.5px; }
  .wl-pin .wl-real { height: calc(100vh - 262px); } .cm-pin .cm-frame { height: calc(100vh - 318px); } .db-pin .db-frame { height: calc(100vh - 196px); }
}