/* DuoCharts's observer lives behind the foreground chart. */
#scene canvas{position:relative;z-index:1}
.observer{position:absolute;right:1%;top:13%;width:35%;max-width:580px;pointer-events:none;transform:perspective(1000px) rotateY(var(--observer-y,0deg)) rotateX(var(--observer-x,0deg));transform-origin:55% 45%;transition:transform .65s ease-out;mask-image:linear-gradient(#000 65%,transparent 99%)}
.observer img{display:block;width:100%;height:auto;filter:drop-shadow(-16px 8px 35px #dddde01c);animation:observer-breathe 9s ease-in-out infinite}
.observer .observer-echo{position:absolute;inset:0;opacity:0;filter:sepia(1) saturate(.7);animation:observer-glitch 13s infinite;clip-path:inset(26% 0 68%)}
@keyframes observer-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes observer-glitch{0%,92%,95%,100%{opacity:0;translate:0}92.5%,94%{opacity:.3;translate:5px}93%,94.5%{opacity:.2;translate:-4px}}
.join{overflow:hidden;min-height:500px;text-align:left}
.observer-desk{position:absolute;inset:0 0 0 auto;width:65%;height:100%;object-fit:cover;object-position:85% center;mask-image:linear-gradient(90deg,transparent,#000 40%);opacity:.72}
.join-copy{position:relative;z-index:1;max-width:680px;background:radial-gradient(ellipse at 15% 50%,#0c0c0ea6,transparent 75%)}
.join-copy h2{font-size:clamp(36px,3.8vw,56px)}
.motion-paused .observer{transform:none;transition:none}
.motion-paused .observer img{animation-play-state:paused}
.motion-paused .observer .observer-echo{opacity:0;animation:none}
@media(max-width:900px){.observer{right:-6%;width:47%;top:21%;opacity:.85}.observer-desk{width:85%;opacity:.42}.join-copy{max-width:600px}}
@media(max-width:600px){.observer{top:auto;bottom:5%;right:-2%;width:49%;max-width:250px;opacity:.85;transform:none;mask-image:linear-gradient(#000 45%,transparent 100%)}.observer img{animation:none}.observer .observer-echo{display:none}.join{padding-bottom:235px;min-height:650px}.observer-desk{inset:auto 0 0;width:100%;height:300px;object-position:85% center;opacity:.8;mask-image:linear-gradient(transparent,#000 42%)}.join-copy{background:none}.join-copy h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.observer{transform:none!important;transition:none}.observer img{animation:none!important}.observer-echo{display:none}}

/* A compact signature figure centered between the brand and membership link. */
header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:26px;height:100%}
header nav>a{white-space:nowrap}
header .observer{position:relative;inset:auto;width:65px;max-width:none;flex:0 0 65px;opacity:1;mask-image:linear-gradient(#000 75%,transparent 100%)}
header .observer img{animation-name:observer-breathe-small}
header .observer .observer-echo{animation-name:observer-glitch}
@keyframes observer-breathe-small{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(max-width:1100px){header nav>a{display:none}}
@media(max-width:600px){header .observer{width:48px;flex-basis:48px;max-width:none;transform:none}header .observer img{animation:none}header .wordmark-name{font-size:20px}header .brand-small{font-size:8px;letter-spacing:4px}}
@media(max-width:360px){header .observer{width:40px;flex-basis:40px}header .wordmark-name{font-size:18px}header .button.small{font-size:11px;padding:9px 8px;gap:5px}}

/* Partnership invitation, in the existing smoky silver palette. */
.affiliates{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:8%;background:linear-gradient(125deg,#151518,#0c0c0e 65%)}
.affiliate-copy>p:not(.eyebrow){max-width:570px;color:var(--muted)}
.affiliate-copy .button{margin-top:12px}
.affiliate-copy .affiliate-note{font-size:13px;margin:18px 0 0}
.affiliate-rate{padding:38px;text-align:center;border:1px solid #ffffff25;background:radial-gradient(ellipse at 50% 35%,#ffffff0c,transparent 70%);box-shadow:inset 0 1px #ffffff0a,0 25px 65px #0004}
.affiliate-kicker,.affiliate-detail{font-family:monospace;font-size:12px;letter-spacing:2px;color:#aaaab0}
.affiliate-percent{font-family:Manrope,sans-serif;font-size:clamp(100px,10vw,160px);font-weight:600;letter-spacing:-8px;line-height:1.15;margin:24px 0 8px;background:linear-gradient(140deg,#fff,#85858c);background-clip:text;-webkit-background-clip:text;color:transparent}
.affiliate-percent span{font-size:.46em;letter-spacing:-3px;vertical-align:top;display:inline-block;margin-top:.22em}
.affiliate-label{color:#e6e6e9;font-size:18px;margin-bottom:28px}
.affiliate-detail{display:block;border-top:1px solid #ffffff20;padding-top:24px;color:#c1ad78}
.footer-links{display:flex;flex-direction:column;gap:14px;text-align:right;font-size:12px;color:#868686}
.footer-links a{color:#dddde0;font-size:14px}.footer-links a:hover{color:#fff}
@media(max-width:900px){.affiliates{gap:5%}.affiliate-rate{padding:28px 20px}.footer-links{text-align:left}}
@media(max-width:600px){.affiliates{grid-template-columns:1fr;gap:38px}.affiliate-percent{font-size:120px}.affiliate-copy .button{font-size:14px;padding:15px;gap:16px}.affiliate-rate{padding:30px 20px}}

.header-actions{display:flex;align-items:center;gap:24px}
.partner-tab{font-size:14px;color:#e6e6e9;padding:10px 0;border-bottom:1px solid #c1ad7870;transition:color .2s,border-color .2s}
.partner-tab:hover{color:#fff;border-color:#e4cd94}
@media(max-width:700px){.header-actions{gap:0}.partner-tab{position:absolute;right:6%;top:calc(100% + 8px);padding:5px 14px;border:1px solid #ffffff30;background:#18181cea;border-radius:2px;line-height:1.6}}