/* Ambient animated stage for A New Kind of Street */
#al-kinds {
  position: relative;
  border-radius: var(--r-xl);
  padding: 52px 38px 48px;
  margin: 72px 0 88px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent-lime) 38%, transparent) 0%, color-mix(in srgb, var(--panel) 45%, transparent) 55%, transparent 80%),
    radial-gradient(circle at 6% 85%, color-mix(in srgb, color-mix(in srgb, var(--accent-lime) 60%, var(--duck-deep)) 12%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 94% 65%, color-mix(in srgb, var(--duck-deep) 9%, transparent) 0%, transparent 45%),
    var(--panel);
  border: 1px solid color-mix(in srgb, var(--duck-bg) 92%, var(--dim));
  box-shadow: var(--sh-2);
  overflow: hidden;
}

#al-kinds::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 45% 45%, color-mix(in srgb, var(--accent-lime) 25%, transparent) 0%, color-mix(in srgb, var(--accent-lime) 8%, transparent) 28%, transparent 65%);
  animation: street-mesh-flow 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes street-mesh-flow {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(5%, 3%) scale(1.08); opacity: 1; }
  100% { transform: translate(-4%, 2%) scale(0.96); opacity: 0.75; }
}

#al-kinds > * {
  position: relative;
  z-index: 1;
}

/* Juicebox.ai-style scroll-fill display promise */
.al-street-promise {
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.038em;
  max-width: 32ch;
  margin: 22px 0 42px;
  color: var(--ink);
}

.al-street-promise span {
  display: inline;
  transition: opacity 0.28s var(--ease-settle), color 0.28s;
}

.al-street-promise[data-scroll-fill] span {
  opacity: 0.18;
}

.al-street-promise[data-scroll-fill] span.is-filled {
  opacity: 1;
  color: var(--ink);
}

.al-street-promise[data-scroll-fill] span.fill-accent.is-filled {
  color: var(--duck-deep);
}

