/* Ambient animated stage for A New Kind of Street */
#al-kinds {
  position: relative;
  border-radius: 36px;
  padding: 52px 38px 48px;
  margin: 72px 0 88px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(216, 239, 140, 0.38) 0%, rgba(243, 248, 243, 0.45) 55%, transparent 80%),
    radial-gradient(circle at 6% 85%, rgba(131, 183, 93, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 94% 65%, rgba(18, 105, 79, 0.09) 0%, transparent 45%),
    #f8fbf7;
  border: 1px solid #dce8df;
  box-shadow: 0 24px 64px -30px rgba(18, 56, 40, 0.08);
  overflow: hidden;
}

#al-kinds::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 45% 45%, rgba(216, 239, 140, 0.25) 0%, rgba(163, 230, 53, 0.08) 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 cubic-bezier(0.16, 1, 0.3, 1), 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, #076347);
}

/* 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:#eef2ee; stroke-width:19; }
.sc-road-center { fill:none; stroke:#cfdcd2; 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,#076347); --sc-tint:var(--duck-bg,#e4f4eb); --sc-fill:var(--public-accent,#d8ef8c); --sc-wash:#f3f8f3; }
.sc-kicker { display:flex; align-items:center; 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,999px); line-height:1.35; border:1px solid transparent; }
.sc-badge--income { background:var(--duck-bg,#d1fae5); color:var(--duck-deep,#047857); border-color:#a7f3d0; }
.sc-badge--hedging { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.sc-badge--ai, .sc-badge--portfolio { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.strategy-card { position:relative; background:white; border:1px solid #dfe7e1; border-radius:21px; 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 cubic-bezier(0.16,1,0.3,1),box-shadow .25s cubic-bezier(0.16,1,0.3,1); }
.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-face { display:block; list-style:none; cursor:pointer; border-radius:20px; }
.sc-face::-webkit-details-marker { display:none; }
.sc-face::marker { content:''; }
.sc-face:focus-visible { outline:2px solid var(--sc-tone); outline-offset:5px; }
.sc-scene { display:block; padding:13px 12px 6px; background:var(--sc-wash); border-radius:20px 20px 0 0; overflow:hidden; }
.sc-scene svg { display:block; width:100%; height:154px; color:var(--ink,#122821); 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:#fff; }
.sc-tint { fill:var(--sc-tint); }
.sc-fill { fill:var(--sc-fill); }
.sc-lime { fill:var(--sc-fill); }
.sc-duck-body { fill:var(--duck,#07835f); }
.sc-duck-bill { fill:var(--sc-fill); }
.sc-duck-eye { fill:#fff; stroke:none; }
.sc-duck-wing { stroke:#c7ead8; transform-origin:0 5px; }
.sc-guide { stroke:#a3b4aa; }
.sc-shadow { fill:#dce6de; 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-brief { display:block; margin-top:11px; min-height:47px; font-size:14px; line-height:1.65; color:#5f6d66; }
.sc-open-label { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #e9ede9; margin-top:17px; padding-top:14px; font-size:12px; font-weight:550; }
.sc-plus { position:relative; width:22px; height:22px; border:1px solid #d7e1d9; 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-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 #e9ede9; 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:#15803d; margin:0 0 4px; }
.sc-poor-fit { color:#b91c1c; 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 #dfe7e1; border-radius:10px; 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; }


/* The parent uses the existing visibility-aware illustration controller. */
.sc-wheel-wash { fill:var(--sc-tint); stroke:none; opacity:.5; }
.sc-wheel-turn { transform-origin:150px 104px; }
.sc-wheel-route { stroke:var(--sc-tone); stroke-width:2; }
.sc-beam, .sc-boundary { stroke:var(--sc-tone); stroke-width:2.2; }
.sc-balance { transform-origin:150px 60px; }
.sc-coin { animation:sc-premium 9s ease-in-out infinite; }
.sc-coin-two { animation-delay:.55s; }
.sc-wheel-turn { animation:sc-turn 24s linear infinite; }
.sc-cover { animation:sc-cover-breathe 9s ease-in-out infinite; transform-origin:150px 126px; }
.sc-balance { animation:sc-balance 10s ease-in-out infinite; }
.sc-tile { animation:sc-assemble 9s ease-in-out infinite; animation-delay:calc(var(--tile,0) * .15s); }
.sc-steam { stroke:#a3b4aa; animation:sc-steam 5s ease-in-out infinite; }
.sc-pick { animation:sc-pick 9s ease-in-out infinite; }
.sc-pick-two { animation-delay:.2s; }
.sc-pick-three { animation-delay:.4s; }
.sc-duck { animation:sc-duck-hop 9s ease-in-out infinite; }
.sc-scene--wheel .sc-duck { animation-delay:-2s; }
.sc-scene--collar .sc-duck { animation-delay:-4s; }
.sc-scene--long_short .sc-duck { animation-delay:-6s; }
.sc-scene--daily .sc-duck { animation-delay:-1s; }
.sc-scene--long_only .sc-duck { animation-delay:-3s; }
.sc-duck-wing { animation:sc-duck-wave 9s 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-premium { 0%,10%,100% { transform:translateY(0); } 18% { transform:translateY(-10px); } 29%,82% { transform:translateY(0); } }
@keyframes sc-turn { to { transform:rotate(360deg); } }
@keyframes sc-cover-breathe { 0%,100%,60% { transform:scale(1); } 25% { transform:scale(1.025); } }
@keyframes sc-balance { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
@keyframes sc-assemble { 0%,100%,60% { transform:translateY(0); opacity:1; } 8% { transform:translateY(-6px); opacity:.3; } 26% { transform:translateY(0); opacity:1; } }
@keyframes sc-steam { 0%,100% { transform:translateY(0); opacity:.4; } 55% { transform:translateY(-4px); opacity:.9; } }
@keyframes sc-pick { 0%,100%,70% { transform:translateY(0); } 15% { transform:translateY(-8px); } 32% { transform:translateY(0); } }
@keyframes sc-duck-hop { 0%,8%,20%,100% { transform:translateY(0) rotate(0); } 13% { transform:translateY(-3px) rotate(-4deg); } 17% { transform:translateY(0) rotate(2deg); } }
@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:24px; 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; }
}