/* Small strategy stories. Shared faces can also live in the member picker. */
.strategy-gallery { color:var(--ink); margin:28px 0 0; }
.sc-street { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:0 10px 18px; }
.sc-road { position:absolute; z-index:-1; inset:65px -10px 0; width:calc(100% + 20px); height:calc(100% - 65px); overflow:visible; pointer-events:none; }
.sc-road-edge { fill:none; stroke:var(--soft); stroke-width:19; }
.sc-road-center { fill:none; stroke:color-mix(in srgb, var(--duck-bg) 85%, var(--dim)); stroke-width:1; stroke-dasharray:5 12; animation:sc-road-travel 32s linear infinite; animation-play-state:paused; }
.strategy-card { --sc-tone:var(--duck-deep); --sc-tint:var(--duck-bg); --sc-fill:var(--public-accent); --sc-wash:var(--panel); }
.sc-kicker { display:flex; align-items:center; min-height:26px; margin-bottom:12px; }
.sc-badge { display:inline-flex; align-items:center; font-family:var(--mono,monospace); font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:2.5px 9px; border-radius:var(--r-pill); line-height:1.35; border:1px solid transparent; }
.sc-badge--income { background:var(--duck-bg); color:var(--duck-deep); border-color:color-mix(in srgb, var(--duck-bright) 40%, var(--paper)); }
.sc-badge--hedging { background:color-mix(in srgb, var(--benchmark) 8%, var(--paper)); color:color-mix(in srgb, var(--benchmark) 75%, var(--ink)); border-color:color-mix(in srgb, var(--benchmark) 30%, var(--paper)); }
.sc-badge--ai, .sc-badge--portfolio { background:color-mix(in srgb, var(--ai-violet) 8%, var(--paper)); color:color-mix(in srgb, var(--ai-violet) 74%, var(--ink)); border-color:color-mix(in srgb, var(--ai-violet) 25%, var(--paper)); }
.sc-badge--follow { background:var(--duck-bg); color:var(--duck-deep); border-color:color-mix(in srgb, var(--duck) 20%, var(--paper)); }
.sc-badge--technical { background:color-mix(in srgb, var(--bill) 10%, var(--paper)); color:var(--bill-ink); border-color:color-mix(in srgb, var(--bill) 32%, var(--paper)); }
.strategy-card { position:relative; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:0 3px 4px #183a2910,0 12px 26px -21px #183a2940; min-width:0; animation:sc-drift 10s ease-in-out infinite; animation-delay:calc(var(--card,0) * -4s); animation-play-state:paused; transition:transform .25s var(--ease-settle),box-shadow .25s var(--ease-settle); }
.strategy-card:hover { transform:translateY(-4px); box-shadow:0 8px 16px -6px rgba(24,58,41,0.14),0 22px 42px -18px rgba(24,58,41,0.25); }
.strategy-card[open] { border-color:var(--sc-tone); box-shadow:0 3px 4px #183a2910,0 16px 32px -20px #183a2940; }
.sc-follow-card { display:flex; flex-direction:column; color:var(--ink); text-decoration:none; }
.sc-follow-card .sc-copy { flex:1; }
.sc-follow-card .sc-open-label { margin-top:auto; }
.sc-follow-card .sc-brief { margin-bottom:17px; }
.sc-follow-card:focus-visible { outline:2px solid var(--duck-deep); outline-offset:4px; }
@media (min-width:1200px) {
  #pageroot .sc-street:has(> .sc-follow-card) { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.sc-face { display:block; list-style:none; cursor:pointer; border-radius:var(--r-lg); }
.sc-face::-webkit-details-marker { display:none; }
.sc-face::marker { content:''; }
.sc-face:focus-visible { outline:2px solid var(--sc-tone); outline-offset:5px; }
/* Closed cards fill their grid row, so descriptions can wrap while the
   action stays on the same baseline. Open explainers keep natural flow. */
.strategy-card:not([open]) > .sc-face { display:flex; flex-direction:column; height:100%; }
.strategy-card:not([open]) > .sc-face > .sc-copy { flex:1; }
.strategy-card:not([open]) > .sc-face .sc-brief { margin-bottom:17px; }
.strategy-card:not([open]) > .sc-face .sc-open-label { margin-top:auto; }
.sc-scene { display:block; padding:13px 12px 6px; background:var(--sc-wash); border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; }
.sc-scene svg { display:block; width:100%; height:154px; color:var(--ink); fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.sc-scene svg text { fill:currentColor; stroke:none; font:550 12px var(--body); }
.sc-scene svg .sc-small { font-size:10px; }
.sc-paper { fill:var(--paper); }
.sc-tint { fill:var(--sc-tint); }
.sc-fill { fill:var(--sc-fill); }
.sc-lime { fill:var(--sc-fill); }
.sc-duck-body { fill:var(--duck); }
.sc-duck-bill { fill:var(--sc-fill); }
.sc-duck-eye { fill:var(--paper); stroke:none; }
.sc-duck-wing { stroke:#c7ead8; transform-origin:0 5px; }
.sc-guide { stroke:color-mix(in srgb, var(--faint) 60%, var(--hair)); }
.sc-shadow { fill:var(--hair); stroke:none; opacity:.6; }
.sc-copy { display:flex; flex-direction:column; padding:21px 23px 19px; }
.sc-title { display:block; font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.045em; }
.sc-bias { display:flex; align-items:center; gap:5px; margin-top:9px; font-size:11px; line-height:1.45; font-weight:550; }
.sc-bias svg { width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sc-bias--bullish { color:var(--duck-deep); }
.sc-bias--flexible { color:color-mix(in srgb, color-mix(in srgb, var(--ai-violet) 20%, var(--ai-bright)) 50%, var(--ink)); }
.sc-brief { display:block; margin-top:11px; min-height:47px; font-size:14px; line-height:1.65; color:var(--dim); }
.sc-open-label { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:37px; border-top:1px solid color-mix(in srgb, var(--hair) 75%, var(--paper)); margin-top:17px; padding-top:14px; font-size:12px; font-weight:550; }
.sc-plus { position:relative; width:22px; height:22px; border:1px solid var(--hair); border-radius:50%; flex:none; }
.sc-plus::before, .sc-plus::after { content:''; position:absolute; width:8px; height:1px; background:currentColor; left:6px; top:10px; }
.sc-plus::after { transform:rotate(90deg); transition:transform .2s; }
.strategy-card[open] .sc-plus::after { transform:rotate(0); }
.strategy-card[open] .sc-open-label { color:var(--sc-tone); }
.sc-explainer { padding:0 23px 23px; font-size:13px; line-height:1.65; }
.sc-bias-note { margin:0 0 14px; color:var(--dim); font-size:12px; }
.sc-explainer ol { list-style:none; counter-reset:strategy-step; padding:0; margin:0; }
.sc-explainer li { position:relative; padding:0 0 13px 29px; counter-increment:strategy-step; }
.sc-explainer li::before { content:counter(strategy-step); position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:var(--sc-tint); color:var(--sc-tone); display:grid; place-items:center; font-size:10px; font-weight:650; }
.sc-tradeoff { padding-top:13px; margin:0 0 12px; border-top:1px solid color-mix(in srgb, var(--hair) 75%, var(--paper)); color:var(--dim); font-size:12px; line-height:1.7; }
.sc-fit { margin:10px 0; font-size:12px; line-height:1.6; }
.sc-good-fit { color:color-mix(in srgb, color-mix(in srgb, var(--duck) 70%, var(--bill)) 65%, var(--duck-deep)); margin:0 0 4px; }
.sc-poor-fit { color:var(--cuck-deep); margin:0; }
.sc-min-cap { font-size:12px; color:var(--ink); margin:8px 0 12px; }
.sc-numbers { margin:10px 0 14px; background:var(--sc-wash); border:1px solid var(--hair); border-radius:var(--r-sm); padding:8px 12px; }
.sc-numbers-toggle { cursor:pointer; font-size:12px; font-weight:600; color:var(--sc-tone); }
.sc-numbers-body { margin-top:8px; font-size:12px; line-height:1.6; color:var(--ink); }
.sc-numbers-summary { margin:0 0 6px; font-weight:500; }
.sc-numbers-list { margin:0 0 0 16px; padding:0; list-style:disc; }
.sc-numbers-list li { padding:0 0 4px 0; }
.sc-explore { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--sc-tone); text-decoration:none; font-size:12px; font-weight:650; }
.sc-explore:hover { text-decoration:underline; text-underline-offset:3px; }
.sc-unavailable { margin:0; font-size:12px; color:var(--dim); }
#pageroot .sc-discovery { margin:30px 10px 0; border-top:1px solid var(--hair); padding-top:20px; }
#pageroot .sc-discovery > summary { display:flex; align-items:center; gap:10px; width:fit-content; cursor:pointer; list-style:none; color:var(--duck-deep); font-size:14px; font-weight:550; }
#pageroot .sc-discovery > summary::-webkit-details-marker { display:none; }
#pageroot .sc-discovery > summary svg { width:24px; height:24px; }
#pageroot .sc-discovery > summary::after { content:'+'; margin-left:6px; font-size:20px; font-weight:400; }
#pageroot .sc-discovery[open] > summary::after { content:'−'; }
#pageroot .sc-discovery .agent-discovery { margin-top:24px; }


/* Ten-second strategy stories. The existing observer pauses them offscreen;
   no timers, account reads, or live market values belong in these examples. */
.sc-scene-note { display:block; min-height:2.8em; margin:5px 5px 7px; color:var(--dim); font-size:11px; line-height:1.4; text-align:center; }
.sc-wash { fill:var(--sc-wash); stroke:none; }
.sc-bar-track { fill:color-mix(in srgb, var(--hair) 80%, var(--paper)); stroke:none; }
.sc-stock-path { stroke:color-mix(in srgb, var(--faint) 80%, var(--hair)); stroke-dasharray:4 4; }
.sc-cap-line { stroke:#87a994; stroke-dasharray:3 4; }
.sc-payoff-path { stroke:var(--sc-tone); stroke-width:2.8; }
.sc-path-dot { fill:var(--sc-tone); stroke:var(--paper); stroke-width:1.5; }
.sc-protected-band { fill:var(--sc-tint); stroke:none; }
.sc-leader-halo, .sc-wheel-center { stroke:none; }
.sc-wheel-active { fill:var(--sc-fill); stroke:var(--sc-tone); stroke-width:2; opacity:0; animation:sc-wheel-stage 10s linear infinite; animation-delay:calc(var(--stage,0) * -2.5s); }
.sc-wheel-cash { opacity:1; }
/* The wheel's stage pills light up in the lime, which is the same in both themes,
   so they are light chips in both: white paper under the brand's ink, the label's
   and the outline's (currentColor). On the scene's own paper the label would be the
   swapping ink, light on the lime in the dark theme. */
.sc-wheel-node { color:var(--brand-ink); }
.sc-wheel-node .sc-paper { fill:var(--white); }
.sc-long-allocation { fill:#79b294; stroke:none; transform-origin:77px 0; transform:scaleX(.88); animation:sc-long-mix 10s ease-in-out infinite; }
.sc-short-allocation { fill:#bd96aa; stroke:none; transform-origin:77px 0; transform:scaleX(.4); animation:sc-short-mix 10s ease-in-out infinite; }
.sc-long-arrow { stroke:#174d36; }
.sc-short-arrow { stroke:#733a57; }
.sc-scene svg .sc-mix-bull { fill:color-mix(in srgb, var(--duck) 69%, var(--ink)); animation:sc-mix-bull 10s linear infinite; }
.sc-scene svg .sc-mix-bear { fill:color-mix(in srgb, color-mix(in srgb, var(--cuck-deep) 60%, var(--ai-bright)) 70%, var(--ink)); opacity:0; animation:sc-mix-bear 10s linear infinite; }
.sc-mix-static { display:none; }
.sc-ink-draw { stroke-dasharray:1; animation:sc-write 10s ease-in-out infinite; }
.sc-premium-return { animation:sc-premium-return 10s ease-in-out infinite; }
.sc-call-payoff, .sc-collar-payoff, .sc-rule-line { stroke-dasharray:1; animation:sc-payoff-draw 10s linear infinite; }
.sc-call-dot { animation:sc-call-trace 10s linear infinite; }
.sc-collar-dot { animation:sc-collar-trace 10s linear infinite; }
.sc-allocation-one { fill:#76ad8d; }
.sc-allocation-two { fill:#a8cb9a; }
.sc-allocation-three { fill:var(--sc-fill); }
.sc-opening-holding { animation:sc-opening-basket 10s ease-in-out infinite both; animation-delay:calc(var(--holding,0) * .2s); }
.sc-disclosure-sheet { animation:sc-file-disclosure 10s ease-in-out infinite; }
.sc-disclosed-holding { animation:sc-model-assemble 10s ease-in-out infinite both; animation-delay:calc(var(--holding,0) * .2s); }
.sc-selected-holding { animation:sc-select-exit 10s ease-in-out infinite; }
.sc-sale-cash { animation:sc-sale-cash 10s ease-in-out infinite; }
.sc-hold-label { animation:sc-hold-label 10s linear infinite; }
.sc-exit-label { opacity:0; animation:sc-exit-label 10s linear infinite; }
.sc-duck-wing { animation:sc-duck-wave 10s ease-in-out infinite; }
.sc-scene * { animation-play-state:paused; }
.strategy-gallery.is-playing .strategy-card,
.strategy-gallery.is-playing .sc-scene *,
.strategy-gallery.is-playing .sc-road-center { animation-play-state:running; }
.strategy-gallery .strategy-card:is([open],:hover,:focus-within),
.strategy-gallery .strategy-card:is([open],:hover,:focus-within) .sc-scene * { animation-play-state:paused; }
@keyframes sc-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes sc-road-travel { to { stroke-dashoffset:-170; } }
@keyframes sc-wheel-stage { 0%,20%,100% { opacity:1; } 25%,95% { opacity:0; } }
@keyframes sc-long-mix { 0%,35%,100% { transform:scaleX(.88); } 55%,85% { transform:scaleX(.4); } }
@keyframes sc-short-mix { 0%,35%,100% { transform:scaleX(.4); } 55%,85% { transform:scaleX(.88); } }
@keyframes sc-mix-bull { 0%,38%,100% { opacity:1; } 45%,94% { opacity:0; } }
@keyframes sc-mix-bear { 0%,49%,96%,100% { opacity:0; } 56%,86% { opacity:1; } }
@keyframes sc-write { 0%,8%,100% { stroke-dashoffset:1; } 27%,92% { stroke-dashoffset:0; } }
@keyframes sc-premium-return {
  0%,24% { opacity:0; transform:translateX(0); }
  30% { opacity:1; transform:translateX(0); }
  50%,86% { opacity:1; transform:translateX(-34px); }
  95%,100% { opacity:0; transform:translateX(-34px); }
}
@keyframes sc-payoff-draw { 0%,12% { stroke-dashoffset:1; } 78%,92% { stroke-dashoffset:0; opacity:1; } 99%,100% { stroke-dashoffset:0; opacity:0; } }
@keyframes sc-call-trace {
  0%,12% { transform:translate(-45px,42px); opacity:0; }
  15% { transform:translate(-45px,42px); opacity:1; }
  50% { transform:translate(0,0); }
  78%,92% { transform:translate(45px,0); opacity:1; }
  99%,100% { transform:translate(45px,0); opacity:0; }
}
@keyframes sc-collar-trace {
  0%,12% { transform:translate(-45px,0); opacity:0; }
  15% { transform:translate(-45px,0); opacity:1; }
  30% { transform:translate(0,0); }
  65% { transform:translate(102px,-60px); }
  78%,92% { transform:translate(141px,-60px); opacity:1; }
  99%,100% { transform:translate(141px,-60px); opacity:0; }
}
@keyframes sc-opening-basket {
  0%,22%,100% { opacity:.15; transform:translateY(7px); }
  43%,88% { opacity:1; transform:translateY(0); }
}
@keyframes sc-file-disclosure {
  0%,10%,100% { opacity:0; transform:translateX(-25px); }
  32%,90% { opacity:1; transform:translateX(0); }
  96% { opacity:0; transform:translateX(0); }
}
@keyframes sc-model-assemble {
  0%,40%,100% { opacity:.15; transform:translateX(-5px); }
  62%,88% { opacity:1; transform:translateX(0); }
}
@keyframes sc-select-exit {
  0%,100% { opacity:0; transform:translateY(-12px); }
  16%,47% { opacity:1; transform:translateY(0); }
  70% { opacity:1; transform:translate(87px,22px); }
  77%,95% { opacity:0; transform:translate(87px,30px); }
}
@keyframes sc-sale-cash { 0%,69%,100% { opacity:0; transform:translateY(-8px); } 79%,94% { opacity:1; transform:translateY(0); } }
@keyframes sc-hold-label { 0%,44%,100% { opacity:1; } 50%,94% { opacity:0; } }
@keyframes sc-exit-label { 0%,46%,100% { opacity:0; } 52%,94% { opacity:1; } }
@keyframes sc-duck-wave { 0%,12%,28%,100% { transform:rotate(0); } 17%,24% { transform:rotate(-18deg); } 20% { transform:rotate(2deg); } }
@media (max-width:1100px) and (min-width:701px) {
  .sc-street { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding-left:0; padding-right:0; }
  .sc-copy { padding:18px; }
  .sc-explainer { padding:0 18px 20px; }
  .sc-title { font-size:20px; }
  .sc-brief { font-size:13px; min-height:66px; }
  .sc-scene { padding-left:5px; padding-right:5px; }
  .sc-scene svg { height:140px; }
}
@media (max-width:700px) {
  .sc-street { grid-template-columns:1fr; gap:20px; padding:0; }
  .sc-road { display:none; }
  .sc-copy { padding:18px 20px; }
  .sc-explainer { padding:0 18px 20px; }
  .sc-title { font-size:20px; }
  .sc-brief { font-size:13px; min-height:auto; }
  #al-kinds { padding:32px 18px 28px; border-radius:var(--r-xl); margin:44px 0 60px; }
  #pageroot .sc-discovery { margin-left:0; margin-right:0; }
}
@media (max-width:500px) {
  .sc-copy { padding:20px 22px; }
  .sc-title { font-size:22px; }
  .sc-brief { font-size:14px; min-height:0; }
  .sc-scene { padding:10px 20px 5px; }
  .sc-scene svg { height:152px; }
  .sc-explainer { padding:0 22px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  #al-kinds::before { animation:none !important; }
  .al-street-promise[data-scroll-fill] span { opacity:1 !important; }
  .strategy-gallery *, .strategy-card, .strategy-card * { animation:none !important; transition:none !important; }
  .sc-mix-bull, .sc-mix-bear, .sc-hold-label { display:none; }
  .sc-mix-static { display:block; }
  .sc-exit-label { opacity:1; }
}